JsLink not working with custom columns in a list


Issue:

Let’s say we have a list view webpart, with a JsLink URL pointing to a js file (~site/SiteAssets/customrenderer.js). JsLink seems to be working fine when we use the “Title” and “Description” fields to render the list items in a color coded format.

However, when we try to display a custom column created ex. ColorCode, the JsLink seems to be breaking and displaying the List View in the default view.

Possible Causes:

  1. The current view loaded does not have the custom column you created. So edit the List View Webpart and modify the view, by selecting AllItems view or a new view you created. But ensure that this view has the custom column visible. Else it will throw undefined error while executing ctx.currentItem[“ColorCode”] in your Item template method in JsLink file.
  2. JsLink URL should begin with either of the following URL tokens: ~site, ~sitecollection, ~layouts, ~sitecollectionlayouts or ~sitelayouts only. Absolute paths will break the JsLink functionality.
  3. BaseViewID value seems to have an impact on the display. Let’s say you have multiple List Views on the page, then the BaseViewID plays an important role. Ensure that it is unique else the JsLink functionality works on all the other List View webparts you have loaded on the page.
  4. Try debugging & logging options inside your JsLink file. ex. Use console.log(ctx.currentItem) to see what all it is bringing.

 

Hope this helps!

Advertisements

2 thoughts on “JsLink not working with custom columns in a list

  1. I was very happy to discover this site. I want to to thank you for
    your time due to this fantastic read!! I definitely really liked every bit of it and I have you book-marked to look
    at new information in your blog.

  2. I seriously love your site.. Pleasant colors & theme.
    Did you develop this amazing site yourself? Please reply back as I’m planning to create my own personal site and would like to know where you got this from or exactly what the theme is called.
    Many thanks!

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s