Best way to change CSS

Best way to change CSS

  

Hi !


For the first time I'm trying to change the CSS of an element in my page. Is it possibile to do that ?


Example: during the "Preparation" ... if a value is > 0 use the "green CSS style" ... if a values is <=0 use the "red CSS style"


thanks guys !

Hi Luca,

Yes its possible. On the element you want to do that you have extended properties. Use the property "class" and on the value you can use inline if's to change the class you want that element to have. The css class should be declared on the page/wdiget style sheet or on the theme.

Regards,

Marcelo

Hi Luca,

Adding to what Marcelo said, notice when using extended properties you might replace element class style.

Regards,

Luca De Mori,

Yes it is pretty simple to apply element CSS. You can take a variable type integer in screen and assign some value.

and based on that you can check the CSS


You can has syle under element property: where you can assign the dynamic CSS using Expression.

Like below

Hope it will help you.

PS> you can write .Red-CSS-Style{

}

.Green-CSS-Style{

} inside module theme or screen theme.


Thanks

Dileep

thanks to all of you for the answers ...


but I'm looking for an "server action" to do that ... I need to change the CSS during an screen action

Hi Luca,

Is there any specific reason to to change the CSS during an screen action. I think you should update the condition in server action and based on condition you can change the css using  extended properties.


Regards

-SK-

Hi Luca,

If you want to use it in a screen action you can do something like this. Create a variable called IsRed as boolean that starts as false. Than on your screen element on the extended properties (property class) value have something like this If(IsRed, RedCssClass, GreenCssClass). During the screen action change the value of IsRed to true and do an ajax refresh to the element.

Regards,

Marcelo

Hi Luca,

In your first post, you said that you'd need to load data from preparation and adapt the CSS. But now you say you need a server action.

What is exactly your the use case, or do you have more than one use case?

Hi Marco,


yes ... in multiple screen actions (including the preparation) I have to check a value ... if the value is > 0 I would like to have the GREEN CSS, if the value is <=0 I would like to have the RED CSS.

I'll try with the solution of Marcelo.

Hi Luca,

Now is more clear what you need, as Luca said you can use ajax refresh in a screen action to render again that element.

And in case you want to reuse in more screens or in same page you can wrap that element in a webblock (to reduce the number of times that condition is written).

Regards,