Use multiple buttons to change mutiple shape colors

[Jasreich]

Hello, I am a newbie, and I'm trying to create a map of a campus and list out all of the roadways on the campus.  I want to put buttons down the side of the map corresponding to each roadway.  Then when the buttons are clicked, it would turn a specific road label from green to red.  I put in the map as a background image, and inserted a few labels over the streets and used put in a couple buttons to test it.  When I click a button it changes all of the labels from green to red.  I was using the toggle function.  I'm trying to figure out how to tie a specific label to a specific button so when I put in 20 buttons and 20 labels all can be toggled independently.  It feels like this should be a very simple, single screen app to make, but I'm stuck.  Any help would be appreciated and if there is a better way to do this, I'm all ears.  

[SpongYe]

Hi @Jasreich 

To achieve this I would suggest to make use of variables. 

Use the Set function to set the value of a global variable, which temporarily holds a piece of information, such as the number of times the user has selected a button or the result of a data operation.

Set( varMainColor, RGBA(255, 255, 255, 1) )

And then you use to toggle to enable the variable.

https://learn.microsoft.com/en-us/power-platform/power-fx/reference/function-set

-----------------------
PowerYsa Power Platform Enthusiast [LinkedIn] | [Youtube]

I love to share my knowledge and learn from others. If you find my posts helpful, please give them a thumbs up 👍 or mark them as a solution ✔️. You can also check out my [@PowerYSA] for some cool solutions and insights. Feel free to connect with me on any of the platforms above. Cheers! 🍻

[Ben_L]

Hey Jasreich,

You can reference properties of controls by placing a dot after the control (e.g. Label1.'Property').

Unfortunately, you can't individually change the Fill property of Labels due to their design. What I would do is place rectangles over the labels and then set the fill properties of the rectnagles as variables. Then I would set the buttons OnSelect properties to change the variables color. You need to make sure that the label is in front of the rectangle though, so the text is visible. You can do this buy right clicking the label click reorder and send to front. 

I've put together a little walkthrough of how I would do it,

Then you would just have to repeat this for each respective label/button. 

Hope this helps man, let me know how it goes.

[Ben_L]

Sorry SpongYe, just seen you had dropped a response, hadn't loaded in for me.

[Jasreich]

Hey Ben_L, thanks for the speedy reply.  With your example, once I press the button to change the rectangle color, will I be able to press it again to change it back?  I will need to change it from red to green frequently throughout the day.  This is almost like a manual desk reservation system.  Someone sits at a desk and the proctor will click that desk on the seating chart and turn it red.  When the person gets up, they will click again and turn it green.  Same concept, except I am doing it with roadways on the campus and I wanted to have a list of those roads down the side of the map to click and control the colors.  Someone will call security and request to block a road and security will click the button and turn the road red until they get a call back that the road isn't blocked any longer.  Hopefully that makes sense.  Thanks so much!

[Ben_L]

Hey Jasreich, I've adjusted the code to suit this, each time you click it it will adjust its color. 

The way this works is it starts a tally when you click it, when its even its red, when its not its Green and clicking each time adds one to the tally. 

You can repeat this for each by setting a new variable.

Hope this helps :),

[Ben_L]

For more explanation, for the second variable you might do Button2.OnSelect = Set(ColorVariable2, ColorVariable2+1) and then Reactangle2.Fill =

If(
Mod(Value(ColorVariable2), 2) = 0,
Color.Red,
Color.Green
)

[Ben_L]

Its also worth noting that these values will reset when you exit the app. Since data is only temporarily stored on powerapps you could avoid this by utilizing a sharepoint list to store the data so it stays that color regardless of whether you leave the app or not.

If this interests you more than happy to give you a walkthrough 🙂

[Jasreich]

I used the code you provided above to make the buttons independently control the labels.  It works great.  Thank you!  Another question...My hope was I could have a couple people in our security headquarters that could click the buttons and keep a real time view of open/blocked roads.  Looks like this part will work.  What I don't know is, "How can I make it so many others can view this?"  I have the app open on my phone and my PC and when I make a change on the PC it does not update/change on the phone.  I'd like to have it connected to a large TV in our headquarters that provides a realtime view and allow other people to access it from their phones with the reatime view.  Is this possible, or not something that Power Apps can do?  I do not want everyone who views to be able to click the buttons and change the map.  Sorry I'm not better at this, but I appreciate your help!

[Ben_L]

Apologies for the delayed response,

No stress at all, happy I can be of help :D,

Its definitely possible but since its not utilizing locally stored data (since numerous people need to access it) you would have to use a database to store the data (I would say sharepoint lists is best since its free and more than capable of doing the job).

Firstly, Ill show you the structure of the list,

It contains the Title column and the Colour Column which is a text datatype column. Title is the default Title datatype. 

Next, make the connection to the list in PowerApps. Go to 'Add Data' > Sharepoint > Add A Connection > It will open up a page where you can add the sharepoint connection > Go back to the App > Ensure it is connected or else select that connection again. 

Once its connected, use the Patch function like so (Noting my list is called Test List, and my first Table has the Title column value of Table 1 etc,

This will actually live update the datbase so anyone who is using the app will be able to update these. It would be worth placing a timer on the screen too so it refreshes the list every 3 seconds or so.

For your convenience here is the code noting you will have to do this for every table/traffic light:

If(
LookUp('Test List', Title = "Table 1").Colour = "Red",
Patch(
'Test List',
LookUp('Test List', Title = "Table 1"),
{
Colour: "Green"

}

),
LookUp('Test List', Title = "Table 1").Colour = "Green",
Patch(
'Test List',
LookUp('Test List', Title = "Table 1"),
{
Colour: "Red"

}

)
)

2nd code:

If(
LookUp('Test List', Title = "Table 1").Colour = "Red",
Color.Green,
Color.Red
)

Hope this helps 🙂

If you need more tailored advice, feel free to reach out on DM.