Client Side Rendering was introduced in SharePoint 2013. 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 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 each of the properties can be over ridden during run time to accomplish different list view modifications and at different list view locations.

Let’s implement a practical scenario using CSR.

Requirement

Assign value to Sales Progress Column during run time rendering process by comparing Total Sales and Sales Target.



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

  1. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
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 overriding the Fields Property.
  1. (function()
  2. {
  3. varoverrideCurrentContext = {};
  4. overrideCurrentContext.Templates = {};
  5. overrideCurrentContext.Templates.Fields = {
  6. 'Sales_x0020_Progress':
  7. {
  8. 'View': TargetProgress
  9. }
  10. };
  11. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
  12. })();
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,
  1. functionTargetProgress(ctx)
  2. {
  3. vartotalSalesVal = ctx.CurrentItem.Total_x0020_Sales.replace(",", "");
  4. vartargetSalesVal = ctx.CurrentItem.Sales_x0020_Target.replace(",", "");
  5. if (parseInt(totalSalesVal) > parseInt(targetSalesVal))
  6. {
  7. return "On Target";
  8. }
  9. else if (parseInt(targetSalesVal) - parseInt(totalSalesVal) <= 1000)
  10. {
  11. return "Reaching Target";
  12. }
  13. else
  14. {
  15. return "Long way to target !";
  16. }
  17. }
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 the comma which is done as below,

vartotalSalesVal =ctx.CurrentItem.Total_x0020_Sales.replace(",", "");

Once we have a comma free value, we will compare two 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 row 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.

  1. (function()
  2. {
  3. varoverrideCurrentContext = {};
  4. overrideCurrentContext.Templates = {};
  5. overrideCurrentContext.Templates.Fields = {
  6. 'Sales_x0020_Progress':
  7. {
  8. 'View': TargetProgress
  9. }
  10. };
  11. SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
  12. })();
  13. functionTargetProgress(ctx)
  14. {
  15. vartotalSalesVal = ctx.CurrentItem.Total_x0020_Sales.replace(",", "");
  16. vartargetSalesVal = ctx.CurrentItem.Sales_x0020_Target.replace(",", "");
  17. if (parseInt(totalSalesVal) > parseInt(targetSalesVal))
  18. {
  19. return "On Target";
  20. }
  21. else if (parseInt(targetSalesVal) - parseInt(totalSalesVal) <= 1000)
  22. {
  23. return "Reaching Target";
  24. }
  25. else
  26. {
  27. return "Long way to target !";
  28. }
  29. }



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

Output



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.