Skip to Content
Author's profile photo Enric Castella Gonzalez

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.

This tutorial is based on https://archive.sap.com/discussions/thread/3904983

 

 

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.

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

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

 

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

… 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

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:

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:

 

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Great manual! Thanks.

      Author's profile photo Suhas Narasimhan
      Suhas Narasimhan

      Hi Enric,

      Thanks for the blog. I have made all the changes as per the blog, but my launchpad still seems to be picking up the properties from the original class and not my custom class. Anything that I am missing?

       

      Thanks

      Suhas

      Author's profile photo Rahul Sagane
      Rahul Sagane

      Hello,

      Can you please provide pointer on how to Add a custom Page/template (Which has a field on it for the user to agree to certain things when he clicks login) . Like End user Agreement.

       

      so the Flow would be like this Launch Fiori --> Login Page--> User enters user name and password --> Based on certain validation the User is displayed with CUSTOM Page described above --> User Agrees or selects --> proceed to the Fiori Dash board--> END

       

      Thanks!

      Rahul

      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez
      Blog Post Author

      Hi Rahul,

       

      In my opinion for this flow you must to create a new intermediate page in the same page of login because after send credentials de system redirect to launch page .

       

      Best regards,

      Author's profile photo Rahul Sagane
      Rahul Sagane

      Hi Enric,

      Thanks and sorry for late reply As I was trying something which did not work.

       

      Can you please elaborate little more on this.

      How to link the intermediate page in between the standard SAP Fiori  Logon and Launch Pad?

       

      Author's profile photo Atul Dumbre
      Atul Dumbre

      Dear Enric,

      How can we add custom text in the Fiori Logon Page . Suppose I want to share a downtime message or some alerts on the logon page . Is there any way to achieve this .

       

      Best Regards

      Atul

      Author's profile photo Roberto Carini
      Roberto Carini

      Hi Enric,

      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