Implementing 2 levels of grouping in Power Apps

When you want to implement 2 levels of grouping in Power Apps you will discover quite soon that you can’t have more than 1 nested gallery. So how can we implement a dual grouping view of data?

Our data in SharePoint

In SharePoint I have created items that hold 3 piece of information about people within my organisation.

• Name
• Department
• Team

In Power Apps however this is a bit harder to do.

Create 2 levels of grouping in Power Apps

Once I’ve created a new screen in my Power Apps and I’ve added a connection to my SharePoint list. I’m adding the following to my screen:

• 2 Galleries
• 3 Labels
• 1 HTML Text control
• 1 Button

I renamed them a bit so that it becomes easier to understand what is what.

The following tree view is what I’ve got in my app now.

In the button I’m going to add the following two lines of code

ClearCollect(varWithHTML, AddColumns('My Teams', "HTML", "<div>" & Title & "</div>"));
ClearCollect(colgrouped, GroupBy(varWithHTML, "Department", "Details"))

These two lines might need a bit of an explanation first. the first line will add an additional column to my data, called HTML. This text column, will be set to

<div>Whatever someone's name is</div>

In this example I just went for displaying the people’s names as plain text, but you could really just add any kind of formatting here.

In the second line of code the data is grouped by the department column and a collection colgrouped is created.

This collection is used in the outer gallery.

Now we can set the text property lblDepartment to “Department” and the Text property datDepartment to ThisItem.Department

For the inner gallery we need to do some more grouping. This time we group the data by the Team column.

Displaying the people in the dual grouping

Earlier we added an HTML column to our data and we are now going to make use of that. The HTMLText control that I added to my screen has a property called HTMLText. I can now be set to the following code

Concat(ForAll(ThisItem.Details2, HTML).Value,Value)

The above code will concatenate all HTML code fro all people that are part of a each team within a each department.

In my example on how to create 2 levels of grouping in Power Apps, I didn’t spend any time on how the data at the lowest level should be displayed. Or collapsing parts of the data. All of these can be part of a future post.