Using Galleries with Nested Data in Power Apps

When working with nested data in Power Apps, using Galleries effectively can help display hierarchical relationships, such as parent-child data, master-detail views, or multi-level lists. This guide will walk you through every step in detail to ensure a clear understanding of how to handle nested data efficiently.

1. Understanding Nested Data in Power Apps

What is Nested Data?

Nested data refers to a hierarchical data structure where one record (parent) contains another set of records (children). This is commonly found in:

SharePoint lists with lookup columns
SQL tables with foreign key relationships
JSON data with hierarchical structures
Dataverse tables with relationships

Example of Nested Data

Let’s say we have a list of Departments (Parent Data), and each department contains a list of Employees (Child Data).

[
    {
        "Department": "Sales",
        "Employees": [
            {"ID": 1, "Name": "Alice", "Role": "Manager"},
            {"ID": 2, "Name": "Bob", "Role": "Sales Associate"}
        ]
    },
    {
        "Department": "IT",
        "Employees": [
            {"ID": 3, "Name": "Charlie", "Role": "Developer"},
            {"ID": 4, "Name": "David", "Role": "System Admin"}
        ]
    }
]

Why Use Galleries for Nested Data?

Allows dynamic display of child data based on the selected parent.
Provides a structured view for hierarchical relationships.
Reduces data retrieval time by only loading required child data.
Enables easy navigation between parent and child data.

2. Setting Up a Gallery for Nested Data

2.1 Adding the Parent Gallery

Open Power Apps and create a Canvas App.
Insert a Gallery (Gallery1) to display the parent data.
- Go to → Insert → Gallery → Vertical Gallery
Set the Items Property of Gallery1: ClearCollect(Departments, [ { Department: "Sales", Employees: Table({ID:1, Name:"Alice", Role:"Manager"}, {ID:2, Name:"Bob", Role:"Sales Associate"}) }, { Department: "IT", Employees: Table({ID:3, Name:"Charlie", Role:"Developer"}, {ID:4, Name:"David", Role:"System Admin"}) } ]); Gallery1.Items = Departments
- This stores departments in a collection with a nested table of employees.
- The Gallery will now display departments (Sales, IT).
Customize the Parent Gallery:
- Set the Text property of the label inside the Gallery to: ThisItem.Department
- This will display the department names in the Gallery.

2.2 Adding the Child Gallery Inside the Parent Gallery

Now, we need to display employees inside each department.

Insert a new Gallery (Gallery2) inside Gallery1
- Go to → Insert → Gallery → Vertical Gallery
- Move Gallery2 inside Gallery1.
Set the Items Property of Gallery2: Gallery2.Items = ThisItem.Employees
- This tells Gallery2 to display the Employees table from the selected department.
Customize Child Gallery:
- Add Labels inside Gallery2.
- Set their Text property to display employee data:
  - Name → ThisItem.Name
  - Role → ThisItem.Role

Now, when you preview the app, you will see:

A list of departments (Sales, IT).
When you expand a department, it will show employees under that department.

3. Connecting to a Real Data Source (SharePoint, SQL, Dataverse)

Instead of using hardcoded data, you can fetch nested data from a real data source.

3.1 Using SharePoint with Lookup Columns

If you have a SharePoint List structure:

Departments List (Parent Data)
- Columns: Title (Department Name)
Employees List (Child Data)
- Columns: Employee Name, Role, Department (Lookup to Departments List)

Fetching Parent Data (Departments)

Gallery1.Items = DepartmentsList

Fetching Child Data (Employees Based on Selected Department)

Gallery2.Items = Filter(EmployeesList, Department.ID = Gallery1.Selected.ID)

This ensures that only employees belonging to the selected department are displayed.

3.2 Using SQL Server with Foreign Keys

If you have two SQL tables:

Departments Table (ID, DepartmentName)
Employees Table (ID, Name, Role, DepartmentID)

Fetching Parent Data

Gallery1.Items = '[dbo].[Departments]'

Fetching Child Data for the Selected Department

Gallery2.Items = Filter('[dbo].[Employees]', DepartmentID = Gallery1.Selected.ID)

4. Expanding and Collapsing Nested Galleries

If you want to hide/show employees dynamically:

4.1 Add a Toggle Button

Insert a button or icon inside Gallery1.
Set its OnSelect property: UpdateContext({ShowEmployees: !ShowEmployees})
Set Gallery2.Visible property to: ShowEmployees

Now, clicking the button will show/hide employees dynamically.

5. Enhancing the UI with Controls & Formatting

5.1 Alternating Row Colors

For better readability, set the Template Fill of Gallery1:

If(Mod(ThisItem.ID, 2) = 0, RGBA(240, 240, 240, 1), RGBA(255, 255, 255, 1))

5.2 Sorting Parent and Child Data

To sort departments alphabetically:

Sort(DepartmentsList, Title, Ascending)

To sort employees by name:

Sort(Gallery2.Items, Name, Ascending)

6. Saving Nested Data Back to the Database

6.1 Adding a New Employee to a Department

Patch(EmployeesList, Defaults(EmployeesList), 
    {Name: "New Employee", Role: "Intern", Department: Gallery1.Selected})

6.2 Removing an Employee

Remove(EmployeesList, ThisItem)

7. Performance Optimization

7.1 Load Data Efficiently

Use ClearCollect() to cache data locally instead of fetching every time:

ClearCollect(Departments, '[dbo].[Departments]')

7.2 Use Delegation for Large Data

If your data source contains more than 500 records, use delegation-friendly functions like Filter(), LookUp(), and Sort().

Conclusion

Using Galleries with Nested Data allows you to create a structured, user-friendly, and dynamic UI in Power Apps. By efficiently handling parent-child relationships, optimizing performance, and using real data sources, you can build powerful, data-driven applications.

Would you like a specific implementation based on your data source (SharePoint, SQL, Dataverse)?