Improve SharePoint Multi-Choice Form UX in Power Apps: Converting Combo Box to Checkboxes

When creating a custom form in Power Apps from a SharePoint list, multi-select columns are automatically rendered as combo boxes by default.

While this default functionality works, I wanted to explore better UI options by converting these combo boxes to checkboxes for improved user experience.

Multi-Select Columns in SharePoint

SharePoint lists allow you to create columns that support multiple item selection. Here’s how to set it up:

First, select “Choice” in the column settings:

Then, enable the “Allow multiple selections” option:

This is how it appears in the standard SharePoint form:

Default Behavior in Power Apps Custom Forms

When you create a custom form in Power Apps using this SharePoint list, the multi-select column appears as a combo box:

This is how it looks when multiple items are selected:

While this default combo box functionality works as intended, the user interface isn’t particularly intuitive or user-friendly. That’s why I decided to explore alternative controls to replace this combo box with something more user-friendly.

Implementing Multi-Select with List Box

Let’s start by converting the combo box to a list box. Here’s the step-by-step process:

First, add a list box control inside the DataCard of your choice column:

Unlock the card for editing:

Locate the Items property formula from the original combo box:

Copy and paste this formula into the Items property of your new list box:

Next, modify the DataCard’s Update property to use the SelectedItems property of the list box:

Finally, remove the original combo box and adjust the X and Y coordinates of the list box to complete the setup:

Now you can successfully register multiple selections using the list box:

Implementing Multi-Select with Checkboxes

Next, let’s explore how to implement the multi-select functionality using checkboxes.
While we could simply place a fixed number of checkboxes directly in the DataCard, this approach would require maintenance whenever we add new choices in SharePoint. That’s not an ideal solution for long-term maintenance.

Instead, I created a more dynamic solution by combining a gallery control with checkboxes to achieve this layout:

When you add new choices in SharePoint:

The checkboxes automatically update to reflect these changes:

Step 1: Adding Gallery and Checkboxes

First, let’s add a gallery control to the form. When attempting to add an empty gallery inside the DataCard:

You’ll notice the gallery appears outside the DataCard. To fix this, cut the gallery:

Then paste it inside the DataCard:

Now the gallery is properly positioned within the DataCard:

Next, copy the Items property from the original combo box and paste it into the gallery’s Items property:

When you add a checkbox control inside the gallery:

This creates the initial checkbox layout:

You might only see one checkbox because the gallery’s template size is too large. Adjust the TemplateSize to match the checkbox height plus padding:

Set the checkbox’s X and Y positions to 0 to display all options:

Finally, set the checkbox’s Text property to ThisItem.Value to display the option text properly, creating a clean and organized appearance:

Step 2: Connecting SharePoint List with Gallery

When the form opens in “New” mode, all checkboxes should be false, and in “Edit” mode, they should be true or false based on the item’s existing values.

First, create a collection called “selectedItems”. When the custom form opens in “New” mode, clear this collection:

When the custom form opens in “Edit” mode, use ClearCollect to add the current selection state of that item:

Then, set the checkbox’s Default property to check if the “ThisItem.Value” (option name) exists in the “selectedItems” collection:

This ensures that when creating a new list item, no checkboxes are selected:

And when editing, it reproduces the current selection state:

Next, use the checkbox’s OnCheck event to add checked options to selectedItems:

Use OnUncheck to remove unchecked options from selectedItems, maintaining the check states in the collection:

Finally, complete the setup by adding this selectedItems to the DataCard’s Update property formula:

Testing the Implementation

First, when adding a new item:

Multiple selections are successfully registered:

When editing the item, the previous selection state is properly restored:

After making additional selections and clicking save:

The newly selected options are successfully registered, completing our implementation: