Power Apps Disable Button

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 Button

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.
PowerApps button disable
  • To achieve this, Select the Button control and set its OnSelect property:
OnSelect = UpdateContext ({ButtonDisplayMode: DisplayMode.Disabled})

Where,

ButtonDisplayMode = Context Variable name

Power Apps button disable
  • Next, go to the button’s DisplayMode property and apply the variable name that you have created.
DispayMode = ButtonDisplayMode
disable button powerapps
  • 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.
button disable in Power Apps
Disable button in PowerApps
  • To workaround with this, Select the Label and apply the below code on its Visible property as:
Visible = IsBlank(ComboBox1.Selected)

Where,

See also  Power Apps Trim | Power Apps Remove First Character from String

ComboBox1 = Combo box control name

disable button in PowerApps
Power Apps disable button example
  • Next, Select the Next button and set its DisplayMode property as:
DisplayMode = If(
    IsBlank(ComboBox1.Selected),
    DisplayMode.Disabled,
    DisplayMode.Edit
)
power apps disable button
  • 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

PowerApps button conditional visibility

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
Power Apps button conditional visibility

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

OnSelect = UpdateContext ({vargallery: !vargallery})
powerapps disable button on condition

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.

See also  How to Group Items in a Power Apps Gallery?

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.

Power Apps Disable Button After Click

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

powerapps disable button after click

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.

powerapps set visible on button click

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.

power apps change button color on click

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.

See also  6 Easiest Ways to Use Power Apps ForAll Function

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.

PowerApps button style

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.

Power Apps button style

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.

powerapps button design

This way, we can design the Power Apps button.

Some more Power Apps articles you may like:

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
>