Language Switch on Service Portal
Introduction
We have come across various projects in which there is a requirement for Language Switch on Service Portal to simply set language as per user's preference.
Pre-requisites
This functionality works for only if system has two languages.
Solution
For this a widget needs to be created then it can be placed in a page or can be invoked in another widget as per the requirement. It checks for user's language preference and update it on switch movement.
As, switch is a kind of checkbox which only controlled with (YES/NO) values but preference "user.language" returns the language code. Hence, language code is translated to YES/NO values through server/client script.
Output
I have chosen two languages as English(ENG) & Chinese(CH).
Disabled-switch = ENG (Language will be set English)
Enabled switch = CH (Language will be set Chinese)
Widget Configurations
HTML Template:
CSS:
@media screen and (-ms-high-contrast: active) { .input-switch [for="languages-enabled"] { background-color: blue;
border: none;
&:before { background-color: highlightText; } } .input-switch [for="languages-enabled"] { background-color: window;
border: 1px solid windowText;
&:before { background-color: windowText; } }
}
Server Script:
(function() { data.title=gs.getMessage("Language Picker"); // set Title data.sysUserID = $sp.getParameter("sys_id"); //get sys-id of user data.userPreferences = getUserPreferences(data.sysUserID); //get current preference of user function getUserPreferences(userID){ var user = GlideUser.getUserByID(userID);if(user.getPreference('user.language') == "zh") return { languages: { key: 'user.language', value: 'YES' } }; else return { languages: { key: 'user.language', value: 'NO' } };}
})();
Client Controller:
api.controller=function($scope,userPreferences,$window) { /* widget controller */ var c = this; $scope.toggle = function(e, userProperty) { if (e.type === 'keypress' && e.keyCode === 32) { userProperty.value = !userProperty.value; $scope.setUserPreferenceValue(userProperty); } }; $scope.setUserPreferenceValue = function(userProperty) { var initialVal = userProperty.value;if(userProperty.key == "user.language" && userProperty.value == "YES") { userProperty.value = "zh";} else if(userProperty.key == "user.language" && userProperty.value == "NO") { userProperty.value = "en";} userPreferences.setPreference(userProperty.key, userProperty.value).then(function() { $scope.data.userPreferencesChanged = true; }); userProperty.value = initialVal; $window.location.reload(true);};
};
Open for suggestions or questions
Share the knowledge and have fun with development!
Video link for explanation & demonstration of this feature
https://www.servicenow.com/community/itsm-articles/language-switch-on-service-portal/ta-p/2315441