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:
<div>
<div class="body padder-xs">
<label>{{data.title}} </label>
<div class="input-switch">
<input type="checkbox"
ng-init="data.userPreferences.languages.value" // initialize with current preference
ng-change="setUserPreferenceValue(data.userPreferences.languages)" //modify user preference
ng-model="data.userPreferences.languages.value" // adjust HTML for modified preference
name="languages-enabled" id="languages-enabled"
ng-true-value="'YES'" ng-false-value="'NO'"/>
<label class="switch" for="languages-enabled" ng-click="toggle($event, data.userPreferences.languages)" role="presentation" aria-hidden="true"><span>${ENG CH }</span></label>
</div>
</div>
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!
Hi Feddy,
All good, hoping same for you.
In this language array, store your language backend value. Try it and let me know in case of concerns
language:{es, fr}
