Forum Discussion
Column conditional format with Json to display attention colour if column is blank
Hi Devs,
I need your help. I cannot for the life of me figure out how to tweak this Json schema provided by Microsoft in order to format a column to simple display an attention or warning colour if a field in the column is blank/null/unpopulated. Same way the default SharePoint ' required info' attention banner behaves for missing mandatory fields library.
Please kindly help.
{
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"debugMode": true,
"elmType": "div",
"attributes": {
"class": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
70
]
},
"sp-field-severity--warning",
""
]
}
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": {
"operator": "?",
"operands": [
{
"operator": "<=",
"operands": [
"@currentField",
70
]
},
"Error",
""
]
}
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
23 Replies
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"
]
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!
Here are some more examples that may help https://github.com/SharePoint/sp-dev-column-formatting
Thanks Dean, I have seen those and they don't have anything close to what I'm after which I would have thought was more basic than most of the other samples provided by Microsoft and others.
Can anyone please help with this?
Did you find a solution to this?
