How to add check box grouping in Canvas App

Those who worked in SharePoint will be familiar with checkbox grouping because the “choice column” in SharePoint allows the Checkboxes option. It will be similar in SharePoint aligned BPM tools like Nintex and K2. Most of the BPM tools like Pega and even in Power Platform do not provide this checkbox grouping option and it should be handled manually.

As discussed in previous posts, the gallery is a multipurpose control and with the help of it, we can build complex control patterns. We are going to build the following checkbox grouping pattern.

New Mode:

Gallery and collection make the best pair in canvas app, the collection should be initialized in Screen “OnVisible” property to feed it to the gallery.

//Single checkboxes
ClearCollect(colSingle,{value:"one"},{value:"two"},{value:"three"},{value:"four"},{value:"five"},{value:"six"},{value:"other"});

//Multiple checkboxes
ClearCollect(colMultiple,{value:"one"},{value:"two"},{value:"three"},{value:"four"},{value:"five"},{value:"other"});

• Once the collection is mapped to the respective galleries, add required controls for the Single check box gallery. “Check Box 1” – “Text Box”

• For the Multiple check box gallery, the following pattern of controls should be added.

“Check Box 1” – “Text Box 1” – “Other Text Box” – “Label” – “Text Box 2” – “Check Box 2”

Text boxes will be visible based on the specific check box selection.

//Single Checkboxes
CheckBox - Text : ThisItem.value
TextBox - Visible: If(ThisItem.value = "Other",chkSingle.Value = true,true,false)


//Multiple Checkboxes
TextBox1 - Visible:If(chkMultiple1.Value = true,ThisItem.value = "one",true,false)
OtherTextBox - Visible: If(ThisItem.value = "five",true,false)
Label - Text: ThisItem.value
TextBox2 - Visible: If(chkMultiple2.Value = true,ThisItem.value = "one",true,false)

To save the selected values,

1. SharePoint or Table columns should be “Multiple lines of text”,”Text Area”.
2. Loop the gallery and push the selected check boxes and text boxes values as semicolon delimiter into a collection.
3. Concat the collection into a single string with “|” as delimiter in the patch function.

The above selection will be concatenated as follows,

Single: one;|three;|Other; – Since there is no value entered in the check box, it will be concatenated with an empty string.

Multiple: true;1;;one;1.1;true|true;;;three;;true – if there are no values it will be concatenated with empty string.

// Single check box grouping
ForAll(
    galSingle.AllItems,
    If(chkSingle.Value = true,
    Collect(
        colSingleSel,
        {selected:chkSingle.Text";"&textBox.Text}
    )
    )
);


//Multiple check box grouping
ForAll(
    galMultiple.AllItems,
    If(chkMultiple1.Value = true || chkMultiple2.Value = true,
    Collect(
        colMultipleSel,
        {selected:chkMultiple1.Value&";"&txtBox1.Text&";"&txtOtherBox.Text&";"&lblText.Text&";"&txtBox2.Text&";"&chkMultiple2.Value}
    )
    )
);


//Saving the data
Patch(datasource,lookup(datasource,id="currentItemId"),{
    SingleValue:Left( Concat( colSingleSel, selected & "|" ), Len( Concat( colSingleSel, selected & "|" ) ) - 1 ),
    MultipleValue:Left( Concat( colMultipleSel, selected & "|" ), Len( Concat( colMultipleSel, selected & "|" ) ) - 1 )})

Edit Mode:

When the record is opened in edit mode, the saved values should be retrieved and populated in the respective controls.

In Screen “OnVisible” property, check if the screen is opened in Edit mode, then load the checkbox grouping values into a collection as follows.

First the string is split with “;”, then using the First() and Last() functions we can get the first and last values. To get the intermediate values with the combination of FirstN() and Last() function we can get the values.

//Single checkbox grouping
ForAll(Split(currentRecord.SingleValue,"|"),Collect(colSingleEdit,{val1:First(Split(Result,";")).Result,val2:Last(Split(Result,";")).Result}));


//Multiple checkbox grouping
ForAll(Split(currentRecord.multipleValue,"|"),Collect(colMultipleEdit,{val1:First(Split(Result,";")).Result,val2:Last(FirstN(Split(Result,";"),2)).Result,val3:Last(FirstN(Split(Result,";"),3)).Result,val4:Last(FirstN(Split(Result,";"),4)).Result,val5:Last(FirstN(Split(Result,";"),5)).Result,val6:Last(Split(Result,";")).Result}))

Controls should be mapped to collection records with the help of lookup function,

// Single Checkbox grouping
CheckBox - Default: ThisItem.value in colSingleEdit.val1
TextBox - Default: LookUp(colSingleEdit,val1=ThisItem.value).val2


//Multiple Checkbox grouping
CheckBox1 - Default:LookUp(colMultipleEdit,val4=ThisItem.value).val1
TextBox1 - Default:LookUp(colMultipleEdit,val4=ThisItem.value).val2
OtherTextBox - default: LookUp(colMultipleEdit,val2=ThisItem.value).val3
TextBox2 - Default: LookUp(colMultipleEdit,val4=ThisItem.value).val5
CheckBox2 - Default: LookUp(colMultipleEdit,val4=ThisItem.value).val6

SharePoint Choice Columns:

In the example, we used the “Text Area” column to save the data in Dataverse, But if the Choice column/SharePoint is used then items property and data should be saved as follows. For SharePoint, the gallery is created with a checkbox.

//Items property of gallery
Choices('SharePoint List'.'Choice Column')

//On Save Button Click if Submit Form is used
ForAll(
    galSingle.AllItems,
    If(chkSingle.Value = true,
    Collect(
        colSingleSel,
        chkSingle.Text
    )
    )
);

//Update property of datacard if submit form is used
Update:  colSingleSel
----------------------------------------------------------------------------------------------------------------
//On Save Button click if Patch is used
ForAll(
     galSingle.AllItems,
     If(chkSingle.Value = true,
     Collect(
             colSingleSel,
             {
              '@odata.type': "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference",
               Id: Iterator,
               Value: chkSingle.Text
             }
           )
)
);

//Patch function
Patch(Datasource,LookUp(Datasource,ID="CurrentItem ID"),{Title:"PowerApps Demo",SingleChoice:colSingleSel})

It’s a bit large post and it is customized with more formulas which itself require explanatory posts.

Other gallery related posts: Nested Gallery, Repeating Section, Attachments Display, Responsive Gallery, How to use gallery, Gallery operations.

Please post your queries in the comments section. Happy Building 🙂