How to make the Time zone UI setting permanent

[Tony DiRienzo]

The company where I work recently grew, and we now have users in multiple time zones.  Many users were confused and frustrated by the Time zone setting in the system UI settings.  While almost all of the UI settings are stored as a user preference and persist across sessions, the Time zone setting is a session setting for some reason, so it is reset every time you logout or your session times out.  We recommended to users that they set their Time zone preference on their user profile, but the issue kept coming up.  User instruction wasn't enough, so we needed a permanent fix.

While it is possible to hide the Time zone setting based on roles, we wanted to avoid doing this, since the Time zone setting seems to be easier for users to find and use than the time zone setting on their profile.  The solution we came up with was to make a GlideAjax call to update the user's profile whenever the Time zone setting changes.  This can be accomplished by using a UI script to attach an event listener to the Time zone dropdown and a Script Include to handle the GlideAjax call:

UI Script
API Name: UpdateUserTZ
Global: checked
UI Type: Desktop

// Run the AJAX update on load for good measure.
updateTimeZone(false);

// check that the DOM is loaded before attaching the event listener
var check_count = 0;
var check_max = 20; // maximum number of times to try before giving up
var checkTZExist = setInterval(function() {
	check_count++;
	if (getTopWindow().document.getElementById("timezone_picker_select").length) {
		var tzps = getTopWindow().document.getElementById("timezone_picker_select");
		tzps.addEventListener('change', updateTimeZone);
		clearInterval(checkTZExist); // successfully attached the listener
	}
	else if (check_count > check_max) {
		clearInterval(checkTZExist); // couldn't find the timezone dropdown
	}
}, 1000);

function updateTimeZone(e) {
	if (e) {
		jslog("(UpdateUserTZ) Session timezone setting was changed");
	}
	var ga = new GlideAjax("TimeZoneAjax");
	ga.addParam("sysparm_name", "updateUserTZ");
	ga.getXML(reportSuccess);
}

function reportSuccess(response) {
	jslog("(UpdateUserTZ) User timezone setting has been matched to session timezone setting");
}

Script Include
Name: TimeZoneAjax
Client callable: checked

var TimeZoneAjax = Class.create();
TimeZoneAjax.prototype = Object.extendsObject(AbstractAjaxProcessor,{

	updateUserTZ: function() {
		var usr_tz = gs.getSession().getTimeZoneName();
		var sys_tz = gs.getSysTimeZone();
		if (usr_tz !== sys_tz) {
			var user = new GlideRecord("sys_user");
			user.get("user_name", gs.getUserName());
			if (user.getValue("time_zone") != usr_tz) {
				user.setValue("time_zone", usr_tz);
				user.update();
			}
		}
	},

	type: 'TimeZoneAjax'
});

That's all it takes. You can verify that the scripts are working by navigating to your user profile, and then updating the time zone from the UI settings.  You should see your profile timezone setting live update to match the UI setting.

I hope this helps you if you are facing the same issue.