Skip to Content

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



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:


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

Leave a Reply