Power Apps Disable Button - SharePoint & Microsoft Power Platform Tutorials - SPGuides (2024)

In this Power Apps article, I will explain what is a Button in Power Apps, how to disable button in Power Apps with various examples.

Also, I will discuss how you specify what happens when a user selects a button or control, and many more like:

• PowerApps disable button after click
• How to change button color on click in Power Apps
• PowerApps Button Design

Power Apps Button Control

PowerApps Button is a type of input control that allows a user to tap on it to interact with the app. When a user clicks on the button, the app performs some action.

The image below represents how a Power Apps button looks like:

Power Apps Disable Button

To disable button in Power Apps, follow the examples below.

Example – 1:

• I have a Power Apps Button named Hit Me. I would like to disable it after it’s been pressed once. Refer to the screenshot below.

• To achieve this, Select the Button control and set its OnSelect property:

OnSelect = UpdateContext ({ButtonDisplayMode: DisplayMode.Disabled})

Where,

ButtonDisplayMode = Context Variable name

• Next, go to the button’s DisplayMode property and apply the variable name that you have created.

DispayMode = ButtonDisplayMode

• Save, Publish, and preview the app. Once we click the button [Hit Me], it will disable.

This is how to work with PowerApps disable button.

Example – 2:

• There is a PowerApps Combo box control, a Label control, and a button. Here, the button will be in disable mode until and unless a user selects any value from the Combo box. Also, it will show a warning message like “Please select any option and click on the Next button“.
• Once the user selects any value in the combo box, the button will be enabled and ready to clickable. The warning message will also disappear.

• To workaround with this, Select the Label and apply the below code on its Visible property as:

Visible = IsBlank(ComboBox1.Selected)

Where,

ComboBox1 = Combo box control name

• Next, Select the Next button and set its DisplayMode property as:

DisplayMode = If( IsBlank(ComboBox1.Selected), DisplayMode.Disabled, DisplayMode.Edit)

• Finally, Save and Preview the app. If you do not select any option in the combo box, you will see a warning message, and the button will be in disable mode.
• When you select an option from the combo box, the button will be enabled and ready to press.

This is how to disable button in PowerApps.

Power Apps Button Conditional Visibility

Here, we will see how to work with PowerApps button conditional visibility.

I have a Power Apps gallery that I would like to toggle visibility on and off based on a button click.

The gallery is not displayed by default. However, it shows up if the user hits the button. It disappears after the button is clicked for the second time.

To work around this, follow the below simple steps:

1. Set Power Apps Screens (where the gallery is present) OnVisible property:

OnVisible = UpdateContext ({vargallery: false})

Where,

vargallery = Context variable name

The above code specifies when you will navigate the screen; it will force the gallery to be invisible.

2. Next, Select the gallery control and set its Visible property to the created variable as:

Visible = vargallery

3. At last, select the Button (Click to Open Gallery) and set the below code on its OnSelect property:

OnSelect = UpdateContext ({vargallery: !vargallery})

4. Once everything is done, save and preview the app. When you tap on the button, the gallery will be visible. Again, when you click the button, the gallery will be invisible.

This is all about the PowerApps button click event.

Power Apps Disable Button After Click

I have a Registration app. A user will enter the details [including address] and click on the REGISTER button.

Here, I would like to disable the button when the user presses it once. Because that specific user can only register once but not multiple times. Refer to the image below.

To disable Power Apps button after click, follow the steps below:

1. Select the REGISTER button and set its OnSelect property as:

OnSelect = Set(IsRegistered,true)

Where,

IsRegistered = Variable name

2. Next, go to the DisplayMode property of the button and write the formula below:

DisplayMode = If(IsRegistered,DisplayMode.Disabled,DisplayMode.Edit)

The above code specifies if the variable is true, then the button will be disabled mode else edit mode.

This way, we can work with Power Apps disable button after click.

Power Apps Change Button Color On Click

Suppose you want to change the button color when it’s selected or pressed, then follow the example below.

There is a Power Apps Text input control and a Button [SAVE]. When the user clicks on the button, the button and text box color will change, as shown in the image.

1. To achieve this, We can create a variable on the OnSelect property of the button control:

OnSelect = UpdateContext({ toggleValue: !toggleValue })

Where,

toggleValue = Context variable name

2. Next, apply the codes below on both of the control (Button and Text input) properties:

Button.Color = If(toggleValue, Color.White, Color.GreenYellow)Button.Fill = If(toggleValue, Color.Blue, Color.Brown)TextBox.Color = If(toggleValue, Color.Black, Color.White)TextBox.Fill = If(toggleValue, Color.White, Color.Black)

3. Save and preview the app. When you press the SAVE button, the text field color will change, including the button color.

This is how to work with PowerApps change button color on click.

Power Apps Button Design

As we know, to provide various styles to the button, we can use some of the button properties like Fill, Color, BorderColor, HoverFill, HoverColor, etc.

Suppose, as in the screenshot below, you want to design the PowerApps button with a shadow on that. To design the Power Apps button, we can use HTML and CSS.

1. In Power Apps, insert an HTML text control and apply the below code on its HtmlText property as:

HtmlText = "<div style='background-color: rgba(0,0,0,0); box-shadow: 1px 2px 22px 0px rgba(89,87,87,0.85); margin: 20px; width: 195px; height: 190px; border-radius: 30px'></div>"

You can provide the height and width size as per your need.

2. Next, add a button control and fit it properly inside the HTML input control. You need to fit (according to the height and width of the HTML text input) the button size inside the HTML text input, as shown below. So that it should look like a shadow.

This way, we can design the Power Apps button.

Some more Power Apps articles you may like:

• PowerApps hyperlink button
• Power Apps Button OnSelect
• Power Apps Show/Hide Button Based On The Current User
• Power Apps Modern Information Button Control
• Container in Power Apps

Finally, I hope you understand everything related to Button in PowerApps like how to disable a button in PowerApps and many more like:

• PowerApps disable button on condition
• Power Apps disable button after click
• How do you specify what happens when a user selects a button or control