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: