Customize list view using jslink SharePoint Online

This SharePoint customization tutorial, we will discuss how to use JSLink in List view in a task list in SharePoint. Here we will see how we can give a visual interface to the % Complete filed in the task list in SharePoint Online. We will see how to customize list view using jslink in SharePoint Online.

The % Complete field shows data like 40%, 20% or 30% completed, but by using JSLink, we can display the results in color code.

JSLink SharePoint Online

What is jslink SharePoint Online? JSLink is a new concept in SharePoint 2013 which we can use to customize the look and feel of SharePoint Out of the box VIEW/ADD/EDIT form.

JSLink is a JavaScript file which will override the default view of your list with the help of logically defined in your custom JSLink file. We can simply Edit the list view Web part and add the code.

JSLink feature has been added in SharePoint 2013 where the user can render list, items, fields or even web parts using JavaScript. For this Microsoft also introduced a new content type known as JavaScript Display Template. to work with it.

Previously if you want to show any styling into a list view web part we have to use XSLT to customize it. But now we can use JSLink to manipulate list view web parts. Now we can style complete List Views, Fields, Search Results even web parts using JavaScript rather than write complex XSLT.

JSLink SharePoint is fully client-side meaning the data is transformed in the client side rather in the server. So the page will load faster.

SharePoint Online JSLink is full of JavaScript, so as a developer if you are comfortable using JavaScript then you can write JSLink code. SharePoint JSLink comes web part properties where you can give the js file location in SharePoint 2013.

Once you set the property then when the web part is rendered it picks up the file and uses it to render the contents to the browser. Since it’s all JavaScript, all the rendering is handled by the browser, thus taking a load off the SharePoint server, which only has the job of returning data.

SharePoint Online jslink provides for easy customizations that do not impact the server performance.

How to Use JSLink in SharePoint Online

Now, we will see how we can use JSLink in SharePoint Online or SharePoint 2013/2016.

Step 1: Login to your SharePoint site and Create a Task as below screenshot.

Add JSLink in Task List View in SharePoint Online
Add JSLink in Task List View in SharePoint Online

Step 2: Next I am going to add the progress bar in % Complete instead of showing in %. So here I have added few line of code which we can use to add the progress bar in list view. I just added a Script editor Web part and place my code.

Add JSLink in Task List View in SharePoint 2013
Add JSLink in Task List View in SharePoint 2013

Step 3: You can see the full code in below snip.

<script>
(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().replace(" ", "");
  
    var html = '';
    html += "<div style='width:100%;height:20px;border:1px solid #AEAEAE;position:relative;'>";
    html += "<div style='background-color:red;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;
}
</script>

Step 4: Once you place your code inside a Script Editor Web part in SharePoint. Next, click on OK button and see the O/p as same as below Image.

JSLink example in SharePoint
JSLink example in SharePoint

SharePoint 2013 jslink list view example

Let us see another SharePoint 2013 jslink list view example, but instead of using SharePoint 2013, we will use the SharePoint Online environment. The same way, you can also use jslink SharePoint 2016.

Here we will see how we can render a simple list view web part using SharePoint JSLink in our SharePoint online site. The same code will work in SharePoint 2016 and SharePoint 2013 also.

Here I have SharePoint online custom list known as Training. And if I will add a web part page and add the list view web part page then the list will look like below:

jslink sharepoint 2013 tutorial
jslink sharepoint online

Now we will see how we can use JSLink to render the SharePoint Online list view web part in a different way.

Write the below code and save as a Js file.

(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Header = “<h2>SharePoint Trainings</h2>”;
overrideContext.Templates.Item = overrideTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

function overrideTemplate(ctx) {
return “<div style=’font-size:18px;border:solid 1px Silver;margin-bottom:6px;padding:4px;width:200px;’>”
+ ctx.CurrentItem.Title
+ “</div>”;
}

If you will understand the code then here we have declare a method without a name which will be the starting point.

Then we declare an overrideContext variable. Then we declare Templates like below:

overrideContext.Templates = {};

The above will hold a reference to all the different templates that we want to override the styling on. Here to styling entire items, we can write like below:

overrideContext.Templates.Item = overrideTemplate;

Here overrideTemplate is another method which will contain the styling things.

Here I have added a header like below:

overrideContext.Templates.Header = "<h2>SharePoint Trainings</h2>";

Then we can register the override like below:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

Then in the overrideTemplate we are passing the ctx parameter which is the list context and will be used to render the list items based on what is inside this function.

Then upload the js file to site asset document library and copy the file path URL.

Then edit the web part page where the list view web part is there. If you will edit the list view web part, you can see one property known as JS Link like below. Here provide the path like below:

~site/SiteAssets/MyJSLink.js

jslink in sharepoint 2013
jslink in sharepoint 2016

Here try to give the path using URL token like below:

  • ~site: which will provide the current site URL
  • ~sitecollection: provides the site collection URL
  • ~layouts: URL of the _layouts/15 folder

If you will try to give full path like below then it might not get the path correctly.

https://onlysharepoint2013.sharepoint.com/sites/Bhawana//SiteAssets/MyJSLink.js

So you can give the path like below:

~site/SiteAssets/MyJSLink.js

Now Save the page and refresh the page, the list view web part will appear like below:

sharepoint 2013 jslink examples
sharepoint 2013 jslink examples

You may like following jslink in SharePoint 2013 tutorials:

This is all about change Task List View using SharePoint Online JSLink. We saw how we can use JSLink in task list view web part to display % Complete column in progress bar in SharePoint.

  • sharepoint online jslink
  • jslink sharepoint online
  • sharepoint 2013 jslink list view example
  • jslink sharepoint 2016
  • jslink sharepoint
Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

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

>