Show or Hide Fields depending on Radio Buttons Value
A good experience when it comes to building apps, is to make sure we don’t display irrelevant information to the users. Sometimes screens are overwhelming, we don’t know where we should click or select, why are greyed out fields on the screen?? We even start wondering if we’ve filled the form correctly…
Today’s post is about displaying only the necessary information for the users to fill, via Radio buttons in Power Apps.
Scenario
Imagine a small app that a company will be using to offboard users. When you leave a company, you need to return your assets; laptop, any keyboard/headset, phones, badge, etc. Some organisations will send you a carrier, but maybe it’s not needed? Maybe you live close to one of the company offices and can go directly drop those assets?
Well, that would be a good starting point to show and hide relevant information! 🙂
Backend data
Let’s use SharePoint for simplicity of this post when sending the offboarding answers back, and let’s call that list Offboarding. However, consider Microsoft Dataverse if the amount of data is growing rapidly for any application you build.
The SharePoint site will contain a list with all the necessary fields. At least all the answers to our questions and more!
As an example, we can have the following:
- Employee Name
- Employee ID
- Employee Email
- Badge ID
- Role
- Computer S/N
- Phone IMEI
- Phone Model
- Etc…
And then, some more targeted ones to the offboarding activities:
- Leaving date
- Asset(s) returned to the Office personally?
- Offboarding status
- Etc…
Power Apps
Now, let’s start adding controls to the app. Add a Form and connect it to the Offboarding list we spoke about earlier. At this point, all the data cards are displayed in the form. But let’s not worry about this for now.
The FIRST and only thing we want to display to the users is “Will they return their assets to the office personally” or not? That’s our starting point.
In this case, we created a column in SharePoint just for that. If the column was created with a “Yes/No” type, or a “single line of text” type, it doesn’t matter… We’re going to replace it anyway 😉
And we’re going to replace it with a Radio control. In the Items property, enter ["Yes", "No"]
Now, this is where we play hide & seek with the other data cards!
For each data cards, we’ll set the Visible property to true or false depending on the selection from the Radio control. For example, if we want to show the “Drop Off Date”, “Drop Off Office”, “Drop Off Comments” data cards, select them, and enter the following in the Visible property of each:
| |
That means the opposite for the cards you wish to hide, and when the selection is set to “No”!
Thanks for reading 🙂