none
SharePoint 2013 - Using JSLinks to COlor Code a Column RRS feed

  • Question

  • Hello Community!

    I am attempting to use JSLinks to Color Code a column in a view.  The code I have is below. I have added the code to the Site Assets Library and then the link to the code to the View Web Part in the JSLinks section.  I have taken the code from a reliable sample but it just never does anything.  Any advice or guidance would be greatly appreciated.

    Thanks!

    Tom

    (function () {
    var statusFieldCtx = {};
    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
    “Status”: {
    “View”: StatusFieldViewTemplate
    }};
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    statusFieldCtx
    );
    })();
    
    function StatusFieldViewTemplate(ctx) {
    var _statusValue = ctx.CurrentItem._Status;
    if (_statusValue == ‘Black’)
    {
    return “<span style=’background-color:black’>” + _statusValue + “</span>”;
    }
    if (_statusValue == ‘Red’)
    {
    return “<span style=’background-color:red’>” + _statusValue + “</span>”;
    }
    if (_statusValue == ‘Amber’)
    {
    return “<span style=’background-color:amber’>” + _statusValue + “</span>”;
    }
    if (_statusValue == ‘Green’)
    {
    return “<span style=’background-color:green’>” + _statusValue + “</span>”;
    }
    if (_statusValue == ‘Blue’)
    {
    return “<span style=’background-color:blue’>” + _statusValue + “</span>”;
    }
    
    }


    Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy

    Wednesday, March 1, 2017 6:09 PM

Answers

  • Hi,

    I tested in my test environment, it works. Please check the steps below:

    1. Create a Custom List and create a Choice column "Status"(values: Black, Red, Amber, Green, Blue ).

    2. Save the code below to a js file "ColorColumn.js", then upload the file into Site Assets library.

    (function () {
    	var statusFieldCtx = {};
    	statusFieldCtx.Templates = {};
    	statusFieldCtx.Templates.Fields = {
    		"Status": {
    		"View": StatusFieldViewTemplate
    	}};
    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
    })();
    
    function StatusFieldViewTemplate(ctx) {
    	var _statusValue = ctx.CurrentItem.Status;
    	if (_statusValue == "Black"){
    		return "<span style='background-color:black'>" + _statusValue + "</span>";
    	}
    	if (_statusValue == "Red"){
    		return "<span style='background-color:red'>" + _statusValue + "</span>";
    	}
    	if (_statusValue == "Amber"){
    		return "<span style='background-color:amber'>" + _statusValue + "</span>";
    	}
    	if (_statusValue == "Green"){
    		return "<span style='background-color:green'>" + _statusValue + "</span>";
    	}
    	if (_statusValue == "Blue"){
    		return "<span style='background-color:blue'>" + _statusValue + "</span>";
    	}
    }
    

    3. Edit the list view page, in list view web part settings, add the URL below into JS Link.

    ~site/SiteAssets/ColorColumn.js

    4. Apply and Stop Editing.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 2, 2017 2:47 AM
    Moderator

All replies

  • Hi,

    I tested in my test environment, it works. Please check the steps below:

    1. Create a Custom List and create a Choice column "Status"(values: Black, Red, Amber, Green, Blue ).

    2. Save the code below to a js file "ColorColumn.js", then upload the file into Site Assets library.

    (function () {
    	var statusFieldCtx = {};
    	statusFieldCtx.Templates = {};
    	statusFieldCtx.Templates.Fields = {
    		"Status": {
    		"View": StatusFieldViewTemplate
    	}};
    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
    })();
    
    function StatusFieldViewTemplate(ctx) {
    	var _statusValue = ctx.CurrentItem.Status;
    	if (_statusValue == "Black"){
    		return "<span style='background-color:black'>" + _statusValue + "</span>";
    	}
    	if (_statusValue == "Red"){
    		return "<span style='background-color:red'>" + _statusValue + "</span>";
    	}
    	if (_statusValue == "Amber"){
    		return "<span style='background-color:amber'>" + _statusValue + "</span>";
    	}
    	if (_statusValue == "Green"){
    		return "<span style='background-color:green'>" + _statusValue + "</span>";
    	}
    	if (_statusValue == "Blue"){
    		return "<span style='background-color:blue'>" + _statusValue + "</span>";
    	}
    }
    

    3. Edit the list view page, in list view web part settings, add the URL below into JS Link.

    ~site/SiteAssets/ColorColumn.js

    4. Apply and Stop Editing.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 2, 2017 2:47 AM
    Moderator
  • Hi,

    In addition to above reply, make sure to use valid tokens when you are constructing your JSLink URL there are a number of tokens you can use

    ~site – reference to the current SharePoint site (or “Web”)
    ~sitecollection – reference to the current SharePoint site collection (or “Site”)
    ~layouts – version specific reference to the web application Layouts folder (so it will automatically swap out /_layouts/14 or /_layouts/15 for you)
    ~sitecollectionlayouts – reference to the layouts folder in the current site collection (e.g. /sites/team/_layouts/15)
    ~sitelayouts – reference to the layouts folder in the current site (e.g. /sites/teams/subsite/_layouts/15)

    Regards.

    Thursday, March 2, 2017 5:39 AM