Add JSLink in Task List View in 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.

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

What is JSLink in SharePoint?

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.

How to Use JSLink in SharePoint?

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

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

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

(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {
'PercentComplete': { 'View': renderPercentComplete }
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;

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

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

Source: enjoysharepoint