How to use JSLink in SharePoint 2013/2016/Online

This SharePoint customization tutorial explains, What is JSLink in SharePoint 2013/2016? how to use JSLink in SharePoint 2013/2016/Online. I will also explain how to customize a SharePoint list view to render differently using JSLink in SharePoint Online.

What is JSLink in SharePoint 2013/Online?

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 is fully client-side meaning the data is transformed in the client side rather in the server. So the page will load faster.

JSLink is full of JavaScript, so as a developer if you are comfortable using JavaScript then you can write JSLink code. 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. This provides for easy customizations that do not impact the server performance.

Example of JSLink in SharePoint 2013

Here we will see how we can render a simple list view web part using 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 2013 tutorial

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;

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:


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:


jslink in sharepoint 2013

jslink in sharepoint 2013

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.

So you can give the path like below:


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:

Hope this will be helpful to understand JSLink in SharePoint 2013 Online, how you can customize a SharePoint list view using JSLink in SharePoint 2013/2016/Online.

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)


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