Customizing Theme Using Application CSS

Not all the class names and properties of widgets and popup are supported. For what’s supported, in Application CSS you can select a widget from the dropdown and check its descriptions.

You can define and write CSS centrally in Application CSS as below:

1. In the Outline, click the button (Edit CSS) beside Canvas.

   The Application CSS script editor page displays.

2. In the first part of the script editor, you can view all supported class names and properties of each type of widget and popup.

3. In the main body of the script editor, define CSS scripts as you wish. The script is usually composed of a custom class name, CSS selector elements, properties and pseudos.

   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 a CSS selector element and :hover is a pseudo.
   * !important syntax is NOT supported.
   
   */ 
   

   Note

   There are some rules you need to follow when writing such CSS script:

   • For a custom class name:

     • Itself when defined alone, only two properties are allowed: background-color and border;

     • You can’t directly add pseudos to a custom class name;

     • Custom class names can only be used as the first element of CSS selectors in application CSS. For example, the case below is invalid:

       .sac-custom-radio-btn-group-row .my-theme-1 {

       Color: #ccc;

       }

   • For a CSS selector element, it should be one of the predefined CSS classes described in the step 2 above.

   • For each CSS selector element, if its preceding element is a predefined class name, the class name in this element must be its descendant specified in its style definition.

4. After completing the script, you can apply CSS by assigning custom class name to one or more widgets, popups and canvas, or as global default CSS class.

You can choose to set some of the CSS classes you define in Application CSS as the application’s global default CSS class. To do this, go to the canvas’ Styling panel, in the CSS Class Settings section, enter the custom class name you defined in the script for Global Default Class Name.

After that, all widgets, popups and canvas will automatically apply CSS settings corresponds to this specific custom class name.

In addition to this, you can set some other CSS classes you define in Application CSS specifically as a widget’s, a popup’s or the canvas’ CSS class respectively in their Styling panels.

For example, you’ve defined some button specific settings with the custom name my-button-1 in Application CSS, then go to each button’s Styling panel, in Analytics Designer Properties, enter my-button-1 for CSS Class Name. Then all these buttons will apply corresponding CSS styles.

When both global default class and widget specific class are defined, the widget specific class will overwrite global default and take effect.

Later to allow end users set CSS styling when running an analytic application, as an application designer, you can write corresponding script APIs such as Widget.setCssClass() and Widget.getCssClass(). For more information, refer to Analytics Designer API Reference.

When editing a theme, you can enable theme CSS and load application CSS to the theme, thus saving it along with theme and share it across applications.

This theme CSS settings will take precedence over common theme settings you define for the same type of widget or popup, but can be overwritten by each widget’s own style settings defined in its Styling panel.

To enable and load a theme CSS:

1. Click the Edit button beside a theme and go to Theme Preferences dialog.

2. In the General section of Application Setting section, toggle on the option Enable Theme CSS.

3. Click Load Application CSS.

4. (Optional) If you make some modifications to Application CSS and want to load the latest CSS, click Reload Application CSS.