Working with Field Template using JSLink in SharePoint 2013

JSLink in SharePoint 2013 Field Template using
InfoPath alternatives for form designing SharePoint

Here we will discuss how we can use Field template using JSLink in SharePoint 2013. Here for this particular demo let us create a custom list which has two columns (Title and Status). The Status is a choice column which has values like:
– Started
– Inprogress
– Completed

If you are new to JSLink you can check below articles.
– How to add header and footer to list view web part using JSLink in SharePoint 2013?

– JSLink in SharePoint 2013 or JSLink in SharePoint Online

– How to load multiple js files in JSLink in SharePoint 2013?

Also if you want to learn about Microsoft flow, check out the below articles.
– Microsoft Flow Copy files from one SharePoint Online account or folder to another Office 365

– How to check for error in Microsoft Flow in Office 365?

– Microsoft Flow Send approval email when a new item is added demo

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

Field Template using JSLink in SharePoint 2013
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.

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

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

(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. 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 like below:

JSLink in SharePoint 2013 Field Template using
JSLink in SharePoint 2013 Field Template using

How to override multiple fields?
If you want to override multiple fields, 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>”;

}

Hope this will be helpful.

Similar SharePoint 2013 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 →

Leave a Reply