Adding a Subgrid in a PowerApps Canvas App - Part I

Adding a Subgrid in a Canvas App - PowerApps

Introduction

Adding a subgrid in a Canvas App in PowerApps involves displaying related records (child data) for a selected parent record. While Canvas Apps do not have a built-in subgrid control like Model-Driven Apps, you can simulate a subgrid using a Gallery control and filtering based on relationships.

Scenario Example

For this example, we will use:

• Parent Table: Orders (fields: OrderID, CustomerName, OrderDate)
• Child Table: OrderDetails (fields: OrderDetailID, OrderID, ProductName, Quantity)

Steps to Implement

1. Set Up Your Data Source

Ensure you have two related tables:

• OrderID in OrderDetails references the OrderID in Orders.

2. Add a Parent Gallery

1. Insert a Vertical Gallery for the parent records.
2. Set the Items property of the Gallery to:

   Orders

3. Customize the layout to display fields like OrderID and CustomerName.

3. Add a Subgrid (Child Gallery)

1. Insert another Gallery to act as the subgrid.
2. Place it inside the template area of the parent Gallery.
3. Set the Items property of the child Gallery:

   Filter(OrderDetails, OrderID = ThisItem.OrderID)

4. Add labels or controls to display fields like ProductName and Quantity.

4. Enhance the Subgrid

Adjust the layout of the child Gallery and enable scrolling:

• Use a border or background color to visually distinguish the child Gallery.

5. Add Interactivity

To dynamically select parent records, set the following variable on parent record selection:

Set(selectedOrderID, ThisItem.OrderID)

Then, use the variable to filter the child Gallery:

Filter(OrderDetails, OrderID = selectedOrderID)

6. Test the Subgrid

Preview your app and ensure the child Gallery updates correctly for selected parent records.

Example Layout Code

Parent Gallery Items:

Orders

Child Gallery (Subgrid) Items:

Filter(OrderDetails, OrderID = ThisItem.OrderID)

Optional Variable for Selected Parent Record:

Set(selectedOrderID, ThisItem.OrderID)

Optional Enhancements

• Add search functionality for parent or child records.
• Enable editing of child records directly in the subgrid.
• Hide the child Gallery if there are no related records.

© 2024 PowerApps Blog. All Rights Reserved.