multiple levels of grouping

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?

Implementing 2 levels of grouping in Power Apps

Our data in SharePoint

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

  • Name
  • Department
  • Team
Implementing 2 levels of grouping in Power Apps Microsoft Office 365 image 20
Now within Power apps I want to display the data grouped by department and then grouped by Team. Within SharePoint I could quite quickly create a view that looks like this:
Implementing 2 levels of grouping in Power Apps Microsoft Office 365 image 21

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.

Implementing 2 levels of grouping in Power Apps Microsoft Office 365 image 24

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.

Implementing 2 levels of grouping in Power Apps Microsoft Office 365 image 26

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.

Implementing 2 levels of grouping in Power Apps Microsoft Office 365 image 27

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)
Implementing 2 levels of grouping in Power Apps Microsoft Office 365 image 28

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.

By Pieter Veenstra

Business Applications and Office Apps & Services Microsoft MVP working as a Microsoft Productivity Principal Consultant at HybrIT Services. You can contact me using contact@veenstra.me.uk.

One thought on “Implementing 2 levels of grouping in Power Apps”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: