Text StartsWith Calling Codes

This sample demonstrates using the indexOf function (O365 only) to test if text starts with a given value. Using the international calling code at the start of a phone number, the correct country's flag is shown next to the phone number. The same nested conditionals are also used for the tooltip.

Shared by Chris Kent
Updated Sep 29, 2023

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "img", "attributes": { "src": "='https://flagcdn.com/h20/' + if(indexOf(@currentField,'+358')==0,'fi', if(indexOf(@currentField,'+011')==0,'mx',if(indexOf(@currentField,'+61')==0,'au', if(indexOf(@currentField,'+46')==0,'se', if(indexOf(@currentField,'+47')==0,'no', if(indexOf(@currentField,'+7')==0,'ru', if(indexOf(@currentField,'+32')==0,'be', if(indexOf(@currentField,'+31')==0,'nl', if(indexOf(@currentField,'+43')==0,'at', if(indexOf(@currentField,'+353')==0,'ie', if(indexOf(@currentField,'+39')==0,'it', 'us'))))))))))) + '.png'", "title": "=if(indexOf(@currentField,'+011')==0,'Mexico', if(indexOf(@currentField,'+358')==0,'Finland', if(indexOf(@currentField,'+61')==0,'Australia', if(indexOf(@currentField,'+46')==0,'Sweden', if(indexOf(@currentField,'+47')==0,'Norway', if(indexOf(@currentField,'+7')==0,'Russia', if(indexOf(@currentField,'+32')==0,'Belgium', if(indexOf(@currentField,'+31')==0,'Netherlands', if(indexOf(@currentField,'+43')==0,'Austria', if(indexOf(@currentField,'+353')==0,'Ireland', if(indexOf(@currentField,'+39')==0,'Italy', 'USA')))))))))))" }, "style": { "max-width": "23px", "padding": "0 6px 0 0" } }, { "elmType": "span", "txtContent": "@currentField" } ] }

From the contributor

How to use this sample

Summary

This sample demonstrates using the indexOf function (O365 only) to test if text starts with a given value. Using the international calling code at the start of a phone number, the correct country's flag is shown next to the phone number. The same nested conditionals are also used for the tooltip.

screenshot of the sample

The indexOf function returns the index where a given value is found within a string (indexes start at 0). If the value is not found in the text, the result is -1.

To evaluate if text "startsWith" a given value, we want to know if the index of the value within the string is 0 (at the beginning). So we can use the function like this:

"=if(indexOf(@currentField,'A')==0, 'Yes', 'No')"

Some example values and the result using the function above:

`@currentField`	result
A dog	Yes
a dog	No
Pet A dog	No

Notice that the indexOf function is case-sensitive. You can do a case-insensitive check by adding the toLowerCase function like this:

=if(indexOf(toLowerCase(@currentField),'a')==0, 'Yes', 'No')

Prerequisites

External image sources are blocked by default in the custom formatter. To allow external images, you must add the domain to HTML Field Security. The domain that needs to be added in this sample is flagcdn.com.

screenshot of HTML Field Security

View requirements

This format can be applied to a Text or Choice column
This format uses operators only available in SharePoint Online and cannot be used in SharePoint 2019

Sample

Solution	Author(s)
text-startswith-callingcodes.json	Chris Kent

Version history

Version	Date	Comments
1.0	February 5, 2019	Initial release
1.1	September 29, 2023	Added note about HTML Field Security and changed domain from flags.fmcdn.net to flagcdn.com

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.

Additional notes

Use column formatting to customize SharePoint

The indexOf function is not available in SharePoint 2019