Simple steps to configure Fiori Login\Logoff Page
Introduction:
This document intends to list down some of the basic yet scattered configuration of the Fiori Login Page.
If you are new to Fiori, refer the document What is SAP Fiori UX?
Intended Audience:
The content of document is produced for consultants either as developers or basis administrators. It is however open to the rest of the SAP community.
Login Page Configuration:
The Fiori Launchpad is the landing page for Fiori applications. As with the portal, the user has to pass through the login page. The standard solution offers a basic login page.
You will be required to perform one or all of the following aspects of the login page:
- Configuration of Login Screen for Launchpad Designer to “New” SAP Fiori Login Page
- Replace the images in the Login page
- Replace the SAP logo on Login page
- Modify the CSS of the Login page
Configuration of Login Screen for Launchpad Designer to “New” SAP Fiori Login Page:
To perform this configuration, you needs the administrator rights on the system.
The steps to be followed are as follows:
- Under SICF transaction, navigate to default_host > sap > bc > ui5_ui5 > ui2 >ushell
- Click on the tab “Error Pages” and navigate to tab “Logon Errors”.
- Select System Logon radio button and choose Configuration button. Enter the following:
- Under Settings Selection section, select Define Service-Specific Settings radio button.
- Under Logon Layout and Procedure section, select Custom Implementation radio button and enter /UI2/CL_SRA_LOGIN in the ABAP Class field.
- Save your entries.
Once the configuration shown is complete, the login screen should appears as shown in the below image.
Replace the images in the Login page:
Once you have the login page configured, you may have to replace the images in the login page.
The class “/UI2/CL_SRA_LOGIN” is the implementation of the “New” login page. You can navigate through the class and its methods to get a deeper insight into the logic behind the construction of the login page.
In the class, the method “INIT_DEFAULT_PARAMETERS” is used to set the images and style-sheets for the login page.
To Replace the image Goto Transaction SE80.
The background image for the login page is located in the mime repository under the path: “/sap/public/bc/ui2/logon/img/”.
To replace the background image, Right-Click on the “login_background.jpg” file. Under the context “Upload/Download” select option “Upload and Replace”.
In the windows prompt, select the custom file (in your local disk) which you wish to set as the background.
Job Done.
Note: The file name will still be “login_background.jpg” but internally the image will be replaced with your custom image.
Replace the SAP logo on Login page:
Follow the steps performed to replace the background image. Perform the “Upload and Replace” on the sap_logo.png file.
Note: SAP may prompt you to choose a transport request under which the change is to be performed.
Modify the CSS of the Login page:
The CSS file for the login page is set to a file in the mime repository. The file name is “template_css.css” and the path to it is: “/sap/public/bc/ui2/logon/”.
Option 1: Change the file “template_css.css”
Right-Click on the “template_css.css” file. Select option “Change…” Now, a text editor should open the CSS file.
Perform the modifications to the file and “Save” your changes.
Note: Transport request may be required to save your changes.
Option 2: Enhance/Modify the method “INIT_DEFAULT_PROPERTIES”
Modify the method “INIT_DEFAULT_PROPERTIES” code to refer you your custom CSS file in the mime repository.
Note: Access Key would be required to perform your changes on the standard method.
Log off screen configuration: ( credits @Yuraj Singh )
By default log off screen would be set as below
Instead you can configure the page to be redirected to loginpage.
- Login to Fiori ECC system having proper authorization.
- Execute transaction SICF and go to node /sap/public/bc/icf/logoff
- Once the service loads, navigate to Error Pages->Logoff Page->Redirect to URL. Click on the pencil icon on the top left screen and enter the redirection URL as/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html
- Click on Save button to save your entries.
- After clicking on Save button, the wizard will prompt for credentials. The password entry needs to be made here to complete this implementation.
Any artists out there who would like to share their creativity and include a screen capture of their login page user experience? Perhaps even share additional lessons learned for the CSS theming in a blog?
Best Regards,
Jeremy Good
Customer Experience Group - CEG
Will give a try 🙂
if you upload the images under the strandard mime repo - “/sap/public/bc/ui2/logon/img/ , would an upgrade on the gateway server not over-write the changes? I think the upgrade would reset the SAP repository.
Jeremy Good - Any pointers?
Thanks
Sandip
Hi Sandip,
I'm not a basis expert, but based upon how I am interpreting the directions within the help documentation link at the bottom of this blog, it would appear all of the image hooks are provided exactly for upgrade safe purposes.
Best Regards,
Jeremy Good
Thanks Jeremy.
As an alternate, I was trying to create another folder at the same level of UI2 and keep the images there. However the folder is not accessible
I created the folder (thru SE80) , under /sap/public/bc/myfolder...All the images are under myfolder..while accessing the image using url, http://<server>:8000/sap/public/bc/myfolder/sap_logo.png
it gives an error of 404. are there any other configurations to be done to access images from a different folder?
Thanks
Sandip
I am not sure about the impact on Mime repository on upgrade. But, if you wish to use your images then you may have to edit the code which referes to the custom folder in mime repository.
Hi Sharath,
Great job, the document was quite useful for me 🙂
Welcome. Glad it was useful.
Regards,
Sharath
Hi Sharath,
Very helpful, thank you for this!
One question. In the Properties method, we can adjust text and things, but we need to remove the Change Password button, do you know how that would be done?
Thanks!
-Kevin
You can make use of the CSS file to hide the "Change Password" button.
Set the display:none to the tag linked to the Change Password button.
Regards,
Sharath
Thanks Sharath, that is what we ended up doing.
I had hoped they might have something in a config somewhere where we could not allow changing the Password, but could not find it.
Thanks!
-Kevin
welcome.
Regards,
Sharath
Hi Sharath,
Thanks a lot for this document. This is really helpful !!
However, I could not work it out for Logoff screen.
I did the setting in my ECC System as below:
But the logoff screen is still showing the default. Have I missed something here?
Regards,
Lipsa
Hi Lipsa,
Even we are facing same problem, did you resolve the problem.
Please let me know the solution if you have.
Thanks
Syed
Hi Lipsa,
Please do the changes on Gateway server not ECC.
Regards,
Ankita
Hi sharath,
will an upgrade to the gateway server overwrite all mime repository objects??
is there any other alternative to this as the client is relunctant to edit standard sap object?
Very much possible as the files could be reset.
Should be prepared to perform this task as after-upgrade activity.
Regards,
Sharath
Hi Sharath,
is it possible to use an own class (inheriting from /UI2/CL_SRA_LOGIN) rather than overwriting the SAP standard images and/or enhancing/modifying the standard class?
Regards
Wolfgang
Yes, pretty much possible. But its more complicated than replacing the images in the existing class.
I would not rewrite he logon class as I do not find any distinct advantage in doing it.
Regards,
Sharath
I would suggest to use the UI Theme Designer tool instead of changing standard images and CSS url in the stardard classes.
Hi Ivan,
I don't believe the Theme Designer handles logon or logoff, only the actual Fiori Launchpad ?
Instead of changing the standard class “/UI2/CL_SRA_LOGIN”, you should implement you custom implementation of the login page. You should never change that class, but implementing your own.
Then from use the UI Theme Designer to customize your theme for all the other pages from there...
Interesting 😎 . But, when you say implement your custom implementation, do you mean we create a copy of the standard class and edit the required aspects of the class?
Also, how should the customer plan in case of system upgrade?
Regards,
Sharath
You just have to create a custom implementation having /UI2/CL_SRA_LOGIN as a superclass and redefine just the methods that you need (usually you just need HTM_LOGIN method).
No issues after a system upgrade, changing the standard /UI2/CL_SRA_LOGIN is more problematic in terms of system upgrade.
FYI - This is what I did.
Hello Sharath and Yuraj,
thank you very much for this helpful blog.
However we got a problem at step 5. of configuring the logout screen to be the login screen. When pressing Save, we are not prompted for credentials but only got an error message that credentials are missing:
Where are we supposed to provide this password please, for what user is it and what is it in fact needed for?
Many thanks in advance
Hi Frank,
In the logon Data tab user is mentioned, there u can provide password or else remove the user and save it.
Regards,
Praveen.
Hi praveen,
Even me too facing the same issue while saving .thn i did as u told...even though the theme dint get change
Good post,
But I think It is better to create a inhereting class from /UI2/CL_SRA_LOGIN and redefine method INIT_DEFAULT_PROPERTIES like this :
m_txt_copyright = |Copyright © | && sy-datum(4) && | my Company. All rights reserved|.
CALL METHOD super->init_default_properties
EXPORTING
iv_context = iv_context.
set_property( iv_name = 'img_logo' iv_value = '/sap/public/bc/ui2/zmime/mylogo.png' ).
set_property( iv_name = 'img_background' iv_value = '/sap/public/bc/ui2/zmime/mybakground.png' ).
Hi Sharath,
if one overwrites the images, they are gone and cannot be recovered if needed. In addition, they will be reset after an upgrade of the SAP component.
I would rather recommend to create an own class which inherits from the /UI2/CL_SRA_LOGIN. Just overwrite method INIT_DEFAULT_PROPERTIES and first call the superclass to get all the parent settings.
Best regards,
Jan
Hi,
We have followed the same procedure but still the Fiori Launchpad Login screep appears same.
We did the following:
But still we are getting the same login screen as before.
Any help wold be highly appreciated.
Regards,
Firoz.
Hello Firoz,
I find this logon screen more of authentication pop up by windows and not the default screen provided by SAP.
Re-look at the configuration and try it.
Regards,
Sharath
Dear Sharath,
This is an awesome document. Really helpful, Keep up the good work!!
Regards
Ritesh Shetty
Thanks Ritesh.
However, to my shock my blog has been removed by soem moderator as the suspect that this could be a copy act. A blog which was created almost a year ago and which was included in the main Fior blog, has all of sudden been flagged as a copy.
Support from you and others has kept me still going, instead of quitting SCN.
Thanks.
Regards,
Sharath
Hi Sharath,
I have a problem. In a tablet, I use the Fiori Client 1.4 because the more new worked bad with our aplications. But, in the moment of the logoff, don't is requested new credentials and reopens again the Fiori launchpad con the same user.
Thanks for your help,
Johnny
Very Use full Thanks ?
Regards,
M.laxman Reddy
Welcome.
Hi Sharath,
Thanks for this wonderful document.
I wan to display SM02 messages on the fiori Login screen. I did the below config for the UShell service under SICF ,as per the below attachment.
But still I am not able to view the SM02 Messages on Fiori Login screen.
Rent Office in Netaji Subhash Place, Sell, Lease Buy Property
http://aadiproperties.co.in
Hi,
How to add client field in the logon screen. It will help if we have different clients and can follow one single link to logon.
You will have write custom class for the logon and link it in the SICF service.
How about the below scenario?
We have 2 clients for the front-end gateway system (100 & 500). We have configured an external alias for logoff page where we are redirecting to the Fiori logon page with sap-client property as 500, but issue is even when we open the Fiori launchpad of client 100 and do a logoff, it redirects to the logon page of client 500.
How to make the logoff external alias independent of the client?
I doubt if we can keep the client variable as dynamic.
Even I thought so, just wondering if there is any way out for such a situation.
Maybe have a custom page with hyperlinks for different clients. Redirect to the custom page link and user can have the options to chose the url of a specific client.
Hi Sharath,
I have a small edit to suggest , which you must consider mentioning in the blog.
FOR S4H the ICF location where you need to change the login class is :/sap/bc/ui2/flp
Sreehari.
Thanks for input. Let me check and then update it.