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?

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

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:

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

Create A Collection Of Daily Appointments (Group Items)

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.

Make A List Of Unique Appointment Dates (Group Headers)

// 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 ) );

Combine Group Headers And Group Items Into A Single Collection

// 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);

Sort The Combined Collection Into Groups

// 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" ));

Change The Gallery Datasource To The Grouped Collection

Use this code in the Items property of the gallery

colSortedAppointments

Update Gallery Formatting To Display Groups

If( ThisItem.Level=1, Text(ThisItem.StartDateOnly, "mmmm d"), ThisItem.StreetAddress)

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!

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.