Post
Ask Question

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.

  1. (function()  
  2.  {  
  3.     var overrideCurrentContext = {};  
  4.     overrideCurrentContext.Templates = {};  
  5.     overrideCurrentContext.OnPostRender = HighlightProductRows;  
  6.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);  
  7. })(); 

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.

  1. function HighlightProductRows(ctx)   
  2. {  
  3.     var statusColors = {  
  4.         'Long way to target !': '#FFF1AD',  
  5.         'Reaching Target': '#FFD800',  
  6.         'On Target': '#01DF3A'  
  7.     };  
  8.   
  9.     var rows = ctx.ListData.Row;  
  10.     for (var i = 0; i < rows.length; i++) {  
  11.         var status = rows[i]["Status"];  
  12.         var rowId = GenerateIIDForListItem(ctx, rows[i]);  
  13.         var row = document.getElementById(rowId);  
  14.         row.style.backgroundColor = statusColors[status];  
  15.     }  
  16. } 

Add JS Link to List View

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.

Full Code

  1. (function() {  
  2.     var overrideCurrentContext = {};  
  3.     overrideCurrentContext.Templates = {};  
  4.     overrideCurrentContext.OnPostRender = HighlightProductRows;  
  5.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);  
  6. })();  
  7.   
  8.   
  9. function HighlightProductRows(ctx) {  
  10.     var statusColors = {  
  11.         'Long way to target !': '#FFF1AD',  
  12.         'Reaching Target': '#FFD800',  
  13.         'On Target': '#01DF3A'  
  14.     };  
  15.   
  16.     var rows = ctx.ListData.Row;  
  17.     for (var i = 0; i < rows.length; i++) {  
  18.         var status = rows[i]["Status"];  
  19.         var rowId = GenerateIIDForListItem(ctx, rows[i]);  
  20.         var row = document.getElementById(rowId);  
  21.         row.style.backgroundColor = statusColors[status];  
  22.     }  
  23. } 

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.



Click Edit Web part for the list view. Under Miscellaneous section, there is a text box to enter JSLink. Add the relative URL of the JS file after ~site or ~ sitecollection, depending upon the location of the Site Assets Library (or any other repository), where you have uploaded the JS file.



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

Output



Summary

Thus, we have conditionally highlighted the rows of a list view in SharePoint using Client Side Rendering and JSLink. This works the same way in both SharePoint 2016 and SharePoint Online.


Similar Articles