Customize the SAP Fiori logon page

[Former Member]

When you use the /UI2/CL_SRA_LOGIN class as your SAP Fiori logon class, you get the following SAP Fiori logon page:

Which is good looking, but customers might ask to put their own logo and background image on this logon page. In this blog I will show you how you can do this.

Custom Logon Class

Instead of using the /UI2/CL_SRA_LOGIN class, we will use our own class. Go to SE24 and create a copy of this class. In my example I call my custom class ZFIORI_LOGIN_CUST. Activate your class and go to the method INIT_DEFAULT_PROPERTIES. You will see that you have several customizing options in this method. For the background image and the logo, the following lines of code are what interests us:

 set_property( iv_name = 'img_logo' iv_value = '/sap/public/bc/ui2/logon/img/sap_logo.png' ).

 set_property( iv_name = 'img_logo_width' iv_value = '64' ).

 set_property( iv_name = 'img_background' iv_value = '/sap/public/bc/ui2/logon/img/login_background.jpg' ).

 set_property( iv_name = 'img_background_mobile' iv_value = '/sap/public/bc/ui2/logon/img/login_background_mobile.jpg' ).

 set_property( iv_name = 'img_background_mobile_land' iv_value = '/sap/public/bc/ui2/logon/img/login_background_mobile_land.jpg' ).

Upload your own images to the public repository, and adjust the url's to point to your own images. You can also change the width of the logo here.

SICF

In SICF, go to the service of the SAP Fiori launchpad: /default_host/sap/bc/ui5_ui5/ui2/ushell.

Under the tab 'Error Pages' -> 'Logon Errors' click on the 'Configuration' button and enter your custom login class:

If you now go to your Fiori url, you will see your customized login page: