Group The Items In A Power Apps Gallery (2024)

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 AppSetup the SharePoint ListShow The List Of Appointments Inside A GalleryCreate 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 CollectionSort The Combined Collection Into GroupsChange The Gallery Datasource To The Grouped CollectionUpdate 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.

Group The Items In A Power Apps Gallery (1)

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:

StartDateOnlyStartDateTimeFullNameStreetAddress
8/16/20218/16/2021 8:00 AMDannel Shaddick1 Waxwing Junction
8/16/20218/16/2021 10:00 AMAlan Byron0121 Miller Avenue
8/16/20218/16/2021 1:00 PMDeeanne Rosel6608 Farwell Pass
8/16/20218/16/2021 2:00 PMFabiano Corran49321 Sage Place
8/17/20218/17/2021 12:00 PMHal Johnson77692 Upham Road
8/17/20218/17/2021 3:00 PMErvin Toor38223 Dryden Junction
8/18/20218/18/2021 10:00 AMBarnebas Werendell3 Fieldstone Crossing
8/18/20218/18/2021 12:00 PMGunner Mitchelson2 Tennyson Street
8/18/20218/18/2021 2:00 PMJennifer Kepling8 Oak Center
8/19/20218/19/2021 9:00 PMHarriet Crutchfield100 Little Fleur Drive
8/19/20218/19/2021 11:00 PMAnnie Olson625 North Pass
8/19/20218/19/2021 1:00 PMRobinetta Crole529 Johnson Crossing
8/19/20218/19/2021 4:00 PMPenelopa Bresland8 Wayridge Terrace
8/20/20218/20/2021 1:00 PMDarcy Ashdown6 Sachs Avenue
8/20/20218/20/2021 3:00 PMAnton Paulmann696 Park Meadow Street
8/21/20218/21/2021 9:00 AMJason Hardy1321 Longview Circle
8/21/20218/21/2021 11:00 AMGriffin Assandri91 Hoffman Street
8/21/20218/21/2021 2:00 PMRoseanna Dessaur4 Nelson Avenue

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.

Group The Items In A Power Apps Gallery (2)

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: 0TemplateSize: 90

To show appointment data in the gallery make 3 new labels, position them as shown below…

Group The Items In A Power Apps Gallery (3)

…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: 1X: 0Y: Parent.TemplateHeight-Self.HeightWidth: 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.

Group The Items In A Power Apps Gallery (4)

Write this code inside the OnSelect property of the button.

// Create a collection with all daily appointmentsClearCollect( 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.

LevelStartDateOnlyStartDateTimeFullNameStreetAddress
28/16/20218/16/2021 8:00 AMDannel Shaddick1 Waxwing Junction
28/16/20218/16/2021 10:00 AMAlan Byron0121 Miller Avenue
28/16/20218/16/2021 1:00 PMDeeanne Rosel6608 Farwell Pass
28/16/20218/16/2021 2:00 PMFabiano Corran49321 Sage Place
2
28/21/20218/21/2021 2:00 AM Roseanna Dessaur 4 Nelson Avenue

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 appointmentsClearCollect( 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 ), "Value", "StartDateOnly" ).StartDateOnly, "Level", 1 ) );

When we click the button the resulting collection for colUniqueDate looks like this.

LevelStartDateOnly
18/16/2021
18/17/2021
18/18/2021
18/19/2021
18/20/2021
18/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 appointmentsClearCollect( 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 ), "Value", "StartDateOnly" ).StartDateOnly, "Level", 1 ) );//// *** NEW CODE ****// Combine both collections into a single collectionClearCollect( colCombinedAppointments, colDailyAppointments, colUniqueDates);

Press the button to preview colCombinedAppointments.

LevelStartDateOnlyStartDateTimeFullNameStreetAddress
28/16/20218/16/2021 8:00 AMDannel Shaddick1 Waxwing Junction
28/16/20218/16/2021 10:00 AMAlan Byron0121 Miller Avenue
28/16/20218/16/2021 1:00 PMDeeanne Rosel6608 Farwell Pass
28/16/20218/16/2021 2:00 PMFabiano Corran49321 Sage Place
28/17/20218/17/2021 12:00 PM Hal Johnson 77692 Upham Road
18/18/2021
18/19/2021
18/20/2021
18/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 appointmentsClearCollect( 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 ), "Value", "StartDateOnly" ).StartDateOnly, "Level", 1 ) );// Combine both collections into a single collectionClearCollect( colCombinedAppointments, colDailyAppointments, colUniqueDates);//// *** NEW CODE ****// Sort the combined collectionClearCollect( colSortedAppointments, SortByColumns( colCombinedAppointments, "StartDateOnly", "StartDateTime", "Level" ));

Click the button to review colSortedAppointments. Our gallery data is now grouped by the appointment date!

StartDateOnlyStartDateTimeFullNameStreetAddress
8/16/2021
8/16/20218/16/2021 8:00 AMDannel Shaddick1 Waxwing Junction
8/16/20218/16/2021 10:00 AMAlan Byron0121 Miller Avenue
8/16/20218/16/2021 1:00 PMDeeanne Rosel6608 Farwell Pass
8/16/20218/16/2021 2:00 PMFabiano Corran49321 Sage Place
8/17/2021
8/17/20218/17/2021 12:00 PMHal Johnson77692 Upham Road
8/17/20218/17/2021 3:00 PMErvin Toor38223 Dryden Junction
8/21/20218/21/2021 2:00 PM Roseanna Dessaur 4 Nelson Avenue

Change The Gallery Datasource To The Grouped Collection

Now that the data is prepared we will load the colSortedAppointments collection into the gallery

Group The Items In A Power Apps Gallery (5)

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.

Group The Items In A Power Apps Gallery (6)

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.

Group The Items In A Power Apps Gallery (7)

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.

Group The Items In A Power Apps Gallery (8)

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.

Group The Items In A Power Apps Gallery (2024)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Arline Emard IV

Last Updated:

Views: 6103

Rating: 4.1 / 5 (72 voted)

Reviews: 87% of readers found this page helpful

Author information

Name: Arline Emard IV

Birthday: 1996-07-10

Address: 8912 Hintz Shore, West Louie, AZ 69363-0747

Phone: +13454700762376

Job: Administration Technician

Hobby: Paintball, Horseback riding, Cycling, Running, Macrame, Playing musical instruments, Soapmaking

Introduction: My name is Arline Emard IV, I am a cheerful, gorgeous, colorful, joyous, excited, super, inquisitive person who loves writing and wants to share my knowledge and understanding with you.