Read-only nested editable grid
One of my colleagues recently approached me regarding a requirement she had. In one of our customer projects, we needed to show a subgrid with information from a table two relations away. In this blog post, we will learn how to create a read-only nested editable grid in dataverse.
Problem
As mentioned one customer had the requirement to show information from a table two relationships away.
This can be achieved by using the editable grid. Unfortunately, as the name says, the subgrid get’s editable. In this case, the requirement was to only show information and not to make it editable directly on the grandparent.
Assumption
For this blog post, I will use the following example. Let’s assume we have an Event registration built in Dataverse. A contact can have several “Demo Attendee” rows which are related to another custom table called “Demo Event”. Every contact is related to Account. We would like to show all “Demo Attendee” rows related to the Account in question. The table structure is as the following diagram shows.
Solution
As I wrote earlier the OOB editable grid isn’t a solution to our problem as is. This is why I initially ruled it out and immediately thought we have to build a PCF for it. After a quick search, I was not able to find any PCF doing what we needed, which I thought is weird. We can’t be the first ones with such a problem. So I reached out to the Power Platform Level Up discord group.
If you are not a member of this discord yet you should make sure to join. It is a great place for Power Platform developers to discuss questions and problems.
One of the users there, hajhassan94 (unfortunately I don’t know who he/she is in real life), suggested I just could add a JavaScript to the “onRecordSelected” event. Since this is much easier than recreating all the functionality with a PCF this is what we will do in this blog post.
The new Power Apps Grid control could be an alternative as well when it gets GA and the new version is released.
Implementation
Lets take a look at how the implementation would look like.
Code
First of all we need to have a small JavaScript function which does inactivate all fields.
I found some other blog posts, for example from Nishant (Blog post, Twitter, LinkedIn) and Pawel Gradecki (Blog post, Twitter, LinkedIn), doing similar stuff, but they only inactivated one certain field and have not worked on the second level.
The following function will inactivate all fields and can be used both on the first and second level. The first one is the TypeScript code and the second one the plain JavaScript code.
async function onGridRowSelected(eventContext: Xrm.Events.EventContext): Promise<void> { (eventContext.getEventSource() as Xrm.Entity).attributes.forEach(function (attr) { attr.controls.forEach(function (myField) { (myField as Xrm.Controls.StandardControl).setDisabled(true); }); }); }
function onGridRowSelected(eventContext) { eventContext.getEventSource().attributes.forEach(function (attr) { attr.controls.forEach(function (myField) { myField.setDisabled(true); }); }); }
According to the MS docs the “getEventSource” function does return an entity when called from the onRecordSelected event. Therefore we can cast it to Event in TypeScript and assume there are attributes in JavaScript. The script will then loop through all attributes and the related controls and disable those.
This will, as mentioned, wor for both levels.
The script has to be uploaded as a Webresource. In my case it is called bebe_EditableGridTest.js.
Configuration
I assume the nested subgrid is already configured as it should be. To add our script to the event and with this make the nested grid read-only we have to configure it.
Classic UI
This has to be done in the classic UI since event configuration on subgrids isn’t available in the maker portal, yet. To switch you open the form in question (in our example the Account form) and select “Switch to classic”.
Library
In the new window we open the subgrid properties by dubbelklicking on it. This should open a popup where we have to navigate to the “Events” tab. On the Events tab we have to add a library first by selecting “+ Add”.
On the next screen you can search for your webresource, select it and add it as a library.
The Events tab should look something like the following after that.
Event first level
To configure the script for the first level of the subgrid we add scroll down on the Events tab and select the first level table in the “Entity”, in our case Contact, and “onRecordSelected” as the event. Then we select “+ Add” to add a new function to the event.
On the next screen we select the library we just added, write the name of our function (in our example “onGridRowSelected“) and check the box to pass the execution context to the function.
Event second level
For the second level we basically do the same as we did for the first level with the difference that we select the table from the second level, in our example “Demo Attendee“.
The page should now look like the following screenshot.
With a click on “OK” the configuration should be done. All that is left is to save and publish the form.
The overall result looks like this:
Conclusion
All it takes to make a nested editable grid read-only is a small script and some configuration. This is much easier and faster than creating a PCF for it.
I hope this post helps you in implementing a read-only nested editable grid in dataverse. If you have any further questions or feedback don’t hesitate to contact me.
You can also subscribe and get new blog posts emailed to you directly.
I love it. Great article Thanks for the sharing. Waiting your course link impatiently
@Benedikt that’s great news. It’s really interesting. I have a question, is it possible to configure an entity grid view? IE: The account has a unique demo, and our client wants to see that in the Accounts entity grid, is it possible?
Hej Javier,
I, unfortunately, don’t get your question. Do you want to show information from a child on the parent or from a grant child on the child?
Hello Benedikt,
Thanks for your article !
You say “I assume the nested subgrid is already configured as it should be”, can you point me toward any documentation to configure nested grid please ?
Many thanks !
Hej,
there are a few good articles around that out there.
Here is a link to MS Learn on how to configure the editable grid in general
https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/make-grids-lists-editable-custom-control
Here are two links to articles explaining how to configure a nested editable grid
https://d365demystified.com/2019/07/25/nested-editable-grids-in-d365-ce-v9-uci/
https://d365goddess.com/nested-grids-in-dynamics-365/
So this worked great for me except we dont’ use the same TS library for Xrm so objects like Xrm or Xrm.Entity did not exist. Instead, I had to cast to any to get this to work. Here is what I have.
export function LockSelectedRelatedExpertRateOnSubmission(executionContext: any) {
let xrmEntity = executionContext.getEventSource() as any;
let arrFields = [“field name”];
xrmEntity.attributes.forEach(function (a, i) {
//console.log(a.getName());
if (arrFields.indexOf(a.getName()) > -1) {
let attributeToDisable = a.controls.get(0);
attributeToDisable.setDisabled(true);
}
});
Great article, this is unfortunately only working for “old fashion” editable (nested) subgrid. It does not work for new Power Apps Grid Control. I’ve tried it and for some reason it only works when you open developer tools (f12) and then you select record/row in grid. Really strange behavior, I have not contacted MS for this but it would be nice if they could fix this.
That is true. At the time of writing this post the functionality to edit in the newer Power Apps Grid Control wasn’t GA or not even released at all.
I am trying to implement this on Account entity and show Contacts and Opportunities using a power apps grid control. To make the fields locked on editable grid, I am NOT able to register on the second level event for opportunity in this case. When I click on add under event handlers, I don’t see “opportunity” listed in the Entity dropdown while registering the function. Could you please advise?
So you are using the new power apps grid control?
This post explains the method for the “old” editable grid.
Diana has one for the “new” power apps grid control
https://dianabirkelbach.wordpress.com/2023/07/15/disable-cells-using-power-apps-grid-customizer-control/