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:
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.
Comments
-
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!
-
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 elements
All screen elementsGalleryCountryChecks - 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!
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.
*This post is locked for comments