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 III
Super User III

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 III
Super User III

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

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
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (3,519)