Show hide fields based on dropdown selection PowerApps (2 Examples)

In this Power Apps Tutorial, we will discuss how to show hide fields based on dropdown selection PowerApps. Here we will see two simple examples on how to show/hide fields conditionally in powerapps forms based on dropdown selection.

How to Show hide fields based on dropdown selection in PowerApps

We will see how to work with show hide fields based on the dropdown control selection in PowerApps. Let’s take a simple scenario.

Example:

I have a SharePoint list named Hotel Site Visit Checklist. This list has these below columns as:

1. Title: This is the by default column with a single line of text type. I just renamed it to Visitor Name.
2. Address: Multiple lines of text data type
3. Venue Type: Single line of text and so on

• On the PowerApps screen, I have a Dropdown control i.e. ddVisistCheckList. This control is having with these below Items as:

Items = ["General Information", "Site Specifies"]

• Next, Connect the SharePoint List data source (Hotel Site Visit Checklist) to the PowerApps screen.
• Insert an Edit form and set its DataSource property to the SharePoint list. Once you will select the list, then all the fields will add to the form automatically. 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, then you can use some properties like Form Color, Field Font Size, Field Font weight, etc.
• To change the toggle value from Off to No or On to Yes, you can refer to this Powerapps toggle control article: PowerApps toggle control + How to use with example

• For heading purpose, you can take a Label control and set its Text property as “Hotel Site Visit Check List” as shown in the below screenshot.

• Now you need to decide which field will display on which dropdown selection as per the user basis. Suppose, you want to view the Title field when a user will select the General Information from the dropdown control.
• In this case, Select the Title data card and apply this below formula on its Visible property as:

Visible = If(
    ddVisitCheckList.Selected.Value = "General Information",
    true,
    false
)

Where,

1. ddVisistCheckList = Dropdown control name where the user selects the value
2. General Information = Value name

• The above code specifies, If the dropdown control is having the value as “General Information”, then only the specific data card will visible otherwise it will hide.

• Similarly, suppose you want to show the toggle value (Is Venus ADA compliant) when a user will select the Site Specifies from the dropdown control.
• In this case, you will do the same thing as the above. Select the toggle control data card and apply this below formula on its Visible property as:

Visible = If(
    ddVisitCheckList.Selected.Value = "Site Specifies",
    true,
    false
)

• The above code specifies, If the dropdown control is having the value as “Site Specifies”, then only the specific data card will visible otherwise it will hide.

• To store the record in the existing SharePoint list, you can insert a button input (Save). Set this below code on its OnSelect property as:

OnSelect =  SubmitForm(Form1);

Where,

Form1 = Edit form name

• Now I would like to do one thing i.e. the save button can editable and use only to that user who is present in a Sharepoint group. The user that is not present in the SharePoint group, that specific user cannot use the Save button (means the button will be in disable mode).
• I have a SharePoint Group named Admins. This group has two members named Bijay and Bhawana as shown below.
• Now, these two users only can submit the record in the Sharepoint list. Instead of these two, if any other user wants to submit the data, then the save button will be in disable mode and they cannot submit the record in the SharePoint list.
• In case you want to add one or some members to that existing group, then you can add the users. After that, the user can able to submit the record.

• Next, go back to the PowerApps app and connect the Office365Groups connector to the app. Follow this below instructions to connect: View -> Data sources -> + Add data -> Search Office 365 Groups in the search box -> + Add a connection -> Connect)
• Select the App screen and apply this below formula on the screen’s OnVisible property as:

OnVisible = ClearCollect(
    SharePointGroupMembers,
    Office365Groups.ListGroupMembers("f6250ccd-965b-4354-a730-6f4c6c5a8a55").value
)

Where,

1. SharePointGroupMembers = Collection name
2. “f6250ccd-965b-4354-a730-6f4c6c5a8a55” = Specify the Group ID

You can refer to this article that how to get the SharePoint group ID: Get users from SharePoint Group in PowerApps

• Now select the Save button and apply this below formula on its DisplayMode property as:

DisplayMode = If(
   User().Email in SharePointGroupMembers.mail,
   DisplayMode.Edit,
   DisplayMode.Disabled
)

• This above code specifies if the current user is present in the collection, then the button will be in edit mode otherwise it will be in disable mode.

• Save and publish the app. Select the General Information from the dropdown control and enter all the field values in the form. Again select the Site Specifies from the dropdown control and enter all the field values.
• Click on the Save button to submit the record in the existing SharePoint list. As my current user name “Bijay” is present in the Admins group, that’s why the Save button is editable.

• Go to the SharePoint list (Hotel Site Visit Checklist) and refresh the list. You can see the current record has been stored as like the below screenshot.

• Now, open the same app using the other user credentials (e.g. Preeti), then you can see the Save button will disable mode. That means Preeti can not submit the record in the existing SharePoint list. (As this member is not present in the Admins group)

In this PowerApps Tutorial, We saw how to work with show hide fields based on the dropdown control selection in PowerApps.

Show hide fields based on dropdown selection PowerApps

I have a SharePoint Online List named “Access Registers“. This list has some columns with different data types. Among all these types of columns, It has a Department column with a Choice data type.

Also, this SharePoint list has these below columns that I am going to use in this example as:

• Employee Name (Person Data type)
• Visitors Name (Single line of text)
• Visitors Contact Number (Single line of text)

In the below screenshot, you can see all the different types of columns that are present in the SharePoint List (Access Registers).

In this example what I am going to do is,

In the Department column, I have some choice options like IT, HR, FINANCE, ADMIN, MARKETING, PURCHASING, VISITORS, etc.

Based upon these choice options, I want to show or hide the Employee Name, Visitors Name, and Visitors Contact Number in a Power Apps Edit form.

When a user will select 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.

Similarly, When a user will select the Department value as IT, FINANCE, HR, etc, then the user can only see the Employee Name. At the same time, the Visitors Name and Visitors Contact Number column should be hidden.

You may like, PowerApps repeating table.

PowerApps show hide fields

I have created a Canvas Powerapps app where I have used these four fields (Department, Employee Name, Visitors Name, Visitors Contact Number) in an Edit Form.

The Powerapps Edit form looks like the below screenshot:

In this above screenshot, if you will choose the Department as Visitors, then only you will be able to see the Visitors Name and Visitors Contact Number. Rest of the time, you will see only the Employee Name.

Follow these below things to show or hide the data card:

• 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(DataCardValue3.Selected.Value="VISITORS",false,true)

Where,

DataCardValue3.Selected.Value = Department Dropdown data card value name

The above formula specifies, If the Department Dropdown Data card value is “VISITORS“, then the Employee Name field will be hidden otherwise it will visible.

You can see the below screenshot for your reference:

• Similarly, If you want to display the Visitors Name and Visitors Contact Number Data card, then select the Data card (Visitors Name) and apply the below formula on its Visible property as:

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

Where,

DataCardValue3.Selected.Value = Department Dropdown data card value name

The above formula specifies, If the Department Dropdown Data card value is “VISITORS“, then the Vistors Name field will be displayed otherwise it will be hidden.

• Like the previous one (Visitors Name), the same thing, and the same formula you can apply for the Visitors Contact Number Data Card. Just select the data card (Visitors Contact Number) and apply the formula on its Visible property.

Preview the Powerapps app:

Just Save and Preview (F5) the Powerapps app. Select the Department value as “IT”, “FINANCE” or “HR” from the dropdown control.

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

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

Also, you may like these below Power Apps Tutorials:

• Create People Picker in Power Apps with Combo Box
• PowerApps Search Function + How to use with example
• How to use PowerApps Timer Control
• How to use PowerApps notify function
• How to Create PowerApps GridView
• How to format number as currency in PowerApps
• PowerApps charts (Column, Line and Pie Chart)
• Various PowerApps Validation Examples
• PowerApps Collection: Add, Update, Remove and Filter items
• How to show RSS feed in PowerApps
• The function Search has some invalid arguments in PowerApps
• PowerApps: Submit data to two SharePoint Lists

In this tutorial, we learned how to show hide fields based on dropdown selection PowerApps.