Theming your Launchpad based on Quartz Fiori 3

The UI theme designer is the browser-based SAP tool for cross-theming scenarios—a single tool for theming and branding key SAP user interfaces. Use it to build your corporate identity themes quickly and easily by modifying theme templates provided by SAP (Community Page).

With the UI theme designer, you can create your own theme for the launchpad running in SAP Business Client for Desktop.

Quartz (Fiori 3) is also supported in the UI theme designer as base theme for SAP Business Client for Desktop.

Prerequisites for using Quartz as your base theme:

Available for on-premise customers with SAP S/4HANA 1909.

The new Quartz theme and the shell header bar are also available for older SAP S/4HANA releases and SAP Business Suite with the SAP Fiori front-end server 6.0.

How to Theme  =>  Step-by-Step

Starting the UI Theme Designer

On-Premise:

There are several ways to start the UI Theme Designer in your on-premise landscape.

Business Client connection:

Via the classic Business Client connection type simply enter the transaction  /UI5/THEME_DESIGNER in the Business Client Quick Launch.

Figure 1: Enter transaction code into Quick Launch

or

Fiori Launchpad Connection:

Using the Fiori Launchpad connection type, enter transaction  /UI5/THEME_DESIGNER in the Business Client Quick Launch.

You can also open the UI Theme designer via SAP Logon – if you are still using it :-). Also use transaction  /UI5/THEME_DESIGNER in your ABAP back-end system.

On-Cloud:

If you are using the SAP Fiori Launchpad Service (Fiori Launchpad on Cloud Foundry) follow the instructions provided here:

Accessing the UI Theme Designer on Cloud Foundry – SAP Help Portal

Note:

Currently it is not possible to create a custom theme on Cloud Foundry for the SAP Business Client. In this scenario, only the FLP and application pages displayed within the SAP Business Client are displayed in your custom theme, while the shell elements are displayed in the chosen SAP theme. We plan to change this as soon as possible.

Creating a New Custom Theme

Figure 2: Start Page UI Theme Designer

Choose Create a New Theme and select your base theme (I’ve chosen SAP Quartz Dark as my base theme).

Figure 3: Select a base theme.

Adding Target Pages

Here you can enter the URL of an application that runs in the same domain as the UI theme designer.

To create a new theme for my SAP Fiori Launchpad, I add my launchpad URL, for example:

https://abc123-def456.wdf.sap.corp:port/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html

Choose Add. The preview will now appear.

Figure 4: Add your Launchpad

Theming your Launchpad

Start editing your preview at either quick, detailed or expert level

Changing Theme Parameters – SAP Help Portal

Figure 5: Your Launchpad Preview

Figure 6: Example based on Quartz Dark

When you have finished, choose Theme in the upper left corner and select Save&Build.

Building and Publishing Themes – SAP Help Portal

Applying your Theme with SAP Business Client

Open your user settings in the FLP (looks different depending on the theme and UI5 versions).

Go to Settings, select Appearance, and choose your theme (custom themes are highlighted/marked with the icon painter’s palette).

When you save, your theme will be applied.

Figure 7: Choosing a custom theme for your launchpad

Further documentation:

Create Themes – End-to-End Flow – SAP Help Portal