B.2    Creating a Custom Theme

In this section, we’ll show you how to create a new theme for SAP Fiori launchpad and how to apply it to the default template. To do so, follow these steps:

1. Log in to your ABAP front-end server.
2. Run Transaction UI5/THEME_DESIGNER to open UI Theme Designer.
3. Select a theme, and click Open (see Figure B.2).
   

   Figure B.2    UI Theme Designer

   Base Theme

   You can create a custom theme only on a base theme. For example, in the previous step, to create a new custom theme we started with the SAP Belize theme.

4. Enter the link to the application. In our example, we want to change the theme of SAP Fiori launchpad, so enter the SAP Fiori launchpad URL (see Figure B.3). You can also provide a name for the application, but doing so is optional.

Figure B.3    Application Link

UI Theme Designer provides various options for theming, depending on the developers skill level in CSS 1 (see Figure B.4).

• Quick theming
• Expert theming*
• Color palette*
• Manual LESS or CSS editing

*These experimental features, which aren’t for productive use, may be changed by SAP at any time.

Figure B.4    UI Designer Options

You can toggle between Original and Preview modes to compare your changed version with the original version 2.

You can select between different layouts—Desktop, Mobile, or Tablet—to simulate your changes on different device types 3.

Next, let’s look at some of the options in Quick theming that can help you change the look and feel of SAP Fiori launchpad.

B.2.1    Quick Theming

With the Quick theming option, you can change background colors, fonts, and images. Here, we’ll add a custom logo using the Quick theming tool (see Figure B.5) and replace the standard SAP images. Similarly, you can change the text colors, fonts, and so on (see Figure B.6).

Figure B.5    Quick Theming Tool

Figure B.6    Graphical Options

B.2.2    Expert Theming

Next, let’s look at the Expert theming tool. To use this tool, select the Expert option, then enter “icon” in the search box to filter the objects (see Figure B.7).

Figure B.7    Expert Theming

You can change the color for the sapContent_IconColor field, which will change the color of the icons in a tile. Your output should reflect all the changes you’ve made until now, and you can toggle between the Original and Preview mode (see Figure B.8).

Figure B.8    Original and Preview Modes

B.2.3    Save and Build

The next task is to save and publish the changes to the ABAP front-end server. Follow these steps:

1. Click on Theme • Save & Build (see Figure B.9).
   

   Figure B.9    Save and Build

2. Enter the Theme ID and the Title, then click OK (see Figure B.10).
   

   Figure B.10    Theme Details

3. After the custom theme is saved and built, you should see a message something like the one in Figure B.11. Click OK.
   

   Figure B.11    Saved Theme

B.2.4    Test the Custom Theme

You’ve successfully created a custom theme and uploaded it to the ABAP front-end server. Next, you’ll have to test the custom theme by following these steps:

1. Log in to the ABAP front-end sever, and run Transaction UI5/THEME_TOOL.
2. Scroll down or search for your custom theme.
3. Double-click Info (see Figure B.12).
   

   Figure B.12    Testing Theme

4. Copy the URL and paste it at the end of the SAP Fiori launchpad URL, prefaced by an ampersand (&).Your url should look something similar to what we have below, and once you run this url in the browser, you should see the new custom theme applied to your SAP Fiori Launchpad:
   https://<host>.<domain>:<port>/sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html?sap-theme=CorporateTheme&http://nbcloud.nineboards.com:50000/sap/public/bc/themes/~client-120/~cache-2VCj7NrjFnVxuDZ8vm6HqrJVPsI
5. The next step is to overwrite the standard theme with the custom theme, which you created in the previous steps. Run Transaction /UI2/NWBC_CFG_SAP.
6. Set the SAP_FLP parameter value to the name of the custom theme you created previously (see Figure B.13).

You should now see SAP Fiori launchpad with the new theme in place.

Figure B.13    Overwite Standard Theme

Important!

Whenever you apply a patch, make sure you check whether your custom theme is working without any issues. If you come across any issues, you may have to rebuild your theme with UI Theme Designer.