Expand And Collapse View Using Nested Gallery - PowerApps

Introduction

 
In this article, we will learn how to create a group by column list view in PowerApps using nested gallery controls to expand and collapse views like the SharePoint list.
 
Below is the SharePoint list view that we are going to replicate in PowerApps.
 
Expand And Collapse View Using Nested Gallery - PowerApps
Now, let’s go step by step and create the same group by column list view in PowerApps.
 
Step 1
 
First, you need to create one custom SharePoint list to use in PowerApps to bind this list data into gallery controls. For this article, I’ve created the list called “Customer”. Customer Name, Address, City, Postal Code are a single line of text, and Country column is a choice field.
 
Step 2
 
Log in to the https://powerapps.microsoft.com/ and select the blank canvas app. Provide the name of your app, select tablet format, and click on the create button.
 
Step 3
 
Create a SharePoint data source. Click on the View button from the top bar menu, click on data sources, and select the SharePoint from the connectors. You need to provide SharePoint site URL and select the list (Customer) which you wish to use.
 
Insert the gallery control on the blank screen. Click on the insert menu from the top bar, click on the Gallery section and select the blank flexible height gallery control, and select the SharePoint data source.
 
Change the name of gallery control to “ParentGallery”.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 
Step 4
 
Set the Items property of parent gallery control as shown in the below screenshot.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 
Step 5
 
Insert the label inside parent gallery control and rename it to HeadingLabel and set the Text property of the label to ThisItem.Value and it will display all the countries from the SharePoint list.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 
Step 6
 
Insert another blank vertical gallery control inside the parent gallery and rename it to ChildGallery. Set the Items property of ChildGallery control so that it will display the records based on Country. Select the Title and subtitle from layout property and select which column you need to show inside Child gallery control. I’ve selected customer name and city.
 
Also, set the visible property of ChildGallery control to ThisItem.IsSelected.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 
Step 7
 
In this step, we need to set the Height property of ChildGallery control. If there are any items inside the child gallery, we need to set the height to the number of rows and multiply with half size of child gallery control otherwise set to 0. Using this it will automatically adjust the height of the gallery based on the number of items.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 
Step 8
 
We need to display the count of child gallery with the country heading label inside the parent gallery. Update the Text property of HeadingLabel control as below.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 
Step 9
 
Insert the down arrow icon beside the country label in a parent gallery control. Set the visible property to “ThisItem.IsSelected” and OnSelect property as per the below screenshot.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 
Step 10 
 
Insert the right arrow icon at the same place of the down arrow and set the visible property to “!ThisItem.IsSelected”.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 
Save the PowerApps and click on the run button to see the output.
 
Expand And Collapse View Using Nested Gallery - PowerApps
 

Conclusion

 
We can implement expand and collapse functionality in PowerApps using the nested gallery controls and achieve the SharePoint group by list view functionality as per your business requirements. Happy Learning!


Similar Articles