Set a custom theme as default in SAP Fiori launchpad

How to set a custom theme as the default theme in SAP Fiori launchpad in 5 steps.

Step 1: Rebuild the custom theme

Access your theme designer in the SAP Gateway URL. The URL is:
https://<Your GW Server Host:port>/sap/bc/theming/theme-designer/
Select the custom theme and click rebuild.

Step 2: Clear Fiori Theme Cache

In your SAP Gateway system use TCODE /ui5/theme_tool. There you can see all your custom fiori themes.

Double click on the [Invalidate Cache] button. Also note the Custom Theme id, we will need it later.

Step 3: Set default theme parameter

In your SAP Gateway system use TCODE /UI2/NWBC_CFG_CUST.
There you should add the SAP_FLP parameter which will override the one provided by SAP*.

Add the following values:

Filter - SAP_FLP
Parameter Name - Theme
Value - Custom_Theme_Id (See step 2)

Save the changes

* You can see the standard SAP Fiori Parameters using TCODE  /UI2/NWBC_CFG_SAP

Step 4: Clear the SAP Fiori Cache

Follow this guide to clear the SAP Fiori Cache


Step 5: Check the Custom Fiori Theme from external network (Optional)

It is a very common scenario the access of  Fiori apps from public internet using a Reverse Proxy Server, usually the SAP Web Dispatcher. In that case the host which your users are accessing is  different from the one that you used when accessing the theme designer toolkit.

Strangely the SAP Fiori launchpad does not use a relative to host URL for accessing the custom theme, but instead it uses a hard-coded one provided by the customization configuration resource.

You can check your Fiori Launchpad configuration resources in the following URL:

https://<Your external host>/sap/bc/ui2/start_up?shellType=FLP&depth=0

This will return a JSON response. There you will see the following fields between others:

"system": "GW_SYSTEM",
"theme": "custom_theme_id@https://<internal_GW_host>:<internal_GW_port>/sap/public/bc/themes/~client-100/~cache-9dCxur06U0MptvEF2o32-aPCRKQ",
  "timeFormat": "0",
  "timeZone": "CET",
  "welcomeMessage": "",
  "themeRoot": "/sap/public/bc/themes/~client-100/~cache-9dCxur06U0MptvEF2o32-aPCRKQ",

In the above case, theme value is using the internal SAP Gateway Host. As a result of this the SAP Fiori launchpad will crash when the custom theme is used and it is accessed using an external host....

The solution to this is to implement the following SAP Notes:

• SAP Note #2041742 - UI Theme Designer for ABAP: Correct host
  This will be applied to SAP Web Dispatcher and it will correct the host issue.
• SAP Note #2230117 - Theme is not loaded in SAP Fiori launchpad
  You should also apply note this to your SAP Gateway if the port of the SAP Web Dispatcher is different from the SAP Gateway port e.g WD Port 443 - GW Port 1443

After the implementation of the those SAP Notes you should:

1. Rebuild the theme (See STEP 1).
2. Clear  the cache (See STEP 4)

Finally the response from the Resources URL will be like:

"system": "GW_SYSTEM",

  "theme": "custom_theme_id"
  "timeFormat": "0",
  "timeZone": "CET",
  "welcomeMessage": "",
  "themeRoot": "/sap/public/bc/themes/~client-100/~cache-9dCxur06U0MptvEF2o32-aPCRKQ",

Theme value now is not providing a URL Parameter, so it is relative to host.