Back to column formats
Column formattingSharePoint Online

Multiple Choice Country Flags

This sample demonstrates displaying flags of the counties selected in the multiple selection SharePoint choice column.

Multiple Choice Country Flags formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "[$Countries]",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "justify-content": "flex-start",
        "flex-wrap": "wrap",
        "margin": "5px 0px"
      },
      "children": [
        {
          "elmType": "div",
          "forEach": "choiceIterator in @currentField",
          "style": {
            "margin": "3px 0px",
            "display": "flex",
            "flex-direction": "row",
            "align-items": "center"
          },
          "children": [
            {
              "elmType": "img",
              "attributes": {
                "src": "=if([$choiceIterator],'https://flagcdn.com/w550/' + if([$choiceIterator]=='Afghanistan','af',if([$choiceIterator]=='Albania','al',if([$choiceIterator]=='Algeria','dz',if([$choiceIterator]=='American Samoa','as',if([$choiceIterator]=='Andorra','ad',if([$choiceIterator]=='Angola','ao',if([$choiceIterator]=='Anguilla','ai',if([$choiceIterator]=='Antarctica','aq',if([$choiceIterator]=='Antigua and Barbuda','ag',if([$choiceIterator]=='Argentina','ar',if([$choiceIterator]=='Armenia','am',if([$choiceIterator]=='Aruba','aw',if([$choiceIterator]=='Australia','au',if([$choiceIterator]=='Austria','at',if([$choiceIterator]=='Azerbaijan','az',if([$choiceIterator]=='Bahamas','bs',if([$choiceIterator]=='Bahrain','bh',if([$choiceIterator]=='Bangladesh','bd',if([$choiceIterator]=='Barbados','bb',if([$choiceIterator]=='Belarus','by',if([$choiceIterator]=='Belgium','be',if([$choiceIterator]=='Belize','bz',if([$choiceIterator]=='Benin','bj',if([$choiceIterator]=='Bermuda','bm',if([$choiceIterator]=='Bhutan','bt',if([$choiceIterator]=='Bolivia','bo',if([$choiceIterator]=='Bonaire','bq',if([$choiceIterator]=='Bosnia and Herzegovina','ba',if([$choiceIterator]=='Botswana','bw',if([$choiceIterator]=='Bouvet Island','bv',if([$choiceIterator]=='Brazil','br',if([$choiceIterator]=='British Indian Ocean Territory','io',if([$choiceIterator]=='Brunei','bn',if([$choiceIterator]=='Bulgaria','bg',if([$choiceIterator]=='Burkina Faso','bf',if([$choiceIterator]=='Burundi','bi',if([$choiceIterator]=='Cambodia','kh',if([$choiceIterator]=='Cameroon','cm',if([$choiceIterator]=='Canada','ca',if([$choiceIterator]=='Cape Verde','cv',if([$choiceIterator]=='Cayman Islands','ky',if([$choiceIterator]=='Central African Republic','cf',if([$choiceIterator]=='Chad','td',if([$choiceIterator]=='Chile','cl',if([$choiceIterator]=='China','cn',if([$choiceIterator]=='Christmas Island','cx',if([$choiceIterator]=='Cocos (Keeling) Islands','cc',if([$choiceIterator]=='Colombia','co',if([$choiceIterator]=='Comoros','km',if([$choiceIterator]=='Democratic Republic of the Congo','cd',if([$choiceIterator]=='Cook Islands','ck',if([$choiceIterator]=='Costa Rica','cr',if([$choiceIterator]=='Croatia','hr',if([$choiceIterator]=='Cuba','cu',if([$choiceIterator]=='Cyprus','cy',if([$choiceIterator]=='Czech Republic','cz',if([$choiceIterator]=='Denmark','dk',if([$choiceIterator]=='Djibouti','dj',if([$choiceIterator]=='Dominica','dm',if([$choiceIterator]=='Dominican Republic','do',if([$choiceIterator]=='Ecuador','ec',if([$choiceIterator]=='Egypt','eg',if([$choiceIterator]=='El Salvador','sv',if([$choiceIterator]=='Equatorial Guinea','gq',if([$choiceIterator]=='Eritrea','er',if([$choiceIterator]=='Estonia','ee',if([$choiceIterator]=='Ethiopia','et',if([$choiceIterator]=='Falkland Islands (Malvinas)','fk',if([$choiceIterator]=='Faroe Islands','fo',if([$choiceIterator]=='Fiji','fj',if([$choiceIterator]=='Finland','fi',if([$choiceIterator]=='France','fr',if([$choiceIterator]=='French Guiana','gf',if([$choiceIterator]=='French Polynesia','pf',if([$choiceIterator]=='French Southern Territories','tf',if([$choiceIterator]=='Gabon','ga',if([$choiceIterator]=='Gambia','gm',if([$choiceIterator]=='Georgia','ge',if([$choiceIterator]=='Germany','de',if([$choiceIterator]=='Ghana','gh',if([$choiceIterator]=='Gibraltar','gi',if([$choiceIterator]=='Greece','gr',if([$choiceIterator]=='Greenland','gl',if([$choiceIterator]=='Grenada','gd',if([$choiceIterator]=='Guadeloupe','gp',if([$choiceIterator]=='Guam','gu',if([$choiceIterator]=='Guatemala','gt',if([$choiceIterator]=='Guernsey','gg',if([$choiceIterator]=='Guinea','gn',if([$choiceIterator]=='Guinea-Bissau','gw',if([$choiceIterator]=='Guyana','gy',if([$choiceIterator]=='Haiti','ht',if([$choiceIterator]=='Heard Island and McDonald Islands','hm',if([$choiceIterator]=='Honduras','hn',if([$choiceIterator]=='Hong Kong','hk',if([$choiceIterator]=='Hungary','hu',if([$choiceIterator]=='Iceland','is',if([$choiceIterator]=='India','in',if([$choiceIterator]=='Indonesia','id',if([$choiceIterator]=='Iran','ir',if([$choiceIterator]=='Iraq','iq',if([$choiceIterator]=='Ireland','ie',if([$choiceIterator]=='Isle of Man','im',if([$choiceIterator]=='Israel','il',if([$choiceIterator]=='Italy','it',if([$choiceIterator]=='Jamaica','jm',if([$choiceIterator]=='Japan','jp',if([$choiceIterator]=='Jersey','je',if([$choiceIterator]=='Jordan','jo',if([$choiceIterator]=='Kazakhstan','kz',if([$choiceIterator]=='Kenya','ke',if([$choiceIterator]=='Kiribati','ki',if([$choiceIterator]=='North Korea','kp',if([$choiceIterator]=='South Korea','kr',if([$choiceIterator]=='Kuwait','kw',if([$choiceIterator]=='Kyrgyzstan','kg',if([$choiceIterator]=='Laos','la',if([$choiceIterator]=='Latvia','lv',if([$choiceIterator]=='Lebanon','lb',if([$choiceIterator]=='Lesotho','ls',if([$choiceIterator]=='Liberia','lr',if([$choiceIterator]=='Libya','ly',if([$choiceIterator]=='Liechtenstein','li',if([$choiceIterator]=='Lithuania','lt',if([$choiceIterator]=='Luxembourg','lu',if([$choiceIterator]=='Macao','mo',if([$choiceIterator]=='North Macedonia','mk',if([$choiceIterator]=='Madagascar','mg',if([$choiceIterator]=='Malawi','mw',if([$choiceIterator]=='Malaysia','my',if([$choiceIterator]=='Maldives','mv',if([$choiceIterator]=='Mali','ml',if([$choiceIterator]=='Malta','mt',if([$choiceIterator]=='Marshall Islands','mh',if([$choiceIterator]=='Martinique','mq',if([$choiceIterator]=='Mauritania','mr',if([$choiceIterator]=='Mauritius','mu',if([$choiceIterator]=='Mayotte','yt',if([$choiceIterator]=='Mexico','mx',if([$choiceIterator]=='Micronesia','fm',if([$choiceIterator]=='Moldova','md',if([$choiceIterator]=='Monaco','mc',if([$choiceIterator]=='Mongolia','mn',if([$choiceIterator]=='Montenegro','me',if([$choiceIterator]=='Montserrat','ms',if([$choiceIterator]=='Morocco','ma',if([$choiceIterator]=='Mozambique','mz',if([$choiceIterator]=='Myanmar','mm',if([$choiceIterator]=='Namibia','na',if([$choiceIterator]=='Nauru','nr',if([$choiceIterator]=='Nepal','np',if([$choiceIterator]=='Netherlands','nl',if([$choiceIterator]=='New Caledonia','nc',if([$choiceIterator]=='New Zealand','nz',if([$choiceIterator]=='Nicaragua','ni',if([$choiceIterator]=='Niger','ne',if([$choiceIterator]=='Nigeria','ng',if([$choiceIterator]=='Niue','nu',if([$choiceIterator]=='Norfolk Island','nf',if([$choiceIterator]=='Northern Mariana Islands','mp',if([$choiceIterator]=='Norway','no',if([$choiceIterator]=='Oman','om',if([$choiceIterator]=='Pakistan','pk',if([$choiceIterator]=='Palau','pw',if([$choiceIterator]=='Palestine','ps',if([$choiceIterator]=='Panama','pa',if([$choiceIterator]=='Papua New Guinea','pg',if([$choiceIterator]=='Paraguay','py',if([$choiceIterator]=='Peru','pe',if([$choiceIterator]=='Philippines','ph',if([$choiceIterator]=='Pitcairn','pn',if([$choiceIterator]=='Poland','pl',if([$choiceIterator]=='Portugal','pt',if([$choiceIterator]=='Puerto Rico','pr',if([$choiceIterator]=='Qatar','qa',if([$choiceIterator]=='Romania','ro',if([$choiceIterator]=='Russia','ru',if([$choiceIterator]=='Rwanda','rw',if([$choiceIterator]=='Saint Barthélemy','bl',if([$choiceIterator]=='Saint Helena, Ascension and Tristan da Cunha','sh',if([$choiceIterator]=='Saint Kitts and Nevis','kn',if([$choiceIterator]=='Saint Lucia','lc',if([$choiceIterator]=='Saint Martin','mf',if([$choiceIterator]=='Saint Pierre and Miquelon','pm',if([$choiceIterator]=='Saint Vincent and the Grenadines','vc',if([$choiceIterator]=='Samoa','ws',if([$choiceIterator]=='San Marino','sm',if([$choiceIterator]=='Sao Tome and Principe','st',if([$choiceIterator]=='Saudi Arabia','sa',if([$choiceIterator]=='Senegal','sn',if([$choiceIterator]=='Serbia','rs',if([$choiceIterator]=='Seychelles','sc',if([$choiceIterator]=='Sierra Leone','sl',if([$choiceIterator]=='Singapore','sg',if([$choiceIterator]=='Sint Maarten','sx',if([$choiceIterator]=='Slovakia','sk',if([$choiceIterator]=='Slovenia','si',if([$choiceIterator]=='Solomon Islands','sb',if([$choiceIterator]=='Somalia','so',if([$choiceIterator]=='South Africa','za',if([$choiceIterator]=='South Georgia and the South Sandwich Islands','gs',if([$choiceIterator]=='South Sudan','ss',if([$choiceIterator]=='Spain','es',if([$choiceIterator]=='Sri Lanka','lk',if([$choiceIterator]=='Sudan','sd',if([$choiceIterator]=='Suriname','sr',if([$choiceIterator]=='Svalbard and Jan Mayen','sj',if([$choiceIterator]=='Swaziland','sz',if([$choiceIterator]=='Sweden','se',if([$choiceIterator]=='Switzerland','ch',if([$choiceIterator]=='Syria','sy',if([$choiceIterator]=='Taiwan','tw',if([$choiceIterator]=='Tajikistan','tj',if([$choiceIterator]=='Tanzania','tz',if([$choiceIterator]=='Thailand','th',if([$choiceIterator]=='Timor-Leste','tl',if([$choiceIterator]=='Togo','tg',if([$choiceIterator]=='Tokelau','tk',if([$choiceIterator]=='Tonga','to',if([$choiceIterator]=='Trinidad and Tobago','tt',if([$choiceIterator]=='Tunisia','tn',if([$choiceIterator]=='Turkey','tr',if([$choiceIterator]=='Turkmenistan','tm',if([$choiceIterator]=='Turks and Caicos Islands','tc',if([$choiceIterator]=='Tuvalu','tv',if([$choiceIterator]=='Uganda','ug',if([$choiceIterator]=='Ukraine','ua',if([$choiceIterator]=='United Arab Emirates','ae',if([$choiceIterator]=='United Kingdom','gb',if([$choiceIterator]=='United States','us',if([$choiceIterator]=='United States Minor Outlying Islands','um',if([$choiceIterator]=='Uruguay','uy',if([$choiceIterator]=='Uzbekistan','uz',if([$choiceIterator]=='Vanuatu','vu',if([$choiceIterator]=='Vatican City','va',if([$choiceIterator]=='Venezuela','ve',if([$choiceIterator]=='Viet Nam','vn',if([$choiceIterator]=='British Virgin Islands','vg',if([$choiceIterator]=='United States Virgin Islands','vi',if([$choiceIterator]=='Wallis and Futuna','wf',if([$choiceIterator]=='Western Sahara','eh',if([$choiceIterator]=='Yemen','ye',if([$choiceIterator]=='Zambia','zm',if([$choiceIterator]=='Zimbabwe','zw','')))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) + '.png','')"
              },
              "style": {
                "max-width": "50px",
                "padding": "0 10px 0 0"
              }
            },
            {
              "elmType": "span",
              "txtContent": "[$choiceIterator]"
            }
          ]
        }
      ]
    }
  ]
}

From the contributor

How to use this sample

Summary

This sample demonstrates displaying flags of the counties selected in the multiple selection SharePoint choice column.

screenshot of the sample

The country flags are shown using the FlagCDN - CDN & API of flags web site API. So, allow flagcdn.com domain in HTML Field Security settings of your SharePoint site by following this Microsoft official documentation: Allow or restrict the ability to embed content on SharePoint pages.

You can find the list of countries used in this JSON sample at: Countries

Add list of countries in the choice column settings like:

screenshot of the edit column

View requirements

  • This format can be applied to a multiple selection choice column

Sample

Solution Author(s)
multi-choice-country-flags.json Ganesh Sanap

Version history

Version Date Comments
1.0 August 27, 2023 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.