Thursday, July 2, 2015

How to Use JSLink with List View Web Part in SharePoint 2013

What is JsLink in SharePoint 2013:
JSLink is a new method of combining JavaScript, CSS and HTML elements together to customize the look and feel of SharePoint Fields, List Items, List views, List forms and web parts.How to use JSLink in SharePoint 2013?
Here is the SharePoint 2013-jslink example. Lets customize the look and feel of static "% Complete" to bar chart with the help of JSLink. At high-level, here are the steps:

Create a JavaScript override file

Upload the JavaScript file to the "Master Page Gallery >> Display Templates", Set the content type and properties of the file.

Set the JS Link property of the List view web part to point to the JavaScript file we've uploaded.

Step 1: Create your custom JS file to render SharePoint list field
As the first step, We'll have to create a new js file which customizes the rendering of our field. Here is what I've created "TaskListDT.js".

While uploading, Make sure you set
the properties of the JS file. Set the content type as "JavaScript Display Template" and supply other required parameter values as in the below screen.

Step 3: Set JS Link property of List View Web part in SharePoint 2013
The next step is to specify the location of your JavaScript file in the List view web part property. Be sure you follow the "~sitecollection/Your-JS-File-complete-Path" format! (Can also use: ~site, ~layouts, ~siteLayouts, ~siteCollectionLayouts tokens)