Published: 1 October 2017
Essentially CSR with JSLink taps into list view rendering and overrides properties that govern the list view look and feel. Some of the properties that can be over ridden are:
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 we can 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.
In this article we will see CSR in action and implement a dynamic progress bar in a list column.
During the run time, we will assign a percentage indicator to a blank column
by calculating the percentage from two other different columns. The Percentage
indicator would be then color coded.
After CSR implementation, the list view would like below:
The main purpose of Client Side Rendering is to tap in to the rendering process. The entry point is the below function
As you can see the parameter that is passed is the client context. Before calling the override function we have to instantiate the client context and set the property to override. In order to assign values to each row in the list we will be over riding the Fields Property.
Thus we have assigned the Fields Property with an override. Here we assigned a method which will be called for each of the list column(Target % Reached) item. The return value will be html div element that has a percentage indicator that is color coded which is set by assigning background color of the div element based on the percentage value.
Now let’s have a look at the overriding function TargetPercentage.
Ctx.CurrentItem.ColumnName will get the value of the column. Since it is a number field it has an inherent comma for values greater than 1000. To do numerical comparison we have to remove comma which is done as below:
var totalSalesVal =ctx.CurrentItem.Total_x0020_Sales.replace(",", "");
Once we have comma free value, we can do the percentage calculation. So let’s find the percentage of two column values (Total sales upon Sales Target) and based on the result we will assign the third column (Target Reached) an html div element which will contain a span element that mimics the percentage indicator.
Since we have overridden the Field Property, the overriding method will run for each of the list column(Target % Reached) item. Thus the values in each row will be compared and based on the result the third column will have a new value. Thus we have returned an HTML Image element that will be assigned to the destination column for each row during the rendering process.
Note: In order to implement a rendering logic to each of the List Column Item, override the Fields property.
The complete code used for the demo is given below :
The above code will be saved as a JS file and can be uploaded to the site assets library of SharePoint. In order to override the specific List View, append “?toolpaneview=2” at the end of the List View URL to go to the edit mode of the page.
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 blank column has been populated with a progress bar to show the status.
Thus we have seen how to implement a colour coded progress bar during run time using Client Side Rendering. This is quite handy when we have to do list view formatting dynamically during the rendering time. We will see more of CSR in action in the coming articles.
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 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