SAP Fiori for SAP S/4HANA – Customizing SAP Fiori Launchpad Logon Page

The moment the users logs into the SAP Fiori Launchpad is critical as it defines the initial experience of the user with the system.

In cases where customers are only using basic authentication (meaning authentication through user and password), this initial experience comes from the standard logon page which is provided by standard class /UI2/CL_FIORI3_LOGIN. This standard class might not suit your custom branding requirements, hence the need to extend this logon page.

Why is this needed?

In this scenario, when using basic authentication, you want to delight your users from their first interaction with the system, and you want to display a nice page design that transmits a feeling of innovation, for example:

Sample logon page

How to achieve this modification?

Overall, the required modifications imply creating a custom class which redefines method: INIT_DEFAULT_PROPERTIES from standard class /UI2/CL_FIORI3_LOGIN. In this redefined method we are then able to adjust property values or include custom CSS classes, JS code or images that have been uploaded into the MIME repository as custom objects.

Development Architecture

Multiple authors have covered this extension requirement, all of them with valid approaches, for example:

• Customize the SAP Fiori logon page
• How to customize the Fiori launchpad logon screen?
• How to Make Customizations in the SAP Fiori Logon Landing(Launch) Page?
• Simple steps to configure Fiori LoginPage

Why do we need a new blog talking about this topic?

You really don’t need it, plus, the SAP documentation has been updated to reflect the best practice for extending the logon page: Customizing the Login Screen

What you might really need is an example document detailing all the steps and options to customize the logon page. For example:

• How to add files to the MIME repository
• How to test without disturbing end-users
• How to modify the value of a property
• How to include custom JS script to add custom logic
• How to include a custom CSS class to override standard styles

You will find such examples in the following Github repository:

Customize SAP Fiori Logon Page

Becoming a SAP Fiori for SAP S/4HANA guru

You’ll find much more on the community topic page for SAP Fiori for SAP S/4HANA

Other helpful links in the SAP Community:

• Follow our tag SAP S/4HANA RIG for more from the SAP S/4HANA Customer Care and RIG
• See all questions and answers about SAP Fiori for SAP S/4HANA
• Follow SAP Fiori for SAP S/4HANAfor more blogs and updates
• Ask a Question about SAP Fiori for SAP S/4HANA

Brought to you by the SAP S/4HANA Customer Care and RIG.