SharePoint 2013 Working with Field Template using JSLink

Article
1/17/2024

Introduction:

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

References:

If you are new to JSLink you can check below articles.

If you want to learn about Microsoft flow, check out below articles.

Demo:

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

https://www.enjoysharepoint.com/wp-content/uploads/2018/07/SharePoint_jslink_field_template_example.png

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 expand Miscellaneous section and add the js link path like below:

~site/SiteAssets/mydemojslink.js

https://www.enjoysharepoint.com/wp-content/uploads/2018/07/SharePoint_jslink_field_template_example_field_template.png

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

https://www.enjoysharepoint.com/wp-content/uploads/2018/07/jslink_field_template_example.png

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

Conclusion:

Here we have discussed how we can override SharePoint list view fields using JSLink in SharePoint 2013. As well as we saw how we can override multiple fields or columns in list view.

Share via