Forum Discussion
Solved
Column Formatting for Status column not working
I have used this method in the past and everything work just fine. I am not sure why it isn't working now. the following JSON displays the icons properly but not the colors:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "=if(@currentField == 'Approved', 'sp-field-severity--good', if(@currentField == 'Pending', 'sp-field-severity--low', if(@currentField == 'Closed', 'sp-field-severity--warning', if(@currentField == 'Rejected', 'sp-field-severity--severeWarning'))))"
},
"children": [{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Approved', 'CheckMark', if(@currentField == 'Pending', 'Forward', if(@currentField == 'Closed', 'Error', if(@currentField == 'Rejected', 'Warning', 'ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
Can someone tell me what I'm doing wrong?
Yarrah
Use this it should work{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "=if(@currentField == 'Approved', 'sp-field-severity--good', if(@currentField == 'Pending', 'sp-field-severity--low', if(@currentField == 'Closed', 'sp-field-severity--warning', if(@currentField == 'Rejected', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Approved', 'CheckMark', if(@currentField == 'Pending', 'Forward', if(@currentField == 'Closed', 'Error', if(@currentField == 'Rejected', 'Warning', 'ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}
4 Replies
Yarrah
Use this it should work{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "=if(@currentField == 'Approved', 'sp-field-severity--good', if(@currentField == 'Pending', 'sp-field-severity--low', if(@currentField == 'Closed', 'sp-field-severity--warning', if(@currentField == 'Rejected', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(@currentField == 'Approved', 'CheckMark', if(@currentField == 'Pending', 'Forward', if(@currentField == 'Closed', 'Error', if(@currentField == 'Rejected', 'Warning', 'ErrorBadge'))))"
}
},
{
"elmType": "span",
"txtContent": "@currentField"
}
]
}Hey VarunAtluri,
In implementing your corrections to the JSON and testing, I noticed that there is no color for "Pending" statuses. Not sure what's wrong...
Here is a list of the styles your referring to:
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#style-guidelinesAny icons within the Fabric UI can be used:
https://developer.microsoft.com/en-us/fabric#/styles/icons#iconsChange Classes & Icons accordingly
Hey VarunAtluri ,
It worked! I knew there was something missing, just needed another pair of eyes Thank you so much!
