B    Customizing SAP Fiori Launchpad

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.

B.1    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.

Figure B.1 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.

UI Theme Designer Architecture

Figure B.1    UI Theme Designer Architecture

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

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