SAP Fiori, Fiori, SAPUI5

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.

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.

SAP Fiori, Fiori, SAPUI5

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”.

SAP Fiori, Fiori, SAPUI5

  • 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).

SAP Fiori, Fiori, SAPUI5

  • In this point you can see the standard Fiori login page:

SAP Fiori, Fiori, SAPUI5

… 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

SAP Fiori, Fiori, SAPUI5

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:

SAP Fiori, Fiori, SAPUI5

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:

SAP Fiori, Fiori, SAPUI5

Leave a Reply

Your email address will not be published. Required fields are marked *