JSON SP list format. Multiple pictures in one column

asked 2022-06-14T12:59:42.447+00:00
HOFH 21 Reputation points

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 ','
211229-capture.png

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

Thanks!

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

Accepted answer
  1. answered 2022-06-15T12:05:02.437+00:00
    Rgmack 81 Reputation points

    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/


1 additional answer

Sort by: Most helpful
  1. answered 2022-06-20T08:49:09.127+00:00
    HOFH 21 Reputation points

    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]