How to Show Hide Fields Based On Power Apps Dropdown Selection?

I was recently working with a Power Apps form where I needed to show or hide some fields based on the Power Apps Dropdown values (with some conditions).

In this Power Apps article, I will tell you how to show hide fields based on Power Apps Dropdown selection with a few examples.

Show Hide Fields Based On Power Apps Dropdown Selection

Let’s see some examples below.

Example-1: Power Apps display field based on the dropdown value

In the first example, I will show you how to display a field based on the dropdown selected in Power Apps.

I have a SharePoint list named “Expense Tracker,” which contains the fields below.

Column Name	Data Type
Item	Single line of text
Expense Type	Choice
Budget	Choice
Payment Date	Date and time
Amount	Currency

Refer to the below screenshot:

In Power Apps, there is a Dropdown control and an Edit form. Now, I would like to view the Budget field on an edit form based on the dropdown value selection [If the dropdown value equals “Personal,” then the budget field will be visible, or else it will be in disable mode] as shown below.

To work around this, follow the steps below. Such as:

1. Open Power Apps -> Create a Blank Canvas app and connect it to the respective SharePoint list [Expense Tracker] like below.

2. On the Power Apps Screen -> Insert a Dropdown control and set its Items property to the code below.

Items = Choices([@'Expense Tracker'].ExpenseType)

Where,

• Choices() = This function uses the Choices function to provide a list of options for your user to select from
• ‘Expense Tracker’ = SharePoint Online List
• ExpenseType = SharePoint List Choice Field

3. Next, insert an Edit form control and set its DataSource property as:

DataSource = 'Expense Tracker'

4. To display the SharePoint list fields on the Edit form control, change the Default mode to “New” as in the screenshot below.

5. Once you select the list, all the fields will automatically be added to the form. Before using any fields, you need to unlock the data card first. You can add or remove the unnecessary fields from the edit form. Also, if you want to design the form, you can use properties like Form Color, Field Font Size, Field Font weight, etc.

6. Select the Budget_DataCard1 and set its Visible property to the code below.

Visible = If(
    drp_ExpenseType.Selected.Value = "Personal",
    true,
    false
)

Where,

• If() = This function is used to evaluate multiple unrelated conditions
• drp_ExpenseType = Power Apps Dropdown Control Name
• “Personal” = Value Name

Once your app is ready, save, publish, and preview it. Whenever the user selects the dropdown value as “Personal,” only the Budget Datacard will be visible, or it will be in disable mode like below.

Example-2: Show Hide Button Based On Power Apps Dropdown Value

In this example, I will show you how to show or hide a button control based on a dropdown value in Power Apps.

I will also take the above Edit form control [frm_Expenses] for this example. I want to display the Button control based on the Dropdown control value [“Within Budget”] as shown below.

To achieve it, follow the below steps. Such as:

1. On the Power Apps Screen -> Insert the Button control under the edit form and set its Visible property to the code below.

Visible = If(
    drp_BudgetValues.Selected.Value = "Within Budget",
    true,
    false
)

Where,

• drp_BudgetValues = Power Apps Dropdown Name
• “Within Budget” = Dropdown Value

2. Now, select the button control and set its OnSelect property as:

OnSelect = SubmitForm(frm_Expenses)

Where,

• SubmitForm() = This SubmitForm() function in the OnSelect property of a Button control to save any changes in a Form control to the data source
• frm_Expenses = Power Apps Gallery Name

3. Save, Publish, and Preview the app. If the user selects the dropdown control value as “Within Budget,” then only the button control will be visible, or it will be in the disable mode like below.

4. Once the new record is added to the edit form, click the button to submit the record into the SharePoint list as in the screenshot below.

This is all about the Power Apps hide fields based on the condition.

Power Apps Conditional Visibility Based On Dropdown Value

Here, we will discuss the show/hide fields based on the power apps dropdown selection with a simple scenario:

Scenario:

I have a SharePoint list, i.e., [“Access Registers“], and this list contains the fields below.

Column Name	Data Type
Employee Name	It is a default single line of text
Visitors Name	A single line of text
Visitors Contact Number	A single line of text
Department	Choice

I have some options in the Department column, i.e., [IT, HR, FINANCE, ADMIN, MARKETING, PURCHASING, VISITORS].

Based on these choice options, I want to show or hide the employee name, visitor name, and visitor contact number in a Power Apps edit form.

When a user selects the Department value as Visitors, then the user can see only the Visitors Name and Visitors Contact Number. At the same time, the Employee Name column should be hidden.

Refer to the below screenshot:

Also, Once you select any department value (Except “VISITORS”), you can see the “Employee Name” field, as shown in the screenshot below.

To achieve it, follow the below steps.

1. On the Power Apps Screen -> Insert an Edit form and set its Datasource as the SharePoint list. The Powerapps Edit form looks like the below screenshot:

2. If you want to show the Employee Name field Data card, then select the Data card (Employee Name) and apply the below formula on its Visible property as:

Visible = If(
    drp_Departments.Selected.Value = "VISITORS",
    false,
    true
)

Where,

• drp_Departments = Power Apps Dropdown Name
• “VISITORS” = Dropdown Selected Value

3. Similarly, If you want to display the Visitor’s Name and Visitor’s Contact Number Data card, then select the Data cards (Visitor’s Name and Visitor’s Contact Number) and apply the below formula on its Visible property to the code below.

Visible = Visible = If(
    drp_Departments.Selected.Value = "VISITORS",
    true,
    false
)

4. Save, Publish, and Preview the app. Once you select any department value (Except VISITORS), you can see the “Employee Name” field, as shown in the screenshot below.

5. Similarly, Select the Department value as “VISITORS“. At the same time, you can see the “Visitors Name” and “Visitors Contact Number” fields as in the below screenshot.

This is all about the SharePoint show/hide list column based on dropdown selection.

Conclusion

This Microsoft Power Apps tutorial taught us all the information about the Power Apps hide fields based on the condition.

Here, we discussed the Power Apps visible if the dropdown equals and how to show hide fields based on the Power Apps dropdown selection. Lastly, we covered the Power Apps hide field based on the dropdown control with a simple example.

You may also like:

• Hide Top Navigation Bar in Power Apps
• Power Apps Show/Hide Button Based On The Current User
• Show/Hide fields in Power Apps based on yes or no
• Add a Blank Value to a Dropdown List in Power Apps