SOLVED

Column Formatting for Status column not working

%3CLINGO-SUB%20id%3D%22lingo-sub-1087596%22%20slang%3D%22en-US%22%3EColumn%20Formatting%20for%20Status%20column%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1087596%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20used%20this%20method%20in%20the%20past%20and%20everything%20work%20just%20fine.%20I%20am%20not%20sure%20why%20it%20isn't%20working%20now.%20the%20following%20JSON%20displays%20the%20icons%20properly%20but%20not%20the%20colors%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22class%22%3A%20%22%3Dif(%40currentField%20%3D%3D%20'Approved'%2C%20'sp-field-severity--good'%2C%20if(%40currentField%20%3D%3D%20'Pending'%2C%20'sp-field-severity--low'%2C%20if(%40currentField%20%3D%3D%20'Closed'%2C%20'sp-field-severity--warning'%2C%20if(%40currentField%20%3D%3D%20'Rejected'%2C%20'sp-field-severity--severeWarning'))))%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22span%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22display%22%3A%20%22inline-block%22%2C%3CBR%20%2F%3E%22padding%22%3A%20%220%204px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22iconName%22%3A%20%22%3Dif(%40currentField%20%3D%3D%20'Approved'%2C%20'CheckMark'%2C%20if(%40currentField%20%3D%3D%20'Pending'%2C%20'Forward'%2C%20if(%40currentField%20%3D%3D%20'Closed'%2C%20'Error'%2C%20if(%40currentField%20%3D%3D%20'Rejected'%2C%20'Warning'%2C%20'ErrorBadge'))))%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22span%22%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%40currentField%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECan%20someone%20tell%20me%20what%20I'm%20doing%20wrong%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1093575%22%20slang%3D%22en-US%22%3ERe%3A%20Column%20Formatting%20for%20Status%20column%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1093575%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F421542%22%20target%3D%22_blank%22%3E%40Yarrah%3C%2FA%3E%26nbsp%3B%3CBR%20%2F%3E%3CBR%20%2F%3EUse%20this%20it%20should%20work%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fv2%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22class%22%3A%20%22%3Dif(%40currentField%20%3D%3D%20'Approved'%2C%20'sp-field-severity--good'%2C%20if(%40currentField%20%3D%3D%20'Pending'%2C%20'sp-field-severity--low'%2C%20if(%40currentField%20%3D%3D%20'Closed'%2C%20'sp-field-severity--warning'%2C%20if(%40currentField%20%3D%3D%20'Rejected'%2C%20'sp-field-severity--severeWarning'%3CSTRONG%3E%2C%20'sp-field-severity--blocked'))))%20%2B%20'%20ms-fontColor-neutralSecondary'%3C%2FSTRONG%3E%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22children%22%3A%20%5B%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22span%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22display%22%3A%20%22inline-block%22%2C%3CBR%20%2F%3E%22padding%22%3A%20%220%204px%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22attributes%22%3A%20%7B%3CBR%20%2F%3E%22iconName%22%3A%20%22%3Dif(%40currentField%20%3D%3D%20'Approved'%2C%20'CheckMark'%2C%20if(%40currentField%20%3D%3D%20'Pending'%2C%20'Forward'%2C%20if(%40currentField%20%3D%3D%20'Closed'%2C%20'Error'%2C%20if(%40currentField%20%3D%3D%20'Rejected'%2C%20'Warning'%2C%20'ErrorBadge'))))%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22elmType%22%3A%20%22span%22%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%40currentField%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%5D%3CBR%20%2F%3E%7D%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1107568%22%20slang%3D%22en-US%22%3ERe%3A%20Column%20Formatting%20for%20Status%20column%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1107568%22%20slang%3D%22en-US%22%3E%3CP%3EHey%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F502855%22%20target%3D%22_blank%22%3E%40VarunAtluri%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%20worked!%20I%20knew%20there%20was%20something%20missing%2C%20just%20needed%20another%20pair%20of%20eyes%26nbsp%3BThank%20you%20so%20much!%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1118116%22%20slang%3D%22en-US%22%3ERe%3A%20Column%20Formatting%20for%20Status%20column%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1118116%22%20slang%3D%22en-US%22%3E%3CP%3EHey%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F502855%22%20target%3D%22_blank%22%3E%40VarunAtluri%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20implementing%20your%20corrections%20to%20the%20JSON%20and%20testing%2C%20I%20noticed%20that%20there%20is%20no%20color%20for%20%22Pending%22%20statuses.%20Not%20sure%20what's%20wrong...%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1121520%22%20slang%3D%22en-US%22%3ERe%3A%20Column%20Formatting%20for%20Status%20column%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1121520%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F421542%22%20target%3D%22_blank%22%3E%40Yarrah%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere%20is%20a%20list%20of%20the%20styles%20your%20referring%20to%3A%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%23style-guidelines%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%23style-guidelines%3C%2FA%3E%3C%2FP%3E%3CP%3EAny%20icons%20within%20the%20Fabric%20UI%20can%20be%20used%3A%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fstyles%2Ficons%23icons%22%20rel%3D%22noopener%20noreferrer%22%20target%3D%22_blank%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fstyles%2Ficons%23icons%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EChange%20Classes%20%26amp%3B%20Icons%20accordingly%3C%2FP%3E%3C%2FLINGO-BODY%3E
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 (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