Add flag to country field on user table

[Jake Sadler]

I would like to add a the country flag to the country field on the sys_user table, for example if the country is united kingdom then I will see the UK flag next to the field. Is there a way to do this?

[AnveshKumar M]

Hi @Jake Sadler 

Have you checked this KB Article from ServiceNow?

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0752116

Please mark my answer helpful and accept as solution if it helped you 👍✔️

[AnveshKumar M · Accepted solution]

@Jake Sadler mean while I tried this in my instance, let me present you the steps I followed,

1. Download all the flags from any source you prefer and preferably the size of the image should be 14 px X 14 px and PNG format.
2. Rename all the images to a standard format like <2 Letter Country Code>.png [For example, IN.png, US.png, FI.png etc.]
3. Upload all the images to ServiceNow at System Ui -> Images
4. 
   
   1. Click on New in the List view
   2. 
   3. In the page opened, select some category and in the name field fill in the name in same format as we followed above and then click on Click to add.. link next to image and upload your flag and click OK
   4. Then you will be brought back to the Image properties page, click on Update button to save the image.

onLoad Client Script: Create an OnLoad client script like with the following script on sys_user table.

Note: Do not forget to un check the Isolate Script check box, if the field is not available on the client script form add it to the form from Form layout configuration.

function onLoad() {
	var country = g_form.getValue('country');
	if(country === ''){
		return;
	}
	var flag = country + '.png';
	var countryLabel = $('element.sys_user.country');
	countryLabel.setStyle({
				backgroundImage: "url("+ flag +")",
				backgroundPosition: "80% 55%",
				backgroundRepeat: "no-repeat"});
}

OnChange Client Script: Create an OnChange client script like with the following script on sys_user table for Country Code field.

Note: Do not forget to un check the Isolate Script check box, if the field is not available on the client script form add it to the form from Form layout configuration.

function onChange(control, oldValue, newValue, isLoading) {
	if(isLoading || newValue === ''){
		return;
	}
	var flag = newValue + '.png';
	var countryLabel = $('element.sys_user.country');
	countryLabel.setStyle({
				backgroundImage: "url("+ flag +")",
				backgroundPosition: "80% 55%",
				backgroundRepeat: "no-repeat"});
}

And the result is,

Please mark my answer helpful and accept as solution if it helped you 👍✔️