Avatar of Sean Inman
Sean Inman asked on

SharePoint Online List Color Coding

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.
Microsoft SharePoint

Avatar of undefined
Last Comment
Sean Inman

8/22/2022 - Mon
Nicolas Lecanu

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.
ASKER
Sean Inman

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
ASKER CERTIFIED SOLUTION
Sean Inman

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy