Working with JSLink

Recently I have been looking at CSR (client side rendering) feature which was introduced with SharePoint 2013. I did some display customizations with 2007 and 2010 version by modifying XSLT but when I try to replicate the same customizations with CSR feature, I immediately realized the power and usefulness of this new addition.

JSLink is the new property, available on many web parts, which allows you to override some parts or all of webpart UI on client side. SharePoint 2013 now uses JavaScript display templates to render contents on clients and falls back to XSLT, if for example: JavaScript is disabled on browser. This JavaScript framework provides many advantages compare to previous XSLT based rendering:

1. Not many developers are familiar with XSLT and it is difficult to develop XSLT and debug.
2. Most web developers are already familiar with JavaScript development.
3. CSR – JSLink are easy to deploy and rolling back customization are straight forward too.
4. With CSR – JSLink, the processing moves from server to client browser, thus freeing up server resources.

In this article, I will focus on overriding display of “% Complete” field of custom Tasks list. The goal is to display some kind of progress bar based on percent complete data. In order to implement this feature we have to follow below tasks:

1. Created JavaScript file with override code
2. Upload JavaScript file to SharePoint master page gallery using “JavaScript Display Template” content type
3. Set JSLink property of webpart.

Here are the details of each task and for this article I am using SharePoint UI to complete these task, but it can be deployed as WSP Solution.

Created JavaScript file with override code

Open notepad (or your favorite text editor) and copy/paste the following code:

(function () {
    //create override object
    var overrideCtx = {};
    overrideCtx.Templates = {};

    //we are interested in 'PercentComplete' field. 
    //Note: field name is Internal Field Name which may be 
    //different than display name
    //you can use SharePoint Manager 2013 to find internal field name
    overrideCtx.Templates.Fields = {
        'PercentComplete': { 'View': customField }
    }

    //these are optional, but in case of multiple webparts on 
    //page and these are not set will affect all list view.
    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 100;

    //register the override
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

//this function gets called for each row while rendering 'PercentComplete' field
function customField(ctx) {
    //check if 'PercentComplete' field is populated
    if (ctx.CurrentItem["PercentComplete"]) {
        //remove whitespace
        var completed = ctx.CurrentItem["PercentComplete"].replace(/\s+/g, '');
        //build and return the html to be rendered
        //NOTE: make sure you rename the red.png with your file on 15/images folder. 
        //Mine is 5x5 pixel with solid red
        var result = "<div style='background-image:url(/_layouts/15/images/red.png);width:" + completed + "'><b>" + completed + "</b></div>";
        return result;
    }
}

Upload JavaScript file to SharePoint master page gallery using “JavaScript Display Template” content type

• Navigate to Site Settings > Master pages and page layouts screen.
• From ribbon click “Upload Document” > Browse and select above JavaScript file > click OK
• On next screen; enter as follows:

Content Type	JavaScript Display Template
Target Control Type	Field
Standalone	Override
Target Scope	Server relative URL of site
Target List Template Id	List template Id (optional)

• Click “Save”

Set JSLink property of webpart

• Expand “Settings” menu and click on “Edit Page”
• Open webpart menu and click “Edit Web Part”
• Expand “Miscellaneous” tab and add JavaScript URL with site token eg: ~site/_catalogs/masterpage/CSRTasks.js
• Click “OK” to save.
• Save and close the edit page screen.

At this point you are ready for testing, hit F5 to refresh the list web part page and if all went fine the UI would look like this:



Next article will talk about overriding Edit and View forms.

Hope this helps.

-Javed