SharePoint 2013 has a lot new features and functionalities that it can do out-of-the-box. One of these new functionalities is the JS Link web part property. With this property you are able to control the rendering of the web part. This will mostly be used in combination with List View Web Part.
The possibilities are endless, so I’m going to show you a simple and useful example what you can do with this.
The example I’m going to explain in this post is how you could render the Completed Percentage field of a task as a progress bar.
Creating a progress bar
The first thing you need to do is creating a new Task list with a view where the “% Complete” field is shown.
Important: I’m using
<#=ctx.CurrentItem.PercentComplete#>to render the % Completed value inside my script.
Save the file and upload it to the Master Page Gallery (Site Settings > Master pages and page layouts), fill in the required metadata field.
Now that the file is uploaded to your SharePoint environment, go back to your Task List View you created. Once you are on the page, put the page in edit mode and edit the web part.
In the web part properties under Miscellaneous you can find the new JS Link property. Fill in the URL to the file like this:
You can also use the
~sitecollection URL token, this one should be used when working with sub-sites.
Store the web part changes and save the page, now you are done. Just refresh the page and you should see the following result.
You can find more information about the JS Link property on Wes Preston its blog.
“~sitecollection” URL token can best be used for sub-sites.
I created a new post that describes a problem when you apply a JS Link reference on the task list web part. Read all about it over here: Applying JS Link on Task Lists Breaks the Default Rendering of the Checkboxes