Change the layout of the multi-choice column

 Posted on January 26, 2024

Learn how to change the layout of a multi-choice column in SharePoint

The multi-choice field can look a little tivoli if you have many options, and the overflow does, in my opinion, not look very good 👇

We have the possibility to remove the style, but I actually also like that the user can distinguish between the choices.

Here is the standard formatting without colors 👇

Change the layout with column formatting

We are going to change the layout to look like this 👇

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "align-items": "start",
    "margin": "3px",
    "overflow": "hidden"
  },
  "attributes": {
    "class": "ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m"
  },
  "children": [
    {
      "elmType": "div",
      "forEach": "choice in @currentField",
      "style": {
        "margin": "5px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "white-space": "nowrap",
        "max-width": "100%",
        "padding": "5px",
        "border-radius": "5px",
        "background-color": "#eaeaea",
        "box-sizing": "border-box"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "[$choice]"
        }
      ]
    }
  ]
}

The multi choice column in SharePoint is a bit advanced to work with, but we are going trough each choice (forEach) of the fields in @currentField, and then we take the property [$choice] and show it in the column

The width of the elements are all different, so you could change “max-width” to “width”: “200px” or whatever size fits, to make all of the choices have the same width. Depending on which choices you have, that can also look pretty.

Play around with the “padding” also. You can change all of the sides (and up and down) by writing “padding”:“5px 10px 10px 10px” or something similar

You can also change the “nowrap” to “wrap” do display the entire text

Another example

We can also change the look to behave a bit more like a tag (or behaving a bit more like the standard formatting)

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "children": [
        {
          "forEach": "choice in @currentField",
          "elmType": "div",
          "style": {
            "padding": "5px",
            "border-radius": "5px",
            "background-color": "#eaeaea",
            "display": "inline-block",
            "margin": "5px"
          },
          "children": [
            {
              "elmType": "span",
              "txtContent": "='# ' + [$choice]"
            }
          ]
        }
      ]
    }
  ]
}

You can play around a little with the “style” of the code, just look up “css” and “overflow” or “display”, but I think these two examples covers many use cases

Single choice

If you would like to apply the same type of formatting to a single choice field, use this code instead

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "align-items": "start",
    "margin": "3px",
    "overflow": "hidden"
  },
  "attributes": {
    "class": "ms-fontColor-neutralSecondary ms-fontColor-neutralDark--hover ms-font-m"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "margin": "5px 0px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "white-space": "nowrap",
        "max-width": "100%",
        "padding": "5px",
        "border-radius": "5px",
        "background-color": "#eaeaea",
        "box-sizing": "border-box",
        "display": "=if(Number(@currentField) == 0, 'none', 'inline')"
      },
      "children": [
        {
          "elmType": "span",
          "txtContent": "@currentField"
        }
      ]
    }
  ]
}

With this code you can now prettify your SharePoint list for the multi choice or single choice columns
‎

SharePoint  Beginner  Column Formatting 

See also