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

Thank you for sharing this example! I am attempting to replicate a similar app but instead of Excel as the data source, I am using SharePoint lists with lookup fields that I have imported into Collections. I am running into issues with this portion of the toggle code in the example above.

 

Filter(
                    tblState,
                    CountryID = lblCntyID.Text
                ),

Since in my collection imported from a SharePoint list, the CountryID is considered a complex field, I have not been able to get the filter function to work. I have tried CountryID.Value = lblCntyID.Text but the error is caused because it is a comparison of a table to text.  Do you have an example for how to use a complex field value in the conditional logic of the filter function?

 

Thank you!