Programming

SAP Fiori Launchpad Customization

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.

 

UI Theme Designer

 

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).
Creating a Custom Theme in SAP UI Theme Designer

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.

 

Adding Target Content

 

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.

 

Previewing Themes

 

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).

 

SAP Quick Theming
Previewing Quick Themes

 

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.

 

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.

 

Previewing Custom Themes

 

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.

 

Saving and Building SAP Fiori Custom Themes

 

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

 

Naming SAP Fiori Custom Themes

 

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

 

Complete

 

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.

 

Testing SAP Fiori Custom Themes

 

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.

 

Changing SAP Fiori Views

 

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, 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.

 

Editor’s note: This post has been adapted from a section of the book SAP Fiori Implementation and Development by Anil Bavaraju.

Recommendation

SAP Fiori: Implementation and Development
SAP Fiori: Implementation and Development

The SAP Fiori 2.0 design concept is here. See how to take your UI to the next level with this all-in-one resource to implementing and developing analytical, transactional, and fact sheet apps. Get the low-down on SAP Fiori's all-new look, SAP S/4HANA support, and more. This guide to Fiori has your back—implement, create, and customize!

Learn More
SAP PRESS
by SAP PRESS

SAP PRESS is the world's leading SAP publisher, with books on ABAP, SAP S/4HANA, SAP C/4HANA, intelligent technologies, SAP Cloud Platform, and more!

Comments