1

I have a choice field in my SharePoint list. The choice field is basically a tag list. Now I wish to display the tags on a single line. Everything what doesn't fit in the box should just be hidden.

Nice-to-have; have a gradient (solid to transparent) to give a peek to users that there is a more. Or a counter of the number of tags.

When you hover with your mouse a small pop-up would be preferable which shows all the tags.

Now the question is, how to achieve such behavior?

enter image description here

The default JSON of a (multi) choice field is:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "forEach": "__INTERNAL__ in @currentField",
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$__INTERNAL__]",
                "Safety"
              ]
            },
            "sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$__INTERNAL__]",
                    "Privacy"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$__INTERNAL__]",
                        "Ethics"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-css-color-GoldFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$__INTERNAL__]",
                            "Health"
                          ]
                        },
                        "sp-css-backgroundColor-BgCoral sp-css-color-CoralFont",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "[$__INTERNAL__]",
                                "Working Conditions"
                              ]
                            },
                            "sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont",
                            "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "[$__INTERNAL__]"
    }
  ]
}
1
  • 1
    Change the flex-wrap style from wrap to nowrap. This will prevent the tags from wrapping onto the next line, to hide the overflow, you can add "overflow": "hidden" to the style of the parent div. For the gradient this requires custom CSS or JavaScript, which is not supported in SharePoint column formatting. Feb 5 at 18:44

1 Answer 1

1

Try using this JSON column formatting for your choice column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "nowrap",
    "display": "flex"
  },
  "children": [
    {
      "forEach": "__INTERNAL__ in @currentField",
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "style": {
            "padding": "10px"
          },
          "txtContent": "=join(@currentField, '; ')"
        },
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$__INTERNAL__]",
                "Safety"
              ]
            },
            "sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$__INTERNAL__]",
                    "Privacy"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$__INTERNAL__]",
                        "Ethics"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-css-color-GoldFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$__INTERNAL__]",
                            "Health"
                          ]
                        },
                        "sp-css-backgroundColor-BgCoral sp-css-color-CoralFont",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "[$__INTERNAL__]",
                                "Working Conditions"
                              ]
                            },
                            "sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont",
                            "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "[$__INTERNAL__]"
    }
  ]
}

Output:

enter image description here

On hover: Shows all the topics separated by semicolon for simplicity - you can add custom CSS for elements on the pop up as per your requirements:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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