How to Show/Hide Button Based on Condition in Power Apps? [With Various Examples]

Last week, I created a registration form in Power Apps. There, I was required to hide the Register button until the user clicked the agree terms and conditions check box, and I achieved this successfully by applying some tricky conditions.

In this article, I will show you how to show/hide button based on condition in Power Apps. We’ll also see how to hide the icons and Power Apps form fields using some conditions.

Show/Hide Button Based on Condition in Power Apps

I will show you two examples of showing and hiding the Power Apps button control. They are,

• Display the Register button in Power Apps forms only if the user agrees to the terms and conditions.
• Display the Create Account button only if the user provides all the details.

Let’s see the examples now!

Example 1: Display Power Apps Button Based On Check Box Value

Here, I have a Power Apps form for event registrations that allows users to register. Now, the Register button will be visible only if the users select the Agree to Terms and Conditions check box.

I took datasource as a SharePoint list named Event Registrations for the above Power Apps form.

Column Name	Data Type
Full Name	Title(Single line of text)
Event Name	Single line of text
Event Date	Date and Time
Email	Single line of text
Phone Number	Number
Registration Type	Choice(VIP,General,Student)
Company Name	Single line of text
Job Title	Single line of text
Agree to Terms & Conditions	Yes/No

1. Connect the SharePoint list with Power Apps ->Add Edit form from the +Insert tab -> Provide the SharePoint list name for the DataSource property of the form.

DataSource: 'Event Registrations'

2. In Power Apps forms, the Yes/No [Agree to Terms &Conditions] field will default come as a Toggle control.

3. Now, add a Check box control instead of a toggle control. Then, provide the following text in the Text property of the checkbox control.

Text: "By clicking this box i agree that i have read the privacy policy"

Change the Check box name by following the Power Apps Naming conventions.

4. Then, provide the below formula on the Visible property of the Register button.

'chk_Terms&Conditions'.Value

5. Now, save and publish the app. Look at the image below. The register button is visible only if I check the terms and conditions field.

This way, we can make the Power Apps button control visible and hidden. Let’s see another example of hiding and displaying the button control.

Example 2: Display Power Apps Button If User Fills the Form

Here, I have a Power Apps screen allowing users to create an account. The Create Account button is only visible if we provide an email and password.

To achieve this, follow the steps below!

1. Add two text input controls and one button control in the Power Apps screen. For,

• Email: Text input 1
• Password: Text input 2
• Create Account: Button control

2. Then, provide the formula below in the Visible property of the Create Account button control.

If(!IsBlank(txt_eml.Text)&&!IsBlank(txt_psd.Text),true,false)

Here,

• txt_eml: Email text input control name.
• txt_psd: Password text input control name.

The IsBlank function checks whether the value is present in both text input controls. If present, the button will be visible; otherwise, it won’t be visible.

Save and publish the app. While previewing, check the application once the create account button is visible only after providing the details.

I hope you understand how to make the Power Apps button visible and hidden based on conditions. Let’s see how to hide and display icons based on conditions.

Power Apps Show/ Hide Icons Based on Conditions

Our organization recently organized a blood donation camp, so I created a Power Apps form to store all the donor details.

This form includes the following fields.

• Donar Name
• Blood Group
• Email
• Age
• PhoneNumber
• Address

I used the Check and Cancel icons to validate this form. These icons are visible and hide dynamically based on the input I provide in the form. Look at the example below for reference.

To achieve this, follow the steps below!

Note:

Here, I took text input and other controls from Power Apps for the form. If you don’t want this, create a SharePoint list for the form fields and display those fields through the Edit form in Power Apps.

1. In Power Apps, add the following controls from the +Insert tab.

• Five Text input controls: For donor name, email, age, phone number, and address.
• Radio control: For blood group.
• Four Check icons for validations.

2. Now, provide the formula below for the Icon property of the check icon, which is used for donor name validation.

If(Len(txt_name.Text)>8,Icon.Check,Icon.Cancel)

This formula makes the Check icon visible if the length of the donor name is greater than 8. Otherwise, the Cancel icon will be visible, and the check icon will hide.

Here, txt_name is the donor name text input control name.

3. To provide the colors for check and cancel icons, provide the formula below in the Color property check icon used for the donor name.

If(Len(txt_name.Text)>8,Color.Green,Color.Red)

Here, the if condition will assign a green color for the Check icon only if the length of the donor name is greater than 8. If the condition fails, the red color will be applied to the Cancel icon.

4. To display and hide the icons based on email validations. Provide the formula below on the Icon property of the check icon used for email.

If(
    IsMatch(
        txt_Email.Text,
        "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
    ),
    Icon.Check,
    Icon.Cancel
)

If the mail in txt_Email control matches the pattern in the formula, the Check icon will be visible. If not, the Cancel icon will be visible. Here, txt_Email is the name of the email text input control.

5. Then, provide the below formula in the Color property of the check icon used for mail to change the color icons based on the condition.

If(
    IsMatch(
        txt_Email.Text,
        "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
    ),
    Color.Green,
    Color.Red
)

This formula provides the green color for the check icon and the red color for the cancel icon. Here, we’re not giving icons directly, but if the condition is satisfied, the check icon will be visible, and a green color will apply to it. The same applies to the cancel icon.

6. Provide the formula below in the Icon property of the Check icon used for the age field.

If(Value(txt_Age.Text) >= 21, Icon.Check, Icon.Cancel)

This formula makes the Check icon visible if the provided age is greater than and equal to 21. Otherwise, the Cancel icon will be visible.

7. Now, to change the colors of those icons, provide the formula below on the Color property of the Check icon used for the age field.

If(Value(txt_Age.Text) >= 21,Color.Green,Color.Red)

If the condition is true, the Check icon will be green. Otherwise, the Canel icon will be red.

8. Provide the formula below for the Icon property of the Check icon used for the phone number field.

If(
    IsMatch(
        txt_phn.Text,
        Match.Digit&Match.Digit&Match.Digit&"-"&
        Match.Digit&Match.Digit&Match.Digit&"-"&
        Match.Digit&Match.Digit&Match.Digit&Match.Digit
    ),
    Icon.Check,
    Icon.Cancel
)

If the provided condition is true, the Check icon will be visible. If not, the Cancel icon will be visible.

9. Now, to change the icons’ colors, provide the formula below in the Color property of the Check icon used for the phone number.

If(
    IsMatch(
        txt_phn.Text,
        Match.Digit&Match.Digit&Match.Digit&"-"&
        Match.Digit&Match.Digit&Match.Digit&"-"&
        Match.Digit&Match.Digit&Match.Digit&Match.Digit
    ),Color.Green,Color.Red)

If the provided phone number follows this pattern, “123-234-4456”. Then, a green color will be applied to the Check icon. If not, a red color will be applied to the Cancel icon.

This way, we can dynamically display and hide the Power Apps icons based on condition.

Power Apps Show/Hide Fields in Form Based On Condition

Up to now, we have seen how to show or hide Power Apps buttons and icons. Now, I will show you how to hide and show the fields in Power Apps forms.

I created a Power Apps form [Expense Report Form] for the employees to report their expenses. The Description field will be visible only when the employees enter an Expense Amount greater than 100.

I have the data source for the above Power Apps form as a SharePoint list named Expense Report Form.

Column Name	Data Type
Employee ID	Title(Single line of text)
Date	Date and time
Expense Amount	Number
Expense Category	Choice(Travel,Entertainment,Office supplies,Accommodation)
Email Address	Single line of text
Description	Single line of text

1. Provide the formula below in the Visible property of the Description data card in Power Apps form.

If(Value(DataCardValue3.Text)<=100,false,true)

Here, DataCardValue3 is the name of the Expense Amount field data card value. This formula hides the description filed when the expense amount exceeds 100.

2. Now, save and publish the app. While previewing, provide the expense amount in the Power Apps form. If the expense amount is less than 100, the description field will not be visible; if the amount is more significant than 100, the description field will be visible.

I hope you understand all the examples I have explained above for hiding and displaying the Power Apps buttons, icons, and form fields.

This article can serve as a reference while you implement hiding and showing the Power Apps controls.

Also, you may like:

• Power Apps Show/hide form field based on condition[Dropdown]
• Power Apps modern toggle control
• Power Apps show and hide buttons based on the current user
• Power Apps modern dropdown control
• Apply Multiple Filters On Power Apps Gallery