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.
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?
Erik Wettergren, I use "txtContent": "@currentField.title" to get the user name instead of [object Object] in people columns. bu11frogg , thanks for tagging me to your response.
Can you help me if I would like to highlight cell 1A (in column A) if cell 1B (in column B) is blank?
As I believe the code you gave is for the same column
nanuarSorry I missed this! I have referenced column data from 1 column and formatted a 2nd based on it in other SP Lists. The downside is you have to display both columns in the View.
You can get some good examples of how it all works here: https://github.com/SharePoint/sp-dev-docs/issues/1250
Best of luck!
Is it possible to give more values a color, instead of just one?
Yes, you can! Microsoft has posted a nice example of that here:
https://support.office.com/en-us/article/Column-formatting-1f927342-2bed-4745-b727-ff8b7ff96b22
Bibhu Panigrahiis also doing something like that further up in this post, here.
