How to apply Multiple conditional CSS to a button?
Question
Application Type
Reactive

Hi,

How can I add multiple style properties to a button? Basically I need to add two if statements in a style property of a button, something like this

Thank you for your time.

Hi Nannu,


Apologies, I overlooked it.

How about you try this:

Then on the On Click event, please make sure that you change the value of IsSelected or IsMissingFields (what you think is necessary) for the screen render to be triggered.

Thank you and kind regards,

Chris

mvp_badge
MVP

Hi Nannu,

you can try something like the example below:

Hope this helps.

Regards.

mvp_badge
MVP

Hi Nannu,


You can do it like Agno is suggesting using the property style but you will have to replace the (comma) by a ; (semicolon) which marks the end of a CSS instruction, otherwise it won't work. Here's an example:


Kind regards,
João

mvp_badge
MVP

exact, adjusted the sample image. Thanks João.

Hi Agno,

Thank you for your reply.

I need to add two different IF conditions.

Thanks

mvp_badge
MVP

Right, no problem, 

you can do that, example:

Regards.

Hi Agno,

In my case I have to separate conditions and both can be true at same time.

For eg.  Button is selected(Change background color) and user is missing some required fields(Highlight button's border with red color). 

Thanks


mvp_badge
MVP

Hi Nannu,


You can do that using an expression like:


If(IsSelected, "background-color:red; ","") + If(MissingSomeField, "border-color:red;")

Hi,

How can I put that expression on a button?

Thanks

mvp_badge
MVP

as João commented, the solution would be to place the IF's in extended properties:


mvp_badge
MVP

You click on the button and on the right side properties panel, you will see the option Extended Properties where you can add style and then on the line below you place your expression:



Hi,

I tried as you suggested but it didn't work. Also First condition stopped working.

Thanks

Hi Nannu,

Good morning!

Can you please change the method of your button to "Ajax submit" and apply as well the correct position of the Ajax refresh node in your logic for the button.

Kind regards,

Chris

Hi Christopher,

It's a reactive web application.

Thanks

Hi Nannu,


Apologies, I overlooked it.

How about you try this:

Then on the On Click event, please make sure that you change the value of IsSelected or IsMissingFields (what you think is necessary) for the screen render to be triggered.

Thank you and kind regards,

Chris


option 1


If(condition1, "background-color:red; ","") + If(condition2, "border-color:red;", "")    


option 2 (if you want to avoid spaces in style class)


If(condition1, "background-color:red; ", If(condition2, "border-color:red;", "")  )

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.