SharePoint jslink Examples (5 examples)

In this SharePoint customization tutorial, we will discuss everything on jslink sharepoint, how to use jslink in SharePoint, and various sharepoint jslink examples. We will learn here:

• Introduction to jslink SharePoint
• How to use JSLink in SharePoint?
• SharePoint 2013 jslink list view example
• How to customize list view using SharePoint jslink?
• How to load multiple js files in JSLink in SharePoint

Introduction to jslink SharePoint

What is jslink 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 that 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.
• JSLink feature has been added in SharePoint 2013 where the user can render lists, 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 SharePoint is fully client-side meaning the data is transformed on the client-side rather than in the server. So the page will load faster.
• SharePoint JSLink is full of JavaScript, so as a developer if you are comfortable using JavaScript then you can write JSLink code. SharePoint JSLink comes with 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.
• SharePoint Online jslink provides for easy customizations that do not impact the server performance.

Read: SharePoint column formatting examples

How to use SharePoint JSLink

Now, we will see how to use JSLink in SharePoint Online or SharePoint 2013/2016/2019. We will see how to use SharePoint jslink with a simple example.

Let us see, 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 field in the task list in SharePoint. We will see how to customize list view using jslink in SharePoint Online.

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

Step 1: Login to your SharePoint site and Create a Task as below screenshot.

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.

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

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

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.

SharePoint 2013 jslink list view example

Let us see another SharePoint 2013 jslink list view example, but instead of using SharePoint 2013, we will use the SharePoint Online environment. In the same way, you can also use jslink SharePoint 2016.

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

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;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

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:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

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:

~site/SiteAssets/MyJSLink.js

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.

https://onlysharepoint2013.sharepoint.com/sites/Bhawana//SiteAssets/MyJSLink.js

So you can give the path like below:

~site/SiteAssets/MyJSLink.js

Now Save the page and refresh the page, the list view web part will appear like below:

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

SharePoint jslink Examples

Let us see a few examples of SharePoint jslink examples.

1. SharePoint jslink list view (SharePoint jslink template.fields)

Let us check out an example on sharepoint jslink list view. We will see an example on SharePoint jslink template.fields.

I will show you how to work with JSLink templates fields in SharePoint 2013/2016/2019 or SharePoint Online. We will see here how we can rending a choice column in a different way using jslink in SharePoint Online. Learn how can we use the Field template using JSLink in SharePoint 2013.

Here for this particular jslink SharePoint demo let us create a custom list that has two columns (Title and Status) in the SharePoint Online site. Status is a choice column that has values like:

• Started
• In progress
• Completed

Let us add few items to the SharePoint list and after adding items the list looks like below:

Here instead of showing Status as a text, we want to show the Status in terms of image with different color in SharePoint Online or SharePoint 2013/2016.

For example, it will show a Yellow color image if the Status is Started, Green if Status is completed like this.

Add the below code and Save the file as .js file. And then upload the file into the SiteAssets document library in SharePoint Online.

(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Fields =
{
‘Status’: { ‘View’: overrideTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

function overrideTemplate(ctx) {
var status = ctx.CurrentItem.Status;
var image = “”;

if (status == “Started”)
image = “https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/started.png”;
if (status == “InProgress”)
image = “https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/inprogress.png”;
if (status == “Completed”)
image = “https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/completed.png”;
return “<img class=’status-image’ src=’” + image + “‘ data-val=’” + status + “‘ />”;
}

Here if you will see the code, in the overrideTemplate function based on the Status we are setting up the image file.

Then let us create a web part page and add the list to the web part page in SharePoint Online. Then edit the list view web part and in the Edit web part properties dialog box expands the Miscellaneous section and add the js link path like below:

~site/SiteAssets/mydemojslink.js

Then Save the page and we can see instead of text, images will appear in the SharePoint list view like below:

This is how we can use SharePoint jslink template.fields.

2. SharePoint jslink template.fields (override multiple fields)

Let us see another example on how to override multiple fields using jslink SharePoint.

If you want to override multiple fields in a list view web part using jslink in SharePoint, then you can add like below:

overrideContext.Templates.Fields =
{
‘Status’: { ‘View’: overrideTemplate },
‘Title’: { ‘View’: overrideTitleTemplate }
};

And the whole code looks like below:

(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Fields =
{
‘Status’: { ‘View’: overrideTemplate },
‘Title’: { ‘View’: overrideTitleTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

function overrideTemplate(ctx) {
var status = ctx.CurrentItem.Status;
var image = “”;
if (status == “Started”)
image = “https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/started.png”;
if (status == “InProgress”)
image = “https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/inprogress.png”;
if (status == “Completed”)
image = “https://onlysharepoint2013.sharepoint.com/sites/Bhawana/SiteAssets/completed.png”;
return “<img class=’status-image’ src=’” + image + “‘ data-val=’” + status + “‘ />”;
}
function overrideDescTemplate(ctx) {
return “<span style=’font-weight:bold;’>” + ctx.CurrentItem.Title + “</span>”;
}

This is how to use jslink in sharepoint 2013 templates fields.

3. SharePoint jslink title column

Let us see another example on the sharepoint jslink title column. Here we will see, how to make SharePoint list title column or field read-only using SharePoint jslink and SPClientTempltes. We will make the SharePoint title column read-only in the edit form.

My client asked me to implement a quick change by making Title field read-only when an item is editing. This must be quick and must not include any Visual Studio code as it has to be deployed in O365.

I have implemented a solution using SPClientTemplates and added this as a jslink reference as part of the view in list item edit page in SharePoint.

Please follow the below steps to achieve this:

Copy the below code block and save it as “ttlReadOnlyEditPage.js”

var EnjoySharePoint = EnjoySharePoint || {};
EnjoySharePoint.TitleFieldReadOnly = function () {
varctx= {};
ctx.Templates= {};
ctx.Templates.Fields= {
Title: {
DisplayForm:null,
EditForm:EnjoySharePoint.TitleReadOnly,
NewForm:null,
View:null
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
};
EnjoySharePoint.TitleReadOnly = function (ctx){
returnSPField_FormDisplay_Default(ctx);
};
EnjoySharePoint.TitleFieldReadOnly();

Copy/upload the js file on to site asserts / any document library.

Open the SharePoint list and click on any list item, Edit the list item.

Click on edit page option as part of site setting gear icon. Edit list view webpart and find for miscellaneous zone.

Refer the js file copied in Asserts library and apply the changes.

Save the page and now you can see the Title field appears read-only like below:

This is to make the Title column or field read-only using SPClientTempltes and JSLink in SharePoint Online/2013/2016/2019 in the Edit form.

4. SharePoint jslink templates.header example

Let us see another example of sharepoint jslink templates.header. Here we will see, how to add header and footer to a list view web part using JSLink in SharePoint 2013 or SharePoint 2016 or SharePoint Online. We can use jslink to customize the list view web part in SharePoint Online.

In this particular JSLink SharePoint Online example, I am going to show, how you can add a header and footer to a list view web part in SharePoint Online. I will add a custom message for the header and footer in the list view web part.

Here we have a SharePoint Online list known as Training and I have added the list inside a web part page. The SharePoint Online list appears inside the web part page like below:

To use jslink inside a list view web part, we have to first save the below code in a .js file.

(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Header = overrideCustomHeader;
overrideContext.Templates.Footer = overrideCustomFooter;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();

function overrideCustomHeader() {
return “<h3>Our Custom Header</h3>”;
}

function overrideCustomFooter() {
return “<h3>Our Custom Footer</h3>”;
}

Now I have added the .JS file inside the Site Assets document library in SharePoint Online. Once we Save the file, we need to provide .js file path in the JS Link in the list view web part.

Open the SharePoint Online web part page where you have added the list view web part. Then edit the list view web part, from the web part properties expand Miscellaneous section and provide the js link file page in the JS Link option like below:

~site/SiteAssets/JSLinkHeaderFooterTest.js

After you save the SharePoint web part page, you can see the custom header and footer appears for the list like below:

This is how to add a header and footer to a list view web part in SharePoint Online using JSLink by using sharepoint jslink templates.header.

5. Customize SharePoint list view using jslink

Here we will see another example of how to customize SharePoint list view using jslink. Let us see, how to customize SharePoint 2013/2016/Online list view web part using JSLink.

Here I have a SharePoint Online list which has a column known as “PercentComplete” which is a single line of the text column. And I have added the list inside a web part page and the SharePoint list looks like below:

Here instead of showing percentage column like above, we can render it differently using JSLink in SharePoint Online.

First Save the below code in a js file and upload into a document library in SharePoint Online. Here I have uploaded the file inside the Site Assets document library.

(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {
‘PercentComplete’: { ‘View’: renderPercentComplete }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function renderPercentComplete(ctx) {
var fieldVal = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
var percentComplete = fieldVal.toString();
var html = ”;
html += “<div style=’width:100%;height:20px;border:1px solid #AEAEAE;position:relative;’>”;
html += “<div style=’background-color:#0072C6;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;
}

Then we need to edit the web part page where we have added the list. Then edit the List view web part. There you will be able to see JSLink property. There give the path like below:

~site/SiteAssets/MyJSLinkRender.js

Now once you will save the page, the list view web part “PercentageColumn: will look like below:

This is how to use jslink in SharePoint 2013/2016/2019 or SharePoint Online to customize list view web parts.

How to load multiple js files in JSLink SharePoint

Let us see, how to add multiple js files in JSLink in SharePoint 2013/2016/2019. We can easily give js file path in the JSLink option in list view web part in SharePoint. But sometimes we may need to load multiple js files in jslink in SharePoint 2013/2016/Online.

To give a path of a js file in JSLink, the first we need to edit properties of the list view web part and then under Miscellaneous section, we can add the js link path like below:

~site/SiteAssets/mydemojslink.js

And the web part properties looks like below:

But sometime you may need to give multiple files if you want to load any other scripts.

We can add multiple files by simply using a pipe symbol between these files.

~site/SiteAssets/mydemojslink.js|~site/SiteAssets/myanotherdemojslink.js

This is how we can load multiple js files in JSLink SharePoint.

You may like the following SharePoint tutorials:

• SharePoint Customization Examples
• SharePoint web application
• SharePoint ULS Logs
• SharePoint list delete title column
• Create SharePoint list view

In this tutorial we discuss SharePoint jslink, various SharePoint jslink examples and cover the below topics also:

• sharepoint jslink list view
• sharepoint 2016 jslink examples
• sharepoint 2013 jslink examples
• jslink sharepoint 2019
• sharepoint jslink hide column
• sharepoint jslink templates header
• sharepoint jslink templates.header
• sharepoint jslink template.fields