Customization of SAP Fiori Logon page
In some cases the customer needs a personalized login based on standard Fiori logon.
This tutorial shows how to customize the standard fiori login.
This tutorial is based on https://archive.sap.com/discussions/thread/3904983
Step 1: Create SRA login class
This class contains all constants values to change images and some colors of Standard Fiori login.
- Go to transaction SE24
- Copy standard class: /UI2/CL_SRA_LOGIN.
Note: this class contains the method INIT_DEFAULT_PROPERTIES with all logon values. Later on I will explain how this method works.
Step 2: We assign the new custom login class to our application
- Goes to transaction SICF and route: default_host > SAP > BC > UI5_UI5 > your_application.
- Enter into the service related with your application and goes to tab “Error Pages” and then click on “Configuration”.
- In the next screen you can add your new custom login class.
- Select option “Define Service-Specific Settings” then select option “Custom Implementation”. Then in the input field “ABAP Class” add your new class (generated in step 1).
- In this point you can see the standard Fiori login page:
… So now, let’s got to personalize the logon page ;).
Step 3: Modify images and logos
- You can see all files related with logon page in transaction: SO2_MIME_REPOSITORY. In this transaction the logon is in standard route: SAP > PUBLIC > BC > UI2 > logon
Note: you can modify this files but then you lose the origianl logon files. So I recommend add a new folder in UI2 folder ( only need a left click ) and copy or add new files with your personalization.
- After add new files with your own personalization (you can use the original files login_background_xxx.jpg as template).
- It is time to modify the path of standard files and user your own files (so, we assume that we created a new folder in UI2 and we add new files in this folder).
- Goes to transaction SE24 and edit your custom login class. Goes to method INIT_DEFAULT_PROPERTIES.
- This method contains all parameterizations of custom login page, so we need to modify the path of new files. This path contains all images:
Step 4: Extra customizations
Sometimes is not enough to modify images. In these cases you can modify standard HTML login or css files.
- You can copy files from SAP > PUBLIC > BC > UI2 > logon using template_css.css and template_login.html
- In this case is necessary change standard path in your custom logon class:
Great manual! Thanks.
Thanks for the blog. I have made all the changes as per the blog, but my launchpad still seems to be picking up the properties from the original class and not my custom class. Anything that I am missing?
Can you please provide pointer on how to Add a custom Page/template (Which has a field on it for the user to agree to certain things when he clicks login) . Like End user Agreement.
so the Flow would be like this Launch Fiori --> Login Page--> User enters user name and password --> Based on certain validation the User is displayed with CUSTOM Page described above --> User Agrees or selects --> proceed to the Fiori Dash board--> END
In my opinion for this flow you must to create a new intermediate page in the same page of login because after send credentials de system redirect to launch page .
Thanks and sorry for late reply As I was trying something which did not work.
Can you please elaborate little more on this.
How to link the intermediate page in between the standard SAP Fiori Logon and Launch Pad?
How can we add custom text in the Fiori Logon Page . Suppose I want to share a downtime message or some alerts on the logon page . Is there any way to achieve this .
thanks for this blog!
I have create a copy of standard class, but when I try to start my service app, a double login appear, with popup and login page (see image) . Can you help to solve this ?
If I configure service using standard class (/UI2/CL_SRA_LOGIN), this issue not appear...