Implement KPI In Office 365 And SharePoint 2016 List View Using Client Side Rendering

Client side rendering was introduced in SharePoint 2013. The primary purpose of CSR is to provide the conditional formatting of the data present within the list views. Prior to SharePoint 2013, XSLT formatting was the way to go in order to implement the conditional formatting of the list views. XSLT formatting requires an 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

Let’s see how to implement CSR in the list view to create a Key Performance Indicator (KPI).

Requirement

Assign KPI to a list column, based on a condition; i.e., comparing two other columns in the same list.



The main purpose of the Client side rendering is to tap in to the rendering process. The entry point is the function, shown below:

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 the values to each row in the list, we will be overriding the ‘fields’ property.

(function()
{
    varoverrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.Templates.Fields = {
        'Target_x0020_Status':
        {
            'View': TargetStatus
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();

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 an HTML image element, which will be assigned to the column target status.

Now, let’s have a look at the overriding function TargetStatus.

function TargetStatus(ctx)
{
    vartotalSalesVal = ctx.CurrentItem.Total_x0020_Sales.replace(",", "");
    vartargetSalesVal = ctx.CurrentItem.Sales_x0020_Target.replace(",", "");
    if (parseInt(totalSalesVal) > parseInt(targetSalesVal))
    {
        returnvalue = "<span><imgsrc='/sites/Playground/SiteAssets/TargetMet.jpg' width='20px' height='20px'style='border:0px;'></span>";
        return returnvalue;
    }
    else if (parseInt(targetSalesVal) - parseInt(totalSalesVal) <= 1000)
    {
        returnvalue = "<span><imgsrc='/sites/Playground/SiteAssets/Reaching.jpg' width='20px' height='20px'style='border:0px;'></span>";
        return returnvalue;
    }
    else
    {
        returnvalue = "<span><imgsrc='/sites/Playground/SiteAssets/LongWay.jpg' width='20px' height='20px'style='border:0px;'></span>";
        return returnvalue;
    }
}

Here, we will compare the two column values (Total sales and Sales Target) and based on the result, we will assign the third column (Target Status) an HTML image element, which will correspond to the related KPI .The image element will have the src attribute, pointing to an image, that is uploaded to SharePoint location, say: ‘Site Assets’. We will be using the relative URL of the image.

Ctx.CurrentItem.ColumnName will get the value of the column. Since it is a number field, it has an inherent comma for the values greater than 1000. To do a numerical comparison, we have to remove comma, which is done, as shown below:

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

Once we have comma free value, we will compare the two values and assign Target Status; 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. The column values in each row will be compared and based on the result whereas 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 row in the list, override the fields property.

Full Code

(function()
{
    varoverrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.Templates.Fields = {
        'Target_x0020_Status':
        {
            'View': TargetStatus
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();

function TargetStatus(ctx)
{
    vartotalSalesVal = ctx.CurrentItem.Total_x0020_Sales.replace(",", "");
    vartargetSalesVal = ctx.CurrentItem.Sales_x0020_Target.replace(",", "");
    if (parseInt(totalSalesVal) > parseInt(targetSalesVal))
    {
        returnvalue = "<span><imgsrc='/sites/Playground/SiteAssets/TargetMet.jpg' width='20px' height='20px'style='border:0px;'></span>";
        return returnvalue;
    }
    else if (parseInt(targetSalesVal) - parseInt(totalSalesVal) <= 1000)
    {
        returnvalue = "<span><imgsrc='/sites/Playground/SiteAssets/Reaching.jpg' width='20px' height='20px'style='border:0px;'></span>";
        return returnvalue;
    }
    else
    {
        returnvalue = "<span><imgsrc='/sites/Playground/SiteAssets/LongWay.jpg' width='20px' height='20px'style='border:0px;'></span>";
        return returnvalue;
    }
}

Let’s see how to add the Code as JSLink to the list view.

• Save the 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 .aspxurl.
  
  
• Click Edit Web part for the list view. Under Miscellaneous section, there is a text box for entering 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 list view.

Output



Thus, we have seen how we can compare the two column values and assign a KPI image to the third column, using JSLink and Client Side Rendering.