Published: 8 August 2017
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.
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:
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.
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.
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.
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.
Priyaranjan is a SharePoint Consultant and Microsoft MVP with 10 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 33 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