SharePoint online column formatting not reading my children array in JSON object
-
07-02-2021 - |
Question
I can get the formatting to render the background and font style for the column text but not the icons in the children element. I have messed with this for days. I must use style elements as opposed to ms classes because I need this to render properly in a list view web part. Does anyone see what is causing it to skip this? Any help is much appreciated! Where is the mistake?
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Green"
]
},
"#2ECC71",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Red"
]
},
"#E74C3C",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Yellow"
]
},
"#F1C40F",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Purple"
]
},
"#76448A",
""
]
}
]
}
]
}
]
},
"children": [
{
"txtContent": "@currentField",
"style": {
"font-size": "2em",
"display": "inline-block",
"padding": "0 8px",
"attributes": {
"iconName": "=if(@currentField == 'Green', 'Emoji2', if(@currentField == 'Yellow','EmojiNeutral', 'EmojiDisappointed'))"
}
}
}
],
"color": "#fff",
"font-size": "2em",
"padding-left": "14px",
"white-space": "nowrap"
}
}
Solution
You have wrong json,
Issue 1 - your first style attribute is not closing at the end, so all other childrens element is coming under it
Issue 2 - "color", "font-size" should be above children tag
Issue 3 - in children's array - "attributes": should be outside of style
Below is corrected one... I think below should work.
{
"elmType": "div",
"style": {
"background-color": {
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Green"
]
},
"#2ECC71",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Red"
]
},
"#E74C3C",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Yellow"
]
},
"#F1C40F",
{
"operator": "?",
"operands": [
{
"operator": "==",
"operands": [
"@currentField",
"Purple"
]
},
"#76448A",
""
]
}
]
}
]
}
]
},
"color": "#fff",
"font-size": "2em",
"padding-left": "14px",
"white-space": "nowrap"
},
"children": [
{
"elmType": "div",
"txtContent": "@currentField",
"style": {
"font-size": "2em",
"display": "inline-block",
"padding": "0 8px"
},
"attributes": {
"iconName": "=if(@currentField == 'Green', 'Emoji2', if(@currentField == 'Yellow','EmojiNeutral', 'EmojiDisappointed'))"
}
}
]
}
You can always use http://jsonviewer.stack.hu/ to view your json, if it treeview is generating correct and way you want it....
EDIT - Updated JSON as smileys icon were not displaying. Issue was "txtContent": "@currentField" at root level. If you have displayed txtContent at root level it was ignore child elements... Weird but this is how it fixed... Other 3 issues mentioned above were still valid issues which is fixed in udpated JSON.
Below is what I see, it might need some style formatting