SharePoint 2013/2016/Online: Working with JSLink Templates Fields

JSLink in SharePoint 2013 Field Template using

This SharePoint 2013 jslink list view example, I will show you how to work with JSLink templates fields in SharePoint 2013/2016/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 Field template using JSLink in SharePoint 2013.


Here for this particular jslink SharePoint demo let us create a custom list which has two columns (Title and Status) in the SharePoint Online site. The Status is a choice column which 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:

jslink in sharepoint 2013 templates fields
Field Template using JSLink in SharePoint 2013

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

jslink sharepoint 2013 examples
jslink sharepoint 2013 examples

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

sharepoint 2013 jslink templates fields
JSLink in SharePoint 2013 Field Template using

How to override multiple fields using jslink SharePoint 2013?

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>”;
}

You may like following jslink in SharePoint 2013 tutorials:



Hope this will be helpful how to use jslink in sharepoint 2013 templates fields.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About 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 SharePointSky.com

View all posts by Bijay Kumar →