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