Be sure to check out Sachin's link for how to set up a UI macro correctly. I thought it would be fun to try and code this up so I've got a full solution you can use. Here are the instructions and code. You'll want to create this as a UI macro under 'System UI -> UI Macros' with the following settings. Let me know how it works!
Name: user_show_country
Description:
Displays a flag icon on the caller reference field if user is associated to a country (includes United States and India by default).
--Include the reference field decoration by adding 'ref_contributions=user_show_country' as an attribute to the 'caller_id' field dictionary.
--Upload flag images to the 'System UI -> Images' module. Flag images can be downloaded here...
https://www.iconfinder.com/iconsets/flag_set
--Ensure that the 'Country code' field on the 'User' table is explicitly set for each user! Default system values won't be recognized as they are simply a null value in the database until they are explicitly set.
--Additional countries can be added by uploading a new flag image to the images module and modifying 3 sections of code
1) Copy and add a new image variable to point to the new country image
2) Copy and add a new country snippet in the 'else if' section of the 'g2: evaluate' area below
3) Copy and add a new country snippet in the 'else if' section of the 'callerShowCountryReturn' function below
Active: True
XML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:evaluate var="jvar_guid" expression="gs.generateGUID(this);" />
<j:set var="jvar_n" value="show_user_country${jvar_guid}:${ref}"/>
<g2:evaluate jelly="true">
//Set country image names (as uploaded to Images module) here
var usImage = 'Icon_UnitedStates.png';
var indiaImage = 'Icon_India.png';
//Add additional countries by copying 'else if' statements and modifying country information in 2 locations below
var userCountryDisplay;
var userCountryName;
var userCountryImage;
var id = __ref__.getSysIdValue();
if (id == null) {
userCountryDisplay = "none";
}
else {
var caller = new GlideRecord('sys_user');
caller.get(id);
if (!caller.country.nil()) {
userCountryDisplay = "";
//Add additional countries here by copying the 'else if' statement below
//If user is from United States
if (caller.country == 'US') {
userCountryName = 'United States';
userCountryImage = usImage;
userCountryDisplay = "";
}
//If user is from India
else if (caller.country == 'IN') {
userCountryName = 'India';
userCountryImage = indiaImage;
userCountryDisplay = ""
}
else {
userCountryDisplay = "none";
}
}
else {
userCountryDisplay = "none";
}
}
</g2:evaluate>
<a id="${jvar_n}"
name="${jvar_n}"
style="display:$[userCountryDisplay]; cursor:default"
title="User location: $[userCountryName]">
<img id="${jvar_n}_image" border="0" src="$[userCountryImage]" height="24" width="24"/>
</a>
<script>
//Client script portion to handle 'onChange' events after initial load
needsRefreshCaller = false;
function onChange_caller_id_show_user_country(element, original, changed, loading) {
var s = '${ref}'.split('.');
var referenceField = s[1];
if (needsRefreshCaller == false) {
needsRefreshCaller = true;
return;
}
if (changed.length == 0) {
$('${jvar_n}').hide();
return;
}
var callerRec = g_form.getReference(referenceField, callerShowCountryReturn);
}
function callerShowCountryReturn(callerRec) {
var el = $('${jvar_n}');
var imgEl = $('${jvar_n}_image');
if (callerRec.country) {
//Add additional countries here by copying the 'else if' statement below
//If user is from United States
if (callerRec.country == 'US') {
el.setAttribute('data-original-title', "User location: United States");
imgEl.src = "$[usImage]";
el.show();
}
//If user is from India
else if (callerRec.country == 'IN') {
el.setAttribute('data-original-title', "User location: India");
imgEl.src = "$[indiaImage]";
el.show();
}
else {
el.hide();
}
}
else {
el.hide();
}
}
var l = new GlideEventHandler('onChange_caller_id_show_user_country', onChange_caller_id_show_user_country, '${ref}');
g_event_handlers.push(l);
</script>
</j:jelly>
