question

BoonieMichaelJRDUSNonJJ-9118 avatar image
0 Votes"
BoonieMichaelJRDUSNonJJ-9118 asked Jerryzy commented

SharePoint JSON Format Custom Cards for each multi-select choice value

Hi.
I want to apply JSON formatting to a multi-select Choice field so that EACH VALUE (as opposed to each ROW) has a different custom card. Other people have asked this on various forums, but I can't find any answers that understood the question or that didn't say "Yes, you can, go look at the Microsoft site for the answer" (which, BTW, must be cleverly hidden because I couldn't find the answer.)

In my scenario, I have a "Item Codes" column in a list, which will hold an unknown number of short alpha-numeric values. My stakeholder would like to see a custom card (or tooltip) that displays a different description for each value, depending on which one the user hovers over or clicks on.

The list item itself is created via Power Automate (by parsing a particular kind of email when it's received) so I have some latitude over the way the lists are laid out. I have considered entering the associated descriptions as multiple values (not concatenated values) in another column and referencing those. The length of the field would be too long to conveniently display in a normal list view, but it would be OK to show in a custom card "on hover."

I have also considered adding the values AND their descriptions to a secondary list, and using those values in a Lookup column (instead of a Choice column), as I thought I might leverage the hyperlinks that come with this approach. I don't like this option, though, because it seems a waste of space to add the codes to a list, since they are rather ephemeral and won't likely be used for more than one record (which means I would need to archive it very often, and that presents its own problems for existing records.)

Nonetheless, the fundamental question that nobody has straightforwardly answered is Can there be more than one custom card associated with a single field? If not, I'll just have to go with a single, large custom card that concatenates all selected values with their descriptions and shows them all at once, unless someone has a cool alternative way of presenting this kind of look-up information.

Thanks in advance for any help!

-Boonie

office-sharepoint-online
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @BoonieMichaelJRDUSNonJJ-9118 ,

Is there any update ? If the Json sample is helpful to the question, I suggest you can accept as answer so that it could also help others in the forum :)

Thanks
Best Regards

0 Votes 0 ·

1 Answer

Jerryzy avatar image
1 Vote"
Jerryzy answered

Hi @BoonieMichaelJRDUSNonJJ-9118 ,

Use span title as the hover tooltip information for the multiple-value choice field, here is a Json formatting example for your reference:

This is the choice field settings (Water/Coffee/Wine/Beer/Juice) for example:

88475-snipaste-2021-04-16-10-42-07.png

Then use this Json formatting for the column:

 {
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "style": {
     "font-size": "16px"
   },
   "children": [
     {
       "elmType": "span",
       "attributes": {
         "title": "Water Description",
         "iconName": "Precipitation",
         "class": "='ms-fontColor-' + if(indexOf(join(@currentField,''),'Water') != -1, 'themeDark', 'neutralLight')"
       },
       "style": {
         "padding": "0 2px"
       }
     },
     {
       "elmType": "span",
       "attributes": {
         "title": "Coffee Description",
         "iconName": "CoffeeScript",
         "class": "='ms-fontColor-' + if(indexOf(join(@currentField,''),'Coffee') != -1, 'themeDark', 'neutralLight')"
       },
       "style": {
         "padding": "0 2px 0 0"
       }
     },
     {
       "elmType": "span",
       "attributes": {
         "title": "Wine Description",
         "iconName": "Wines",
         "class": "='ms-fontColor-' + if(indexOf(join(@currentField,''),'Wine') != -1, 'themeDark', 'neutralLight')"
       },
       "style": {
         "padding": "0 2px"
       }
     },
     {
       "elmType": "span",
       "attributes": {
         "title": "Beer Description",
         "iconName": "BeerMug",
         "class": "='ms-fontColor-' + if(indexOf(join(@currentField,''),'Beer') != -1, 'themeDark', 'neutralLight')"
       },
       "style": {
         "padding": "0 2px"
       }
     },
     {
       "elmType": "span",
       "attributes": {
         "title": "\"Juice Description more...\"",
         "iconName": "MusicInCollectionFill",
         "class": "='ms-fontColor-' + if(indexOf(join(@currentField,''),'\"Juice\"') != -1, 'themeDark', 'neutralLight')"
       },
       "style": {
         "padding": "0 2px"
       }
     }
   ]
 }

The example above will convert the option to the related icon and display in the list, when mouse hover on the option, will have the tooltip description like this:

88426-snipaste-2021-04-16-10-44-29.png

I think this example should meet you requirement and here is a similiar thread for your reference:

How to display a custom title of a multi-select choice column in sharepoint with JSON?


Thanks
Best Regards



If the response is helpful, please click "Accept Answer" and upvote it.

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.




5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.