SAP Fiori launchpad is a shell page from which all SAP Fiori apps can be accessed. It can be customized using a tool called the UI Theme Designer.
The UI Theme Designer isn’t just for SAP Fiori, but also functions as a tool for cross-theming scenarios, supporting many platforms and technologies.
For example, when you create a theme for SAP Fiori launchpad, you can apply the same theme to SAP Fiori applications, Web Dynpro ABAP, Floorplan Manager (FPM), and SAP Business Client.
UI Theme Designer Overview
UI Theme Designer is a browser-based tool with a WYSIWYG designer (what you see is what you get); therefore, any change that you make can be viewed immediately in the browser. Using the UI Theme Designer, you can create your own themes to reflect your corporate identity, corporate colors, and company logo.
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 front-end server contains SAP standard themes and custom themes.
Each time you create a custom theme, 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 the transaction codes you’ll be using while working with 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 to delete, export, import, transport, and analyze theme content.
- Transaction UI Theme Repository: This tool is used to export or import single files, or to analyze theme content.
Now that you have an overview of UI Theme Designer, let’s look at how to create themes for SAP Fiori launchpad.
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:
- Log in to your ABAP front-end server.
- Run Transaction UI5/THEME_DESIGNER to open UI Theme Designer.
- Select a theme, and click Open (see figure below).
Base Theme
Note: 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.
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 next figure). You can also provide a name for the application, but doing so is optional.
UI Theme Designer provides various options for theming, depending on the developers skill level in CSS (1) (see next figure).
- 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.
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.
Quick Theming
With the Quick theming option, you can change background colors, fonts, and images. Here, as shown in the next figure, we’ll add a custom logo using the Quick theming tool and replace the standard SAP images. Similarly, you can change the text colors, fonts, and so on (see second figure below).
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.
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.
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.
2. Enter the Theme ID and the Title, then click OK.
3. After the custom theme is saved and built, you should see a message something like the one below. Click OK.
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.
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.
You should now see SAP Fiori launchpad with the new theme in place.
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.
Conclusion
In this blog post, you learned about the SAP Fiori launchpad: what it is, how you can customize it with the UI Theme Designer, and how to create a custom theme for your SAP Fiori dashboard.
Comments