Change Colours of Button by multiple clicking

(0) Share

Report

Posted on by PowerAppUser98

Hey,

simple question but i dont get a solution so far.

I have a Button which should change the Color ("Fill") by Clicking the Button itself.

OneTime clicking change Color from Grey to Red,

SecondTime clicking change Color from Red to Green

ThirdTime clicking change color from Green to Grey

How do I do this?

Side information:

I want to controll a Forms in Background (invisible) like (If(Button.Fill=Color.Green;XXX;If(Button.Fill=Color.Red;XXX...))

Categories:

Building Power Apps

I have the same question (0)

All responses (4)

Answers (1)

Verified answer

AARON_C 2,235 Most Valuable Professional on at

Like (0)

Report
Hi @PowerAppUser98,

You can use a switch function to achieve this. Place this code in the OnSelect property of your button.

Switch(btnColor, "Gray", UpdateContext({btnColor: "Red", btnColorCode: Color.Red}), "Red", UpdateContext({btnColor: "Orange", btnColorCode: Color.Orange}), "Orange", UpdateContext({btnColor: "Gray", btnColorCode: Color.Gray}) )

Place this on the Fill property of your button.

btnColorCode

And OnVisible of the screen.

UpdateContext({btnColor: "Gray", btnColorCode: Color.Gray})

Please tick Accept as solution if the answer is useful.
Thanks,
@AARON_C

Was this reply helpful? Yes No
PowerAppUser98 84 on at

Like (0)

Report
This works fine, but in Fill property has to be btnColorCode instead of btnColor. (doesnt work if btnColor)
Thank you very much
If i want multiple button on the screen, is there any way to control each button indepent from the others?
For example: i got the problem if one button is already red filled the second one starts with orange (second color) instead of the first color.

Switch(btnColor; "Grey"; UpdateContext({btnColor: "Red"; btnColorCode: Color.Red}); "Red"; UpdateContext({btnColor: "Orange"; btnColorCode: Color.Orange}); "Orange"; UpdateContext({btnColor: "Grey"; btnColorCode: Color.Gray}) )

(using orange instead of green)

It would be nice, if the second button starts with red independent which color the first button is

Was this reply helpful? Yes No
AARON_C 2,235 Most Valuable Professional on at

Like (0)

Report

Hi @PowerAppUser98

Sorry I missed that, I have updated my first post to reflect the change of color and fixed the fill property.

The easiest way I can think of doing this is to create a new set of variables for your second button.

Please tick Accept as solution if the answer is useful.
Thanks,
@AARON_C

Was this reply helpful? Yes No
AARON_C 2,235 Most Valuable Professional on at

Like (0)

Report
@PowerAppUser98

I have gotten close to the solution but still need to make the buttons totally Independant. What I have done:

Created a collection. This can be placed either on the OnVisible property of the screen or on the OnSelect property of a button. If on the button, you will need to select the button when screen is visible. ( OnVisible property: Select(Button1) )

ClearCollect( btns, Table( { btnColor: "Gray", btnColorCode: Color.Gray }, { btnColor: "Red", btnColorCode: Color.Red }, { btnColor: "Orange", btnColorCode: Color.Orange } ) ) // This is an example of 3 buttons with each one being indendently set to whatever color you want

The items property of a horizontal gallery should be set to: btns
The OnSelect property of the button:

Switch(ThisItem.btnColor, "Gray", Patch(btns, ThisItem, {btnColor: "Red", btnColorCode: Color.Red}), "Red", Patch(btns, ThisItem, {btnColor: "Orange", btnColorCode: Color.Orange}), "Orange", Patch(btns, ThisItem, {btnColor: "Gray", btnColorCode: Color.Gray}) )

The Fill property: btnColorCode

Please tick Accept as solution if the answer is useful.
Thanks,
@AARON_C

Was this reply helpful? Yes No