PowerApps: Nested Gallery - Expand / Collapse

 Hello Friends,

Welcome back with another post on PowerApps. In our last post, we have studied on how to create nested Gallery. We have successfully achieved the functionality. Now, by default, all nested galleries were appearing in expanded mode. We want to show only the selected order item gallery in expanded mode and other in collapse mode. Let's see-

If you have not read my previous post on Nested Gallery, please visit below link to go through and create the Nested Gallery PowerApps.

1. PowerApps: Nested Gallery
   

Now, as we to make changes so that only the selected Order's detail would get expanded and remaining gets collapsed. For this, 

1. Option 1: Only One Expanded At A Time
2. We will make a little change in the height property of nested gallery. Set the Height property of GalleryItemDetails as

3. If(ThisItem.OrderID = GalleryOrderMaster.Selected.OrderID,(CountA(ThisItem.ListItemDetails.ItemName)+1)*50,0)
   

4. This way, when we click on any Order ID, it's nested gallery will get a height of 50 times the number of rows +1. For rest of the order ids, their nested gallery will have the height as 0.
5. 
   
   
6. Now save the PowerApps and execute (play). The output will be
7. 
8. This way, only one order will be displayed in expanded mode at a time.
9. Option 2: Multiple Expanded At A Time
10. Sometimes there could be scenario that user need to expand more than one order at a time. Click on order id should be in a toggle mode. If Collapsed then it should expand otherwise collapse.
11. For this, we will use another local collection, where we will store the OrderID, upon which the user has clicked. Upon first click, the ID will get saved in this collection.
12. Upon second click, it will be removed from the collection.
13. This would be a repetitive process.
14. For this, we will add a collection creation code on btnLoadData. You may write the same on App >> OnStart.

15. ClearCollect(SelectedOrderIDCollection,{SelectedOrderID:0});
    

16. It will create a local collection with name as "SelectedOrderIDCollection" and having one record with column name as SelectedOrderID and value as 0. Being 0 will not be ID for any order hence, it will not impact our logic.
17. Now add below logic on GalleryOrderMaster >> OnSelect property-

18. If(
        CountRows(
            Filter(
                SelectedOrderIDCollection,
                SelectedOrderID = GalleryOrderMaster.Selected.OrderID
            )
        ) = 0,
        Collect(
            SelectedOrderIDCollection,
            {SelectedOrderID: GalleryOrderMaster.Selected.OrderID}
        ),
        Remove(
            SelectedOrderIDCollection,
            Filter(
                SelectedOrderIDCollection,
                SelectedOrderID = GalleryOrderMaster.Selected.OrderID
            )
        )
    )
    

19. This function will check if the selected OrderID is present in local selected collection (SelectedOrderIDCollection). If not, then this function will add it, otherwise it will remove. Means a toggle functionality will work.
20. 
21. Now, we redefine the Height property of GalleryItemsDetails. Change the existing function to-

22. (CountA(ThisItem.ListItemDetails.ItemName) + 1) * 50 * CountA(
        Filter(
            SelectedOrderIDCollection,
            SelectedOrderID = ThisItem.OrderID
        )
    )
    

23. 
    
    
24. Now save the PowerApps and execute/play the same.
25. 
    
    
26. 
    
    
27. This way, we can achieve the multiple expand feature in PowerApps nested gallery.
28. In our next post, we will learn about Expand All / Collapse All.

With this, I am concluding this post.

Happy Coding !!!

Will see you again with some new topics.

Stay Safe !

Stay Healthy !