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
Show Hide fields in PowerApps
  • 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"]
Show Hide fields in Power Apps
show hide fields based on dropdown selection powerapps
  • 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
PowerApps Show Hide fields
show hide fields based on dropdown selection powerapps
  • 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.
PowerApps Show Hide field
show/hide fields conditionally in powerapps forms based on dropdown selection
  • 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.
PowerApps Show Hide fields based on conditions
show/hide fields conditionally in powerapps forms based on dropdown selection
  • 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.
PowerApps Show Hide fields based on dropdown
How to show hide fields based on dropdown selection powerapps
  • 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

PowerApps Show Hide fields based on dropdown conditions
PowerApps show hide fields based on dropdown selection
  • 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.
Show Hide fields based on PowerApps dropdown conditions
PowerApps show hide fields based on dropdown selection
  • 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

Show Hide fields based on dropdown selection 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.
Show Hide fields based dropdown selection in PowerApps
PowerApps show hide fields based on dropdown selection
  • 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.
PowerApps show hide fields based on dropdown selection
PowerApps show hide fields based on dropdown selection
  • 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.
Show Hide columns based PowerApps Dropdown selections
  • 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)
how to Show Hide fields based on PowerApps Dropdown
powerapps hide fields based on condition

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).

show hide fields based on dropdown selection powerapps

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:

show hide fields based on dropdown selection powerapps
show hide fields based on dropdown selection powerapps

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:

Power Apps Show or Hide Data card based on dropdown Selection
powerapps show hide fields
  • 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.

PowerApps Show or Hide Data card based on dropdown Selection
PowerApps show hide fields based on dropdown selection
  • 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.

PowerApps show hide fields based on dropdown selection
PowerApps show hide fields based on dropdown selection

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.

powerapps visible if dropdown equals
powerapps show hide fields

Also, you may like these below Power Apps Tutorials:

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

  • Greeting Bijay Kumar –
    I have tried your solution and for some reason I still get an error and the fields are invisible (for both Yes and No)

  • If(DataCardValue26.Selected.Value = “FPSO-Aseng”, “Alen Platform”, “Pico Basile”, “Luba Shorebase”, true)

    Only the first information that is working, all the other information does not work. can someone help me? I would like the

    • You can use it like this:

      If(DataCardValue26.Selected.Value = “FPSO-Aseng”, true, false) Or (DataCardValue26.Selected.Value = “Alen Platform”) Or (DataCardValue26.Selected.Value = “Pico Basile”) etc.

      You Seperate it with the Or function ( || can also be used it is the same as Or)

  • what about multi select combo box?
    ex: I have a combo box with 6 pie flavor options and Apple Pie and Blueberry Pie are both selected.

    how to: Make Apple Pie Size text field and Blueberry Pie Size text field visible. If only Blueberry Pie is selected in combo box, hide Apple Pie Size text field and only show Blueberry Pie Size.

  • >