Managing Side Panes in Model-Driven Applications through Scripting

Side panes in PowerApps allow developers to enhance the user interface of model-driven applications. With the Xrm.App.sidePanes API, developers can create and manage side panes, enabling navigation to different forms or custom pages within the app. There are also tips available for managing the side pane, such as collapsing it. To learn more, you can visit this blog.

Collapse pane code:

var sidepane = Xrm.App.sidePanes.getPane("SidePaneId");
if (sidepane.hidden === false) {
   sidepane.hidden = true;
}
sidepane.select();
if (Xrm.App.sidePanes.state === 1) {
   Xrm.App.sidePanes.state = 0; // Collapse
}

Expand pane code:

var sidepane = Xrm.App.sidePanes.getPane("SidePaneId");
if (sidepane.hidden === true) {
   sidepane.hidden = false;
}
sidepane.select();
if (Xrm.App.sidePanes.state === 0) {
   Xrm.App.sidePanes.state = 1; // Expand
}

Load an entity list:

Xrm.App.sidePanes.createPane({
    title: "Products",
    imageSrc: "WebResources/sample_product_icon",
    paneId: "ProductList",
    canClose: false
}).then((pane) => {
    pane.navigate({
        pageType: "entitylist",
        entityName: "sample_product",
    })
});

Load a custom control with parameters:

Xrm.App.sidePanes.createPane({
                title: "Custom Control pane",
                paneId: "CustomContolPaneId",
                canClose: true,
                width: 340,
                isSelected: true,
                alwaysRender: true,
                hideHeader: true,
            }).then((pane) => {
                pane.navigate({
                    pageType: "control",
                    controlName: "CustomControlName",
                    data: {
                        entityId: regardingobjectid,
                        entityName: regardingobjectid_lookuplogicalname,
                        ownerId: ownerid,
                        stepId: "",
                    },
                })