Forum Discussion
Column conditional format with Json to display attention colour if column is blank
Hi Silas,
If you want to just get a specific background-color in the cell depending on the value of that column, you can use something like this:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField", "High"
]
},
"#FFA07A",
""
]
}
}
}
I have used the above code successfully to display the Priority column in red if the value is 'High'. The JSON example you have quoted is needed if you want to display the pre-configured icons as well, like what I have used here:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"debugMode": true,
"elmType": "div",
"attributes": {
"class": "=if(@currentField == 'Completed', 'sp-field-severity--good', if(@currentField == 'In Progress', 'sp-field-severity--low' ,if(@currentField == 'Not Started','sp-field-severity--warning', if(@currentField == 'Deferred','sp-field-severity--blocked', ''))"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Completed','CheckMark', if(@currentField == 'In Progress', 'Forward', if(@currentField == 'Not Started', 'Error', if(@currentField == 'Deferred','Warning','')"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
See the attached image to view how the list appears.
If i wanted to do the opposite, display a color only if there is a value in the column.
How would that look?I haven't tried that, but I'm guessing you can take these lines:
},
"#FF0000",
""
]and switch them around like so:
},
"",
"#FF0000"
]That works perfectly !
Thank you
Thanks for this -- I needed to highlight any empty column values in bright red. I modified your JSON to this:
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField", ""
]
},
"#FF0000",
""
]
}
}
}And it works perfectly for what I need!
Nice!
Almost what I've been trying to do but would it also be possible to display an alternative text in the colored blank fields eg "Use default value"?
I'm trying to do this for a date field so I can't add "Use default value" as the default cell value for the column.
Thanks!
I forgot to mention -- to make it work for non-text Columns, convert the value to a string before evaluating:
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
{
"operator": "toString()",
"operands": [
"@currentField"
]
},
""
]
},
"#FF0000",
""
]
}
}
}Thanks again, Bibhu Panigrahi!
- Hi Jeremiah, this code of yours does exactly what I want except that for those list items containing an object (in my case users) it replaces the user name with the text string [object Object] any ideas on how to avoid that?
