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!

2 Comments
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.