PowerApps: Checkbox Control

 Hello Friends,

Welcome back with another post on PowerApps. Today, we will discuss about Checkbox control. Let suppose, your project requirement is to add 2 checkboxes "A", "B". At a time only one checkbox can be selected (however, you may be thinking that this can be achieved using Radio control). Each checkbox has dependent multiple checkboxes. For "A", these are "A1", "A2", "A3". For "B", these are "B1", "B2".

Now, if "A" is selected, "A1", "A2", "A3" should be enabled and "B1", "B2" should get disabled as well as unchecked. Similar case if user selects "B". How do we implement this feature? Let's see-

1. Navigate to PowerApps maker portal. Create a blank Canvas PowerApps "CheckBoxControlApp" and format as "Tablet".
2. 
3. Now add two checkbox controls-
1. CheckboxA
2. CheckboxB
4. 
5. Further add 3 checkboxes in Section A and 2 checkboxes in Section B.
6. 
7. The basic structure is complete.
8. Now, our first requirement is that the moment checkbox A or B is checked, the other one should get unchecked. For this, we will define 2 local variables-
1. varCheckboxACheck
2. varCheckboxBCheck
9. We will set the similar one as true and the other one as false. Means, if clicked on A, varCheckboxACheck will be set as true and varCheckboxACheck will be set as false.
10. We will set these variables upon "OnCheck" property.
11. 
12. Now set the Default property on each checkboxes (A & B) with respective variables. for checkbox A, set Default property to varCheckboxACheck. Similarly for B.
13. 
14. Now, save the app and play it. toggle between CheckboxA and CheckboxB. It's working. The moment, we click other checkbox, the previous get reset. In case, if there is an issue, please use Reset(CheckboxA) / Reset(CheckboxB) alongwith the existing code on OnCheck property.
15. 
16. Now, the second part of requirement is to reset the dependent checkboxes and get them disabled as well.
17. So, first, we will write logic for disabled. for this, click on any dependent checkbox (let's say ChechboxA1) and set the DislayMode property as below-
18. 
19. Similarly, update the DisplayMode property for each dependent control. For dependent upon A checkbox, use varCheckBoxACheck while for B checkbox, use varCheckBoxBCheck.
20. 
21. Now, the last part is to reset the dependent check boxes if the parent is unchecked. For this, you need to use the Reset function upon "OnCheck" property of each parent checkbox but with opposite dependent controls. Means, upon "OnCheck" of CheckBoxA, you need to Reset CheckBoxB1 & CheckBoxB2. Similarly, upon "Oncheck" of CheckBoxB, you need to Reset CheckBoxA1, CheckBoxA2 & CheckBoxA3.
22. 
23. That's all. Save it, publish it and run it.
24. 
25. 
26. 
27. Note: Homework for you. If user clicks on CheckboxA and then uncheck it, the dependent checkboxes status should restore to their original state.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !