This video demo and blog provide a step-by-step walkthrough of adding related subgrids to a Power Apps portal for a Trip Planner Application.

You may consider adding a related subgrid to your portal if you have tables associated with each other. For example, you have a Trip table that is your main table and a Traveler table. You want your traveler table to be directly related to your trip table so that any data you add to your traveler table for a specific trip will be added to that trip and not all.

The steps to achieving this include creating the relationship between tables, modifying the forms and views, adding the related subgrid to the main Trip form, and configuring the Portal Management App and portal designer.

I have created a Trip Planner application where Trip is the main table and Traveler is the related table in this walkthrough. By the end, we will have one Trip to many travelers and ensure the travelers for one Trip don’t get added to a different trip.

Traveler Subgrid Example

This example image is what the Traveler subgrid will look like inside the beach trip.

Steps:

  1. In your solution, create a Trip table with custom columns
  2. Create a Lodging Table
  3. Create a 1:M relationship between Trip and Travelers
    One to Many from Related table
  4. Customize the view for both Trip and Traveler
  5. Add a new Main form inside the Trip table
    1. Add custom columns by dragging or clicking it from the left panel
    2. Add a related subgrid in the same tab
      Component LayoutNew Trip Layout
    3. Save and Publish the form, Click Back
  6. Navigate to the Portal Management App
    1. Create 2 new Entity Forms
    2. One for “New Traveler”
    3. One for “Update Traveler”
      New Traveler UpdateUpdate Traveler Image Edit and Record Source Type
  7. Create a new entity form called “Update Main Form”
    Select New Entity Step

    1. Navigate to Entity Form Metadata tab, click New Entity Form Metadata
  8. Select Subgrid from Type
  9. Select the correct subgrid from the drop-down
  10. Select the New Traveler form for Create
  11. Select Update Traveler form for all other actions
    Update Traveler and Create Entity
  12. Create an Entity form called “New Main Form” and follow the same steps for the subgrid configuration but ensure the Mode is Insert in the General tab
  13. Your Entity Forms should look like this
    Active Entity Forms
  14. Navigate to Entity Lists inside the Portal Management App and create a new list called “Main List”
    Main Entity List
  15. Under the Options tab, Add Main Form to Grid ConfigurationAdd Main List Entity to Configuration
  16. Navigate to the Portal Designer editor
    Navigate Trip Planner portal
  17. Add a List from Components
    Add list from components
  18. Select Use Existing, since we already created an Entity List in the Portal Management app
    1. Select Main List
      Update existing list
  19. Click Sync Configuration, then Browse Website
  20. You’ll see your Trip view and you’ll be able to Create New or Update an existing Trip
  21. Notice your related Traveler subgrid is added to both forms for editing
    Related Traveler Subgrid for editing 1
    Viewing Trip Details

As you can see, adding a related subgrid to your Power Apps Portal can be done out of the box with no code needed! The purpose of this is to be able to link multiple tables to each other and have them displayed in Power Apps Portals. Feel free to follow along using my instructional video for more detailed instructions.