Customize Your Analytic Applications' Themes Using CSS

As an application designer, you can define multiple CSS classes in the CSS editor either as global default or per widget, which brings more flexibility to the styling in your analytic applications. The styling settings conform to CSS standards and are no longer limited to the existing ones provided by SAP Analytics Cloud, analytics designer.

Learning Tutorial

Click through the interactive tutorial illustrating how to change and customize your application theme in step-by-step instructions (2:00 min); all tutorials are captioned exclusively in English:

[To start the interactive tutorial, click here or on picture]

Define and Apply CSS

You can define a CSS class in the CSS editor and apply it to individual widgets, popups or the whole application.

Procedure

  1. To open the CSS editor, do either of the following:
    • From Outline hover over Canvas, and select (Edit CSS).
    • From the toolbar, select (Edit CSS) under Display.

    The CSS editor opens in a tab.

  2. In the upper section of the editor, you can select a widget or popup from the dropdown to view all its supported class names and properties.
  3. In the lower section, write CSS.

    It's usually composed of a custom class name, element selector, property and value.

    Sample Code
    .my-theme-1 .sap-custom-button:hover {
	background-color: #00ff00;
	border-color: #0000ff;
}
/**
* In this example, my-theme-1 is a custom class name, sap-custom-button is an element selector and :hover is a pseudo.
* !important syntax is NOT supported.

*/
    Note
    For a custom class name:

    • When it's defined alone, only two properties are allowed: background-color and border.

    • You can’t directly add pseudos to it.

    • It must be listed first. For example, element selector sac-custom-radio-btn-group-row must not be listed before custom class name my-theme-1.

    For an element selector, it comes from the supported classes shown in the editor.

  4. Apply the CSS class you defined in the CSS editor to individual widgets, popups or the whole application:

    • To set the CSS class as the application’s default CSS class, go to the Styling panel of the canvas first. In the Application Settings section, enter the custom class name under Global Default Class Name.

      Then, all widgets and popups in the application apply the corresponding CSS settings.

    • To set the CSS class for a specific popup or widget, go to its Styling panel. For example, you’ve defined CSS class named my-button-1 for button-specific settings. Under Analytics Designer Properties, you just need to enter my-button-1 for CSS Class Name. Then the button applies the corresponding CSS settings.

    Note

    When both CSS classes are defined, the widget-specific one overwrites the global default one.

Results

At design time, you can see that your application immediately applies the styling after you've defined and assigned the CSS class.

Later to let application users set CSS styling at application runtime, you can use script APIs such as setCssClass() and getCssClass(). For more information, refer to Analytics Designer API Reference.

Note

The CSS you've defined for a widget can't be carried to the new window when you create a story from it or open it in explorer.

Note

Some CSS you've defined for a table might be different if its optimized presentation mode is enabled.

Enable and Load Theme CSS

You can enable theme CSS for your application and load it into the theme that can be applied across applications. The CSS settings overwrite the existing theme and settings in the Styling panel of any widget or popup.

Procedure

  1. From the Display section of the toolbar, select (Theme). Hover over the theme you want to modify, and choose (Preferences) to the right of it to open Theme Preferences.
  2. In the General section under Application Settings, switch on Enable Theme CSS.
  3. Select Load Application CSS.
  4. Select Save to save the theme with CSS or Save As to save a new theme.

Results

The theme can then be reused in other applications. If you modify CSS and want to load the latest CSS, select Reload Application CSS in Theme Preferences.
Note

The priority of styling methods from highest to lowest is: widget styling defined in the CSS editor, widget styling from theme CSS, widget styling defined in the styling panel and widget styling defined in the theme preferences.