Skip to Content

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


/wp-content/uploads/2016/03/fiori_login_915847.png

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:

login_configuration.JPG

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


flexso_loginpage.JPG

To report this post you need to login first.

4 Comments

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

    1. Stephanie Lemoine Post author

      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 🙂

      (0) 
  1. Steffen Schmid

    Hi Stephanie,

    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?

    Greetings, Steffen

    (0) 

Leave a Reply