managed-metadata-tag-icon.json sample issue

[sperry1625]

The sample, managed-metadata-tag-icon.json, formats for a metadata column, which is great. The issue is when there is nothing selected. It still shows the icon with an empty bubble. See image.

How do we get it to show nothing if there is no metadata item selected?

Thank you.

[sperry1625]

I am not sure what I did is the most effective, but I was able to get it working with the below:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "width": "100%"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "margin": "5px",
                "padding": "5px 10px 5px 10px",
                "border-radius": "10px"
            },
            "attributes": {
                "class": {
                    "operator": ":",
                    "operands": [
                        {
                            "operator": "<=",
                            "operands": [
                                "@currentField",
                                "0"
                            ]
                        },
                        "",
                        "ms-bgColor-themePrimary"
                    ]
                }
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "vertical-align": "middle",
                        "white-space": "nowrap",
                        "width": "auto"
                    },
                    "attributes": {
                        "class": {
                            "operator": ":",
                            "operands": [
                                {
                                    "operator": "<=",
                                    "operands": [
                                        "@currentField",
                                        "0"
                                    ]
                                },
                                "",
                                "ms-fontColor-white ms-font-s"
                            ]
                        }
                    },
                    "children": [
                        {
                            "elmType": "span",
                            "style": {
                                "position": "relative",
                                "top": "2px"
                            },
                            "attributes": {
                                "iconName": {
                                    "operator": ":",
                                    "operands": [
                                        {
                                            "operator": "<=",
                                            "operands": [
                                                "@currentField",
                                                "0"
                                            ]
                                        },
                                        "",
                                        "Tag"
                                    ]
                                }
                            }
                        },
                        {
                            "elmType": "span",
                            "style": {
                                "padding-left": "5px"
                            },
                            "txtContent": "@currentField"
                        }
                    ]
                }
            ]
        }
    ]
}

If there is a better way, I would love to see it.

Thank you.

[Fedes365]

@sperry1625 To make something disappear if there is no data, you can use two CSS properties:

1) Visibility. "The visibility property specifies whether or not an element is visible." In other words, the element is still there but it's invisible. Reference here.

OR

2) Display. The display property specifies the display behavior (the type of rendering box) of an element. In other words, if a condition is satisfied, the element is not rendered (aka removed). Reference here.

Let's use the second one. We'll have to edit the CSS display property of the first div you encounter in your JSON code:

"display": "=if(@currentField =='', 'none', 'flex')"

I'm not able to test your code above at the moment. Can you confirm if this change worked or not?

[tecchan1107]

Hi @sperry1625 . Thanks for submitting the issue! I modified the code as follows. Please check to see that the tag does not appear if the column value is empty.

 {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(length(@currentField)>0,'flex','none')",
    "flex-wrap": "wrap",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "margin": "5px",
        "padding": "5px 10px 5px 10px",
        "border-radius": "10px"
      },
      "attributes": {
        "class": "ms-bgColor-themePrimary"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "vertical-align": "middle",
            "white-space": "nowrap",
            "width": "auto"
          },
          "attributes": {
            "class": "ms-fontColor-white ms-font-s"
          },
          "children": [
            {
              "elmType": "span",
              "style": {
                "position": "relative",
                "top": "2px"
              },
              "attributes": {
                "iconName": "Tag"
              }
            },
            {
              "elmType": "span",
              "style": {
                "padding-left": "5px"
              },
              "txtContent": "@currentField"
            }
          ]
        }
      ]
    }
  ]
}

@Fedes365 I set the following code and the tag still showed up. Just not sure why...😖

"display":"=if(@currentField =='', 'none', 'flex')"

[Fedes365]

@tecchan1107 That's strange. I'll have a deeper look at that 🤔 UPDATE: unless I wrote an incorrect answer (well, I have always the opportunity to learn something new), may it depend on a warning recently appeared in the admin center? Integrity of services, message MO494352

Just trying to figure out what's happening... 🤔

[tecchan1107]

@Fedes365 I checked the admin center, but it was about the search, so I thought it might not relate to this case so well. Maybe it is an array when it is blank and a string when it is not blank...? At any rate, it's strange😅

[tecchan1107]

I will merge the modified code and close this issue for now. Please check the following link for the modified code. https://github.com/pnp/List-Formatting/tree/master/column-samples/managed-metadata-tag-icon