JSON SP list format. Multiple pictures in one column

Question

Hi,

I have a SharePoint list with a column of the type managed metadata that contains the names of countries (you can select several countries), and I want to display the flag for the countries that are selected. But I struggle to make the flags appear.

I manage to show the flag when only 1 country is selected but not when several are selected. The correct flag will show depending on the selected value.
I have stored the flags as images in a library on my SharePoint site.

My code is as follows:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "img",
"attributes": {
"src":"='https://NameOfTenant.sharepoint.com/Sites/NameOfSite/Flag/'+ (@currentField)+'.png'"
}
},
{
"elmType": "span",
"txtContent": "=join(@currentField, '\n')",
"style": {
"padding-left": "6px",
"white-space": "nowrap"
}
}
]
}

Here is a screenshot of the formated column. As you can see the pictures are not showing when i select multiple values. But I managed to get the text content on multiple lines. The delimiter is ','

I do not have much knowledge about JSON formatting, so sorry if this is fairly easy to manage.

Thanks!

Answer 1

You can use a Foreach inside your jason.
May this link can help you

https://thechriskent.com/2019/04/04/generate-list-formatting-elements-in-a-loop-using-foreach/

Answer 2

This is the code that I used and customized to retrieve the flags (.png files) stored locally on the SP site. As referred to by @Rgmack

The variable name should probably be changed to give an more appropriate name in addition to changing the style to change the size and layout of the flags.
But now I got all the flags displayed when more than 1 managed metadata item is selected.

![{  
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",  
  "elmType": "div",  
  "children": [  
    {  
      "forEach": "personIterator in @currentField",  
      "elmType": "div",  
      "style": {  
        "width": "32px",  
        "height": "32px",  
        "overflow": "hidden",  
        "border-radius": "50%",  
        "margin": "2px",  
        "display": "=if(loopIndex('personIterator') >= 3, 'none', '')"  
      },  
      "children": [  
        {  
          "elmType": "img",  
          "attributes": {  
            "src": "='https://NameOfTenant.sharepoint.com/Sites/NameOfSite/Flag/' + [$personIterator] + '.png'",  
            "title": "[$personIterator]"  
          },  
          "style": {  
            "position": "relative",  
            "top": "50%",  
            "left": "50%",  
            "width": "100%",  
            "height": "auto",  
            "margin-left": "-50%",  
            "margin-top": "-50%",  
            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') >= 2, 'none', '')"  
          }  
        },  
        {  
          "elmType": "div",  
          "attributes": {  
            "title": "=join(@currentField.title, ', ')",  
            "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"  
          },  
          "style": {  
            "width": "100%",  
            "height": "100%",  
            "text-align": "center",  
            "line-height": "30px",  
            "font-size": "14px",  
            "display": "=if(length(@currentField) > 3 && loopIndex('personIterator') == 2, '', 'none')"  
          },  
          "children": [  
            {  
              "elmType": "span",  
              "txtContent": "='+' + toString(length(@currentField) - (2))"  
            }  
          ]  
        }  
      ]  
    }  
  ]  
}][1]