Skip to Content
Technical Articles

CSS in Analytic Application (SAC)

As an application designer, from release 2020.20 (or Q4 2020) we can now define multiple CSS class styles either as a global default or per widget! This is amazing news!

Globally, it became possible to go to editing the css from the general canvas (Application Level CSS):

It is quite convenient that the css editor itself has a convenient help: when you select a visualization element, a list of available css classes of this component appears (supported class names and properties):

It’s simple with separate classes:

About standard component classes – you can only refer with a user define class name as the first part of selector:

As you can see hover is also supported.

Binding to the class name is defined in the styling menu of the component:



Of course, now you can change the css class from scripts:


It is also possible to link the CSS with a pre-configured theme (Theme Level CSS):

CSS is stored together with the application or together with the application theme (not as in a lumira designer as a separate file). Some of the existing theme settings can be overwritten.

Unfortunately, not all css properties are currently supported:

We hope that this is only the first step and in the future SAC Analytics Applications will be even more customized in terms of the capabilities of the CSS!

You must be Logged on to comment or reply to a post.
  • Great feature - will there be a compiled list of which css properties are supported, and will it be possible to suggest which properties could be relevant for SAC?

    • Agree, the usual control-space does not give context sensitive suggestion for supported properties so it seems it's a bit of trial and error.

  • Simon Lyng

    Noel Munday

    at the moment such an option is available with the choice of a component.

    For example, choose pop-up:







    and below we have a description of the supported classes and properties:

    * Support Class Names:
    *    Widget CSS Class:
    *        Description: The CSS class you are going to assign to a widget in its styling panel should not be a predefined class.;
    *        Properties: background-color, border, border-top, border-right, border-bottom, border-left;
    *        Descendants: N/A;
    *        Pseudos: N/A;
    *    .sap-custom-popup-header-container:
    *        Description: CSS class for popup header container's background color;
    *        Properties: background-color;
    *        Descendants: .sap-custom-popup-header-font;
    *        Pseudos: N/A;
    *    .sap-custom-popup-header-font:
    *        Description: CSS class for popup header's font;
    *        Properties: font-family, font-size, color, font-style, font-weight, text-decoration;
    *        Descendants: N/A;
    *        Pseudos: N/A;
    *    .sap-custom-popup-footer-container:
    *        Description: CSS class for popup footer container's background color;
    *        Properties: background-color;
    *        Descendants: .sap-custom-popup-footer-button, .sap-custom-popup-footer-emphasized;
    *        Pseudos: N/A;
    *    .sap-custom-popup-footer-button:
    *        Description: CSS class for button in popup footer;
    *        Properties: background-color, border-color, font-family, font-size, color, font-style, font-weight, text-decoration;
    *        Descendants: N/A;
    *        Pseudos: :nth-child, :hover, :active;
    *    .sap-custom-popup-footer-emphasized:
    *        Description: CSS class for emphasized button in popup footer;
    *        Properties: background-color, border-color, font-family, font-size, color, font-style, font-weight, text-decoration;
    *        Descendants: N/A;
    *        Pseudos: :hover, :active;

    It is the same with other components: buttons, tables and graphs and others.

    And it's convenient that this can be directly copied into your's app css script.

    • /
      • Aleksey Salinin  : Thank you for your prompt reply.

        ohkay but then how do I make the nth-child dynamic ?

        I am trying to highlight any selected cell/row using a button?

        and where can i find the details/api about all these ?


        .table1 .sap-custom-table-row:nth-child(“dynamic”) {

          • At this moment (Nov 2020)
            There is no reference in the manual for ".setCssClass()".
            So correct me if i'm wrong, but Table_1.setCssClass() will not work (at this point) .


            If you define all possible markups of each possible combination in a individual theme.
            And then apply the theme to your canvas... In theory that seems like something you can try.

            But clearly the CSS implementation is in a early stage.
            And I hope more functionality will be available soon.

            Your other alternative is threshold markups (on cell level - not row/column level)

          • Tom Leppens

            what is your version of SAC tenant?

            we have 2020.21 and setCssClass works correctly.

            if (Table_1.getCssClass() === 'table1'){
            this.setText('Previous row');
            } else {
            this.setText('Next row');


          • correct ! its a workaround and is only applicable if you know the no of rows . I guess you cant pass arg/var in the nth child . it has to be any integer or even or odd. !

            my requirement was simple - "I select the value from the dropdown and highlight the row based on that dropdown "

            @Aleksey Salinin : the below example is cool but how are you passing the value in the nth child ?

  • "In addition, we've introduced a CSS class to allow users to change the opacity of a widget, so that you can further modify the appearance of the data action widget." (release 2021.03)

    .button1 .sap-custom-button-widget {
    opacity: 0.5;

  • My only problem so far is, that i'm not allowed to change the color and fond of the variance/delta in numeric point widgets.

    Is there any plan for implementing changeable numeric point variance?