Formatting Multi-choice Column in SharePoint online to display limited options

Question

I have a multi choice column where the user can add a bunch of options, at least 20 + options. My goal is to make it easier to read. So if there are more than 4 options it should display 4 options and add an bubble with "+ (total more options)". How do I optimize the experience for the user? I feel like this is something more users have had issues with but I can't find any solutions

Red is what I got, green is how I want:

This is my json 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",

"attributes": {

"title": "[$choice]"

},

"style": {

"padding": "5px",

"border-radius": "5px",

"background-color": "#eaeaea",

"display": "=if(loopIndex('choice') >= 3, 'none', 'inline-block')",

"margin": "2px"

},

"children": [

{

"elmType": "span",

"txtContent": "[$choice]"

}

]

}

]

}

]

}

I'm new to json formatting so I'd be very grateful for any kind of input.

And I'm sorry for the difficult code to read, I tried to add it within a code block, but when I save a lot of code disappears.

Answer 1

Hi @Johanna Weidenius Lindahl ,

Per my test, you could use following column formating to display limited options

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "block"
 },
"children": [
 {
"elmType": "div",
"forEach": "cat in @currentField",
"txtContent": "=if( loopIndex('cat') < 1, @currentField, if(length(@currentField) > 4, '...', ''))"
 }
 ]
}

Here is the test result

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I solved it!

Here is the result:

{
 
"elmType"
"children"
 {
"elmType"
"children"
 {
"forEach"
"elmType"
"attributes"
"title"
 },
"txtContent"
"style"
"padding"
"border-radius"
"background-color"
"display"
"margin"
 }
 }
 ]
 }
 ]
}

Answer 3

Hi @Johanna Weidenius Lindahl ,

I'm glad to hear you solve the problem ,if you have any issue about SharePoint, you are welcome to raise a ticket in this forum.

By the way, since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others." and according to the scenario introduced here: Answering your own questions on Microsoft Q&A, I would make a brief summary of this thread:

[Formatting Multi-choice Column in SharePoint online to display limited options]

Issue Symptom:

Require to disply ... when Multi-choice column get more than four options.

Solution:

Solve the issue by following json

{
  "$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",
          "attributes": {
            "title": "=if(loopIndex('choice') >= 3, join(@currentField, ', '), '[$choice]')"
          },
          "txtContent": "=if(loopIndex('choice') >= 3, '+', '[$choice]')",
          "style": {
            "padding": "5px",
            "border-radius": "5px",
            "background-color": "#eaeaea",
            "display": "=if(loopIndex('choice') >= 4, 'none', 'inline-block')",
            "margin": "2px"
          }
        }
      ]
    }
  ]
}

---

You could click the "Accept Answer" button for this summary to close this thread, and this can make it easier for other community member's to see the useful information when reading this thread. Thanks for your understanding!