Answered

Change button background color on click (No Fill property)

Like (1) Share

Report

Posted on 15 May 2024 16:09:25 by gbach2290

Ok. What I'm trying to do is pretty simple. I have a screen with multiple buttons. All I want to do is when a user clicks on a button, it changes the background color (to indicate it's selected). So for instance, the button is set to Primary in the Style & Theme area. Looking at other documentation, it seems like I should be able to set the Fill property of the button with a simple Update Context True/False statement in the OnSelect property.

When I look at the properties for the button, there is no Fill property. The closest I see is Appearance or BasePaletteColor. What am I missing? New to PowerApps but this seems like it should be a fairly easy thing to do. Any help would be appreciated.

Categories:

General Questions

example-powerapps...

All responses (8)

Answers (2)

Suggested answer

CarlosFigueira on 25 Oct 2024 at 19:12:14

Like (2)

Report
Change button background color on click (No Fill property)

On modern buttons you can use the 'BasePaletteColor' property to define their background (fill) color. If that property is set to blank, then it would use the color of the app theme.

In the example below, I'm using a collection to store the state of the buttons, and if the value relative to the button is 'Pressed', the BasePaletteColor property is updated to a green color (otherwise it is left blank, which uses the app theme):

The property values for the buttons:

BasePaletteColor: If(LookUp(colButtonStates, Name = Self.Text, State) = "Pressed", RGBA(146, 200, 0, 1)) OnSelect: With( {currentState:LookUp(colButtonStates, Name = Self.Text)}, If( IsBlank(currentState), Collect(colButtonStates, { Name: Self.Text, State: "Pressed" }), Patch( colButtonStates, currentState, { State: If(currentState.State = "Pressed", "Not pressed", "Pressed") })))

Hope this helps!
Kelvirino 16 on 25 Oct 2024 at 19:10:25

Like (1)

Report

Change button background color on click (No Fill property)

@gbach2290 - Thank you!
gbach2290 59 on 25 Oct 2024 at 17:19:55

Like (1)

Report
Change button background color on click (No Fill property)

@Kelvirino, here's what I did:

Select the button

In the OnSelect property, I used Update Context.
EXAMPLE: UpdateContext({selectK1121_S1_SystemChecked_btn: !selectK1121_S1_SystemChecked_btn})

In the Fill property, I used the variable to determine the fill color.
EXAMPLE: If(selectK1121_S1_SystemChecked_btn,RGBA(0,200,0,1),RGBA(127,127,127,1))
Kelvirino 16 on 25 Oct 2024 at 17:04:12

Like (1)

Report

Change button background color on click (No Fill property)

So, gbach2290 - how do you/did you make it work with modern controls (since I don't have Admin access on our company's account)? I'm having the same issue as you originally described.
gbach2290 59 on 15 May 2024 at 22:19:21

Like (2)

Report

Re: Change button background color on click (No Fill property)

Makes total sense. Thank you for your help!
Verified answer

Ami K 15,665 Super User 2024 Season 1 on 15 May 2024 at 22:04:41

Like (1)

Report

Re: Change button background color on click (No Fill property)

@gbach2290 - unless a modern control contains a feature/allows the user to do something which a classic control cannot replicate, I would stick to deploying an app with classic controls into your production environment as they are robust and not prone to the possible defects inherent with preview controls.
gbach2290 59 on 15 May 2024 at 21:47:56

Like (2)

Report

Re: Change button background color on click (No Fill property)

Well, I'll be.... didn't know there was a difference. I can see now. Thanks so much. BTW I did manage to figure out my issue with the modern button. Now I'll just have to see if I want to switch out my modern buttons for classic buttons.
Verified answer

Ami K 15,665 Super User 2024 Season 1 on 15 May 2024 at 19:40:51

Like (1)

Report

Re: Change button background color on click (No Fill property)

@gbach2290 - because modern controls remain in preview, they are not as fully featured as Classic controls. If you add the classic Button control into your app, you will see the Fill property.