We help IT Professionals succeed at work.

SharePoint Online List Color Coding

Sean Inman
Sean Inman asked
on
297 Views
Last Modified: 2019-03-26
I have a SharePoint Online list with a couple columns that I'm trying to color code based on a specific value.  Column 1 if value=yes, I want the cell to be light green and column 2 if value=Yes, make the cell light yellow and if value=N/A or No then the cell would be colored light red.
Comment
Watch Question

Nicolas LecanuAnalyst developer
CERTIFIED EXPERT

Commented:
hi Sean Inman,

Start by creating a calculated column that displays the text value you want eg:

=IF ([Column 1] = "yes", "green", "red")
=IF ([Column 2] = "yes", "yellow", "red")

Then use this script:

<script>
function CellColour()
{
var cell = $('td'); 

cell.each(function() {                    //loop through all td elements 

var cell_value = $(this).html();          //get the value

if (cell_value == "red")    
    $(this).css({'color' : '#FA0404'});   // changes color to red.
if (cell_value == "green")       
    $(this).css({'color' : '#60FF0B});   // changes color to green.
if (cell_value == "yellow")       
    $(this).css({'color' : '#F5F902'});   // changes color to yellow.

});

}
_spBodyOnLoadFunctionNames.push("CellColour");

</script>

Open in new window



I found a similar problem here,  I hope this will help you.

Author

Commented:
I found some JSON examples and I tried to modify it for my example but haven't been able to get it to work yet. Below is the JSON that I modified.  I have also attached screenshots showing the list edit column fields.

{
	"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
	"elmType": "div",
	"attributes": {
		"class": "=if(@currentField == 'Yes', if(@currentField == 'No', if(@currentField == 'N/A',)))) + ' ms-fontColor-neutralSecondary'"
	},
	"children": [
		{
			"elmType": "span",
			"style": {
				"display": "inline-block",
				"padding": "0 4px"
			},
			"attributes": {
				"iconName": "=if(@currentField == 'Yes', 'CheckMark', if(@currentField == 'No', 'Forward', if(@currentField == 'N/A', 'Error',))))"
			}
		},
		{
			"elmType": "span",
			"txtContent": "@currentField"
		}
	]
}

Open in new window

Screen-Shot-2019-03-26-at-7.16.10-PM.png
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.