Show related records in a subgrid – Power Apps Canvas Apps

Hello everyone and welcome to my blog. In today’s blog I will discuss on how to show related records in a subgrid in Power Apps canvas apps.

For this demo, I will take the example of Accounts and Contacts table of DataVerse. Accounts and Contacts are in 1:N relationship where an account can have multiple contacts.

The requirement is to show the details of an account and it’s related contracts in a sub-grid, all on a single screen. The example uses DataVerse tables but this shall work for any datasources with related tables. So let’s get started.

We will take off bit differently here. Instead of a blank screen, we will choose a Scrollable screen.

The advantage of scrollable screens is you can have sections similar to Model Driven Apps. And these sections can have controls within them.

Below is the default look of a scrollable screen. We are obviously going to customize it in the next few steps. But to start with, note the difference with a blank screen. You can the header, a section and the ability to create a new section using the ‘Add section‘ button on the bottom left.

I will design my screen in the following manner.

1. Welcome banner at the top
2. In the middle, the account record in a form
3. And a section at the end where the related contacts sub-grid shall be displayed

I realign the controls accordingly and this is how it looks now. Observer I have pushed the section to the bottom and left space in the middle to accommodate the form.

As planner, below the banner, I go ahead and insert an Edit form for the account table.

But how to show the related contacts for this account? For this I go ahead and use a rather less used control called ‘Data Table’. It’s less used rather because the control is still in preview stage but this is the closest control in terms of UI to show a sub-grid of related records.

So now let’s wire up the whole scenario. My landing page shall be a screen to show the list of accounts in a Gallery.

When a record is selected from the Gallery, it shall take us to the screen we just designed. The screen containing the form to show the selected account and a Data Table control to show the list of contacts related to the account.

We set the Item property of the form to the selected item of the Gallery.

And then we go ahead and set the Items property of the Data Table to the following formula.

As you can see, we have set the Items property to Contacts collection of the selected account. You can style your screen a little better to make it look professional. I added a few labels and back button and this is how my screen looks for now.

Not great but not ugly either. As you can see the related contacts are showing up. I have choose the First Name, Last Name and Email column but you can choose fields as per your requirement using the Edit fields option of the Data table.

Remember we took a scrollable screen. If you have relatively large number of related records, you will have a scrollbar to scroll through your contents. Pretty much like your Model driven apps.

Hope you liked this post. If this post has helped you, you can buy me a coffee. Links on right hand panel.

You will also like the below posts.

Debajit Dutta
Business Solutions MVP