Skip to Content
Author's profile photo Stephanie Lemoine
Stephanie Lemoine
March 25, 2016 1 minute read

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:


/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

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Joseph Chinnabathini
      Joseph Chinnabathini

      Though its easy method of changing images under MIME Repository in SE80 but this would also be helpful. Nice work Stephanie.

      Author's profile photo Stephanie Lemoine
      Stephanie Lemoine
      Blog 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 🙂

      Author's profile photo Pavan Golesar
      Pavan Golesar

      Awesome, Can't wait to try the othr method properties and changing the color of button. Sounds goods.

      Thanks Stephanie


      --PG

      Author's profile photo Steffen Schmid
      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

      Author's profile photo Roberto Carini
      Roberto Carini

      Hi Stephanie,

       

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

      Thanks!

      Regards

      Roberto

      Â