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.
Thanks @Mahdi Jaberzadeh Ansari . It's really useful!