Table of Contents


Here we will discuss what are jslink in SharePoint 2013 and how we can use JSLink in SharePoint 2013 or SharePoint 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 we 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 on the client side rather on 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 as a web part properties where we can give the js file location. Once we set the property then when the web part is rendered it picks up the file and uses it to render the contents of 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.

If you want to learn about Microsoft Flow, then follow below article

- Microsoft Flow Demo on Send a customized email when a new SharePoint list item is added


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 we have SharePoint online custom list known as Trainings. And if we will add a web part page and add the list view web part page then the list will look like below:

Now we will see how we can use JSLink to render the 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 declared a method without a name which will be the starting point.

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

overrideContext.Templates = {};

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

overrideContext.Templates.Item = overrideTemplate;

Here overrideTemplate is another method which will contain the styling things. Here we 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:


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 we 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 and refresh the page. The list view web part will appear like below:

See Also

 Hope this will be helpful.