Select record from grid and open an editable form in side by side pane in Model Driven Apps/ Dynamics 365

As of the time of writing this blog, this is a pre-release documentation. But I am pretty sure, such an awesome feature is certainly going to make it to release.

So what are we discussing here? Did you ever had the following requirements?

• You want to show the view and record form for an entity side by side
• Show two views of an entity in Dynamics 365/ Model Driven apps side by side

If you are looking for these requirements, it’s now possible. Using the new sidePanes API introduced with in Xrm object client model. So let’s see an example in action.

For my demo, I will select a record from a view and open the record form side by side. Screenshot below for reference.

First and foremost, I create a ribbon button ‘Edit In Side Pane‘. When a record is selected and the button is clicked, it will open the record in a side pane beside the view.

Below is the function called on click of the button. I have configured the function to accept couple of parameters through the ribbon customization. Once is selected items array from the Home Page Grid and the other is the gridContext. I am skipping the whole part of creating the ribbon and commands since it’s kind of very basic stuff.

// JavaScript source code
function showRecord(items, context) {
   var recordId = items[0];
   var nameAttr = context.getGrid().getSelectedRows().get(0).data.entity.attributes.get("name");
   Xrm.App.sidePanes.createPane({
      title: "Editing Account: " + nameAttr.getValue(),
      imageSrc: "WebResources/contoso_/imges/switch.png",
      hideHeader: true,
      canClose: true,
      width: 600
   }).then((pane) => {
      pane.navigate({
         pageType: "entityrecord",
         entityName: "account",
         entityId: recordId
      })
   });
}

If you look at the code, it’s pretty simple. I get the selected record id from the grid and the other details of the selected account record.

The other details are pretty mundane and you can identify the significance of each property from the documentation here. What is important here is the code highlighted in bold. The pane.navigate function.

This is where you can specify to show a view or a record. I want the selected account record to show. So pageType I have set to entityRecord. And the remaining are the entity name and the entity id parameters.

And that’s it. Below is the whole stuff in action.

Below is the code to show two entity/ table grids side by side.

Xrm.App.sidePanes.createPane({
    title: "Contacts",
    imageSrc: "WebResources/contoso_/imges/switch.png",
    paneId: "ContactsView",
    canClose: false
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "contact",
    })
});

Hope this helped!

You might also like the below posts

Debajit Dutta
Business Solutions MVP