cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Luchoef
Frequent Visitor

Changing the colour of a button when clicked twice

Hi all, 
I'd like to display a button that changes its colour when clicked several times. 
Clicked once --> Red; clicked twice --> Green. 

I've managed to do the first part by introducing a variable 'var_1' which is defined on the screen site as: OnVisible: set(var_1;0).

As shown on the attached picture, when clicked on the button, the value changes to '1' and the colour changes to red.


However, I need help with the second part. 


Can anyone provide me with a solution or a hint? 

Thanks and best regards!

Lucas

1 ACCEPTED SOLUTION

Accepted Solutions
AmDev
Super User
Super User

Yes, sorry that's what I meant by setting your variable - you can self reference and increment your variable in the Set function, so in your case it would be the following for your button:

 

Onselect:

Set(var_1,var_1+1)

 

Fill Colour:

Switch(var_1,
0, RGBA(100, 118, 132, 1),
1, Red,
2, Green,
3, Orange)

 

You may want to use a reset button to set you var back to 0 or after your last colour, you could reset the variable back to 0 to bring it back to the initial grey colour (using a similar If statement to the one in your original post) - that part depends on your use case, but there are a few options for how you want to handle that

View solution in original post

3 REPLIES 3
AmDev
Super User
Super User

Hi @Luchoef 

 

Use switch for your fill as follows:

 

Switch(varfill,
0, RGBA(100, 118, 132, 1),
1, Red,
2, Green,
3, Orange)

 

And set your variable like follows:

Set(varfill,varfill+1)

 

You may need a bit a logic to reset your variable back to 0 if required also

 

Hope this helps - Good luck! ☘

Luchoef
Frequent Visitor

Hi @AmDev

 

thanks for quick reply!

Do I have to change the OnSelect property as well? For the button, it reads "If(var_1=0;Set(var_1;1);Set(var_1;0))" at the moment. I tried your recommendation but it still does not work as anticipated...

AmDev
Super User
Super User

Yes, sorry that's what I meant by setting your variable - you can self reference and increment your variable in the Set function, so in your case it would be the following for your button:

 

Onselect:

Set(var_1,var_1+1)

 

Fill Colour:

Switch(var_1,
0, RGBA(100, 118, 132, 1),
1, Red,
2, Green,
3, Orange)

 

You may want to use a reset button to set you var back to 0 or after your last colour, you could reset the variable back to 0 to bring it back to the initial grey colour (using a similar If statement to the one in your original post) - that part depends on your use case, but there are a few options for how you want to handle that

Helpful resources

Announcements
October Events

Mark Your Calendars

So many events that are happening this month - don't miss out!

Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Users online (3,882)