Creating side panes using Xrm.App.sidePanes client API in Dynamics 365 CE

Dynamics 365, JavaScript, Power Apps / By

Testing out the feature of creating and manage app side panes within a model-driven app using the Xrm.App.sidePanes client 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 inside a Dynamics CE App.

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 the related 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 by using the Xrm.App.sidePanes client API in Dynamics. Not sure if this is the best use case, but hopefully it can give ideas on how it can be used.

Image of the trigger field that Xrm.App.sidePanes client API to create a side pane for the contact.

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;
    }
}

A short example on how to use the Xrm.App.sidePanes client API in Dynamics.

Hope you found it useful.

For More Content See the Latest Posts