cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MJK
Helper III
Helper III

Change the color of the button after it is clicked

Hi,

 

I have a vertical gallery with buttons as one of the field's, So I have multiple buttons with one instance. Now I need to change the color of each button after it is clicked to show which buttons are clicked and which are not.

 

Thanks.

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
WarrenBelz
Super User
Super User

Hi @MJK ,

You need to add a column to your gallery of true/false (boolean) type - I will call it BtnClick below.

On the OnSelect of the button, put this

Patch(
   ThisItem,
   {BtnClick:!BtnClick.Value}
)

Then the Colour of the button

If(
   ThisItem.BtnClick=true,
   YourClickedColor,
   YourNormalColor
)

 

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.

 

View solution in original post

8 REPLIES 8
WarrenBelz
Super User
Super User

Hi @MJK ,

You need to add a column to your gallery of true/false (boolean) type - I will call it BtnClick below.

On the OnSelect of the button, put this

Patch(
   ThisItem,
   {BtnClick:!BtnClick.Value}
)

Then the Colour of the button

If(
   ThisItem.BtnClick=true,
   YourClickedColor,
   YourNormalColor
)

 

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.

 

v-xida-msft
Community Support
Community Support

Hi @MJK ,

Could you please share a bit more about your app's configuration?

Do you add several buttons inside your Gallery?

 

Based on needs that you mentioned, I think you want to achieve your needs as following screenshot, is it right?

6.JPG

 

According to the needs that you mentioned, I think there is no direct way to achieve your needs. As an alternative solution, you need to add a additional column in your data source (your Gallery connected to) to store the button click status for each item in your Gallery.

 

I have made a test on my side, please consider take a try with the following workaround:

My data source structure as below:

7.JPG

Note: The ButtonOptions column is a used to store the button click status for each item in your Galleru.

 

Add a Gallery in my app screen, set the Items property to above Table data source ("ProductsCollection"). Then add three buttons inside the Gallery, set the Text property of these buttons to "Option1", "Optjion2", "Option3", ... individually.

Set the OnSelect property of the "Option1" button to following:

Patch(
      ProductsCollection, 
      ThisItem, 
      {
        ButtonOptions: ThisItem.ButtonOptions & "Option1;"   // Modify formula here for each button
      }
)

set the Fill property of the "Option1" button to following:

If(
    "Option1" in ThisItem.ButtonOptions,  // Modify formula here for each button
    RGBA( 255, 140, 0, 1 ), 
    RGBA(56, 96, 178, 1)
)

 

Set the OnSelect property of the "Option2" button to following:

 

Patch(
      ProductsCollection, 
      ThisItem, 
      {
        ButtonOptions: ThisItem.ButtonOptions & "Option2;"
      }
)

 

set the Fill property of the "Option2" button to following:

 

If(
    "Option2" in ThisItem.ButtonOptions, 
    RGBA( 255, 140, 0, 1 ), 
    RGBA(56, 96, 178, 1)
)

 

 

Set the OnSelect property of the "Option3" button to following:

 

Patch(
      ProductsCollection, 
      ThisItem, 
      {
        ButtonOptions: ThisItem.ButtonOptions & "Option3;"
      }
)

 

set the Fill property of the "Option3" button to following:

 

If(
   "Option3" in ThisItem.ButtonOptions, 
    RGBA( 255, 140, 0, 1 ), 
    RGBA(56, 96, 178, 1)
)

Please refer to above solution, then try it for your scenario, then check if the issue is solved.

Test.gif

 

 

Of course, if you want to unselect button option when you press button again, please consider modify the formula within the OnSelect property of each button in your Gallery as below:

"Option1" OnSelect:

If(
    "Option1" in ThisItem.ButtonOptions,
    Patch(
          ProductsCollection,
          ThisItem,
          {
              ButtonOptions: Substitute(ThisItem.ButtonOptions, "Option1;", "")
          }
    ),
    Patch(
          ProductsCollection, 
          ThisItem, 
          {
              ButtonOptions: ThisItem.ButtonOptions & "Option1;"
          }
    )
)

 

"Option2" OnSelect:

If(
    "Option2" in ThisItem.ButtonOptions,
    Patch(
          ProductsCollection,
          ThisItem,
          {
              ButtonOptions: Substitute(ThisItem.ButtonOptions, "Option2;", "")
          }
    ),
    Patch(
          ProductsCollection, 
          ThisItem, 
          {
              ButtonOptions: ThisItem.ButtonOptions & "Option2;"
          }
    )
)

"Option3" OnSelect:

If(
    "Option3" in ThisItem.ButtonOptions,
    Patch(
          ProductsCollection,
          ThisItem,
          {
              ButtonOptions: Substitute(ThisItem.ButtonOptions, "Option3;", "")
          }
    ),
    Patch(
          ProductsCollection, 
          ThisItem, 
          {
              ButtonOptions: ThisItem.ButtonOptions & "Option3;"
          }
    )
)

Please take a try with above solution, check if it could help in your scenario.

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Thanks @v-xida-msft for the huge answer to the small question.

@MJK , please let me know if I have over-simplified this.

@WarrenBelz , @v-xida-msft 

The Items property of my Gallery is a database table, How do I add an extra column to the Gallery without adding a column to the db table? 

v-xida-msft
Community Support
Community Support

Hi @MJK ,

Based on the needs that you mentioned, I think the collection could achieve your needs. You could consider load your data source records into a collection, along with a new column "ButtonOptions" added via the AddColumns function.

 

On your side, please consider set the OnStart property of App to following:

ClearCollect(
             RecordsCollection,
             AddColumns(
                        'Your Data Source',
                        "ButtonOptions",
                        ""
             )
)

them use the RecordsCollection as data source in your app instead of your original data source. And bind your Gallery to the RecordsCollection.

Note: The result the AddColumns function returned is a temporary table, which would not make any changes to your underlying data source.

 

After that, re-load your canvas app (fire the OnStart property of App), then try the solution I provided above, check if the issue is solved.

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi @MJK ,

You need something to store the value in the gallery or you simply cannot control which buttons are to change colour. You can use AddColumns and set the Default to false, Patch true to it when the box is checked and bind the box to the added field.

 

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.

Hi @MJK ,

Just checking if you got the result you were looking for on this thread. Happy to help further if not.

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.

v-xida-msft
Community Support
Community Support

Hi @MJK ,

Have you taken a try with the solution I provided above? Is it helpful in your scenario?

 

According to the needs that you mentioned, I think the solution I provided above could achieve your needs. Please consider take a try with it, check if the issue is solved.

 

If you have solved your problem, please consider go ahead to click "Accept as Solution" to identify this thread has been solved.

 

Best regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Users online (1,339)