Skip to Content
Technical Articles
Author's profile photo Aleksey Salinin

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!

Assigned tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Simon Lyng
      Simon Lyng

      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?

      Author's profile photo Noel Munday
      Noel Munday

      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.

      Author's profile photo Aleksey Salinin
      Aleksey Salinin
      Blog Post Author

      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.

      Author's profile photo Dipankar Mohanty
      Dipankar Mohanty

      finally some css customization.

      Aleksey Salinin : is it possible to add css to a single row/cell ? with the classes I am able to add the css to the whole table/rows/members etc.

      Author's profile photo Aleksey Salinin
      Aleksey Salinin
      Blog Post Author

      Dipankar Mohanty yes, it is possible to use pseudo-elements in sap-custom-table-row class:

      .table1 .sap-custom-table-row:nth-child(7) {
      background-color: cyan;
      }

      Author's profile photo Dipankar Mohanty
      Dipankar Mohanty

      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”) {

      Author's profile photo Sameer Mehta
      Sameer Mehta

      Hi Dipankar,

       

      I also have a similar requirement. Did you get a chance to make it dynamic?

      Thanks,

      Sameer

      Author's profile photo Aleksey Salinin
      Aleksey Salinin
      Blog Post Author

      Dipankar Mohanty Sameer Mehta

      you can, for example, make several classes in global css with diff "nth-child()", then write the increment of rows in scripts via api Table_1.setCssClass()

      Author's profile photo Sameer Mehta
      Sameer Mehta

      Thanks Aleksey for the reply.

      This would be a work-around solution. What if the number of rows in the table changes and not known?

      Author's profile photo Tom Leppens
      Tom Leppens

      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) .

      https://www.sapanalytics.cloud/analytics-designer-handbook/

      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)

      Author's profile photo Aleksey Salinin
      Aleksey Salinin
      Blog Post Author

      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');
      Table_1.setCssClass('table1_1');
      } else {
      this.setText('Next row');
      Table_1.setCssClass('table1');
      }

       

      Author's profile photo Tom Leppens
      Tom Leppens

      2020.14.29
      Good to know it will be pushed in one of the next updates. 😉

      Author's profile photo Dipankar Mohanty
      Dipankar Mohanty

      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 ?

      Author's profile photo Sreenivasulu Dasari
      Sreenivasulu Dasari

      is it possible to add css - to a chart values font color (Version - 2020.21.8)

      ex: display Numeric chart values in White color.

      Author's profile photo Aleksey Salinin
      Aleksey Salinin
      Blog Post Author

      "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;
      }

      Author's profile photo Kil Fre
      Kil Fre

      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?

      Author's profile photo Aleksey Salinin
      Aleksey Salinin
      Blog Post Author

      vote for the empowerment of css in AD:

      https://influence.sap.com/sap/ino/#/idea/267314/