Answered by:
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
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- Proposed as answer by Jaydeep Mungalpara Thursday, March 2, 2017 5:34 AM
- Marked as answer by Tom Molskow Thursday, March 2, 2017 4:12 PM
Thursday, March 2, 2017 2:47 AM
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- Proposed as answer by Jaydeep Mungalpara Thursday, March 2, 2017 5:34 AM
- Marked as answer by Tom Molskow Thursday, March 2, 2017 4:12 PM
Thursday, March 2, 2017 2:47 AM -
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