SharePoint online column formatting not reading my children array in JSON object

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

Siddharth Vaghasia · Accepted Answer · 2019-06-08 18:16:23Z

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

I appreciate your input but it still is not working. I have used JSON editors to no avail. I am green when it comes to JSON. — GoGorilla
– GoGorilla, Commented Jun 8, 2019 at 17:20
Let me try this..assuming your field is single line of text right? — Siddharth Vaghasia
– Siddharth Vaghasia, Commented Jun 8, 2019 at 17:57
Yes, thank you. I understand what you are referring to regarding the placement of the txtContent. Your help is very much appreciated. — GoGorilla
– GoGorilla, Commented Jun 9, 2019 at 15:42
Welcome...Please upvote and mark as answer for others reference.. — Siddharth Vaghasia
– Siddharth Vaghasia, Commented Jun 9, 2019 at 17:21

Stack Exchange Network

SharePoint online column formatting not reading my children array in JSON object

1 Answer 1

Your Answer

Hot Network Questions

SharePoint online column formatting not reading my children array in JSON object

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions