Customize list view using jslink in SharePoint 2013/2016/Online

This SharePoint Online tutorial explains how to customize SharePoint 2013/2016/Online list view web part using JSLink. Client side rendering (CSR) has been introduced in SharePoint 2013 and we can do client side rendering in SharePoint 213/2016/Online using JSLink. We can see here how we can customize a list view web part using jslink.

Here I have a SharePoint Online list which has a column known as “PercentComplete” which is a single line of the text column. And I have added the list inside a web part page and the SharePoint list looks like below:

sharepoint 2013 customize list view jslink
JSLink in SharePoint Online and Customize List View Web Parts

Here instead of showing percentage column like above, we can render it differently using JSLink in SharePoint Online.

First Save the below code in a js file and upload into a document library in SharePoint Online. Here I have uploaded the file inside the Site Assets document library.

(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {
‘PercentComplete’: { ‘View’: renderPercentComplete }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function renderPercentComplete(ctx) {
var fieldVal = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
var percentComplete = fieldVal.toString();
var html = ”;
html += “<div style=’width:100%;height:20px;border:1px solid #AEAEAE;position:relative;’>”;
html += “<div style=’background-color:#0072C6;height:100%;width:” + percentComplete + “;’></div>”;
html += “<p style=’width:100%;text-align:center;position:absolute;top:0px;left:0px;margin:0px;’>”;
html += percentComplete;
html += “</p>”;
html += “</div>”;
return html;
}

Then we need to edit the web part page where we have added the list. Then edit the List view web part. There you will be able to see JSLink property. There give the path like below:

~site/SiteAssets/MyJSLinkRender.js

sharepoint 2013 jslink list view example
JSLink in SharePoint Online and Customize List View Web Parts

Now once you will save the page, the list view web part “PercentageColumn: will look like below:

sharepoint online customize list view web part using jslink
JSLink in SharePoint Online and Customize List View Web Parts

You may like following jslink in SharePoint 2013 tutorials:

In this SharePoint customization example, I have explained how to use jslink in SharePoint 2013/Online to customize list view web parts.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>