Conditionally Highlight SharePoint 2016 List Rows using Client Side Rendering


Published: 8 August 2017

Client Side Rendering was introduced in SharePoint 2013 and available in SharePoint 2016 as well as SharePoint Online. The primary purpose of CSR is to provide conditional formatting of data present within the List Views. Prior to SharePoint 2013 XSLT formatting was the way to go in order to implement conditional formatting of List Views. XSLT formatting required in depth knowledge of working with XSL and debugging was also cumbersome. However with CSR we can tap in to the rendering process and override some of the default properties of the list view using JavaScript. Some of the properties that can be overridden are:

  • OnPreRender
  • OnPostRender
  • View
  • Body
  • Item
  • Fields
  • Header
  • Footer

OnPrerender allows us to write some logic even before the list view is rendered while OnPostrender allows us to modify the list view once the view has been rendered.Similarly we can override the Item property if we want some logic to be implemented for each row of the List View and over ride the Fields property to update the rendering of the List Column. Header and Footer as the name suggests can be used to add Header and Footer Customization to the List.

We will explore about each properties in the upcoming articles. In this article we will see CSR in action by highlighting List rows based on a condition. 

What are we going to do ?

We will be using Client Side Rendering to highlight the SharePoint list rows based on a particular condition. We will be over riding the OnPostrender property using CSR and will highlight the rows if the column value matches the condition. Ultimately we will have the list highlighted as below:

CSR Implementation

The main entry point of Client Side Rendering is SPClientTemplates.TemplateManager.RegisterTemplateOverrides call. Prior to calling this function, we will define which the property we will be over riding as part of the rendering process. Here we will be over riding the OnPostRender property. HighlightProductRows is the function that will do the condition checking and performs the run time rendering modification.We will be passing the context object to the RegisterTemplateOverrides method to start the rendering over ride.

ctx.ListData.Row will get the entire List rows which can be looped using a for loop construct.  For each item we will get the Status Column value and based on the value we will set the back ground colour as defined in the statusColors array.

Add JS Link

Let’s see how to add the code as JSLink to the list view. Save the below code as a JS file and upload it to one of the Libraries, say: Site Assets. 

Go to the edit page of the list view by appending the URL “? ToolpaneView=2” at the end of the list view’s .ASPX URL.

Specify the URL of the JS File in the JS Link section as shown above. While specifying the JSLink file URL we have to take a special note that we will be specifying site/site collection relative URL using the below tokens.

  • ~site - Used to link to the JS file in the current web
  • ~sitecollection - Used to link to the JS file in the current site collection
  • ~layouts - Used to link to the JS file that has been deployed to the layouts folder

Click on Apply to apply the client side rendering JS File to the list view. Heading back to the list we can see that the Row-Column rendering has been highlighted conditionally.

Click Apply. This will apply JSLink to the SharePoint list view.

Summary

Thus we saw how to apply Client Side Rendering and JSLink in SharePoint to highlight the rows of SharePoint List . We will see more of CSR in action in the coming articles.  

About Author

Priyaranjan is a SharePoint Consultant with 7 years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 30 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here

If you found this post helpful, please share it with your friends!!


Join 6,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers