Show/hide fields conditionally in PowerApps forms based on dropdown selection

I’m working on digitizing a form to improve the user experience and our data collection and availability efforts. I decided to do this one in PowerApps as we begin to pivot organizationally toward the modern experience.

During building this particular form, I needed to hide fields unless the user indicated “Yes” to corresponding dropdown fields. Here’s the end-result:

Click to enlarge

To get this to work we have to do three steps:

  1. Initialize variables for visibility
  2. Set the conditional fields’ visibility to the new variables
  3. Set the dropdown to toggle the related variable

Initialize variables for visibility

First we need to tell our app that we’ll be using true/false variables to indicate the visibility of our conditional fields. We do this from the OnVisible property (2) of the Form Screen (1).

Click to enlarge

The formula itself should be as follows (3). Use a semi-colon between each UpdateContext function to add additional variables. I’m using aVisible, bVisible, etc.

UpdateContext({aVisible: false});UpdateContext({bVisible: false});UpdateContext({cVisible: false})

So in your documentation you might note something like:

VariableDefault stateChanged byHides/Shows
aVisiblefalse (hidden)BAARequired
bVisiblefalse (hidden)ConflictsOfInterest
cVisiblefalse (hidden)DataSecurityRisk

Note: You can use the same variable more than once to show/hide multiple fields based on one dropdown.

Set the conditional fields’ visibility to the new variables

Now we need to assign these variables to the DataCards for each field we wish to hide.

From the Tree View panel, select the DataCard (not the DataCardValue within/beneath it) for the field you wish to hide (1). Then go to its Visible property (2). Finally, set the property’s function to the variable you initialized for it (3). In this example I decided I would use “cVisible” for “DataSecurityRiskCompleted”.

Click to enlarge

Repeat the steps above, assigning variables to each field you want to hide until a dropdown is changed to the triggering value.

Set the dropdown to toggle the related variable

The last step is to tell the variables we established to change based on a dropdown.

First select the DataCardValue (not the DataCard) within the data card (1).

Then select the OnChange property (2) and set the function to the following (3):

Switch(DataCardValue46.Selected.Value,"Yes",UpdateContext({cVisible: true}),UpdateContext({cVisible: false}))
Click to enlarge

Repeat for each dropdown that should serve as a trigger for conditional fields. Now, when I publish my app, changing “Data Security Risk” to “Yes” will change the default false visibility of DataSecurityRiskCompleted to true. If I change the dropdown to “No” again, it will hide the related field again.

9 Replies to “Show/hide fields conditionally in PowerApps forms based on dropdown selection”

  1. Does this work for Yes/No fields? I’ve followed this tutorial and verified the functions, but it doesn’t seem to work. Variable initialized in onVisible of form.. variable set onChange of yes/no field (not the card).. field’s card set to be visible/invisible has a visible property = variable. onChange doesn’t seem to fire until the save occurs.. the field that’s supposed be visible pops up briefly during save, then the form closes back to the display from from the edit/add form.

    1. Disregard… I didn’t realize that when I keyed in the OnChange function, PowerApps suggested my field’s name in SharePoint vs. the fieldname PowerApps gives it (“DataCardValue”). Rookie mistake!

    1. Hi Radha,

      Seems like the data source connected to your dropdown has a specific property you need to select. It should as follows: dropdownControl.Selected.YourProperty. You should be able to see the available properties once you enter a period after Selected.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.