Customize the SAP Fiori logon page
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.
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:
Though its easy method of changing images under MIME Repository in SE80 but this would also be helpful. Nice work Stephanie.
Thanks, if you look at the other properties you can set in this method, you will see that you can also set the colors of the buttons etc so using this method will give you more possibilities than only adjusting the images 🙂
Awesome, Can't wait to try the othr method properties and changing the color of button. Sounds goods.
Thanks for your description to change the login page, first I tried this way Simple steps to configure Fiori Login\Logoff Page but I think it should be better to create an own class. I have done all steps like described by you but I can't see any changes at my login page. If I modify INIT_DEFAULT_PROPERTIES in the original class /UI2/CL_SRA_LOGIN the changes come up. But I doublechecked the class name in SICF service USHELL, it's okay. In this post I mentioned above Ivan Femia is talking about HTM_LOGIN method, do I have to do an additional step to "switch" the class?
thanks for this blog!
I have create a copy of standard class, but when I try to start my service app, a double login appear, with popup and login page (see image) . Can you help to solve this ?
If I configure service using standard class (/UI2/CL_SRA_LOGIN), this issue not appear...