How to make Fiori Launchpad Login Page multi-language!?

If you configed a fiori launchpad you probably noticed that despite it has a language dropdown, by changing the language of the dropdown the language of the login page is not changed.

For example in the following figure you can see that user changed the language to English but the login page still is in German.

Figure 1: A Fiori Launchpad

If user really wants to see the login page in the selected language, actually must change a HTTP GET parameter in the url or add it if it does not exist and load the page again. That GET parameter is sap-language.

For example for visiting the login page in English language user must add ?sap-language=EN to the url or if it already exists in the url with another locale code (e.g. &sap-language=DE ) then he or she must change that locale code to the desire locale (e.g. to EN for English instead of DE which is for German).

It is a little bit annoying and of course all the users do not have enough knowledge regarding these changes, so I tried to find a way to solve this issue.

For the rest of this tutorial we assumed you know how to create a custom launchpad in SAP On Premise System, and you have a customised launchpad currently.

When you created a launchpad in SAP NetWeaver you mostly used SICF transactions in your steps, this is the place that we need to start our investigations.

Execute the SICF transaction (like figure 2) and then press on Execute (F8) button on the new opened view.

Figure 2: SICF 

After pressing the execution button you have to see a window like the figure 3.

Figure 3: After Execution

Select the default_host from the list and the find the ushell under the following path: /default_host/sap/bc/ui5_ui5/ui2/, then double click on ushell.

You have to see a view like the figure 4.

Figure 4: “/default_host/sap/bc/ui5_ui5/ui2/ushell” view

Now select the Error Pages tab and press on Configuration button.

Figure 5: Error Pages view

You must see a window similar to figure 6. What is important in System Logon Configuration window is the ABAP Class textbox.

Normally, you will see the name of the class that is from SAP originally and contains the login page code. This class is /UI2/CL_SRA_LOGIN. This class involves some HTML, CSS and JS codes. What you see as a login page is the result of compiling the codes that were enclosed inside of this class.

Figure 6: System Logon Configuration Window

Now, we have to make a copy of this class because we need to modify a method in this class. You can use the transaction code SE24 to copy the class. I hope you know how to make a copy as it is not relevant to this post’s aims.

I called my copied class ZCL_ZMDM_LOGIN_CUST. After you made your copy successfully, you have to edit the content of the System Logon Configuration window and put the name of your newly created class instead of the default class. At the end you have to have something like figure 7.

Figure 7:  System Logon Configuration Window after customizing

Now open the copied class inside of the SE80 transaction.

Figure 8: SE80

Figure 9: Display class ZCL_ZMDM_LOGIN_CUST inside the SE80

Scroll down in the list of methods and find the INIT_JAVASCRIPT function. The original code is something like the following:

METHOD INIT_JAVASCRIPT.
  DATA lv_javascript TYPE string.
  DATA lv_context_js TYPE string.

  lv_context_js = get_context_javascript( iv_context ).
  CONCATENATE '<script>' iv_javascript co_crlf lv_context_js '</script>' INTO lv_javascript.
  set_property( iv_name = 'sys_script_generated' iv_value = lv_javascript ).

ENDMETHOD.

And you have to change it like this:

METHOD INIT_JAVASCRIPT.
  DATA lv_javascript TYPE string.
  DATA lv_context_js TYPE string.

  lv_context_js = get_context_javascript( iv_context ).
*  CONCATENATE '<script>' iv_javascript co_crlf lv_context_js '</script>' INTO lv_javascript.
" 2017-03-15 - 9:00 Start MJZ Edit
  CONCATENATE '<script>' iv_javascript co_crlf lv_context_js '</script>'
  '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>'
  '<script>'
  'function replaceUrlParam(url, paramName, paramValue){'
  '  if(paramValue == null)'
  '      paramValue = ""; '
  '  var pattern = new RegExp("\\b("+paramName+"=).*?(&|$)");'
  '  if(url.search(pattern)>=0){'
  '      return url.replace(pattern,"$1" + paramValue + "$2");'
  '  }'
  '  return url + (url.indexOf("?")>0 ? "&" : "?") + paramName + "=" + paramValue;'
  '}'
  '$( document ).ready(function() {'
  '  var oLang = $("#LANGUAGE_SELECT");'
  '  $("#LANGUAGE_SELECT").change(function(oEvent){'
  '     var sLang = $(this).val(); '
  '     var sUrl  = window.location.href; '
  '     var sNewUrl = replaceUrlParam(sUrl, "sap-language", sLang);'
  '     window.location.replace(sNewUrl);'
  '});'
  '});'
  '</script>'
" 2017-03-15 - 9:00 End MJZ Edit
  INTO lv_javascript.
  set_property( iv_name = 'sys_script_generated' iv_value = lv_javascript ).

ENDMETHOD.

This code try to reload the page with suitable locale as soon as user change the language on login page.

Now Check (Ctrl + F2) and Activate (Ctrl + F3) the class.

Return back to the path /default_host/sap/bc/ui5_ui5/ui2/ushell inside of the transaction SICF. Right click on the ushell and select the Test Service option from the context menu. 

Figure 10: Context menu of ushell

By clicking on Test Service option you probably must allow execution of the file. Press on Allow in case you see a window like figure 11.

Figure 11: Execution of ushell service.

After loading of the launchpad url inside of your browser you must be able to see the possibility to automated reloading the launchpad as soon as user changed the language dropdown. Something like figure 12.

Figure 12: View of the added functionality

If you review the HTML source code of the launchpad, then you have to see the highlighted codes inside of the figure 13 has been added to your page as well.

Figure 13: The highlighted codes are added to the launchpad.

I hope you find it useful.