JSLink in SharePoint Online and Customize List View Web Parts

JSLink in SharePoint Online and Customize List View Web Parts

In this post, we will discuss how we can use JSLink in SharePoint online. Here we will try to customize a list view web part in SharePoint online. This will work in both SharePoint online and SharePoint 2016 and SharePoint 2013. This I have followed from the below article.
http://www.sharepointdiary.com/2015/07/how-to-use-jslink-with-listview-webpart-in-SharePoint-2013.html

If you have not started JSLink yet, you can see this article before reading this article.

Also, you can read:
Microsoft Flow Copy files from one SharePoint Online account or folder to another Office 365

Create Content Type using JavaScript object model in SharePoint Online Office 365

Add item to SharePoint list using JavaScript object model in SharePoint Online

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

JSLink in SharePoint Online and Customize List View Web Parts
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.

First Save the below code in a js file and upload into a document library. 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
JSLink in SharePoint Online and Customize List View Web Parts

Now once you will save the page the list view web part percentage column will look like below:

JSLink in SharePoint Online and Customize List View Web Parts
JSLink in SharePoint Online and Customize List View Web Parts

Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →