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

7 Comments
BEFORE WE START, 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

 

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:

 

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

 

7 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,

      };
      })();

Leave a Reply

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