Adding a Subgrid in a PowerApps Canvas App - Part II (Advanced)

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.

In this blog, I am going to show:

• 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.

For this example, we will use the same table structure from a previous blog:

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

Example Tables

Parent Table: Orders (fields: OrderID, CustomerName, OrderDate)

Child Table: OrderDetails (fields: OrderDetailID, OrderID, ProductName, Quantity)

Steps to Implement

1. Set Up Your Data Sources

• Ensure the Orders and OrderDetails tables are available as data sources in your app.
• Open your Canvas App in PowerApps Studio.
• Click Data in the left-hand menu and connect to your data sources.

2. Add a Gallery for the Parent Table (Orders)

• Insert a Gallery control to display the Orders table.
• Set the Items property of the Gallery to:

Orders

• Customize the Gallery to display fields like CustomerName and OrderDate.

3. Add a Gallery for the Child Table (OrderDetails)

• Insert another Gallery control for the child table.
• Set the Items property to:

Filter(OrderDetails, OrderID = GalleryOrders.Selected.OrderID)

• Customize this Gallery to display fields like ProductName and Quantity.

4. Add Search Functionality

• Add a Text Input control (e.g., txtSearch) for the search box.
• Modify the Items property of the parent Gallery:

Search(Orders, txtSearch.Text, CustomerName, OrderID)

• Modify the Items property of the child Gallery:

Filter(OrderDetails, 
    OrderID = GalleryOrders.Selected.OrderID && 
    (IsBlank(txtSearch.Text) || 
     Search(OrderDetails, txtSearch.Text, ProductName, OrderID) <> Blank()))

5. Enable Editing for Child Records

• Replace static labels in the child Gallery with Text Input controls for editable fields.
• Bind the Default property of each Text Input control:
• ProductName:

  ThisItem.ProductName

• Quantity:

  ThisItem.Quantity

• Add a Save button to update changes:

Patch(OrderDetails, ThisItem, {ProductName: TextInputProductName.Text, Quantity: Value(TextInputQuantity.Text)})

6. Hide the Child Gallery if There Are No Related Records

• Set the Visible property of the child Gallery to:

CountRows(Filter(OrderDetails, OrderID = GalleryOrders.Selected.OrderID)) > 0

Note: Test the app to ensure that filtering, search, and editing functionality work as expected. Use formatting and layout options for better visual distinction between parent and child records.