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!
Meet Our Blog Authors
  • PowerApps Community Mentor 2018, Practicing surgeon and former Professor of Surgery, University of Illinois, Chicago.
  • Jill of All Trades (Power Apps, SharePoint, PowerShell, Exchange, Power Automate and odds & ends of assorted other things)
  • I am the Owner/Principal Architect at Don't Pa..Panic Consulting. I've been working in the information technology industry for over 30 years, and have played key roles in several enterprise SharePoint architectural design review, Intranet deployment, application development, and migration projects. I've been a Microsoft Most Valuable Professional (MVP) 12 consecutive years and am also a Microsoft Certified SharePoint Masters (MCSM) since 2013.
  • I'm Tim Leung - a PowerApps builder. In addition to PowerApps, my main interests include building software with SQL Server and Microsoft .NET. I'm the author of 'Beginning PowerApps' - the first published book on PowerApps. You can buy this from Amazon and other leading bookstores.
  • Systems developer
  • My name is Timothy Shaw and I create digital solutions using the Power Platform, Office 365, and Azure SQL and handle the IT for a small company in the energy sector. When not building the future :), I enjoy playing guitar, good (or really bad!) sci-fi, Xbox therapy, and hanging with my wife and son. Twitter: @ShortForTim