Customizing SAP Fiori Launchpad using the UI Theme Designer

[sean_fesko]

Excerpt from the book SAP Fiori Implementation and Development by anil.bavaraju. Used with permission of SAP PRESS. All rights reserved.

 

This blog explains how to customize SAP Fiori Launchpad using the UI Theme Designer.

The UI Theme Designer is a browser-based tool with a WYSIWYG designer; therefore, any change that you make can be viewed immediately in the browser. Using the UI Theme Designer, you can create your own themes with your corporate identity, corporate colors, and company logo. The figure below shows the SAP Fiori Launchpad architecture with the UI Theme Designer. The top layer shows the UI Theme Designer built on SAPUI5. The UI theme repository on the ABAP frontend server contains SAP standard themes and custom themes. Anytime you create a custom theme, the UI Theme Designer generates LESS files, CSS files, and images, which are saved into the repository. These files are received via HTTP calls. The application is loaded with the CSS files from a chosen custom theme.



The following are transaction codes you’ll be using while working with the UI Theme Designer:

• Transaction UI5/THEME_DESIGNER: This transaction is used to create, edit, copy, delete, or rebuild/upgrade a theme.


• Transaction UI5/THEME_TOOL: This transaction is used for deleting, exporting, importing, transporting, and to analyze theme content.


• Transaction UI Theme Repository: This tool is used for exporting or importing single files, or it’s used to analyze theme content.

Now that you have an overview of the UI Theme Designer, let’s look at how to create themes for SAP Fiori Launchpad.

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 frontend server.


2. Run Transaction UI5/THEME_DESIGNER to open the UI Theme Designer.


3. Select a theme, and click Open. (Note: You can create a custom theme only on a base theme. For example, to create a new custom theme we started with the SAP Blue Crystal 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. You can also provide a name for the application, but this is optional.

The UI Theme Designer provides various options for theming depending on the skill:

• Quick Theming


• Expert Theming (not for productive use; subject to change)


• Color palette (not for productive use; subject to change)


• Manual LESS or CSS editing

You can toggle between Original and Preview modes to compare your changes with the actual version. You can select between different layouts, that is, Desktop, Mobile, and Tablet, to simulate your changes on different device types.



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.

2.1 Quick Theming

Using the Quick Theming option, you can change the background colors, fonts, and images. The following steps demonstrate how to do this for our custom application:

1. First, we’ll add a custom background and logo. Upload the images by clicking the button next to the menu.


2. After uploading the background image and icon, the Quick Theming tool will replace the standard SAP images. Similarly, you can change the text colors, fonts, and so on.

2.2 Expert Theming

Next, let’s look at the Expert Theming tool. To use this tool, select the Expert option and then enter “tileiconcolor” in the search box to filter the objects.



You can change the color for the sapUshellTileColor field, and that will change the color of the icons in the tile. Your output should reflect all the changes you’ve made until now, and you can toggle between the Original and Preview mode.



2.3 Save and Build

The next step is to save and publish the changes to the ABAP frontend server. Follow these steps:

1. Click on Theme > Save & Build.


2. Enter the Theme ID and the Title, and then click OK.


3. After the custom theme is saved and built, you should see a confirmation message. Click OK.

2.4 Test the Custom Theme

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

1. Log in to the ABAP frontend sever, and run Transaction UI5/THEME_TOOL.


2. Scroll down or search for your custom theme.


3. Double-click on Info.


4. Copy the URL and paste it at the end of the SAP Fiori Launchpad URL with an “&” before the URL. Now, let’s test the theme by running the URL. You should now 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://<host>.<domain>:50000/
   sap/public/bc/themes/~client-120/~cache-2VCj7NrjFnVx-uDZ8vm6HqrJVPsI


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 custom theme which you created previously.

You should now see SAP Fiori Launchpad with the new theme.

 

If you're looking for more information about SAP Fiori themes, check out this blog post.