Multi-Select Checkbox in Canvas Apps

In this blog post, I will walk through the steps that can be followed to create multi-select checkboxes in Canvas Apps. This will enable using the same control for Vertical and Horizontal orientation. This is useful in cases where you want to provide the user with a number of options to select from and you can limit the selection.

Problem Statement

How to restrict the number of selections in the Checkbox without complex logic? How to build the "Select all that apply" feature in Checkbox controls? How to enable multiple selections from a list of checkbox controls?

Solution

To build such control, we are going to create a Canvas Component. As part of this, we will build a component that can be used in both Vertical and Horizontal alignment.

You can create a new app from Blank, or use an existing one, switch to the Components tab.

Click on + New Component. Rename the component to MultiSelect-Checkbox.

You can follow the below steps to build the control:

Let's break the component into three parts:

1) Input Custom Properties --> These are the properties that the app makers are going to input while configuring the component.

a) Items - Table --> Items property will hold the items for the checkbox. Default: Table({Value:"Option 1"},{Value:"Option 2"},{Value:"Option 3"})

b) IsVertical --> IsVertical property will decide the orientation of the control.

Default: true

c) NumberofSelections --> NumberofSelections will hold the maximum number of checkboxes to be selected at a time. Default: 2

Note: You can add more input properties for Color, to set the design properties of the internal controls.

2) Implementation

a) Select the component and add a Vertical Layout gallery to the control. Rename this control to "Vertical". Set the properties as below:

Items:         'MultiSelect-Checkbox'.Items
Wrap Count:     1
Width:         'MultiSelect-Checkbox'.Width
Height:        'MultiSelect-Checkbox'.Height
Visible:       'MultiSelect-Checkbox'.IsVertical
X:              0
Y:              0
TemplateSize:   56

b) Add a checkbox inside the Vertical Gallery control. Rename it to "VerticalBox". Set the properties as below:

OnCheck:
Set(AlreadySelectedBuffer,AlreadySelected);Set(AlreadySelected,AlreadySelectedBuffer&If(CountRows(Split(AlreadySelectedBuffer,"{};").Result) > 0,"{};","")&ThisItem.Value);If(CountRows(Split(AlreadySelected,"{};").Result) > 'MultiSelect-Checkbox'.NumberOfSelections,Set(AlreadySelected,Concat(LastN(Split(AlreadySelected,"{};").Result,'MultiSelect-Checkbox'.NumberOfSelections),Result,"{};")));Set(AlreadySelectedBuffer,Blank())

OnUncheck: 
With({Key:RemoveIf(Split(AlreadySelectedBuffer,"{};").Result,Result = ThisItem.Value)},Set(AlreadySelected,Concat(Key,Result,"{};")))

Default: 
If(ThisItem.Value in Split(AlreadySelected,"{};").Result,true,false)

Text:          ThisItem.Value
Width:         Vertical.TemplateWidth
Height:        Vertical.TemplateHeight
VerticalAlign: VerticalAlign.Middle
X:             0
Y:             0

Note: Since the text property of the checkbox control points to Value column, so if your data is coming from a data source and the column name is different, then you can rename the column to be compatible with the configuration. e.g. RenameColumns(DataSourceName, "ExistingColumnName","Value")

c) Select the component and add a Horizontal Layout gallery to the control. Rename this control to "Horizontal". Set the properties as below:

Items:         'MultiSelect-Checkbox'.Items
Wrap Count:     1
Width:         'MultiSelect-Checkbox'.Width
Height:        'MultiSelect-Checkbox'.Height
Visible:       !'MultiSelect-Checkbox'.IsVertical
X:              0
Y:              0
TemplateSize:   144

b) Add a checkbox inside the Horizontal Gallery control. Rename it to "HorizontalBox". Set the properties as below:

OnCheck:
Set(AlreadySelectedBuffer,AlreadySelected);Set(AlreadySelected,AlreadySelectedBuffer&If(CountRows(Split(AlreadySelectedBuffer,"{};").Result) > 0,"{};","")&ThisItem.Value);If(CountRows(Split(AlreadySelected,"{};").Result) > 'MultiSelect-Checkbox'.NumberOfSelections,Set(AlreadySelected,Concat(LastN(Split(AlreadySelected,"{};").Result,'MultiSelect-Checkbox'.NumberOfSelections),Result,"{};")));Set(AlreadySelectedBuffer,Blank())

OnUncheck: 
With({Key:RemoveIf(Split(AlreadySelectedBuffer,"{};").Result,Result = ThisItem.Value)},Set(AlreadySelected,Concat(Key,Result,"{};")))

Default: 
If(ThisItem.Value in Split(AlreadySelected,"{};").Result,true,false)

Text:          ThisItem.Value
Width:         Horizontal.TemplateWidth
Height:        Horizontal.TemplateHeight
VerticalAlign: VerticalAlign.Middle
X:             0
Y:             0

3) Output Custom Properties --> These are the properties that the component will output and they can be used in other controls across screens.

a) SelectedItems --> This is the property that returns the values from selected checkboxes.

Expression on SelectedItems: Split(AlreadySelected,"{};").Result

Note: Here '{};' is used as the separator, if any of the values in the option contains this as a substring, then you will need to update the separator in SelectedItems output properties and Check, Uncheck properties of the Combobox controls.

Now, your component is ready to be used.

DEMO

In this post, we saw how to create checkboxes in a way that you restrict the number of user selections and decide the orientation of the checkbox controls.

I hope this was useful to you. In case of any questions or suggestions, feel free to reach out on Twitter at @agarwal_ritika.