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:

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

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:

JSLink in SharePoint Online and Customize List View Web Parts

You may like following jslink in SharePoint 2013 tutorials:

• Make Title field read-only using SPClientTempltes and JSLink in SharePoint Online
• SharePoint Online: Change SharePoint ListView To Jquery Accordion Using JSLink Client Side Rendering
• SharePoint 2013/2016/Online: Working with JSLink Templates Fields
• SharePoint 2013/2016/Online: How to Load multiple js file in JSLink
• SharePoint 2013 jslink list view examples: Add header and footer to list view web part using JSLink in SharePoint Online/2013/2016
• How to use JSLink in SharePoint 2013/2016/Online
• Change the SharePoint List View into JQuery News Ticker Using JS Link CSR
• SharePoint Online Branding: Display List items into page using AngularJS and REST API in SharePoint online or SharePoint 2016/2013
• Freeze Header Row in List View or Library on Scrolling using jQuery 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.

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

JOIN NOW