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!