Simple steps to configure Fiori Login\Logoff Page
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?
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.
You will be required to perform one or all of the following aspects of the login page:
- Configuration of Login Screen for Launchpad Designer to “New” SAP Fiori Login Page
- Replace the images in the Login page
- Replace the SAP logo on Login page
- 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:
- Under SICF transaction, navigate to default_host > sap > bc > ui5_ui5 > ui2 >ushell
- Click on the tab “Error Pages” and navigate to tab “Logon Errors”.
- Select System Logon radio button and choose Configuration button. Enter the following:
- Under Settings Selection section, select Define Service-Specific Settings radio button.
- Under Logon Layout and Procedure section, select Custom Implementation radio button and enter /UI2/CL_SRA_LOGIN in the ABAP Class field.
- Save your entries.
Once the configuration shown is complete, the login screen should appears as shown in the below image.
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/”.
To replace the background image, Right-Click on the “login_background.jpg” file. Under the context “Upload/Download” select option “Upload and Replace”.
In the windows prompt, select the custom file (in your local disk) which you wish to set as the background.
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.
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
Instead you can configure the page to be redirected to loginpage.
- Login to Fiori ECC system having proper authorization.
- Execute transaction SICF and go to node /sap/public/bc/icf/logoff
- 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
- Click on Save button to save your entries.
- After clicking on Save button, the wizard will prompt for credentials. The password entry needs to be made here to complete this implementation.