2

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

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

enter image description here

  • 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 Jun 8 at 17:20
  • Let me try this..assuming your field is single line of text right? – Siddharth Vaghasia Jun 8 at 17:57
  • edited answer..is this how you want to display?. – Siddharth Vaghasia Jun 8 at 18:16
  • Yes, thank you. I understand what you are referring to regarding the placement of the txtContent. Your help is very much appreciated. – GoGorilla Jun 9 at 15:42
  • Welcome...Please upvote and mark as answer for others reference.. – Siddharth Vaghasia Jun 9 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.