How to Group Items in Power Apps Gallery?

Do you want to know how to implement group by in Power Apps gallery control? I will show you how to group items in Power Apps gallery control in this tutorial. We will see different scenarios for the Power Apps gallery group by.

• Power Apps Gallery Group By Column
• Power Apps Gallery Group By Multiple columns
• Power Apps Gallery Group By Date
• Power Apps Gallery Group By Filter
• Power Apps Gallery Group By And Sum
• Power Apps Gallery Ungroup()

Power Apps Gallery GroupBy()

We can use the Power Apps GroupBy() function to return a table with records grouped based on the values in one or more columns. Also, this function enables the grouping of records and modification of the resulting table.

Power Apps GroupBy() Syntax:

GroupBy(Table, ColumnName1[ColumnName2, ... ], GroupColumnName)

Where,

• Table = It is required, and it will be grouped
• ColumnName (s) = We can create a group based on the column names
• GroupColumnName = It stores the group records like a nested table

We can use the Power Apps groupby() function to implement group items in a Power Apps gallery control.

Power Apps Gallery Group By Column

Here, we will discuss how to use the Power Apps gallery group by column with a simple scenario.

Scenario:

I have a SharePoint Online list named “Employee Task List” containing different columns, including the “Person field,” as shown below.

Now, I want to group this person’s field, and all the names will appear in the Power Apps gallery control, as in the screenshot below.

To achieve it, follow the below steps. Such as:

1. Sign in to the Power Apps with your respective Microsoft credentials -> Create a Blank canvas app -> Connect it to the SharePoint Online list like below.

2. On the Power Apps Screen -> Insert a Gallery control and set its Items Property to the code below.

Items = GroupBy(
    AddColumns(
        'Employee Task List',
        "UserDisplayName",
        'Employee Name'.DisplayName
    ),
    "UserDisplayName",
    "GroupByUsersDisplayName"
)

Where,

• GroupBy() = This Power Apps Group By() function generates a table that groups records based on the values present in one or more columns
• AddColumns() = This function is used to add a column to the table
• ‘Employee Task List’ = SharePoint Online list
• “UserDisplayName” = Power Apps column name
• ‘Employee Name’.DisplayName = This is an expression that provides value for a new column

3. Then, select a gallery control and change its Layout [Properties -> Layout] to “Title” only like below.

4. Once your app is ready, Save, Publish, and Preview the app. The Power Apps gallery will display the group records from the SharePoint list based on the person field column as shown below.

This is how to use a Power Apps gallery group by column.

Power Apps Gallery Group By() Multiple columns

Next, we will see how to group multiple columns in a Power Apps gallery using a collection.

For example, I have created a Power Apps collection, i.e., [colEmployeeTasks] from the above SharePoint list [Employee Task list].

However, I want to group the items in the Power Apps gallery using multiple columns from a collection, as shown below.

When a user clicks or taps a Button control [Group Items], the gallery will display all grouped records based on the multiple collection fields, as in the screenshot below.

To work around this example, follow the below steps.

1. Select Power Apps’s App object [From Left Navigation] and set its OnStart property as:

OnStart = ClearCollect(
    colEmployeeTasks,
    'Employee Task List'
)

Where,

• colEmployeeTasks = Power Apps Collection Name
• ‘Employee Task List’ = SharePoint Online List

2. Then, click on the Apps’s Run OnStart button to get the collection under the Collection dropdown as shown below.

3. Now, on the Power Apps screen -> Insert a Button control and set its OnSelect property to the code below.

OnSelect = ClearCollect(
    colTasks,
    GroupBy(
        colEmployeeTasks,
        "Title",
        "StartDate",
        "DueDate",
        "TaskGroup"
    )
)

Where,

• colTasks = 2nd Collection name
• colEmployeeTasks = Power Apps source collection name
• “Title”,”StartDate”,”DueDate” = These are the column which I want to be grouped
• “TaskGroup” = Name of the new group

4. Then, insert a Gallery control and set its Items property as:

Items = colTasks

5. To display the gallery fields, go to the Field property -> Click on the Edit option -> Select the Fields under the Data section like below.

6. Save, Publish, and Preview the app. When a user clicks on the button control, the gallery will display grouped records from the Power Apps collection as in the screenshot below.

This is how to use the Power Apps gallery group by multiple columns.

Power Apps Gallery Group By Date

In this section, I will show you how to use the Power Apps gallery by date with a simple example.

Example:

Here, I will take the same SharePoint list [Employee Task List], and I would like to group the Power Apps gallery by using SharePoint date fields [Start Date & Due Date]. For that, I have used the below code in the gallery items property and

Items = GroupBy(
    AddColumns(
        'Employee Task List',
        "TaskDuration",
        Title & " - " & 'Start Date' & "  To " & 'Due Date'
    ),
    "TaskDuration",
    "GroupByTaskDuration"
)

Where,

• ‘Employee Task List’ = SharePoint Online List
• “TaskDuration” = Name of the group column
• ‘Start Date’, ‘Due Date’ = SharePoint list date fields

Once it is done, Save, Publish, and Preview the app. The Power Apps gallery will display the group records from the SharePoint list based on the date fields as in the screenshot below.

Power Apps Gallery Group By Filter

Let’s see how to use the Power Apps gallery group by filter. For this example, I have taken the above SharePoint list, and in Power Apps, there is a gallery control. This gallery control will filter and group SharePoint list records based on the Title field [Task].

To do so, Select a Power Apps gallery and set its Items property to the code below.

Items = GroupBy(
    Filter(
        'Employee Task List',
        "SharePoint" exactin Title
    ),
    "Title",
    "GroupBySharePoint"
)

Where,

• Filter() = This function finds records in a table that satisfy a formula
• ‘Employee Task List’ = SharePoint Online list
• “SharePoint” exactin Title = We can filter the Title that contains the “SharePoint” keyword
• “GroupBySharePoint” = Group name

Save, Publish, and Preview the app. The gallery will filter and display group records based on the “SharePoint” keyword in the Title column like below.

This is how to use Power Apps gallery group by filter.

Power Apps Gallery Group By And Sum

Similarly, we will see how to use Power Apps gallery by and sum with a simple scenario.

Scenario:

I have a SharePoint Online list named “Travel Requests,” and this list contains different columns, including two number columns [Estimated Airfare & Estimated Hotel Cost] as shown below.

In Power Apps, there is a Gallery control. This gallery will display grouped record [TotalCost] using a sum of two SharePoint list number fields. To do so, insert a Gallery control and set its Items property as:

Items = GroupBy(
    AddColumns(
        'Travel Requests',
        "TotalCost",
        Title & " - " & Sum(
            'Estimated Airfare',
            'Estimated Hotel Cost'
        )
    ),
    "TotalCost",
    "GroupByTotal"
)

Where,

• ‘Travel Requests’ = SharePoint Online list
• “TotalCost” = Name of the group column
• Sum() = This function is used to group the data and determine the sum of grouped items
• ‘Estimated Airfare’, ‘Estimated Hotel Cost’ = SharePoint number fields
• “GroupByTotal” = Group name

Once your app is ready is ready, Save, Publish, and Preview the app. The Power Apps gallery display group records based on the sum of the two SharePoint list number fields like below.

Power Apps Gallery Ungroup()

In the last, I will show you how to ungroup the Power Apps group collection records on a gallery control.

Example:

I have created a Power Apps collection [colTaskUngroup] that ungroups the above-grouped record, i.e., [colTasks].

When a user clicks on the button control, the gallery will display the ungroup records as shown below.

To do so, follow the below steps. Such as:

1. On the Power Apps Screen -> Insert a Button control [Ungroup Records] and set its OnSelect property as:

OnSelect = ClearCollect(
    colTaskUngroup,
    Ungroup(
        colTasks,
        "TaskGroup"
    )
)

Where,

• colTaskUngroup = Name of the collection
• Ungroup() = This function returns a table to break the group records in a Power Apps collection
• colTasks = It is the name of the collection [Source] that we want to ungroup
• “TaskGroup” = It is the name of the group

2. Insert a Gallery control and set its Items property as:

Items = colTaskUngroup

3. To display the gallery fields, go to the Field property -> Click on the Edit option -> Select the Fields under the Data section like below.

4. Save, Publish, and Preview the app. The gallery will display the ungrouped records whenever the user clicks on the button control, as shown below.

This is how to ungroup the collection records on a gallery control.

Conclusion

In this Power Apps tutorial, I explained how to group items in Power Apps gallery control using the Power Apps group() function.

Also, we discussed how to use Power Apps gallery group by column and Power Apps gallery group by() multiple columns. Then, we saw how to use the Power Apps gallery group by date and the Power Apps gallery group by filter.

In the last, we also covered how to use the Power Apps gallery group by and sum and Power Apps gallery ungroup().

You may like:

• How to Display SharePoint List Items in PowerApps Gallery?
• How to Sort Power Apps Gallery by Choice Column?
• Count Rows in Power Apps Gallery Control
• How to Sort Power Apps Gallery By Month
• Power Apps Sort Gallery By Calculated Field