Self service portal: Add language option on login page

lomouhamadou · ‎08-15-2016

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

brett_karl · ‎08-19-2016

I completed a widget solution that ties into the Service Portal Header.

Import the widget record that is attached to this reply
Navigate to your header
Find the following code in the Body HTML Template:

 <ul ng-if="::user.logged_in" class="nav navbar-nav">

               <!-- chat, avatar, and logout -->

               <li ng-if="::data.connect_support_queue_id"><a href ng-click="openPopUp()">${Live Chat}</a></li>

           

               <li class="dropdown hidden-xs">

                   <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">

                       <span class="navbar-avatar"><sn-avatar class="avatar-small-medium" primary="userID" /></span>

                       <span class="visible-lg-inline">{{::user.name}}</span>

                   </a>

Add the following code (to line 4):

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

Navigate down to Server Script and add the following line.

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

The end result will look like this:

Please let me know if you any more help!

View solution in original post

Alberto Consonn · ‎11-22-2018

Hi,

I have the same problem of sinanbulut, could someone help to get this work also in London release?

Thanks

Alberto

Aniko Hegedus1 · ‎12-21-2018

Hi,

Please note that the only way I managed to make it work was to make the naming identical!

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

Otherwise very useful.

SNOW46 · ‎04-04-2019

Hi,

I do have the same requirement. Can you help me on the same. I have configured the widget but I cant able to know how to add it in the header menu?

Thanks

monu1 · ‎05-02-2019

Hi Brett,

The same code is not working in IE browser but working fine in Google Chrome.

lomouhamadou · ‎03-03-2017

Hi guys,

I managed to make the language picker option works for non logged user and without error.

Here is how it works

HTML PART OF THE WIDGET

I have a div with a select for all the 3 languages We are using

When the language changes I call the function getLanguage from the client script part of the widget

	<div class="list-group-item">
	<label for="language" class="sr-only">${Language}</label>
	<select id="language" ng-model="c.data.language" ng-change="getLanguage(c.data.language)" class="form-control no-border">
	<option value="en">English</option>
	<option value="nl">Dutch</option>
	<option value="fr">French</option>
	</select>
	</div>

CLIENT SCRIPT PART OF THE WIDGET

$scope.getLanguage=function(language) {

c.server.update();

$window.location.href='?id=hr_login';

}

The c.server.update() refresh the value of the language in the server script function that makes the langague change

SERVER SCRIPT PART OF THE WIDGET

setLanguage(input.language);

function setLanguage(language) {

var util = new I18nUtils();

util.setLanguage(language);

}

Hope this help ypu out mates.

Please, do not forget to mark this post as "Correct answer" so other users can enjoy it as well.