SharePoint 2013 - Using JSLinks to COlor Code a Column

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

Answer 1

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 [e-mail]

Answer 2

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.