SOLVED

Column Formatting for Status column not working

Brass Contributor

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?

4 Replies
best response confirmed by Yarrah (Brass Contributor)
Solution

@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 ,

 

It worked! I knew there was something missing, just needed another pair of eyes Thank you so much! 

 

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

@Yarrah 

 

Here is a list of the styles your referring to:
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#style-gu...

Any icons within the Fabric UI can be used:
https://developer.microsoft.com/en-us/fabric#/styles/icons#icons

 

Change Classes & Icons accordingly

1 best response

Accepted Solutions
best response confirmed by Yarrah (Brass Contributor)
Solution

@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"
}
]
}

View solution in original post