Expand And Collapse View Using Nested Gallery

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

Step 4

Set the Items property of parent gallery control as shown in the below screenshot.

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.

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.

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.

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.

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.

Step 10

Insert the right arrow icon at the same place of the down arrow and set the visible property to “!ThisItem.IsSelected”.

Save the PowerApps and click on the run button to see the output.

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!

4 Comments

Join the conversation! Your thoughts help the community grow.

Balla Sravani2y ago
What should be the template size of parent gallery
ajay kere3y ago
Hi Can you please share this app...
Dorinda Reyes3y ago
I love this approach but I am wondering if I can bring in more information on the Label in step 8. please let me know, also I want to show all of the item collasped
prasad k5y ago
How to set label to true if there are 0 records?