Dependant Controls: Switch between Comboboxes and Text Input in PowerApps

In this post, we’ll make your app flexible when it comes to enter data. More specifically how we can switch between a combobox and text input. I’ve build an app for a customer where a user needed to choose between defined values (combobox) and his/her own value (text input).

Of course, we’re also going to see how to send this data back to the data source (SharePoint in my case) depending on the controls and values chosen!

Setting up the scene

The app is a Rewards app. So users can choose a “Reward Provider” from a list, and there will be associated values with each provider. If no values are associated with that provider, then they can propose their own, and it can be amended later during the approval process.

SharePoint list(s)

For our defined values (which will be displayed in a combobox), let’s create a list called Reward Values. We have 2 columns in that list: Title (SharePoint built-in field), and Reward Amount (single line of text).

Our second list is for receiving the data patched. But that’d be regardless of the controls in this blog post. If you patch your data for any app using SharePoint, you’ll need a place! 🙂 Mine is called Nominations.

And in this Nominations list, amongst other fields for the entire app, we’re only interested in columns called Reward (choice), and Reward Value (GBP) (currency). The “GBP” being because I’m in the UK.

App

From an app perspective, this is what we’ve got, with my current naming.

1. Reward Provider named combo_rewardProvider
2. Reward Value (GBP) (combobox) named combo_rewardValueGBP
3. Reward Value (GBP) (text input) named TextInput_rewardValueGBP_Amazon
4. Submit Nomination button named btn_Submit

I’ve also created a Collection in the App.OnStart as follows: ClearCollect(colRewards, 'Reward Values');

We don’t yet see number 3, which is the text input control, because it’s currently hidden under the combobox 😉  

But now, we’re ready to start making things interesting!

Formulas

• Reward Provider – Select the Reward Provider control (combo_rewardProvider) and in the Items property, enter: Choices(Nominations.Reward)

• Reward Value (GBP) for combobox – Select the combobox (combo_rewardValueGBP) and in the Items property, enter:

Filter(colRewards, combo_rewardProvider.Selected.Value in Title).'Reward Amount'

This is filtering the combobox depending on the Reward Provider chosen. We also need to enter ["RewardAmount"] under the DisplayFields property. This is the internal name of my column when I created it. Amend with yours!

• Reward Value (GBP) for Text Input – We’ve got nothing to do for this control at this point in time…

Now let’s move on to the switching.

Controls Visibility

Remember in the SharePoint list called “Reward Values”, we had Amazon and John Lewis with no values. So it means that if we select those, it should switch to the Text Input control, otherwise, the combobox with the “Reward Provider” associated values should show up.  

Select the combobox (combo_rewardValueGBP) and in the Visible property, enter:

If(combo_rewardProvider.Selected.Value = "Amazon" || combo_rewardProvider.Selected.Value = "John Lewis", false, true)

And you probably guessed that in the Text Input control (TextInput_rewardValueGBP_Amazon), we should enter the opposite:

If(combo_rewardProvider.Selected.Value = "Amazon" || combo_rewardProvider.Selected.Value = "John Lewis", true, false)

What we’ve done so far!

Time to patch all of that!

Now that we’re happy with the way those controls work, let’s send our nomination data to SharePoint. Select the button (btn_Submit) and on the OnSelect property, enter:

Patch(
    Nominations, Defaults(Nominations), {
        Reward: combo_rewardProvider.Selected,
        'Reward Value (GBP)': If(combo_rewardValueGBP.Visible, Value(combo_rewardValueGBP.Selected.'Reward Amount'), TextInput_rewardValueGBP_Amazon.Text),
    }
);

While I’ve trimmed down the entire formula to only our controls, the most important is the “IF” statement. This way it will Patch the correct data.  

Then it should look like this in SharePoint:

Thanks for reading! 🙂