The CreatorCon Call for Content is officially open! Get started here.

Self service portal: Add language option on login page

lomouhamadou
Kilo Guru

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

1 ACCEPTED SOLUTION

brett_karl
ServiceNow Employee
ServiceNow Employee

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



  1. Import the widget record that is attached to this reply
  2. Navigate to your header
  3. 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:


Screen Shot 2016-08-19 at 2.50.27 PM.png


Please let me know if you any more help!


View solution in original post

44 REPLIES 44

Yes I did. It's very close. See my reply to this thread with the update set and instructions.


Hai Brett,



I'm unable to access that link!



Regards,


Sri Vidya


brett_karl
ServiceNow Employee
ServiceNow Employee

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



  1. Import the widget record that is attached to this reply
  2. Navigate to your header
  3. 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:


Screen Shot 2016-08-19 at 2.50.27 PM.png


Please let me know if you any more help!


It seems good for me. Just what I needed. However you have a mismatch between variables data.languageSelector and data.languagePicker. So it'll doesn't work unless you use the same variable names. e.g.


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

Thanks and this is what I wanted.



However, could you please help me understanding a code snippet of Server and Client Controller. I am having difficulties understanding the variable part input.newLanguage - from where it comes, where it is defined, how it takes the input value and how its associated with the widget. Please see highlighted portions



find_real_file.png



Thank you so much for help!


Sudipta