How to 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:

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

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

You may like following jslink in SharePoint 2013 tutorials:

• Customize list view using jslink SharePoint Online
• Make Title field read-only in SharePoint list edit form using JSLink
• Show SharePoint list view data in accordion view using jslink
• SharePoint JSLink Templates Fields Example
• How to load multiple js files in JSLink in SharePoint
• How to Add header and footer to list view web part using JSLink in SharePoint
• Customize list view using jslink in SharePoint 2013/2016/Online

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