In some cases the customer needs a personalized login based on standard Fiori logon.
This tutorial shows how to customize the standard fiori login.
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:
