SharePoint coloumn formatting - Using UI icons with choice column formats badly in form

Question

Hi,

Bit of a complicated one to explain, I have a choice column (with multiple select enabled) and instead of displaying text I am showing an icon depending on which choices are selected. Within the column on the list this looks great, but the issue is when you open the item new/edit form. When you select the choice field the drop down displays rows of icons, basically each row shows every choice, the actual choice is dark blue while the others are greyed out. This makes selecting an icon less obvious, when an choice is selected the "selected" field starts to look really messy because instead of displaying a single icon its showing all 14 and each selection gets its own row. This is probably better to explain with some images.

First off I borrowed the code I am using from here

I've adapted that to match my choices, this is a snippet of my code:

{  
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",  
    "elmType": "div",  
    "style": {  
      "font-size": "16px",  
      "display": "flex",  
      "flex-wrap": "wrap"  
    },  
    "children": [  
      {  
        "elmType": "span",  
        "attributes": {  
          "title": "Activity Manager",  
          "iconName": "FunctionalManagerDashboard",  
          "class": "='ms-fontColor-' + if(indexOf(join(@currentField,''),'Activity Manager') != -1, 'themeDark', 'neutralLight')"  
        },  
        "style": {  
          "padding": "3px 3px 3px 3px"  
        }  
      },  

When I edit/create new item the drop down now looks like this:

As mentioned, when you select more than one choice it starts to format like this:

As you can see that is pretty unreadable.

What I'd like to do is limit the icon shown to just the choice and hide the others which are appearing as greyed out.

Any help/pointers would be fantastic!

Rob

Answer 1

@Rob ,

We can add an if condition to all iconName attributes. If a specific choice value is selected, the related icon will be displayed. If not, leave it blank:

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

Please check my simple 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'm having the same issue as @Rob .
I would need to show the selected icons as well as the non selected icons greyed out.
The business case for it is that we can mimic having tasks for an item in the Microsoft list.

The choice column will be the tasks and if selected means it is completed, unselected means the task is still outstanding.

Is there a way to accomplish this ?

Answer 3

@JoyZ awesome solution! Thank you, I managed to combine multiple column values into icons using your code.

Answer 4

I am new to working in Microsoft Lists / Sharepoint and I am trying to figure out how to add icons with labels in multiple-choice fields in my list (like the default categories have already) and I assume this is what this post refers to but where on earth do you add the above code please?