Skip to Content

Introduction:

This document intends to list down some of the basic yet scattered configuration of the Fiori Login Page.

If you are new to Fiori, refer the document What is SAP Fiori UX?


Intended Audience:

The content of document is produced for consultants either as developers or basis administrators. It is however open to the rest of the SAP community.

Login Page Configuration:

  The Fiori Launchpad is the landing page for Fiori applications. As with the portal, the user has to pass through the login page. The standard solution offers a basic login page.

Basic Login Page.png
















You will be required to perform one or all of the following aspects of the login page:

  1. Configuration of Login Screen for Launchpad Designer to “New” SAP Fiori Login Page
  2. Replace the images in the Login page
  3. Replace the SAP logo on Login page
  4. Modify the CSS of the Login page

Configuration of Login Screen for Launchpad Designer to “New” SAP Fiori Login Page:

To perform this configuration, you needs the administrator rights on the system.

The steps to be followed are as follows:

  1. Under SICF transaction, navigate to default_host > sap > bc > ui5_ui5 > ui2 >ushell
  2. Click on the tab “Error Pages” and navigate to tab “Logon Errors”.
  3. Select System Logon radio button and choose Configuration button. Enter the following:
    1. Under Settings Selection section, select Define Service-Specific Settings radio button.
    2. Under Logon Layout and Procedure section, select Custom Implementation radio button and enter /UI2/CL_SRA_LOGIN in the ABAP Class field.
    3. Save your entries.

Config of Login Screen for Launchpad Designer.jpg

Once the configuration shown is complete, the login screen should appears as shown in the below image.


New-Login page for Fiori.jpg

Replace the images in the Login page:

Once you have the login page configured, you may have to replace the images in the login page.

The class “/UI2/CL_SRA_LOGIN” is the implementation of the “New” login page. You can navigate through the class and its methods to get a deeper insight into the logic behind the construction of the login page.


In the class, the method “INIT_DEFAULT_PARAMETERS” is used to set the images and style-sheets for the login page.

To Replace the image  Goto Transaction SE80.

The background image for the login page is located in the mime repository under the path:/sap/public/bc/ui2/logon/img/”.

mime.PNG


To replace the background image, Right-Click on the “login_background.jpg” file. Under the context “Upload/Download” select option “Upload and Replace”.


Option to replace the image.png

In the windows prompt, select the custom file (in your local disk) which you wish to set as the background.

Job Done.


Note: The file name will still be “login_background.jpg” but internally the image will be replaced with your custom image.


Replace the SAP logo on Login page:

Follow the steps performed to replace the background image. Perform the “Upload and Replace” on the sap_logo.png file.


Note: SAP may prompt you to choose a transport request under which the change is to be performed.

Modify the CSS of the Login page:

The CSS file for the login page is set to a file in the mime repository. The file name is “template_css.css” and the path to it is: “/sap/public/bc/ui2/logon/”.


Option 1: Change the file “template_css.css”


Right-Click on the “template_css.css” file. Select option “Change…” Now, a text editor should open the CSS file.

Perform the modifications to the file and “Save” your changes.


Note: Transport request may be required to save your changes.


Option 2: Enhance/Modify the method “INIT_DEFAULT_PROPERTIES”


Modify the method “INIT_DEFAULT_PROPERTIES” code to refer you your custom CSS file in the mime repository.

Method Init_default_properties.png

Note: Access Key would be required to perform your changes on the standard method.


Log off screen configuration: ( credits @Yuraj Singh ) 

By default log off screen would be set as below

/wp-content/uploads/2014/11/logout_617412.png

Instead you can configure the page to be redirected to loginpage.

  1. Login to Fiori ECC system having proper authorization.
  2. Execute transaction SICF and go to node /sap/public/bc/icf/logoff
  3. Once the service loads,  navigate to Error Pages->Logoff Page->Redirect to URL. Click on the pencil icon on the top left screen and enter the redirection URL as/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html
  4. Click on Save button to save your entries.
  5. After clicking on Save button, the wizard will prompt for credentials. The password entry needs to be made here to complete this implementation.

References:

Configuring Login Screen for Launchpad Designer

To report this post you need to login first.

38 Comments

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

  1. Jeremy Good

    Any artists out there who would like to share their creativity and include a screen capture of their login page user experience?  Perhaps even share additional lessons learned for the CSS theming in a blog?

    Best Regards,

    Jeremy Good

    Customer Experience Group – CEG

    (0) 
  2. Sandip Agarwalla

    if you upload the images under the strandard mime repo – /sap/public/bc/ui2/logon/img/ , would an upgrade on the gateway server not over-write the changes? I think the upgrade would reset the SAP repository.


    Jeremy Good  – Any pointers?


    Thanks

    Sandip



    (0) 
    1. Jeremy Good

      Hi Sandip,

      I’m not a basis expert, but based upon how I am interpreting the directions within the help documentation link at the bottom of this blog, it would appear all of the image hooks are provided exactly for upgrade safe purposes.

      Best Regards,

      Jeremy Good

      (0) 
      1. Sandip Agarwalla

        Thanks Jeremy.

        As an alternate, I was trying to create another folder at the same level of UI2 and keep the images there. However the folder is not accessible

        I created the folder (thru SE80) , under /sap/public/bc/myfolder…All the images are under myfolder..while accessing the image using url, http://<server&gt;:8000/sap/public/bc/myfolder/sap_logo.png

        it gives an error of 404. are there any other configurations to be done to access images from a different folder?

        Thanks

        Sandip

        (0) 
        1. Sharath M G Post author

          I am not sure about the impact on Mime repository on upgrade. But, if you wish to use your images then you may have to edit the code which referes to the custom folder in mime repository.

          (0) 
  3. Kevin Deuel

    Hi Sharath,

    Very helpful, thank you for this!

    One question. In the Properties method, we can adjust text and things, but we need to remove the Change Password button, do you know how that would be done?

    Thanks!

    -Kevin

    (0) 
    1. Sharath M G Post author

      You can make use of the CSS file to hide the “Change Password” button.

      Set the display:none to the tag linked to the Change Password button.

      Regards,

      Sharath

      (0) 
      1. Kevin Deuel

        Thanks Sharath, that is what we ended up doing.

        I had hoped they might have something in a config somewhere where we could not allow changing the Password, but could not find it.

        Thanks!

        -Kevin

        (0) 
  4. Lipsa Senapati

    Hi Sharath,

    Thanks a lot for this document. This is really helpful !!

    However, I could not work it out for Logoff screen.

    I did the setting in my ECC System as below:

    logoff.PNG

    But the logoff screen is still showing the default. Have I missed something here?

    Regards,

    Lipsa

    (0) 
    1. Ameen Syed

      Hi Lipsa,

      Even we are facing same problem, did you resolve the problem.

      Please let me know the solution if you have.

      Thanks

      Syed

      (0) 
  5. Resha D'souza

    Hi sharath,

    will an upgrade to the gateway server overwrite all mime repository objects??

    is there any other alternative to this as the client is relunctant to edit standard sap object?

    (0) 
    1. Sharath M G Post author

      Very much possible as the files could be reset.

      Should be prepared to perform this task as after-upgrade activity.

      Regards,

      Sharath

      (0) 
  6. Wolfgang Mayer

    Hi Sharath,

    is it possible to use an own class (inheriting from /UI2/CL_SRA_LOGIN) rather than overwriting the SAP standard images and/or enhancing/modifying the standard class?

    Regards

    Wolfgang

    (0) 
    1. Sharath M G Post author

      Yes, pretty much possible. But its more complicated than replacing the images in the existing class.

      I would not rewrite he logon class as I do not find any distinct advantage in doing it.

      Regards,

      Sharath

      (0) 
  7. Ivan Femia

    I would suggest to use the UI Theme Designer tool instead of changing standard images and CSS url in the stardard classes.

    (0) 
      1. Ivan Femia

        Instead of changing the standard class “/UI2/CL_SRA_LOGIN”, you should implement you custom implementation of the login page. You should never change that class, but implementing your own.

        Then from use the UI Theme Designer to customize your theme for all the other pages from there…

        (0) 
        1. Sharath M G Post author

          Interesting 😎 . But, when you say implement your custom implementation, do you mean we create a copy of the standard class and edit the required aspects of the class?

          Also, how should the customer plan in case of system upgrade?

          Regards,

          Sharath

          (0) 
          1. Ivan Femia

            You just have to create a custom implementation having /UI2/CL_SRA_LOGIN as a superclass and redefine just the methods that you need (usually you just need HTM_LOGIN method).

            No issues after a system upgrade, changing the standard /UI2/CL_SRA_LOGIN is more problematic in terms of system upgrade.

            (0) 
  8. Frank Schuler

    Hello Sharath and Yuraj,

    thank you very much for this helpful blog.

    However we got a problem at step 5. of configuring the logout screen to be the login screen. When pressing Save, we are not prompted for credentials but only got an error message that credentials are missing:

    Enter user password.png

    Where are we supposed to provide this password please, for what user is it and what is it in fact needed for?

    Many thanks in advance

    (0) 
    1. praveen y

      Hi Frank,

      In the logon Data tab user is mentioned, there u can provide password or else remove the user and save it.

      Regards,

      Praveen.

      (0) 
      1. asha reddy

        Hi praveen,

        Even me too facing the same issue while saving .thn i did as u told…even though the theme dint get change

        (0) 
  9. Omar Lkhluf

    Good post,

    But I think It is better to create a inhereting class from /UI2/CL_SRA_LOGIN and redefine method INIT_DEFAULT_PROPERTIES like this :

    m_txt_copyright = |Copyright © | && sydatum(4) &&  | my Company. All rights reserved|.

         CALL METHOD super->init_default_properties

           EXPORTING

             iv_context = iv_context.

       set_property( iv_name = ‘img_logo’ iv_value = ‘/sap/public/bc/ui2/zmime/mylogo.png’ ).

       set_property( iv_name = ‘img_background’ iv_value = ‘/sap/public/bc/ui2/zmime/mybakground.png’ ).

    (0) 
  10. Jan Rumig

    Hi Sharath,

    if one overwrites the images, they are gone and cannot be recovered if needed. In addition, they will be reset after an upgrade of the SAP component.

    I would rather recommend to create an own class which inherits from the /UI2/CL_SRA_LOGIN. Just overwrite method INIT_DEFAULT_PROPERTIES and first call the superclass to get all the parent settings.

    Best regards,

    Jan

    (0) 
  11. Firoz Ashraf

    Hi,

    We have followed the same procedure but still the Fiori Launchpad Login screep appears same.

    We did the following:

    1. Under SICF transaction, navigate to default_host > sap > bc > ui5_ui5 > ui2 >ushell
    2. Click on the tab “Error Pages” and navigate to tab “Logon Errors”.
    3. Select System Logon radio button and choose Configuration button. Enter the following:
      1. Under Settings Selection section, select Define Service-Specific Settings radio button.
      2. Under Logon Layout and Procedure section, select Custom Implementation radio button and enter /UI2/CL_SRA_LOGIN in the ABAP Class field.
      3. Save your entries.

    Config of Login Screen for Launchpad Designer.jpg

    But still we are getting the same login screen as before.

    /wp-content/uploads/2016/02/fiori_login_case_880857.jpg

    Any help wold be highly appreciated.

    Regards,

    Firoz.

    (0) 
    1. Sharath M G Post author

      Hello Firoz,

      I find this logon screen more of authentication pop up by windows and not the default screen provided by SAP.

      Re-look at the configuration and try it.

      Regards,

      Sharath

      (0) 
    1. Sharath M G Post author

      Thanks Ritesh.

      However, to my shock my blog has been removed by soem moderator as the suspect that this could be a copy act. A blog which was created almost a year ago and which was included in the main Fior blog, has all of sudden been flagged as a copy.

      Support from you and others has kept me still going, instead of quitting SCN.

      Thanks.

      Regards,

      Sharath

      (0) 
  12. Johnny Muñoz

    Hi Sharath,

    I have a problem. In a tablet, I use the Fiori Client 1.4 because the more new worked bad with our aplications. But, in the moment of the logoff, don’t is requested new credentials and reopens again the Fiori launchpad con the same user.

    Thanks for your help,

    Johnny

    (0) 
  13. V. Menta

    Hi Sharath,

     

    Thanks for this wonderful document.

    I wan to display SM02 messages on the fiori Login screen. I did the below config for the UShell service under SICF ,as per the below attachment.

     

     

     

    But still I am not able to view the SM02 Messages on Fiori Login screen.

     

    (0) 

Leave a Reply