Clicking on a Subgrid to Open a Modal Form in Dynamics 365

20 Comments

This post came at a request of a reader of this blog. She wanted to be able to click on a subgrid record and have it open in a modal form. Easy, right?

Let’s take a look at how to do this.

If you prefer to see the video, check it out on my YouTube channel:

Note, there is a limitation in that the grid needs to be an editable grid in order to access the OnRecordSelect event.

Let’s look at the Contacts subgrid on my Account form:

Let’s edit the form, and select the Contacts subgrid, then Change Properties:

We have this set to a Read-Only grid control. Select Add Control:

Let’s change this to an Editable Grid. Click Add:

We will set it to use Web. We now have an Events tab. Select it:

We see these events:

  • OnChange
  • OnRecordSelected
  • OnSave

Let’s add an OnRecordSelected event. First, let’s create a new library:

Click New:

Give it a name:

Click OK, save and publish:

Click Add:

Now the code. We will:

function RunOnSelected(executionContext) {
var selected = executionContext.getFormContext().data.entity;
var Id = selected.getId();

var pageInput = {
pageType: "entityrecord",
entityName: "contact",
entityId: Id
};
var navigationOptions = {
target: 2,
height: {value: 50, unit:"%"},
width: {value: 50, unit:"%"},
position: 1
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success() {},
function error() {}
);
}

Save and publish:

Then add the function to the OnRecordSelect and Add:

Select the library and function and check to pass the executionContext:

Click OK:

We’re now ready to run this. On the Account form, click on a record in the subgrid:

The record opens in a modal!

A final note, if you click the arrow it will still open the record in its own form, which is probably a good thing:

 

THANKS FOR READING. BEFORE YOU LEAVE, I NEED YOUR HELP.
 

I AM SPENDING MORE TIME THESE DAYS CREATING YOUTUBE VIDEOS TO HELP PEOPLE LEARN THE MICROSOFT POWER PLATFORM.

IF YOU WOULD LIKE TO SEE HOW I BUILD APPS, OR FIND SOMETHING USEFUL READING MY BLOG, I WOULD REALLY APPRECIATE YOU SUBSCRIBING TO MY YOUTUBE CHANNEL.

THANK YOU, AND LET'S KEEP LEARNING TOGETHER.

CARL

https://www.youtube.com/carldesouza

 

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.comLinkedIn Twitter | YouTube

 

20 Responses to Clicking on a Subgrid to Open a Modal Form in Dynamics 365

  1. Hi Carl,

    Thanks for the post. Really helpful. One of the issue i saw was that it opens 2 windows for edit.

    Also how do we have similar feature for the EDIT button.

    Thanks
    Nilesh

    • i found a way to do this, after some experimentation. I modified the approach that Andrew Butenko posted here: https://butenko.pro/2020/04/14/open-proper-form-based-on-records-data-uci-way/

      Here is a copy of the JS that is associated with the ribbon command. In this scenario, I am opening a a record type called “initiative department” from a regular subgrid. Instead of using Xrm.Navigation.openForm (as in Andrew’s post), I am using Xrm.navigateTo and it works like a charm.

      The only thing I have noticed is that the user has to manually refresh the form after the modal form closes for the subgrid to show the updates.

      var RN = RN || {};
      RN.InitiativeDepartmentRibbon = (function () {

      function openRecord(recordId) {
      //Setting formId to “Default”
      var formId = “343E346B-34A7-EA11-A811-001DD83096F2”; //main form

      //Getting the record
      Xrm.WebApi.retrieveRecord(“brm_initiativedepartment”, recordId).then(
      function (result) {

      var Id = result.RecordId

      var pageInput = {
      pageType: “entityrecord”,
      entityName: “brm_initiativedepartment”,
      entityId: recordId
      };
      var navigationOptions = {
      target: 2,
      height: { value: 100, unit: “%” },
      width: { value: 50, unit: “%” },
      position: 1
      };

      Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
      function success() {
      // Run code on success
      },
      function error() {
      // Handle errors
      }
      );

      },

      function (error) {
      //If anything goes wrong log the error
      console.log(error);

      //and open “by default” form
      Xrm.Navigation.openForm({
      entityName: “brm_initiativedepartment”,
      entityId: recordId,
      formId: formId
      });
      });
      }

      return {
      OpenRecord: openRecord,

      };
      })();

      • Hi,

        I have a problem Opening Sub Grid Record As Popup Modal. when i select only on record field part, it will show one modal popup. but when I select the checkbox on the far left, it brings up a double modal popup. i hope when select checkbox it will not bring up double modal popup

        what should i do to solve this problem?

  2. Hi Carl,

    Firstly thanks for such a nice post.
    We have tried to use similar approach. But facing one issue. i.e. When a subgrid record is opened and updated, then the backgroud subgrid does not refresh. Only after doing a manual refresh the updated value reflect in Subgrid.
    Is there any way we can automate this Subgrid refresh. Like is there any event we can register on Save of record opened in Modal dialog to refresh Subgrid of Main form?

  3. Is there any way we can automate this Subgrid refresh? Like is there any event we can register on Save of record opened in Modal dialog to refresh Subgrid of Main form?

    • You can use Xrm.Page.getControl(“GRID NAME”).refresh() in success function.

      Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
      function success() {
      Xrm.Page.getControl(“GRID NAME”).refresh();
      },
      function error() {}
      );

  4. Hi Carl,
    I used to go through many of your blogs, they are really amazing and useful. Can you please guide me a bit on how we can disable the double click functionality for a particular record inside a view? At present, on double clicking a record, an editable form is opening. Now the client want to disable that feature, so that nothing happens. So can you guide me a bit on this scenario?
    Thanks

  5. Hi Carl.

    Cool solution. I have another problem, though.

    Do you know if it’s possible to disable the subgrid doubleclick function so that double clicking a row doesn’t open the selected entity?

    Apparently, having a read-only subgrid isn’t enough… 🙁

  6. Is there a way to have this or different JavaScript code that allows this run on a Power Apps grid control, instead of an Editable grid control? I couldn’t figure out if it was possible.

Leave a Reply

Your email address will not be published. Required fields are marked *