CSS in Analytic Application (SAC)

[avsalynin]

 

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

Also, here

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:

2022 RELEASE PLANS (Q2 2022)

Advanced Customization Options for Tab Strips

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!

[former_member94141]

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?

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

[avsalynin]

simonlyngitelligence

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.

[Dipankar]

finally some css customization.

avsalynin : 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.

[avsalynin]

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

[Dipankar]

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

[sameer_mehta]

Hi Dipankar,

 

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

Thanks,

Sameer

[avsalynin]

dipankar 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()

[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?

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

[avsalynin]

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');
}

 

[leppens]

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

[Dipankar]

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 "

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

[former_member4998]

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

ex: display Numeric chart values in White color.

[avsalynin]

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

[former_member730097]

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?

[avsalynin]

vote for the empowerment of css in AD:

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

[balakandhan_s]

Hello Guys,

By any way can we add multiple css classes in one widget. Trying to add two classes and it throws error. I also tried adding the names with a comma in between, it still doesn't work.

[avsalynin]

Balakandhan Sethuramalingam

no we can not. In the application css define two classes, and in the element itself, use only the 1st.

[balakandhan_s]

Well, that doesn't serve my purpose 🙂
Anyway thanks for the response.

[avsalynin]

About fade transition effect with CSS i recommend to read this blog by jbarlowjb

[carlbine]

is it possible to put background color in a whole row or cell if a specific cell contain a specific value?

[former_member836140]

Sir avsalynin is it possible to call multiple css class of table in one condition? or is it possible in looping ?

[vitran23]

Is there a way to set the "line / data point" color of a line chart widget it?  I see you can do a few other styling but was hoping to be able to set the line color via scripting.

[elmira_azizi]

Hi Aleksey,

I am using the CSS you provided for highlighting the selected row by the user. However, if there are several rows in a table, the highlighted row might changed after scrolling up and down through the data and the indexing becomes different.

I am wondering if you can help with how to find the child number, in addition to how we can prevent the changes in highlighted row while scrolling?

[abeera11]

Is there any way I can change the image to round in a story? I've tried using the css class, but the border-radius property isn't supported in .sap-custom-image-widget class. I've also applied the coder radius to max 20px. But I need border-radius: 50%

[Annapoorani]

Hi, Currently in stacked column chart we have max 9 swatches in palette properties. If we have more than 9 in chart, those 9 colors will be repeating. Is there any way to get more colors through CSS or can we edit in property level? Please give inputs.

[HenrikG]

@Dipankar

Did you ever find a method to pass the "n" value in :nth-child(n) ?
I am currently trying to color code a Deadline dimension based on certain logic.
The only method I have found regarding changing the background color of a dimension in a table is through CSS and using the :nth-child(n).

My idea was to define three separate CSS classes, one for each color(red, yellow, green).
Then through scripting logic I would iterate over the entire table at "onInitialization", catch the index of a row and pass this index to the "n" in :nth-child(n), thus coloring the table depending on the logic.

I have not been able to figure this one out. It might not even be possible to pass values from script to CSS classes?

[leppens]

@Dipankar 
It has been some time since I have been in a SAC system,
I would first try to add (and remove) a class on row level in your code.
(instead of passing a paramerter to css)
Not sure if you can add a class on an element of the table.

If that doesn't work, you could try to define a class / css rule for each of the max nr of rows you display and then activate the class by your script.
It is a workaround that would generate a lot of css code,.. but I think it should work without slowing down your loads.