Support for multi-valued choices in forms

One the current limitations of PowerApps is the lack of support for multi-valued fields - a column in a data source that can take zero or more of a predefined set of values, such as a SharePoint choice column with multiple selections allowed. The Listbox control also doesn't allow multiple items to be selected by default, which is one of the pieces that are missing for that support. In a previous post, I suggested a workaround to allow a listbox to support multiple selection, using a gallery to display the items. While that worked for a specific scenario, it had a limitation of not working within forms (since galleries cannot be added to forms). In this post I'll show another alternative, using a set of checkbox controls to toggle the selection of the possible values.

The scenario

As in the previous post, here's the scenario I'll use to talk about something concrete. I have a SharePoint list where save a list of potential customers for my products, including how they intend to use them, given a set of choices:

The list of usages (IntendedUses) is set as a Choice column, with multiple selection allowed. And here is where we hit the first block - as I mentioned before, those columns are not supported. But we can still make the scenario work, if we store the same information in a string column (Single line of text), and store the usages in a comma-separated value (if any of the values has a comma another separator would need to be used).

Building the app

Once we have the list updated with the new value, we can use the "Start with your data" option to create the app from sharepoint. That will give us an app that we can start working with. Both browse screen and details screen should work as is (the intended uses is displayed as a text in the display screen, which should be fine for most scenarios). In the edit screen, we'll update the card used for that field to display the available options to the user

The first thing that we need to do is to unlock the card, so that we can start customizing the controls inside of it:

Next, remove the text input control and add checkboxes for each of the possible options for that field, arranging them in a way you want them to be shown to the user. There will be some errors (indicated by the yellow triangle) at this point, we'll get to them later.

To make the formulas easier to understand, I've renamed the checkbox controls to reflect what they represent. In my case, I have the following controls: CheckboxDayToDay, CheckboxFormalDining, CheckboxGifts, and CheckboxOther. Now, let's start updating the properties to connect the checkboxes to the column in sharepoint. To start, we must change the Default property of the checkboxes to have it selected if it represents one of the options previously chosen by the user:

CheckboxDayToDay.Default: "Day-to-day" in Split(Parent.Default, ",")
CheckboxFormalDining.Default: "Formal dining" in Split(Parent.Default, ",")
CheckboxGifts.Default: "Gifts" in Split(Parent.Default, ",")
CheckboxOther.Default: "Other" in Split(Parent.Default, ",")

Next, we need to fix how the data will be sent back to the data source, in the Update property of the data card. If you select the data card, either in the tree view or in the "bread crumbs" on the bottom of the canvas, you should see an error in the Update property, since it's still referencing the text input control that was removed. Changing the value of that property to the following expression:

Mid(
    Concatenate(
        If(CheckboxDayToDay.Value, "," & "Day-to-day", ""),
        If(CheckboxFormalDining.Value, "," & "Formal dining", ""),
        If(CheckboxGifts.Value, "," & "Gifts", ""),
        If(CheckboxOther.Value, "," & "Other", "")),
    2)

Will make the update value of that card a comma-separated string with all the selected options. This formula works by adding a "," followed by the name for all selected checkboxes (using Concatenate), and then removing the first character (which will be a ",") using the Mid function.

Finally, we need to update the label that contains the error message to remove the last error in the form (since it was referencing the text input control). Select it on the tree view, and change the value of its Y property to

CheckboxGifts.Y + CheckboxGifts.Height

And that should remove the last error from the app.

Limitations

Unlike the solution mentioned in the previous post, using checkboxes to display available options will work in a form. But it won't "look" like a listbox (which is arguably a more "natural" representation for such scenarios). It also requires a change in the data source (using a string column type, instead of a more natural choice column type). But if your scenario really requires this functionality, it can be done.

As I mentioned before, this post is an attempt to unblock a scenario that currently isn't possible (at least not easily) to do in PowerApps. I expect it to be made easier in the future, although I don't have information on when that will happen.

As usual, let us know of any comments / questions you have by posting in our forums, we want to hear your feedback!