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:
To get this to work we have to do three steps:
- Initialize variables for visibility
- Set the conditional fields’ visibility to the new variables
- 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).
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:
| Variable | Default state | Changed by | Hides/Shows |
| aVisible | false (hidden) | BAARequired (dropdown) | BAAEffectiveDate |
| bVisible | false (hidden) | ConflictsOfInterest (dropdown) | Conflicts…Completed |
| cVisible | false (hidden) | DataSecurityRisk (dropdown) | DataSec…Completed |
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”.
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}))
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.
Is this possible with multi-select fields?
Thanks, but I think I found a bug:
If the user makes a selection that shows a conditional text field, then changes their mind and makes a selection that does not show the conditional field, and then saves the entry to Sharepoint – the information entered in the conditional field is also saved with the entry.
Example: In the field “Shoe Size” there are 2 options: 7 and 8. If 7 is selected, then the field “Colour” is opened with options Black and Brown. If 8 is chosen, there are only black shoes so the Colour field does not show.
The user selects 7 and Brown, but thinks again and selects 8 instead, and gets no option to choose colour. Saves.
In Sharepoint, the Entry is saved as Size 8, Colour Brown, which is wrong.
Thanks, great! I am trying to use this a little more elaborate: if the choice is “A”, show “field1”, if the choice is “B”, show “field2”. Is this possible?
Looking for this as well. Any luck Marten?
I was able to get this to half-way work with a few modifications. I’ve outlined my code and question below.
I added additional statements to “Set the dropdown to toggle the related variable”. My three options are “Roadblock”, “Decision Required”, and “Awareness” all contained within DataCard4.
Switch(DataCardValue4.Selected.Value,”Roadblock”,UpdateContext({aVisible: true}),Switch(DataCardValue4.Selected.Value,”Decision Required”,UpdateContext({bVisible: true}),Switch(DataCardValue4.Selected.Value,”Awareness”,UpdateContext({cVisible: true}))))
This works as expected, the form loads with DataCard4, and once an option is selected, the associated fields become visible. However – If a user then changes their selection, all the fields stay visible. In other words, one could open the whole form by selecting, then selecting a new choice from the DataCard4.
Is there any way to have this “make visible” for the original choice, then “make hidden” if the choice is changed again? I don’t have much concern if the user selects a choice, adds a value into a newly revealed field, then selects a new choice and that value is recorded, yet hidden.
Im having an interesting…erm…feature…Whenever i go into my power app to edit, the fields are now hidden by default, whether the condition for visibility is met or not. I have to cycle the dropdown selection to break the conditions and then meet the conditions (Switch from yes, to no, back to yes.) to get the hidden fields to repopulate. Any input would be appreciated as i know my users will nit pick this “Design Feature”, haha!
Thank you, Its very helpful and clearly explained
is this on YouTube by chance? In regards to AVisble, BVisible and CVisible: If I have 5 choices, would your example have a DVisible and an EVisible?
Thank you. Very useful and very celar
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.
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!
Awesome walkthrough! Thank you so much!!
Thank you! It’s very rare that I find such a concise and working post.
Selected Value Property is NOT showing to me, am I doing anything wrong?
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.
SelectedValue property is showing to me?
This is so brilliantly simple and effective – you are my hero!