Combine Form Component and Power Apps Grid

The recently introduced Form Component makes it possible to edit related records without leaving the current form as well as opening up some exciting opportunities to combine it with Power Apps Grid. One of the most interesting use cases I’ve come across is combining it with the Power Apps Grid, which provides a more seamless and efficient way to manage related records in Dataverse, Power Platform, or Dynamics 365.

This approach addresses many of the common frustrations users face, such as navigating back and forth between parent and child forms, relying heavily on editable grids, or spending time building custom components to handle related data. Instead, you can now manage everything in one place, keeping the focus on productivity and ease of use.

What’s great about this setup is that it preserves your hierarchical data structure, allowing you to maintain the relationships between records while enabling direct updates to child records from the parent form. It’s a simple but powerful way to streamline processes without needing workarounds or extra tools.

Business Case

When users want to make changes on related records, there are a few options currently;

• Navigate to the related record form,
• Implement a Form Component, which is recently introduced,
• Use editable grid or
• the Developers should introduce some PCF or JavaScript components

Meanwhile it’s not pleasant to navigate, back and forth between parent and child records. However, business case might enforce to use this parent-child hierarchical structure.

Usually, users are considered enough to use the system in this way.

Now, there’s another way of maintaining this hierarchy whilst providing users the convenience of remaining on the same form.

Functional Perspective

This is a combination of Power Apps Grid, Form Control and a few lines of JavaScript codes to bind them both.

IMPORTANT:  
I will make some assumptions about the readers otherwise this article would be veeeery long.  
Reader knows how to:  
- Customize a Table form,
- Add and configure `Power Apps Grid` as subgrid and `Form Control` as lookup component,
- Crate a JavaScript file, Import it as library, configure the Form to refer to the library  

Steps to provide this functionality require below implementation

• A Power Apps Grid control on the form as Subgrid
• A Form Component added to a Lookup control to represent the form for the selected record on Subgrid
• A few lines of JavaScript code attached to OnRecordSelect event of Power Apps Grid

I’ll walk through a business case to update records of a particular Account.

Prepare Account Form

A new tab has been added in the account form to allow changes to be done on Contacts

Power Apps Grid as Subgrid

A Power Apps Grid has been added with the following configuration. Below steps are pretty standard but this setup, unfortunately, is not working if below limitations are not imposed on the Subgrid

• 1️⃣ Place the Subgrid on the form
• 2️⃣ Select the table and its view as usual

Power Apps Subgrid Configuration

• 3️⃣ Enable Editing = Yes must be set, it’s really important otherwise the grid is not raising OnRecordSelect JavaScript event
• 4️⃣ Navigation Types Allowed = None should be set as we don’t want users to navigate to another form accidentally
• 4️⃣ Reflow Behavior = Grid Only should be set otherwise the grid is not raising OnRecordSelect event
• 5️⃣ Enable Multi Select = No and Allow Range Selection = No should be set, you can guess why and also otherwise the grid is not raising OnRecordSelect event if these options are not set

Form Component as a Lookup Control

Now we’re going to create a Lookup field so that we can enable Form Component.

• 1️⃣ I created a field Selected Contact as a Lookup and placed it on the Form, but you can name your one as you wish,
• 2️⃣ I haven’t enabled Auditing, so Enable Auditing = False

Finally, I’ve applied Form Component to this Lookup, like in below screenshot.

The Magic?! 🪄

Well, it’s obvious that we need to bind those 2 elements to each other but it’s not a magic, instead a few lines of code to be implemented and that’s it.

I’ve prepared this JavaScript for you so you can copy and implement it then everything should be straightforward.

//Save this code as a JavaScript file and import the file to your solution as JavaScript linrary
var PowerAppsGridToFormComponent = window.PowerAppsGridToFormComponent || {};
(function(){
    this.Configure = function(executionContext, gridId, lookupId){
        const formContext = executionContext.getFormContext();
        const gridControl = formContext.getControl(gridId);
        const lookup = formContext.getAttribute(lookupId);
        lookup.setSubmitMode("never");

        if(gridControl && lookup){
            let grid = gridControl.getGrid();
            grid.addOnRecordSelect(function(gridExecutionContext){
                const gridFormContext = gridExecutionContext.getFormContext();
                const selectedItem = gridFormContext.entityReference;
                if(selectedItem){
                    lookup.setValue([selectedItem]) 
                }
            })
        }
    }
}).call(PowerAppsGridToFormComponent);

Below steps should be implemented to bind Power Apps Grid to Form Component control

• 1️⃣ Find the name of your subgrid and Lookup controls. In my case they’re subgrid_contacts and jbl_selectedcontactid
• 2️⃣ Register your library on the form and configure below event with the parameters
  👉 Function Name: PowerAppsGridToFormComponent.Configure
  👉 Check Pass execution parameter as first parameter
  👉 Add the grid name and lookup name in order; in my case "subgrid_contacts" and "jbl_selectedcontactid" separated with comma ( , )
• Save and Publish all!

Technical Considerations

Well, I’d like to add maybe some technical considerations in here but I couldn’t see any significant issues so far.
However, please don’t hesitate to reach me out when you have questions.

Thanks… 🙂