Self service portal: Add language option on login page

[lomouhamadou]

Hi all,

Is it any simple way on the new Self service portal for adding the language option on the login page as we have on the backend?

thanks in advance

Regs,

Lô Mouhamadou

[Thomas Wright-1]

Thanks Mouhamadou! I will try your method later.

The key lines of code seem to be:

var util = new I18nUtils(); 
util.setLanguage(language); 

Which I've not seen before. I look forward to giving it a try!

[lomouhamadou]

Indeed.

These 2 lines of code job. The rest is only the way you want to make it work.

Indeed, this script is not easy to find.

Please, do not forget to mark my answer as correct in case it does the job.

If you need help do not hesitate

[Thomas Wright-1]

Perfect Mouhamadou! I got the original widget working on the login page with your tip about I18nUtils. Thank you!

Here is my updated code which works on the login page without needing to be logged in, as well as on the internal Service Portal pages when logged in.

Note that the Widget must be made Public.

Server Script

var util = new I18nUtils();
data.language = gs.getUser().getLanguage();
if (data.language == 'en'){
   data.language = 'English';
}
else{
   var currentLang = new GlideRecord("sys_language");
   currentLang.addQuery('active', 'true');
   var userLang = '';
   if(gs.getSession().isLoggedIn()){
             userLang = gs.getUser().getPreference("user.language");
   }
   else {
             userLang = util.getLanguage();
   }
   currentLang.addQuery('id', userLang);
   currentLang.query();
   while (currentLang.next()) {
             data.language = currentLang.name.getDisplayValue();
   }
}


var languages = [];
var lang = new GlideRecord("sys_language");
lang.addQuery('active', 'true');
lang.orderBy('name');
lang.query();
while (lang.next()) {
   var language = {};
   language.label = lang.name.getDisplayValue();
   language.value = lang.getValue('id');
   languages.push(language);
}


data.languages = languages;
if(input.newLanguage){
   if(gs.getSession().isLoggedIn()){
             var user = gs.getUser();
             user.setPreference("user.language", input.newLanguage);
             user.savePreferences();
   }
   else{
             util.setLanguage(input.newLanguage);   
   }
}

Body HTML Template

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

Client 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();
             }
   };
}

[lomouhamadou]

Goog Job Thomas and thanks for sharing back the knowledge so other persons can enjoy it.

Hope to collaborate in the future on this community again

[fredklein]

Thank you thomaswright and lomouhamadou for your contributions on this topic as it is becoming a real pain in my neck.

I am trying to provide a registration form on service portal, obviously for non logged-in users. And I want to be able to switch language on the fly.

I've been trying various things and hope that your trick would solve my issue.

However I'm not able to set the language using

var util = new I18nUtils();
util.setLanguage(language);

When resolving UI messages (either gs.getMessage() or ${} in the html) they don't match the selected language.

Even calling util.getLanguage() right after util.setLanguage(language) always returns the same fixed language.

The widget where I'm calling I18nUtils() is public and in the global scope, but the registration form I am building is its own application scope.

Any further ideas?