Creating side panes by using a client API in Dynamics 365 CE

If you think your friends/network would find this useful, please share it with them – I’d really appreciate it.

Testing out the feature of creating and manage app side panes within a model-driven app by using the Xrm.App.sidePanes API. More about side panes can be found in the documentation here, Creating side panes by using a client API. The image below is gif that show how this example look.

Open image to see a gif of how the custom pane looks like.

In the example below I’ve added a function to the Primary Contact field on account that triggers on change. When a contact is added to the field it opens the default view of the contact table in the app side pane. Not sure if this is the best use case, but hopefully it can give ideas on how it can be used.

The script in the example is listed below. It can easily be reused if you want to test it out. It uses the standard tables and fields out of the box in Dynamics CE.

function openSidePane(executionContext) {
    const formContext = executionContext.getFormContext();
    let primaryContact = formContext.getAttribute("primarycontactid").getValue();

    if (primaryContact != null) {
        let primaryContactId = primaryContact[0].id.replace(/{|}/g, "");
        let primaryContacName = primaryContact[0].name;

        Xrm.App.sidePanes.createPane({
            title: `Primary Contact: ${primaryContacName}`,
            imageSrc: "WebResources/msdyn_/Icons/SVG/Contacts.svg",
            hideHeader: true,
            canClose: true,
            width: 600,
        }).then((pane) => {
            pane.navigate({
                pageType: "entityrecord",
                entityName: "contact",
                entityId: primaryContactId,
            })
        });
    }
    if (primaryContact === null) {
        Xrm.App.sidePanes.state = 0;
    }
}

Hope you found it useful.