Conditionally assign values to Column in SharePoint 2016 using Client Side Rendering

Published: 8 August 2017

Client Side Rendering is a powerful option to modify the list views and list forms. It simply means that the data is transformed and displayed using Client side technologies like HTML and JavaScript. Prior to SharePoint 2013 in case of any requirements to modify the list views we had to use SharePoint Designer and XSLT formatting. However with SharePoint 2013 Client Side rendering has been made available. It comes in two flavors

1. Display Templates – Used to modify the rendering of the Search Results display
2. JSLink – Used to modify List Views and List Forms like NewForm.aspx

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
• 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.

In this article we will see CSR in action by conditionally assigning values to column in SharePoint 2016 using Client Side Rendering.

What are we going to do ?

During the run time, we will assign value to Sales Progress Column by comparing Total Sales and Sales Target. 

After applying CSR using JSLink we will have the blank column populated with values based on the predefined condition as shown below:

How to do it ?

The main purpose of Client Side Rendering is to tap in to the rendering process. The entry point is the below call:

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);

 As you can see the parameter that is passed is the current context object. Before calling the override function we have to instantiate the 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 row within the list. The return value will be assigned to the Column - Sales Progress.

Now let’s have a look at the overriding function TargetProgress

Here we will compare two column values (total sales and target sales) and based on the result we will assign the third column (Sales Progress) a value.

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 will compare 2 values and assign Sales Progress a return value based on the result.

Since we have overridden the Field Property, the overriding method will run for each column cell in the list. Thus the column values in each row will be compared and based on the result the third column will have a new value.

Note: In order to implement a rendering logic to each row in the list, override the Fields property.

JSLink Full Code

The complete code used for the demo is given below :

Apply the JSLink to SharePoint

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.

• ~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. 

Summary

Thus we have populated the Sales Progress column during run time. It was initially empty and on run time it has generated values dynamically by comparing two other column values. CSR is highly useful in tapping into the rendering process of list view. We will cover more of CSR practical uses in the upcoming 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 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