Conditionally Highlight The Rows Of A SharePoint List View Using Client Side Rendering And JSLink

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. Header, Footer and Body properties can be overridden to replace the default header, footer and body behavior. Item property can be over ridden to change the view of each of the list item during run time. Fields property can be overridden to modify the column values during run time.

In this article 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.



JS Link Implementation

The main entry point of Client Side Rendering is SPClientTemplates.TemplateManager.RegisterTemplateOverrides. Prior to calling this function, we will define which property we will be overriding as part of the rendering process. Here we will be overriding the OnPostrender property. HighlightProductRows is the function that will do the condition checking and performs the run time rendering modification.

ctx.ListData.Row will get all the 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 color as defined in the statusColors array.