Skip to Content

How To Set Custom Theme To Default In SAP Fiori

We’ve all had the situation where the default work environment for a particular piece of software simply isn’t good enough for us. Each user is different and because of that, SAP Fiori enables us to develop custom themes which can then be used as the default for our distribution of the software. Customizability creates familiarity and through a series of logical steps (like anything else in SAP) we can accomplish exactly what we want – i.e. developing a custom theme that can be used throughout SAP Fiori as what we see when the program opens initially. The steps we go through to accomplish this are as follows:

1. Custom Theme Rebuilding

The SAP gateway allows us to access the dynamic theme builder by simply typing in the following URL:

https://<Your SAP Server Host:port>/sap/bc/theming/theme-designer/

Here we’ll be presented with the UI Theme Designer. Using the “All” filter on the panel to the left we’ll select the theme we want to use as our default theme and click “Rebuild”

2. Getting Rid of the Theme Cache

The next thing we’re going to do is break the cache references for the. For this, we need to get into the theme tool, which is as simple as running transaction code “/ui5/theme_tool“. A list of all the custom themes currently installed in Fiori will then pop up and we can locate the theme we’re intending to set as our default and make a note of the green field to the right of “Theme”. That’s our custom theme ID which we will have to use soon. We then double-click the “Invalidate Theme” button and that will break the current theme references maintained by Fiori.

3. Setting Up the Default Parameters

In order to bring up the theme maintenance screen we’re going to run the transaction code “/UI2/NWBC_CFG_CUST“. This opens up the configuration dialog which we can now use to set the defaults we want. In the Filter field at the top of the dialog box, we enter SAP_FLP, The Parameter Name should be THEME and the Value should equate to the custom theme ID we recorded in the previous step. If you’re interested in learning about the standard parameters employed by SAP Fiori, you can run transaction code “/UI2/NWBC_CFG_SAP” for more details.

4. Dropping the SAP Fiori Cache

This is a pretty complicated process that we can simplify in a series of small steps. The SAP Cache system has a lot of nuts and bolts that we need to deal with before we go further.

STEP 1: Run transaction code “/IWBEP/CACHE_CLEANUP“. This cleans up the local backend cache, the first of many we’ll be clearing as we run through the entire cache clearing procedure.

STEP 2: Select the check box “CLEANUP CACHE IN ALL MODELS

STEP 3: Run transaction code “/IWFND/CACHE_CLEANUP” followed by transaction code “SE38“.

STEP 4: From the SE38 app, generate reports for the following:

  • /UI2/INVALIDATE_GLOBAL_CACHES (Select the “Execution mode” to run in)
  • /UI2/INVALIDATE_CLIENT_CACHES (Ensure this is being run for All Users)

STEP 5: Run transaction code “SMICM” then use the Menu to navigate to Goto -> HTTP Plug-in -> Server Cache -> Invalidate Globally.

STEP 6: Clear the Reverse Proxy Cache (if it exists) and the Client Caches

5. Checking to see the Theme is Installed Correctly

This step is optional but it is useful to determine if the process executed properly or if there are any issues that need to be addressed regarding the theme implementation. The configuration page can be accessed from the URL:

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

The page delivers a JSON formatted readout that makes it easy to debug any issues that may occur in the theme implementation. Scrolling down the page, we’re going to be looking for a block of text like this:

“system”: “GW_SYSTEM”,

“theme”: “<Your Theme ID Here>@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”,

If the theme has that addendum that references a web page after the @ sign, then we are going to need to fix the issue since running this theme on external systems, like the one used by retailer Stein Diamonds, will crash the program. Luckily, SAP has delivered solutions for this problem in two notes, namely:

SAP Note #2041742 – UI Theme Designer for ABAP: Correct host – Applied to the SAP Web Dispatcher, this should alleviate the problem

SAP Note #2230117 – Theme is not loaded in SAP Fiori launchpad – This should alsobe applied to the Web Gateway if it uses a different port to the Web Dispatcher

After applying these fixes, we should redo the 1 and 4 above. When we run the configuration page this time, we should see the following:

“system”: “GW_SYSTEM”,

“theme”: “<Your Theme ID here>”

“timeFormat”: “0”,

“timeZone”: “CET”,

“welcomeMessage”: “”,

“themeRoot”: “/sap/public/bc/themes/~client-100/~cache-9dCxur06U0MptvEF2o32-aPCRKQ”,

This should allow the system to operate without crashing on external systems and resolve any issues we may have.

1 Comment
You must be Logged on to comment or reply to a post.
  • /