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

2021-04-15T23:05:18.893+00:00

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

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
6,075 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Jerryzy 10,301 Reputation points
    2021-04-16T02:45:41.527+00:00

    Hi @Boonie, Michael [JRDUS Non-J&J] ,

    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.

    No comments