Configure Preferences and Use Themes (Optimized Story Experience)

You can configure preferences for the styling of the current story, and create a theme from it or from scratch, which provides you with an efficient and reusable way to define the styles of any stories. You can further use and modify your themes, and use related API to let story viewers change theme in view time.

Theme and preferences are one-stop solution to your enterprise's branding. It provides a consistent look and feel that complies to the corporate standard and differentiate your stories from hundreds of others. You can define a theme to store your favorite styles for canvas, popups and different types of widgets or choose an existing one to instantly change the story's look and feel.

Note

When you find that the widget, popup or page in your story 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 Theme Preferences) so that the theme can be fully applied to the story.

Configure Preferences of the Current Story

You can configure preferences for the styling of canvas, popups and widgets in one place, which are exclusive to the current story.

Procedure

  1. Under Format in the toolbar, choose (Theme).
  2. From the dropdown select to the right of Preferences.

    You can see a dialog called Theme Preferences, where you can define story-level and widget-level styling settings.

  3. In Theme Preferences you can change the background color of canvas or popups and styling of widgets as you like.

    On the right side, the preview is available to you to check the styling. However, not all stylings are reflected in preview. See the following section.

  4. Choose Save and Apply.

Results

You've configured and saved preferences for the current story. You can see that your story immediately applies the preferences.

Unsupported Stylings in Theme Preview

See a list of stylings that aren’t supported for preview in Theme Preferences.

  • Default Color Palettes
  • Default Tile Border - Style
  • Default Tile Border - Line Width
  • Default Tile Border - Corner Radius
  • Default Font Style - Size
  • Default Text - Text Type
  • Default Text - Alignment
  • Upload Icon
  • Icon Position
  • Vertical Scroll
  • Horizontal Scroll
  • Default Shape Properties - Outline Width
  • Default Styling Template
  • Default Threshold Style
  • Default Tabstrip Style - Margin

  • Responsive Page - Background - Gradient/Image

Use a Theme

You can apply an existing theme to your story, which saves you from configuring preferences.

Procedure

  1. Under Format in the toolbar, choose (Theme).
  2. Choose a theme.

    If the theme you want doesn't appear in the dropdown list, select Browse for More Themes…, and find it in the Files repository.

Results

Once you've chosen a theme, it's instantly applied to the story.

You can also select a widget, canvas or popup to change its styling in its Styling panel.

Note

The styling settings override the theme preferences and are only applied to the current story. Even if you later change the theme, what you defined in the Styling panel is kept.

To restore to the theme preferences, select (Restore Theme Preferences) on the upper-right corner of the Styling panel.

Create a Theme

You can create a theme either from the existing preferences or from scratch, which can be used across stories.

Note

To create a theme, ensure that you have the permission Create for the object type Theme.

After configuring theme preferences of the current story, you can choose Save As to save your theme to the Files repository. Choose a folder to store your theme, and enter a name and optionally a description. Select OK.

To create a theme independent of the current story, under (Theme) in the toolbar, select Create Theme.... Then, follow the same steps to configure theme preferences and save as a file.

Modify or Delete a Theme

You can modify the theme and override the existing preferences according to your needs, and delete the themes you no longer need.

Note

To modify and delete a theme, ensure that you have the permission Update and Delete respectively for the object type Theme.

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

To modify a theme, in edit time, find it under (Theme) in the Format section of the toolbar. When hovering over it, choose to open Theme Preferences. Then, you can change and save the settings according to your needs:

  • If you want to save these changes in the current theme, select Save.

    Note

    Theme updates are not only applied to the current story, but also to all the stories using this theme.

  • If you want to save these changes to a new theme, select Save As.

To delete a theme, go to Files to find it. Select it and then (Delete).

Note
If you open a story that uses a modified theme:

  • In view time, the story displays the latest theme settings.

  • In edit time, you can decide whether to apply the modified theme or keep the previous theme by saving it as a new one.

If you open a story whose theme is deleted,

  • In view time, the story displays Light Theme (Default).

  • In edit time, you can decide whether to keep the deleted theme by saving it as a new one.

Use Theme API

You can leverage the theme-related API to let story viewers flexibly change the story theme in view time.

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 is applied.

Note

Currently, calling the setTheme() API from a popup doesn't affect the theme settings in it. To solve this issue, 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 let viewers switch between different themes for the story.

Example

First, add a dropdown 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);

Viewers can select from the dropdown list to change to a different theme for the story.

Use Theme URL Parameter

In view time, you can apply a specific theme by directly adding the theme ID to your story 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/story/, use a semicolon ; as the URL parameter separator.

    https://<TENANT>/sap/fpa/ui/tenants/2a2bb/bo/story/3228410105CE7C33800048A45E0FF376?mode=view;themeId=27D04C012D3FBC945A7C2E884AE6C1AC

  • If the URL pattern is /story2&/s2/, use an ampersand & as the URL parameter separator.

    https://<Tenant>/sap/fpa/ui/tenants/2a2bb/app.html#/story2&/s2/3228410105CE7C33800048A45E0FF376/?url_api=true&mode=view&view_id=story2&themeId=27D04C012D3FBC945A7C2E884AE6C1AC