![\"\"](\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-235.png?resize=640%2C346&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-236.png?resize=640%2C452&ssl=1\")
<\/figure><\/li><\/ul><\/a><\/a><\/a><\/div><\/div><\/div>\n\n\n\nAs 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.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-190.png?resize=640%2C392&ssl=1\")
Single and Multiple checkboxes<\/figcaption><\/figure><\/div>\n\n\n\n New Mode:<\/strong><\/p>\n\n\n\n
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. <\/p>\n\n\n\n
\/\/Single checkboxes<\/strong>\nClearCollect(colSingle,{value:\"one\"},{value:\"two\"},{value:\"three\"},{value:\"four\"},{value:\"five\"},{value:\"six\"},{value:\"other\"});\n\n\/\/Multiple checkboxes<\/strong>\nClearCollect(colMultiple,{value:\"one\"},{value:\"two\"},{value:\"three\"},{value:\"four\"},{value:\"five\"},{value:\"other\"});<\/code><\/pre>\n\n\n\n- Once the collection is mapped to the respective galleries, add required controls for the Single check box gallery. “Check Box 1” – “Text Box”<\/li><\/ul>\n\n\n\n
- For the Multiple check box gallery, the following pattern of controls should be added.<\/li><\/ul>\n\n\n\n
“Check Box 1” – “Text Box 1” – “Other Text Box” – “Label” – “Text Box 2” – “Check Box 2”<\/p>\n\n\n\n
Text boxes will be visible based on the specific check box selection.<\/p>\n\n\n\n
\/\/Single Checkboxes<\/strong>\nCheckBox - Text : ThisItem.value\nTextBox - Visible: If(ThisItem.value = \"Other\",chkSingle.Value = true,true,false)\n\n\n\/\/Multiple Checkboxes<\/strong>\nTextBox1 - Visible:If(chkMultiple1.Value = true,ThisItem.value = \"one\",true,false)\nOtherTextBox - Visible: If(ThisItem.value = \"five\",true,false)\nLabel - Text: ThisItem.value\nTextBox2 - Visible: If(chkMultiple2.Value = true,ThisItem.value = \"one\",true,false)<\/code><\/pre>\n\n\n\nTo save the selected values,<\/p>\n\n\n\n
- SharePoint or Table columns should be “Multiple lines of text”,”Text Area”.<\/li>
- Loop the gallery and push the selected check boxes and text boxes values as semicolon delimiter into a collection.<\/li>
- Concat the collection into a single string with “|” as delimiter in the patch function.<\/li><\/ol>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-193.png?resize=640%2C314&ssl=1\")
CheckBox demo<\/figcaption><\/figure><\/div>\n\n\n\n The above selection will be concatenated as follows,<\/p>\n\n\n\n
Single:<\/em> one;|three;|Other; – Since there is no value entered in the check box, it will be concatenated with an empty string.<\/p>\n\n\n\n
Multiple<\/em>: true;1;;one;1.1;true|true;;;three;;true – if there are no values it will be concatenated with empty string.<\/p>\n\n\n\n
\/\/ Single check box grouping<\/strong>\nForAll(\n galSingle.AllItems,\n If(chkSingle.Value = true,\n Collect(\n colSingleSel,\n {selected:chkSingle.Text\";\"&textBox.Text}\n )\n )\n);\n\n\n\/\/Multiple check box grouping<\/strong>\nForAll(\n galMultiple.AllItems,\n If(chkMultiple1.Value = true || chkMultiple2.Value = true,\n Collect(\n colMultipleSel,\n {selected:chkMultiple1.Value&\";\"&txtBox1.Text&\";\"&txtOtherBox.Text&\";\"&lblText.Text&\";\"&txtBox2.Text&\";\"&chkMultiple2.Value}\n )\n )\n);\n\n\n\/\/Saving the data<\/strong>\nPatch(datasource,lookup(datasource,id=\"currentItemId\"),{\n SingleValue:Left( Concat( colSingleSel, selected & \"|\" ), Len( Concat( colSingleSel, selected & \"|\" ) ) - 1 ),\n MultipleValue:Left( Concat( colMultipleSel, selected & \"|\" ), Len( Concat( colMultipleSel, selected & \"|\" ) ) - 1 )})<\/code><\/pre>\n\n\n\nEdit Mode:<\/strong><\/p>\n\n\n\n
When the record is opened in edit mode, the saved values should be retrieved and populated in the respective controls.<\/p>\n\n\n\n
In Screen “OnVisible” property, check if the screen is opened in Edit mode, then load the checkbox grouping values into a collection as follows.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\/\/Single checkbox grouping<\/strong>\nForAll(Split(currentRecord.SingleValue,\"|\"),Collect(colSingleEdit,{val1:First(Split(Result,\";\")).Result,val2:Last(Split(Result,\";\")).Result}));\n\n\n\/\/Multiple checkbox grouping<\/strong>\nForAll(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}))\n<\/code><\/pre>\n\n\n\nControls should be mapped to collection records with the help of lookup function,<\/p>\n\n\n\n
\/\/ Single Checkbox grouping<\/strong>\nCheckBox - Default: ThisItem.value in colSingleEdit.val1\nTextBox - Default: LookUp(colSingleEdit,val1=ThisItem.value).val2\n\n\n\/\/Multiple Checkbox grouping<\/strong>\nCheckBox1 - Default:LookUp(colMultipleEdit,val4=ThisItem.value).val1\nTextBox1 - Default:LookUp(colMultipleEdit,val4=ThisItem.value).val2\nOtherTextBox - default: LookUp(colMultipleEdit,val2=ThisItem.value).val3\nTextBox2 - Default: LookUp(colMultipleEdit,val4=ThisItem.value).val5\nCheckBox2 - Default: LookUp(colMultipleEdit,val4=ThisItem.value).val6<\/code><\/pre>\n\n\n\n
- For the Multiple check box gallery, the following pattern of controls should be added.<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-191.png?resize=640%2C363&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-192.png?resize=640%2C326&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-194.png?resize=640%2C318&ssl=1\")
<\/figure><\/li>![\"\"](\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-195.png?resize=640%2C312&ssl=1\")
<\/figure><\/li><\/ul>