Define Themes for Your Analytic Applications

Themes provide you with an efficient and reusable way to define the styles of your analytic applications. You can create a customized theme, use and modify it, and leverage related API to allow application users to change theme at runtime.

A theme is a one-stop solution to your enterprise's branding. It provides a consistent look and feel that complies to the corporate standard, while differentiating itself from hundreds of other applications.

You can create a theme to store your favorite styles for canvas, popups and different types of widgets, which can also be reused in other analytic applications. Or you can choose an existing theme in your file repository to instantly change the application's look and feel.

Note

When you find that the widget, canvas or popup in your analytic application doesn’t have the corresponding styling after applying the theme, it may be that the styling defined in the styling panel overwrites the overlapping settings defined in theme preferences. Therefore, go to the Styling panel, select (Restore to Theme Preferences) so that the theme can be fully applied to the application.

Create a Theme

Follow the steps below to create a new theme in design time.

Prerequisites

To create a theme, ensure that you have the object permission. For example, the creator and admin roles have access to themes.

Procedure

Under Display in the toolbar, select Theme Create Theme….
In the Theme Preferences dialog, you can change the background color of canvas or popups and styling of widgets as you like.
Select Save as to save your theme to the Files repository.
In the Save As New Theme dialog, choose a folder to store your theme, and enter a name and optionally a description.
Select OK.

Results

A customized theme is created and applied to your analytic application. You can also reuse it in any other applications.

Use, Modify and Delete a Theme

You can directly use an existing theme to define your analytic applications or modify and override the existing theme preferences according to your needs.

Prerequisites

To use a theme, ensure that you have the object permission. For example, the creator and admin roles have access to themes.

If the theme is created by another user, make sure you have access to the theme in the Files repository.

Procedure

Select (Theme) in the Display section of the toolbar and choose a theme.
If the theme you want doesn't appear in the dropdown list, select Browse for More Themes… to choose from the Files repository.

Once you've chosen a theme, it's instantly applied to the application.
(Optional) You can select a widget, canvas or popup to change its styling in the Styling panel.

Note

The styling settings that override the theme preferences will only be applied to the current application.

Even if you change to another theme, what you defined in the Styling panel will be kept.

To restore to the current theme's default settings, select (Restore to Theme Preferences) on the upper-right corner of the Styling panel.
To modify the preferences of the existing themes:
1. Select (Preferences) to the right of the theme in the Theme dropdown list.
2. Change the theme settings according to your needs.
3. Save the changes:
  - If you want to save these changes in the current theme, select Save Save and Apply.
    
    Note
    
    Theme updates will not only be applied to your current theme, but also to all the analytic applications using this theme.
  - If you want to save these changes to a new theme, select Save As.
If you want to delete the theme, go to Files, select it and then (Delete).

Results

If you open an analytic application whose theme is changed:

In edit mode, you can decide whether to apply the updated theme, or keep the previous theme by saving as a new theme.
In view mode, the application will display the latest theme settings.

If you open an analytic application whose theme is deleted,

In edit mode, you can decide whether to apply the updated theme, or keep the previous theme by saving as a new theme.
In view mode, the application will display the Light Theme (Default) setting.

Use Theme API

You can leverage the theme-related API to allow application users to flexibly change the theme of the application at runtime.

Code Syntax

Application.setTheme()

To specify the theme in the script, press Ctrl + Space to open the theme selector. 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, the default light theme will be applied.

Note

Currently, calling the setTheme() API from a popup doesn't affect the theme settings in it. To solve this, you can add a panel to the popup and include all the widgets in it.

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

Example

First add a dropdown widget Theme_Dropdown to the canvas. In its Builder panel, fill ID column with the theme IDs and the Text column with the corresponding theme names.

Then write the following script for the dropdown:

Sample Code

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

Now, users can select from the dropdown list to change to a different theme for the application.

Use Theme URL Parameter

At runtime, you can apply a specific theme by directly adding the theme ID to the application URL.

Based on the URL pattern you're working with, use either an ampersand & or a semicolon ; to separate URL parameters.

If the URL pattern is /bo/application/, use a semicolon ; as the URL parameter separator.

https://<TENANT>/sap/fpa/ui/bo/application/4FA12EC04829FDC682399273A7A3A0C?mode=view;themeId=D991AAEEC518947626D749EDFF57D64C

If the URL pattern is /analyticapp&/aa/, use an ampersand & as the URL parameter separator.

https://<Tenant>/sap/fpa/ui/app.html#/analyticapp&/aa/2F602684051BC2914F0661E45399B0A3/?mode=view&themeId=BA20000457CA6331EC089B6775F5DB51