by Gratsiela Georgieva, Senior Technical ServiceNow Consultant, Do IT Wise 

One of the challenges that businesses face nowadays is to meet the expectations of their employees in the workplace. That includes every application or digital product they use in their job to be as fast and simplified as possible and be more similar to the apps and technologies they are used to in everyday life.  

Often users are not satisfied when they do not see any of the expected functionalities and they need to take extra steps to find and access them. One of the frequently received requests is for implementing a Language Picker on the ServiceNow Portal page. So below we are sharing how to do it easily by yourself.

In a baseline instance, when the user is logged-in in ServiceNow and goes to the portal, the language can be changed from Profile Settings. 

Even if this option is available in the portal, a lot of clients are still asking us to implement such functionality in a more user-friendly way.

Problem

The clients want to have this option available in the header of the portal and not under Profile Settings. 

Solution

And what we can do is to develop a new widget that can be called from the header and provide this functionality. It only takes а few simple steps. 

Here are the steps: 

1. Go to Service Portal > Widgets and click on the “New” button 
2. Enter name (required), ID (required) and description (optional). For example, name = Language Picker, id = language-picker 
3. Body HTML template (HTML)

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
      <span>${Language}: <b>${{{data.language}}}</b> <span class="flag-icon flag-icon-{{data.icon}}"></span></span>
    </a>
    <ul class="dropdown-menu">
      <li ng-repeat="lang in data.languages"><a ng-click="setLanguage(lang.value)">${{{lang.label}}}</a></li>
    </ul>
  </li>
</ul>

4. CSS 

.dropdown-menu {
	cursor: pointer;
}

5. Client controller 

api.controller = function ($scope, $window, $timeout) {
	$scope.setLanguage = function(value,label) {
		$scope.data.newLanguage = value;
		$scope.server.update();

		$timeout(windowRefresh, 250);
		function windowRefresh() {
			$window.location.reload();
		}
	};
}

6. Server script

(function() {
	data.language = gs.getUser().getLanguage();
	
	var lang = new GlideRecord("sys_language");
	lang.addQuery('active', 'true');
	lang.orderBy('name');
	lang.query();
	while (lang.next()) {
		var language = {};
		language.label = lang.getValue('name');
		language.value = lang.getValue('id');
		data.languages.push(language);
	}

	//data.languages = languages;

	if (input.newLanguage) {
		var user = gs.getUser();
		user.setPreference("user.language", input.newLanguage);
		user.savePreferences();
	}

})();

7. Clone the “Stock Header” widget and replace the baseline with the newly created in the required portal. 
You can read more about the cloning, the structure, and the configuration of the Service Portal Header in our blog.

8. Call the “Language Picker” widget from the cloned widget by following these steps: 
8.1. In the HTML of the cloned widget (step 7) add the following line of code 

<li><sp-widget widget="data.languagePicker"></sp-widget></li>

For example, you can add it ABOVE this code: 

<li ng-if="showAvatar" class="hidden-xs dropdown" role="presentation">
          <a href class="toggle-dropdown" data-toggle="dropdown" aria-expanded="false" title="{{::data.profileBtnMsg}}" aria-label="{{::data.profileBtnMsg}}: {{::user.name}}" id="profile-dropdown"  role="menuitem" aria-haspopup="true">
            <span class="navbar-avatar" aria-hidden="true"><sn-avatar class="avatar-small-medium" primary="avatarProfile" /></span>
            <span class="visible-lg-inline">{{::user.name}}</span>
          </a>........

8.2. In the Server script of the cloned widget (step 7) add the following line of code (for example, at the end of the script): 

data.languagePicker = $sp.getWidget("language-picker", {});

With these 8 simple steps, you can see how easy it is to create new functionality in the ServiceNow Portal which gives more value to the users and the business. Feel free to modify the code so that you can complete your requirements. 

We hope you find this information useful and will help you to improve your workspace. If you have any questions, don’t hesitate to reach out to the Wise team. 

Check out our latest blog post about Removing duplicates.