How can I change the background color of a ButtonGroup to indicate the next possible

Back to Forums

Gustavo Nakamura

Solved

Question

Beginner

Reactive

New to OutSystems

Application Type

Reactive

Service Studio Version

11.54.34 (Build 62959)

Platform Version

11.24.0 (Build 41209)

Hello Outsystems community,
I was searching more about it but didn't actually find exactly what I was looking for or at least something that could help me with this.

What I need is to change the background color of a button in the ButtonGroup to indicate the next possible option, so for example, I have 4 status: Planned, Active, Canceled and Closed, when the user selects Active I want to change the color of the Closed to light green and the canceled to gray so I can indicate that after active it can only get closed and not canceled.

Basically, the idea is to follow this:

So when the status is
Planned -> Active/Canceled background = light green and Closed = gray
Active -> Closed = light green and Canceled and Planned = gray
Closed/Canceled -> everything with background = gray

My first idea was to just simply assign the new values (color) for the respective backgrounds variables, but I don't really know how to do it.

I tried to create an event on click to change the background color, but I don't know how to change this background color information direct on the client action once I couldn't even find the exact variable for each button background.

Appreciate any help :)
Thank you!

14 days ago

Deepak Mani

Solution

Hi Gustavo Nakamura,

I have fulfilled your requirements. Please review the attached OML solution for your work below.

You can also test it by clicking here.

Thanks

See solution in context

Button group colour change by Status.oml

13 days ago

Dadi

Solution

Hi Nakamura

I drawing your condition like this:

In button group item, you can update style on its properties by those condition

it will change the color based on current status

Hope this is that you asking for

See solution in context

13 days ago

1 reply

13 days ago

Show thread

Hide thread

Gustavo Nakamura

Hi Dadi,
Thanks for the help, I just have one question

It's not recognizing the variable, should I create some kind of logic to get these information? or something like this.

The strange part is that it actually change the background color even if he says that it couldn't identify the variable.

Thanks!

13 days ago

Gustavo Nakamura

Solution

I actually ended up using this structure:

"button-group-item" + If(GetAgreementById.List.Current.Agreement.agreement_status = 3 or GetAgreementById.List.Current.Agreement.agreement_status = 4, " background-neutral-7", " ")

And the space before the background-neutral-7 is completely essential hahaha
So, I basically used every answer and was able to solve it, thank you so much!

I'm marking Deepak and Dadi answers as the solution once was the ones which helped me the most, but I really appreciate all the help.

Thank you so much!

See solution in context

7 days ago

Mikko Nieminen

Hi,

Maybe a client side function-action with two input parameters: button identifier and current status, function output could be a CSS class according to your logic. This function would then be used in each button's Style Classes property to set the color by button+status combination.

Same function could also be re-used in Enabled property to check if user is actually allowed to click the button (by checking if function's output value = light green CSS class name).

14 days ago