Using the Theme API

As an application designer, you can leverage the setTheme() API to allow end users to flexibly change the theme of their application when running an application.

To specify a theme, use the syntax Application.setTheme(), type Ctrl + Space and the theme selector will automatically pop up for you to choose the theme you want to apply from the Files repository. After you choose a theme, the corresponding theme ID will be displayed in the syntax. If you choose not to define a theme in the syntax, then the application will apply the default light theme instead.

Note

Currently, there's a limitation that calling the setTheme() API in a popup does not affect the theme settings in the popup. To solve this, you can add a panel to a popup and include all widgets in it. Then, when you trigger the setTheme() API in a popup, all widgets added to the panel will apply the new settings.

Here's an example that shows how to leverage the theme API to allow end users to switch between different themes for your application.

Example

First add a drop-down widget Theme_Dropdown to the canvas. In the builder panel of the drop-down, fill the value column with the theme IDs and the text column with corresponding theme names.

Then write the following script for the drop-down:

Sample Code

var themeId = Theme_Dropdown.getSelectedKey();
Application.setTheme(themeId);

Now, when users run the application, they can select a theme from the drop-down list to change to a different theme.

As well as using the theme API, you can also enable end users to apply a specific theme when loading an analytic application by directly adding the theme ID to the application's URL address. For example, like this:

https://master-app-building /sap/fpa/ui/bo/application/4FA12EC04829FDC682399273A7A3A0C?mode=embed;themeId=D991AAEEC518947626D749EDFF57D64C