cancel
Showing results for 
Search instead for 
Did you mean: 
KrishnaV

Cascading Checkbox with Gallery in Power Apps

In this article, I want to discuss one of the repeating issues in the community, how to implement a cascading checkbox with a gallery. The checkboxes should get create automatically and must drive from a datasource.

 

Business Case:
User want to implement cascading checkbox driving from data source. It should hold the previous selections and deselect the child checkboxes when we deselect the parent checkbox.

 

Implementation Challenges:

Users are not able to retain the previously selected check boxes as part of the chield gallery control when when the select new parent item.

 

Expected Output:

Cascading Checks.gif

Solution:

I have created couple of collections in my solution and added all the checked and selected chield controls in those collection rendered in the gallery with check boxes.

I have used toggle controls to ensure the code is reused because I noticed I need to use checkbox onCheck and unCheck property I need to use the same code.


Check box onCheck
:

 

 

UpdateContext({varCountryFlag:!varCountryFlag});

 

 

Check box onUncheck:

 

 

RemoveIf(collStateChks,chStatePID=LookUp(tblCountry,CountName=Self.Text,ID));
RemoveIf(collCityChks,chSatePID=LookUp(tblCountry,CountName=Self.Text,ID));
UpdateContext({varCountryFlag:!varCountryFlag});

 

 

Checkbox Default value:

 

 

LookUp(collStates,StateName=Self.Text,stateFlag)

 

 

Toggle Default:

varCountryFlag

Toggle onChange:

 

 

Clear(collCountryChks);
Clear(collStates);
Clear(collCities);
ForAll(
    galCntryNames.AllItems,
    If(
        chkCntryName.Value,
        Collect(
            collStates,
            AddColumns(
                Filter(
                    tblState,
                    CountryID = lblCntyID.Text
                ),
                "stateFlag",
                !IsBlank(
                    LookUp(
                        collStateChks,
                        chkStateName = StateName,
                        chkStateName
                    )
                )
            )
        );
        Collect(
            collCountryChks,
            {chkCountryName: chkCntryName.Text}
        )
    )
);
UpdateContext({varStateFlag:!varStateFlag})

 

 

Check the below video for a detailed explanation on this solution:
https://youtu.be/4JiOdwUe1YI

I have attached the app and the data source Excel in this.

 

Thank you all MVPs and Super Users of this community for inspiring with your great work and contributions to the community. 

@heather_italent  @WarrenBelz  @RezaDorrani @mdevaney @RandyHayes @eka24 @PowerAddict @Shanescows 

Happy development in Power Apps!
Comments