In Continuation with a series on JS Link, In this example we will look at How to Color Code List Items using a JavaScript File (using JS Link) in SharePoint 2013.
With JS Link reference to a JavaScript File in a WebPart, we can Control the Rendering of Fields & Items in a View, List Forms (Display,New,Edit) and event a WebPart.It is preferred that the
JavaScript file should be Uploaded as a new JavaScript Display Template in Site’s Master Page Gallery.JavaScript Display Template Content Type has some special Site Columns added to it that will help specify the target element (view,form,webpart etc..) where the JavaScript File’s Custom Rendering will be Implemented.
Lets Look at the Detailed Steps to Create a JavaScript File and use it in JS Link Property to Color Code List Items as per the Sales column Criteria. Here is the Before and After looks like -
Initial List -
Resulting items
Lets Look at the Steps -
1. Create a JS File and Copy & Paste the below Script in your Js File. Save it as
ColorCode_Items_Script.Js
(function () {
var itemCtx = {};
itemCtx.Templates = {};
itemCtx.Templates.Header = “<div><b>Sales Data</b></div><ul>”;
itemCtx.Templates.Item = ItemOverrideFun;
itemCtx.Templates.Footer = “</ul>”;
itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 100;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();
function ItemOverrideFun(ctx) {
if (ctx.CurrentItem.Sales == ‘< 20K’)
{
return “<li style=’background-color: #52D017;width: 300px;height: 24px;’>” + ctx.CurrentItem.Title + ” – ” + ctx.CurrentItem.Sales + “</li></span>”;
}
if (ctx.CurrentItem.Sales == ‘> 20K’)
{
return “<li style=’background-color: #4AA02C;width: 300px;height: 24px;’>” + ctx.CurrentItem.Title + ” – ” + ctx.CurrentItem.Sales + “</li></span>”;
}
if (ctx.CurrentItem.Sales == ‘< 10K’)
{
return “<li style=’background-color: #FF0000;width: 300px;height: 24px;’>” + ctx.CurrentItem.Title + ” – ” + ctx.CurrentItem.Sales + “</li></span>”;
}
if (ctx.CurrentItem.Sales == ‘> 10K’)
{
return “<li style=’background-color: #D16587;width: 300px;height: 24px;’>” + ctx.CurrentItem.Title + ” – ” + ctx.CurrentItem.Sales + “</li></span>”;
}
}
Download Script
2. Upload your js file in Master Page Gallery as a new JavaScript Display Template.For this example, we have Created and Uploaded a JavaScript File
“ColorCode_Items_Script.Js” in our Master Page Gallery as a new JavaScript Display Template.See the detailed Steps at
Uploading JavaScript (JS Files) as JavaScript Display Template in SharePoint 2013
3. Create a Custom List with Items like below.
4. Edit the WebPart and add JS Link reference path for the JavaScript File that you Upload in master Page Gallery.
In our case the path is ‘~site/_catalogs/masterpage/ColorCode_Items_Script.js’
5. Once you hit apply the List Items should look like below.
