Multiple buttons on one screen, independent colour change on click

(0) Share

Report

Posted on by Powernewbie22

Hi,

I have 4 buttons on one screen.

I have successfully tried a few formulas to change the colour of a button on click (go from red to green when a button has been clicked to show this action is completed, e.g. launch a weblink).

The issue is I can not seem to find a way to make buttons work independently, when I click on one button that is red it goes to green, but so do all the buttons. I want them to go green one by one as they are clicked till the user has clicked all of them and they are all green to show everything has been completed.

How would I do this? Is it possible?

Thanks

Categories:

Building Power Apps

All responses (6)

Answers (0)

Sort by

Matren 454 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Powernewbie22,

Yes this is possible. The reason that it is not working is you are probably using the same variable name to change the color for all the buttons. If you use four different variables with different names, it should work.

If that doesn’t solve your problem, then would you please share your code?

Best Wishes,
Matren

--------------------------------------------------------------------------------------------
Find this post helpful, give it a Thumbs Up
Solved your problem, click Accept as Solution so others can find it
Matren 454 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi @Powernewbie22,

Did this solve your problem? If so, would you mark the Accept as Solution?

If not, would you share the code you are using to change the color of your icons?

Best Wishes,
Matren
Powernewbie22 4 on at

Like
a
(0)

Report
Copy link

Link copied!
Sorry for the delay @Matren

This is what I am using:

(Screen's OnVisible)
ClearCollect(ButtonColors,{Pressed:true,Color:RGBA(255, 0, 0, 1)},{Pressed:false,Color:RGBA(0, 255, 0, 1)}); Set(ButtonPressed,false);

All button's OnSelect property
Set(ButtonPressed,!ButtonPressed);

All button's Fill property
LookUp(ButtonColors,Pressed=ButtonPressed,Color)

So I suppose I need to know how to change the formula for button 1, 2 3 etc so it does individual colour changes. I am not that skilled to see where I should do this unfortuntely.

Any help much appreciated.
Akser 1,546 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!
Hi @Powernewbie22,

You can achieve this in multiple ways but I attempted to keep the formulas similar.
Screen's OnVisible (you can name your buttons as you wish, and have unique colors for each)

ClearCollect( ButtonColors, { Button: Button 1, Pressed: false, PressedColor: Red, NotPressedColor: Green }, { Button: Button 2, Pressed: false, PressedColor: Red, NotPressedColor: Green }, { Button: Button 2, Pressed: false, PressedColor: Red, NotPressedColor: Green }, { Button: Button 3, Pressed: false, PressedColor: Red, NotPressedColor: Green } );

Button's OnSelect property (update the formula - Button 1, Button 2 etc. - for each button)

UpdateIf(ButtonColors, Button = "Button 1", If(Pressed = false, true, false));

Button's Fill property (per button, like above)

If(LookUp(ButtonColors, Button = "Button 1", Pressed) = true, PressedColor, NotPressedColor)
Powernewbie22 4 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi, I have copied the exact formulas as above but getting a red x errors. Can I confirm I should be copying the exact formulas as above, I dont need to edit anything else? thanks
WarrenBelz 156,532 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!
Hi @Powernewbie22 ,

The Items of your Gallery (replace with your button names)

Table( {Value: "Button 1"}, {Value: "Button 2"}, {Value: "Button 3"}, {Value: "Button 4"} )

The Text of your Button

ThisItem.Value

OnSelect of your button (add anything currently there after this)

UpdateContext({varSelected: ThisItem.Value})

The Fill of your Button

If( ThisItem.Value = varSelected, Green, Red )

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Visit my blog Practical Power Apps