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):
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:
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!
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.
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.
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;
}
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”) {
Hi Dipankar,
I also have a similar requirement. Did you get a chance to make it dynamic?
Thanks,
Sameer
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()
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?
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)
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');
}
2020.14.29
Good to know it will be pushed in one of the next updates. 😉
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?
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 ?
is it possible to add css - to a chart values font color (Version - 2020.21.8)
ex: display Numeric chart values in White color.
"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?
vote for the empowerment of css in AD:
https://influence.sap.com/sap/ino/#/idea/267314/
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.
Balakandhan Sethuramalingam
no we can not. In the application css define two classes, and in the element itself, use only the 1st.
Well, that doesn't serve my purpose 🙂
Anyway thanks for the response.
About fade transition effect with CSS i recommend to read this blog by James Barlow
is it possible to put background color in a whole row or cell if a specific cell contain a specific value?
Sir Aleksey Salinin is it possible to call multiple css class of table in one condition? or is it possible in looping ?
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.
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%