Change colors

[JérômeD]

Hello,

I have many rectangle that I want their colors change like this :

Rectangle color default -> White ; I click one time -> Green ; I click a second time -> Red ; I click a third time -> White ; ......

And this for infinity times. I also have many rectangle and I want to change their color not for all of them (if i click on rectangle1, only rectangle1 color's change, if i clikc on rectangle2, only rectange2 color's change, .....)

I tried to initiate at the On Visible screen this : (the colors are not white, green and red, it's just a test)

Set(CouleurClique;{neutre:RGBA(56; 96; 178; 1);ChgmtOK:RGBA(255; 255; 255; 1);ChgmtPASOK:RGBA(45; 91; 26; 1)})

But now i don't know how to progress..

Thanks !

[FLMike]

Hello,

It depends on if you plan on setting the color as a "random" value each time they click or not. 

But lets pretend that you have a defined set of colors, like 100.

Create a collection that has all the RGBA values in it

ClearCollect(Colors, 

  { R: 0, B: 0, G: 0, A: 0, Index: 1, Default: true } // set default to false for all others

);

Now for the index make sure to set it to some value like 1-100

Now in a second collection, one that stores the current Index value for each square/control. In the initial creation of this collection, set the index to the LookUp(Colors, Default = true).Index so that it will have a default color value

ClearCollect (ControlColors, { SomeUniqueThingAboutTheControls: 1, CurrentIndex: 5 } );

then when someone clicks

OnSelect (or whatever you use)

Update(ControlColors, SomeUniqueThingAboutTheControls = 1, CurrentIndex = CurrentIndex +1);

Now your colors change.

if you just want random colors, thats fine, but you still need a collection to track the RGBA values OR if you dont care about the possibility of it ever being the same color again, just use the Random function to generate random RBGA values in the Color property of each square/control.

Cheers,

If this helps please mark as Solved or Kudos Thanks!

[CarlosFigueira]

If you want to have multiple rectangles with the same color cycle rules, you can have something like a collection where you would save the color based on the clicks on the rectangles. You will need to have something to uniquely identify the rectangles (in the example below I'm calling them "R1", "R2", "R3" and "R4"):

To implement that I updated two properties in the rectangles: Color and OnSelect. This is the OnSelect expression for the first rectangle (for the others you need to change the name on the second line):

With(
    {rectName:"R1"},
    With(
        {currentState:LookUp(stateCollection, Name = rectName)},
        If(
            IsBlank(currentState),
            Collect(stateCollection, {Name: rectName, Color:"G"}), // first click, go to green
            Patch(
                stateCollection,
                currentState,
                {
                    Color:Switch(
                        currentState.Color,
                        "G", "R", // From green to red
                        "R", "W", // From red to white
                        "G") // otherwise back to green
                }))))

It first tries to find the state for that rectangle in the collection; if it doesn't find any, then go to the state where the first click would take them (green). If it does, then update the collection with the next color that it should go.

The Color property of the rectangles performs a lookup in the collection for the rectangle name (you would need to update the name in the second line for the remaining rectangles in the app):

Switch(
    LookUp(stateCollection, Name = "R1", Color),
    "G", Color.Green,
    "R", Color.Red,
    Color.White)

Since the initial state is white, we use it as the "otherwise" argument to the Switch function - it will work either if there is a record for the rectangle with the "W" color, or if there is none (in which case the LookUp function would return a blank value).

The app shown below is attached if you are interested in seeing it.

Hope this helps!

[CarlosFigueira · Accepted solution]

Thinking a little further, you actually don't need to have different expressions for different rectangles, where you change their names - since you can use the control itself as the value of the property in the collection. Also, you can store the color directly in the collection, so there is no need to use the "R", "G", "W" codes...

If you update the OnSelect property of the rectangle to

With(
    {currentState:LookUp(stateCollection, Name = Self)},
    If(
        IsBlank(currentState),
        Collect(stateCollection, {Name: Self, Color:Color.Green}), // first click, go to green
        Patch(
            stateCollection,
            currentState,
            {
                Color:Switch(
                    currentState.Color,
                    Color.Green, Color.Red, // From green to red
                    Color.Red, Color.White, // From red to white
                    Color.Green) // otherwise back to green
            })))

Then you can set the Color property to:

Coalesce(LookUp(stateCollection, Name = Self, Color), Color.White)

And after that you can use the same expression for all rectangles.

Hope this helps!

[JérômeD]

Hello CarlosFigueira,

It's exactly what I need but I don't know how to make it. I'm begginer and it looks hard for me.

I can't import your app I guess it's because I have a french version of powerapps.

I looked for a tuto to create collection but with this context app i can't do it 😕

And if I want to do RGBA code instead of "Color.green" how can I do ?

I keep looking for myself while I wait an answer.

Thanks a lot for your help !

[JérômeD]

Hello,

I tried but I failed 😕

Someone can help me to create the collection wich have the colors please ?

Thanks

[CarlosFigueira]

Helo Jérôme, here is a video that shows the process in a new app. The collection will be created automatically, when you refer to it in the OnSelect property of the rectangle(s). And you can certainly change the colors to from Color.XXX to any other one using the RGBA function. One last note: if you are using French, then you'll need to replace the ',' separator with ';' (since we use ',' as the decimal separator in French and other languages) - see updated expressions below.

OnSelect expression:

With(
    {currentState:LookUp(stateCollection; Name = Self)};
    If(
        IsBlank(currentState);
        Collect(stateCollection; {Name: Self; Color:Color.Green}); // first click, go to green
        Patch(
            stateCollection;
            currentState;
            {
                Color:Switch(
                    currentState.Color;
                    Color.Green; Color.Red; // From green to red
                    Color.Red; Color.White; // From red to white
                    Color.Green) // otherwise back to green
            })))

Fill expression:

Coalesce(LookUp(stateCollection; Name = Self; Color); Color.White)

Hope this helps!

[JérômeD]

Hello CarlosFigueira,

Thanks a lot for your help, I understand how does it works now !

I have a little problem, I make my rectangles in a gallery and when I click on one of them, all change colors, can we dissociate them and keep the gallery ?

I have another problem, I need to have rectange and label text above the rectangle so the text is foreground and i can't click on the rectangle to change the color. Is that possible to have label text foreground but the click is for the rectangle background ?

[CarlosFigueira]

For rectangles in a gallery: the original logic uses the rectangles themselves as the "key" to the dictionary of rectangles and colors. But if you have a gallery, then you can use the records (or their identifiers) as the keys. For example, if your gallery Items property comes from a SharePoint list, you can have something like this for the OnSelect in the rectangle (since SharePoint items have a unique ID property):

With(
    {currentState:LookUp(stateCollection; Name = ThisItem.ID)};
    If(
        IsBlank(currentState);
        Collect(stateCollection; {Name: ThisItem.ID; Color:Color.Green}); // first click, go to green
        Patch(
            stateCollection;
            currentState;
            {
                Color:Switch(
                    currentState.Color;
                    Color.Green; Color.Red; // From green to red
                    Color.Red; Color.White; // From red to white
                    Color.Green) // otherwise back to green
            })))

And this for the Fill property:

Coalesce(LookUp(stateCollection; Name = ThisItem.ID; Color); Color.White)

Hope this helps!