SharePoint Online: Display Country Flags using JSON Formatting – multiple selections

SharePoint Online: Display Country Flags using JSON Formatting – multiple selections

SharePoint Online JSON formatting is a powerful tool that allows users to customize the display of list data, bringing a new level of functionality and aesthetics to SharePoint online lists. In my previous blog post, we saw how to show country flags using SharePoint JSON formatting for single selection choice column.

The JSON formatting sample given in this blog post demonstrates displaying flags of the counties selected in the multiple selection SharePoint choice column.

The country flags are shown using the FlagCDN – CDN & API of flags web site API. As Microsoft have blocked the external domain images in SharePoint JSON formatting by default, you will have to allow the flagcdn.com domain in HTML Field Security settings of your SharePoint site by following this step by step guide: Why external domain image URLs are not working in SharePoint Online JSON Formatting?

Also, You can find the list of countries used in this JSON sample at: List of Countries.

Multiple selection choice column settings

Add list of countries in the choice column settings like:

Multiple selection SharePoint choice column settings

SharePoint Online JSON sample

Use below JSON to apply JSON column formatting for multiple selection SharePoint choice column to show the flag of selected countries:

{
	"$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','')",
								"title": ""
							},
							"style": {
								"max-width": "50px",
								"padding": "0 10px 0 0"
							}
						},
						{
							"elmType": "span",
							"txtContent": "[$choiceIterator]"
						}
					]
				}
			]
		}
	]
}

Where [$Countries] is the internal name of SharePoint choice column. You can get the internal name of your SharePoint list column by following this article: How to find the Internal name of columns in SharePoint Online?

Output

Multiple selection SharePoint choice column showing country flags using SharePoint online JSON formatting
Displaying country flags using SharePoint JSON formatting

Learn more

3 thoughts on “SharePoint Online: Display Country Flags using JSON Formatting – multiple selections

Leave a comment