Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
avsalynin
Active Contributor
22,138
 

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!
29 Comments
former_member94141
Participant
0 Kudos
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
Product and Topic Expert
Product and Topic Expert
0 Kudos

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
Active Contributor
0 Kudos
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
Participant
0 Kudos
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
Active Contributor
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
Participant
0 Kudos

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
Participant
0 Kudos
Hi Dipankar,

 

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

Thanks,

Sameer
avsalynin
Active Contributor
0 Kudos
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
Participant
0 Kudos
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
Explorer
0 Kudos
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
Active Contributor
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
Explorer
0 Kudos
2020.14.29
Good to know it will be pushed in one of the next updates. 😉

Dipankar
Participant
0 Kudos
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
Active Contributor
0 Kudos
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
Active Contributor
0 Kudos
"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;
}
0 Kudos
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
Active Contributor
0 Kudos

vote for the empowerment of css in AD:

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

balakandhan_s
Discoverer
0 Kudos


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
Active Contributor
Balakandhan Sethuramalingam

no we can not. In the application css define two classes, and in the element itself, use only the 1st.
balakandhan_s
Discoverer
0 Kudos
Well, that doesn't serve my purpose 🙂
Anyway thanks for the response.
avsalynin
Active Contributor
About fade transition effect with CSS i recommend to read this blog by jbarlowjb
carlbine
Explorer
is it possible to put background color in a whole row or cell if a specific cell contain a specific value?

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

vitran23
Active Participant
0 Kudos
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
Member
0 Kudos
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
Explorer
0 Kudos
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
Explorer
0 Kudos
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
Explorer
0 Kudos

@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
Explorer
0 Kudos

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

Labels in this area