PowerApps, Power Automate, SharePoint, Dynamics 365, Azure, C#: PowerApps: CheckBox (Extract Selected Items)

Tuesday, October 5, 2021

PowerApps: CheckBox (Extract Selected Items)

Hello Friends,

Welcome back with another post on PowerApps. Today, we will discuss about CheckBox control. Sometimes we have a situation where, we have to extract the selected checkbox values to show somewhere else. Means, the moment, we select a check box, it should get reflect in another gallery (where only selected values are getting shown). Upon Check/Uncheck of each item, this gallery should be updated. Let's see, how can we achieve this-

Create a blank PowerApps. I am creating a tablet mode PowerApp.
Now add a button and a vertical blank gallery.
Choose the OnSelect property of button and define a collection which will be used as data source for the gallery. Name this collection as "collCheckBoxData". Now define another collection which will be used to hold the selected checkboxes values. Name it "collCheckBoxDataSelected". Also define two variables

"varResetCheckBox" - This variable will be used to reset the check boxes checked status when we click on Load Data button.
"varCheckedItems" - This variable will be used to hold the concatenated value of selected check boxes. (This is additional feature, we will discuss, where we will concatenate the values of selected check boxes (delimiter based) so that we can save it in data source.

The complete code is (you can map with color codes 😊)-

ClearCollect(
    collCheckBoxData,
    {Title: "India"},
    {Title: "Russia"},
    {Title: "America"},
    {Title: "Japan"},
    {Title: "Brazil"},
    {Title: "China"},
    {Title: "South Korea"}
);
ClearCollect(
    collCheckBoxDataSelected,
    []
);
UpdateContext({varResetCheckBox: true});
UpdateContext({varCheckedItems: ""});

Now click on button using ALT key so that the function gets executed and the collection and variables could get initialized.
Now edit the gallery we have added by clicking on edit icon as shown in below screenshot and add a checkbox.
Set the template size to 60.
Now we have to bind the data to this check box. For that, first we will bind collection with gallery.
For this, click on gallery and set the Items property of gallery to "collCheckBoxData".
Now again edit the template and click on Checkbox and set the Text property to ThisItem.Title.
Now we have to apply some functions on OnCheck & OnUncheck property of checkbox.
First, we will write function for OnCheck property. The objective is upon Checkbox checked event, we will check if this checkbox text is available in Selected Checkbox Data collection "collCheckBoxDataSelected". If not, then we will add it.
Additionally, we will concatenate all selected text and will show in a label.
Then we will set ResetCheckBox variable value to false. The complete code is-

ForAll(
    Gallery2.AllItems,
    If(
        Checkbox2.Value = true,
        If(
            CountA(
                Filter(
                    collCheckBoxDataSelected,
                    Title = Checkbox2.Text
                )
            ) = 0,
            Collect(
                collCheckBoxDataSelected,
                {Title: Checkbox2.Text}
            );
        )
    )
);
UpdateContext({varCheckedItems: ""});
UpdateContext(
    {
        varCheckedItems: Concat(
            collCheckBoxDataSelected.Title,
            Concatenate(
                Title,
                ";"
            )
        )
    }
);
UpdateContext({varResetCheckBox: false});

Similarly, we will write function for OnUncheck property. The objective is upon Checkbox checked event, we will remove unchecked box text from the Selected Checkbox Data collection "collCheckBoxDataSelected".
Additionally, we will concatenate all selected text and will show in a label.
Then we will set ResetCheckBox variable value to false. The complete code is-

ForAll(
    Gallery2.AllItems,
    If(
        Checkbox2.Value = false,
        RemoveIf(
            collCheckBoxDataSelected,
            Title = Checkbox2.Text
        )
    )
);
UpdateContext({varCheckedItems: ""});
UpdateContext(
    {
        varCheckedItems: Concat(
            collCheckBoxDataSelected.Title,
            Concatenate(
                Title,
                ";"
            )
        )
    }
);
UpdateContext({varResetCheckBox: false});

Next we will update the Reset property of check box. Set this property with variable "varResetCheckBox".
Major part has been done. Now we have to show the data of checkboxes, we have selected. For this we will add another vertical blank gallery.
Set the data source as "collCheckBoxDataSelected"; Layout as "Title"; Fields as "Title". In case, if you don't find the fields to bind, just save and play the app and click on Load Data and then select any checkbox. It will load data in "collCheckBoxDataSelected". Now stop the app and assign the field.
This way we have achieved the functionality.
Now play the app
Lastly, we have to display the concatenated value. For this, we will add a label and set it's Text property to the variable "varCheckedItems".
The final screenshot 😊-
Checkboxes selection-
Checkboxes un-selection-
Load Data (making all gallery and checkboxes in reset mode)-
This way, you can implement such type of Checkbox functionality.