Group The Items In A Power Apps Gallery

Organizing a list of items into groups makes their meaning easier to understand. The simplest example of this is a calendar. First we see the date (group) and then we see all of the events on that day (items). But in a Power Apps gallery we can only show a list. So how can we accomplish making groups in a gallery instead?
In this article I will show how to group the items in a Power Apps gallery.
Table of Contents:
Introduction: The Daily Appointments App
Setup the SharePoint List
Show The List Of Appointments Inside A Gallery
Create A Collection Of Daily Appointments (Group Items)
Make A List Of Unique Appointment Dates (Group Headers)
Combine Group Headers And Group Items Into A Single Collection
Sort The Combined Collection Into Groups
Change The Gallery Datasource To The Grouped Collection
Update Gallery Formatting To Display Groups
Introduction: The Daily Appointments App
Estimators at a home renovations company use the daily appointments app to keep track of all their meetings with customers. Appointments are displayed in ascending order and are grouped by the appointment date.

Setup the SharePoint List
Create a SharePoint list called Daily Appointments to hold all of the meetings with the following columns:
- StartDateOnly (date only)
- StartDateTime (date & time)
- FullName (single-line text)
- StreetAddress (single-line text)
Load the SharePoint list with this data:
StartDateOnly | StartDateTime | FullName | StreetAddress |
8/16/2021 | 8/16/2021 2:00 PM | Fabiano Corran | 49321 Sage Place |
8/16/2021 | 8/16/2021 1:00 PM | Deeanne Rosel | 6608 Farwell Pass |
8/16/2021 | 8/16/2021 10:00 AM | Alan Byron | 0121 Miller Avenue |
8/16/2021 | 8/16/2021 8:00 AM | Dannel Shaddick | 1 Waxwing Junction |
8/17/2021 | 8/17/2021 3:00 PM | Ervin Toor | 38223 Dryden Junction |
8/17/2021 | 8/17/2021 12:00 PM | Hal Johnson | 77692 Upham Road |
8/18/2021 | 8/18/2021 2:00 PM | Jennifer Kepling | 8 Oak Center |
8/18/2021 | 8/18/2021 12:00 PM | Gunner Mitchelson | 2 Tennyson Street |
8/18/2021 | 8/18/2021 10:00 AM | Barnebas Werendell | 3 Fieldstone Crossing |
8/19/2021 | 8/19/2021 4:00 PM | Penelopa Bresland | 8 Wayridge Terrace |
8/19/2021 | 8/19/2021 1:00 PM | Robinetta Crole | 529 Johnson Crossing |
8/19/2021 | 8/19/2021 11:00 PM | Annie Olson | 625 North Pass |
8/19/2021 | 8/19/2021 9:00 PM | Harriet Crutchfield | 100 Little Fleur Drive |
8/20/2021 | 8/20/2021 3:00 PM | Anton Paulmann | 696 Park Meadow Street |
8/20/2021 | 8/20/2021 1:00 PM | Darcy Ashdown | 6 Sachs Avenue |
8/21/2021 | 8/21/2021 2:00 PM | Roseanna Dessaur | 4 Nelson Avenue |
8/21/2021 | 8/21/2021 11:00 AM | Griffin Assandri | 91 Hoffman Street |
8/21/2021 | 8/21/2021 9:00 AM | Jason Hardy | 1321 Longview Circle |
Show The List Of Appointments Inside A Gallery
We will begin by adding a list of appointments to the app. Open Power Apps Studio and create a new mobile app from blank. Add a connection to the Daily Appointments SharePoint list. Then insert a gallery into the screen and select Daily Appointments as the datasource.

Change the Fill property of the Appointments Screen to gray. This step defines the fill of the group headings.
RGBA(237, 237, 237, 1)
Then update the following properties of the gallery to these values.
TemplatePadding: 0
TemplateSize: 90
To show appointment data in the gallery make 3 new labels, position them as shown below…

…and use this code in the text property of the name, address and time labels respectively.
ThisItem.FullName
ThisItem.StreetAddress
Text(ThisItem.StartDateTime, ShortTime)
Finally, create a separator by placing a label on the screen and give it these properties.
Height: 1
X: 0
Y: Parent.TemplateHeight-Self.Height
Width: 1
Create A Collection Of Daily Appointments (Group Items)
We will group the gallery items by loading the Daily Appointments list into a collection and performing several data transformation techniques. The code to do this is quite lengthy so we will look at each code block one-by-one to understand what it is doing.
Create a new button and position it on top of the titlebar. This temporary button will be used to test the code we are writing and will be deleted before we publish the app.

Write this code inside the OnSelect property of the button.
// Create a collection with all daily appointments
ClearCollect(
colDailyAppointments,
AddColumns(
ShowColumns(
'Daily Appointments',
"FullName",
"StartDateOnly",
"StartDateTime",
"StreetAddress"
),
"Level",
2
)
);
When we click the button it generates a collection of daily appointments in ascending order. The level column is added to track whether the row is a gallery heading [1] or a gallery item [2]. Its purpose will become more apparent soon.
Level | StartDateOnly | StartDateTime | FullName | StreetAddress |
2 | 8/16/2021 | 8/16/2021 2:00 PM | Fabiano Corran | 49321 Sage Place |
2 | 8/16/2021 | 8/16/2021 1:00 PM | Deeanne Rosel | 6608 Farwell Pass |
2 | 8/16/2021 | 8/16/2021 10:00 AM | Alan Byron | 0121 Miller Avenue |
2 | 8/16/2021 | 8/16/2021 8:00 AM | Dannel Shaddick | 1 Waxwing Junction |
2 | … | … | … | … |
2 | 8/21/2021 | 8/21/2021 9:00 AM | Jason Hardy | 1321 Longview Circle |
Make A List Of Unique Appointment Dates (Group Headers)
Next we will determine the list of unique appointment dates to create our grouped gallery’s headers. Add the following code to the OnSelect property of the button. We use the DISTINCT function to remove any duplicate dates from StartDateOnly. The output of DISTINCT is always a single-column table with the column name “Result”. We rename this column back to StartDateOnly add a new column called “Level” to define each date as a gallery grouping header.
// Create a collection of all daily appointments
ClearCollect(
colDailyAppointments,
AddColumns(
ShowColumns(
'Daily Appointments',
"FullName",
"StartDateOnly",
"StartDateTime",
"StreetAddress"
),
"Level",
2
)
);
//// *** NEW CODE ****
// Create a collection of all unique startdateonly values
ClearCollect(
colUniqueDates,
AddColumns(
RenameColumns(
Distinct(
'Daily Appointments',
StartDateOnly
),
"Result",
"StartDateOnly"
).StartDateOnly,
"Level",
1
)
);
When we click the button the resulting collection for colUniqueDate looks like this.
Level | StartDateOnly |
1 | 8/16/2021 |
1 | 8/17/2021 |
1 | 8/18/2021 |
1 | 8/19/2021 |
1 | 8/20/2021 |
1 | 8/21/2021 |
Combine Group Headers And Group Items Into A Single Collection
The next section of code is quite simple. We create a single collection called colCombinedAppointments to combine the group headers and group items into one table
// Create a collection of all daily appointments
ClearCollect(
colDailyAppointments,
AddColumns(
ShowColumns(
'Daily Appointments',
"FullName",
"StartDateOnly",
"StartDateTime",
"StreetAddress"
),
"Level",
2
)
);
// Create a collection of all unique startdateonly values
ClearCollect(
colUniqueDates,
AddColumns(
RenameColumns(
Distinct(
'Daily Appointments',
StartDateOnly
),
"Result",
"StartDateOnly"
).StartDateOnly,
"Level",
1
)
);
//// *** NEW CODE ****
// Combine both collections into a single collection
ClearCollect(
colCombinedAppointments,
colDailyAppointments,
colUniqueDates
);
Press the button to preview colCombinedAppointments.
Level | StartDateOnly | StartDateTime | FullName | StreetAddress |
2 | 8/16/2021 | 8/16/2021 2:00 PM | Fabiano Corran | 49321 Sage Place |
2 | 8/16/2021 | 8/16/2021 1:00 PM | Deeanne Rosel | 6608 Farwell Pass |
2 | 8/16/2021 | 8/16/2021 10:00 AM | Alan Byron | 0121 Miller Avenue |
2 | 8/16/2021 | 8/16/2021 8:00 AM | Dannel Shaddick | 1 Waxwing Junction |
2 | 8/17/2021 | 8/17/2021 3:00 PM | Ervin Toor | 38223 Dryden Junction |
… | … | … | … | |
1 | 8/18/2021 | |||
1 | 8/19/2021 | |||
1 | 8/20/2021 | |||
1 | 8/21/2021 |
Sort The Combined Collection Into Groups
The last step is to sort the combined collection so that group headers appear above group items. We can accomplish this with help from the “Level” column we’ve been adding to each collection. Recall that a grouping heading has a value of 1 and a group item has a value of 2.
// Create a collection of all daily appointments
ClearCollect(
colDailyAppointments,
AddColumns(
ShowColumns(
'Daily Appointments',
"FullName",
"StartDateOnly",
"StartDateTime",
"StreetAddress"
),
"Level",
2
)
);
// Create a collection of all unique startdateonly values
ClearCollect(
colUniqueDates,
AddColumns(
RenameColumns(
Distinct(
'Daily Appointments',
StartDateOnly
),
"Result",
"StartDateOnly"
).StartDateOnly,
"Level",
1
)
);
// Combine both collections into a single collection
ClearCollect(
colCombinedAppointments,
colDailyAppointments,
colUniqueDates
);
//// *** NEW CODE ****
// Sort the combined collection
ClearCollect(
colSortedAppointments,
SortByColumns(
colCombinedAppointments,
"StartDateOnly",
"StartDateTime",
"Level"
)
);
Click the button to review colSortedAppointments. Our gallery data is now grouped by the appointment date!
StartDateOnly | StartDateTime | FullName | StreetAddress |
8/16/2021 | |||
8/16/2021 | 8/16/2021 2:00 PM | Fabiano Corran | 49321 Sage Place |
8/16/2021 | 8/16/2021 1:00 PM | Deeanne Rosel | 6608 Farwell Pass |
8/16/2021 | 8/16/2021 10:00 AM | Alan Byron | 0121 Miller Avenue |
8/16/2021 | 8/16/2021 8:00 AM | Dannel Shaddick | 1 Waxwing Junction |
8/17/2021 | |||
8/17/2021 | 8/17/2021 3:00 PM | Ervin Toor | 38223 Dryden Junction |
8/17/2021 | 8/17/2021 12:00 PM | Hal Johnson | 77692 Upham Road |
… | … | … | … |
8/21/2021 | 8/21/2021 9:00 AM | Jason Hardy | 1321 Longview Circle |
Change The Gallery Datasource To The Grouped Collection
Now that the data is prepared we will load the colSortedAppointments collection into the gallery

Use this code in the Items property of the gallery
colSortedAppointments
Update Gallery Formatting To Display Groups
We must update the gallery’s formatting to make it appear as though the appointments are grouped.

Select the Street Address label and apply this code to the Text property. It will now show the date for any gallery rows that are a group header and it will display the Street Address for any rows that are a group item.
If(
ThisItem.Level=1,
Text(ThisItem.StartDateOnly, "mmmm d"),
ThisItem.StreetAddress
)
Group headers text should be larger than group items text to create a visual hierarchy.

Use this code in the Size property of the Street Address label to update the text size.
If(ThisItem.Level=1, 18, 14)
Then we will change the background color of the group headings to make the hierarchy even more clear.

Write this code in the TemplateFill property of the gallery to change the fill for group headings to Transparent and the fill for group items to white.
If(ThisItem.Level=1, Transparent, White)
The final step is to remove the orange button which we used for testing and move its code into the OnVisible property of the screen. That’s it, we’re done creating our grouped gallery in Power Apps!
Did You Enjoy This Article? ๐บ
Subscribe to get new Power Apps articles sent to your inbox each week for FREE
Questions?
If you have any questions or feedback about Group The Items In A Power Apps Gallery please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.
Thank you!
Thanks Matthew, great post!
I’ve managed to create a similar effect using nested galleries (following this guide: https://www.youtube.com/watch?v=ZzQ1t2sQvj8).
Can you tell me the advantages of using your method over this one?
Hello Elliot,
Thank you for sending the video link. I was not able to watch the whole thing but I am familiar with the nested galleries technique.
I think this largely comes down to preference. I found using a single collection had a longer load time but also had better performance when I scrolled through the gallery. When using nested galleries I would sometimes see the items expand as they were loaded in or get strange flicker. This is what led me to discovering a new method.
If it works for you, I say continue with the nested galleries. At the very least, I would study the pattern I used to create collection as I believe it could have value beyond this one example.
Cheers!
Hi Matthew, can we use AddColumns without ShowColumns ?
AddColumns(
‘Daily Appointments’,
“Level”,
2
)
How would you turn this into a weekly scheduling report ?
This will requires group by full name and weekly date range. For example Fabiano can have multiple appointments per day (9:00-11:30, 12:00-14:00, 14:15-17:00,…)
Wow, this is interesting and complexicating ๐ (Worth a try)
Could something like this be created using a gallery within a gallery?
the main gallery uses only the date field, using distinct so that it shows only distinct dates.
Then, the sub gallery would show all those related?
โฆ.Just a thought. What do you thinkโ
Jason,
Yes, nested galleries are also a valid approach. Itโs a case where there is more than one way to solve the problem and I prefer to do it this way.
Hi Matthew, sorry I didnโt realize someone had mentioned this already. Thanks for replying anyway. Your writings on collections have helped me greatly in the past and Iโm sure this one will too.
Thanks again for your work and sorry about that!
Jason,
No problem at all. I was happy to answer your question.
Thank You!
Great article and very well described.
Worked for me for my own list.
Volker,
Thanks for letting me know! I like hearing when my methods are used by others because then I know it was clearly described.
Best of luck building your apps ๐
Great article, very well written and easy to follow. Thanks
Phil,
Thanks for writing me to say this ๐
Thank you, very helpful! Do you know of a way to have comboboxes or dropdowns filter the gallery with the group header still displaying?
Robyn,
Sorry, I don’t have a solution for you at this time.
Hi Matthew,
Thank you for this solution. It works like a dream.
Could you describe how to add another column in the Level 1 header?
For example, if the appointment date fell on a holiday, I’d like to display that holiday from my “Holidays” list column as part of the header, below the appointment date.
Many thanks once again.
Stephen,
You would need to use an ADDCOLUMNS function to concatenate the date and holiday name (if there is one) and do the grouping on that new column instead.