web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Blogs / Power Apps - Community Blog / Cascading Checkbox with Gal...

Cascading Checkbox with Gallery in Power Apps

Views (3611)
KrishnaV Profile Picture KrishnaV 5,023

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!
Cascading Checkbo...
Cascading Checks ...

Comments

*This post is locked for comments

  • mminor Profile Picture mminor 3
    Posted at
    Cascading Checkbox with Gallery in Power Apps

    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!

  • Chrizzl Profile Picture Chrizzl
    Posted at
    Cascading Checkbox with Gallery in Power Apps

    Hi @KrishnaV !

     

    I accidentally encountered this post of yours and decided to take on the challenge and give my first answer on this forum 😀

     

    The problem

    "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."

     

    Simple explanation of why the problem occurs

    You are updating the selected checkboxes based on the gallery items you have on your screen. When items of those galleries disappear and reappear they will be drawn in their Default state, which is off. In your solution the checkboxes have no way of "knowing" what their previous state was.

     

    Simple solution explanation

    In order to let the checkboxes "remember" their previous state we need to save the states of all checkboxes. We need to keep the information saved even when the specific checkbox is not displayed at the screen. When the checkboxes will be redrawn, they will be drawn in their Default state which links to it's (last) saved state.

     

    Solution implementation in PowerApps

    The easiest way to keep track of the state of the checkboxes is to save all possibly displayed checkboxes with default states (checked or unchecked). This way we only need to update the saved data as we interact with the checkboxes.

     

    We save the default state of all checkboxes in the app OnStart or in the Screen OnVisible:

     

    ClearCollect(CollectionAllChecks, 
 AddColumns(tblCountry.ID, "Type", "Country", "Checked", false), 
 AddColumns(tblState.ID, "Type", "State", "Checked", false), 
 AddColumns(tblCity.ID, "Type", "City", "Checked", false)
);

     

    Because we have duplicate ID values in those tables, we add a column with their type so we can distinguish them.

    Our next step is to build the galleries. I chose to do a rework on your solution so we can reach our goal with less code and less screen elements (see below).

     

    Spoiler (Highlight to read)
    All screen elementsAll screen elements
    All screen elements

     

    GalleryCountryChecks - Items

     

    tblCountry

     

    GalleryStateChecks - Items

     

    Filter(tblState, CountryID in Filter(GalleryCountryChecks.AllItems, CheckboxCountry.Value).ID)

     

    GalleryCityChecks - Items

     

    Filter(tblCity, SateID in Filter(GalleryStateChecks.AllItems, CheckboxState.Value).ID)

     

     

    Now we only need 2 properties of our checkbox: Default and OnSelect.

    The Default property defines whether the checkbox appears checked or unchecked without having interacted with it. The OnSelect property immideately updates our saved states (Collection) to the correct value.

     

    CheckboxCity - Default

     

    ThisItem.ID in Filter(CollectionAllChecks, Type = "City", Checked = true).ID

     

    CheckboxCity - OnSelect

     

    Patch(CollectionAllChecks, LookUp(CollectionAllChecks, Type = "City" && ID = ThisItem.ID), { Checked: Self.Value })

     

     

    The code on the checkboxes in the other gallery will be the same except for the Type. 

     

    DEMO!

    Checkbox demo.gif

     

    That's all! I hope you appreciate the simplicity of this solution.

     

    I want to share the app as well, but don't know how to attach it to this comment.