Post
Ask Question

Multiple Expand And Collapse Rows In A Power Apps Canvas App Gallery

In this article, we will learn about the concept of multiple expand and collapse using PowerApps nested Gallery. There is no direct feature or functionality for expanding and collapsing rows in Microsoft Power Apps.
 
I have read a lot of articles and watched some videos for this concept and collected some ideas on expanding and collapsing. Users can expand one row at a time. But my requirement was something different like I wanted to expand multiple rows of a gallery at the same time.
 
The result link is below and the picture is here.
 
 
Before reading this article, please go through my previous articles in which I explained the steps to Create Project and Phases of the Project using various input fields.
Now I am going to explain how to achieve this.
 
Step 1 - Display the Project Details
 
On the left side of the above picture is a gallery that displays the Project information. I have explained in the previous articles how to save the Project Information inputs in the SharePoint list.
 
To display all the Projects in a gallery,
  1. Add a new Blank screen.
  2. Add a blank vertical gallery
 
Items
 
Project_Details (SharePoint List)
 
 
The above image shows the records which are in the SharePoint List.
 
Step 2 - Display the Phase and Task Information in Nested Gallery
 
The right side of the first picture displays the Phases and Tasks of the Project. Tasks are specific to Phases. To achieve this, select a blank flexible height gallery. To expand and collapse flexible height gallery is required.
 
 
 
 
Phase Gallery(Parent Gallery)
 
Items
 
Filter(Project_Phase_Info,ProjectID.Value = Projectlist.Selected.ID).
 
It displays the Phases of the Project selected by the Project list gallery.
 
 
Edit the parent gallery, add another blank vertical gallery rename it to Task Gallery(Child Gallery).
 
Items
 
Filter(Task_List, PhaseName.Id = ThisItem.ID).
 
Step 3 - Expand and Collapse of rows of the gallery
 
Edit the parent gallery add two icons with the same co-ordinate of X and Y.
 
  • Expand Icon
  • Collapse Icon
Expand Icon
 
Concept - Declare a Collection - SelectedPhaseName, which is collected Rows of Phases.
 
OnSelect
  1. If(  
  2.    CountRows(  
  3.       Filter(  
  4.          SelectedPhaseNameID,  
  5.          ID = ThisItem.ID  
  6.          )  
  7.       ) = 0,  
  8.    Collect(  
  9.       SelectedPhaseNameID,  
  10.       {ID: ThisItem.ID}  
  11.       ),  
  12.    Remove(  
  13.       SelectedPhaseNameID,  
  14.       Filter(  
  15.          SelectedPhaseNameID,  
  16.          ID = ThisItem.ID  
  17.          )  
  18.    )  
  19. );   
 
Visible
  1. If(  
  2.    CountRows(  
  3.       Filter(  
  4.          SelectedPhaseNameID,  
  5.          ID = ThisItem.ID  
  6.          )  
  7.       ) > 0,  
  8.    false,  
  9.    true  
  10. )   
Collapse Icon
 
OnSelect
  1. If(  
  2.    CountRows(  
  3.       Filter(  
  4.          SelectedPhaseNameID,  
  5.          ID = ThisItem.ID  
  6.          )  
  7.       ) > 0,  
  8.    Remove(  
  9.       SelectedPhaseNameID,  
  10.          Filter(  
  11.             SelectedPhaseNameID,  
  12.             ID = ThisItem.ID  
  13.             )  
  14.          )  
  15.    );  
  16. UpdateContext({expand: false});  
 
Visible 
  1. If(  
  2.    CountRows(  
  3.       Filter(  
  4.          SelectedPhaseNameID,  
  5.          ID = ThisItem.ID  
  6.       )  
  7.    ) > 0,  
  8.  true,  
  9.  false  
  10. )   
 
Now select the Task Gallery (Child Gallery).
 
Step 4 - Set the Height of Child Gallery
 
Select the Task Gallery (Child Gallery).
 
Check its Template Size (In my App it is 45 here, it can be set as per user requirement).
 
Template Size is the height of one row.
 
Multiple Expand And Collapse Rows In A Power Apps Canvas App Gallery
 
The height of the child gallery depends upon the template size of the gallery.
 
Height 
  1. CountRows(TaskGallery.AllItems) * 45 * CountRows(  
  2.    Filter(  
  3.       SelectedPhaseNameID,  
  4.       ID = ThisItem.ID  
  5.    )  
  6. )   
By this, any Phase or any rows of Parent Gallery can be expanded and collapsed simultaneously.
 
Now we will check how to know the no of rows in Child Gallery,
 
Edit the Phase Gallery label which displays the Phase Name is this item.PhaseName.
 
Along with this add a count and will display the no of rows.
 
Text
 
ThisItem.PhaseName & " (" & CountRows(TaskGallery.AllItems) & ")",
 
 
The below image displays all 4 phases expanded at one time.
 
 
Similarly, now we will check if there are no tasks in the phase and if we expand,
 
 
This is the expanded view of no records rows.
 

Conclusion

 
By displaying the records in the nested gallery of PowerApps if we can use the expand and collapse in the nested gallery it will make it easier for the user. As it reduces space, it gives a structural view of records on one Screen.
 
I have added 4 default tasks in each phase, you can try with any number of tasks. I hope you will enjoy reading this article. I am sure you will try this out, thanks.


Similar Articles