Multiple buttons on one screen, independent colour change on click

[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 

[Matren]

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]

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]

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]

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]

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]

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