First look at the multi-tab panel (sidePanes)

In this blog, we will discuss a new feature that will be available in the Powerplatform Wave 2 2021 release, it is about the side panel that appears on the right side of an MDA, you can find the announcement of this new feature on the following documentation: Model driven apps support multiple app side panes

Please note that this new feature is not yet documented. Do not use this approach in production. You can use it for prototyping purposes, and hopefully this new feature will be supported very soon.


For the good understanding of this new functionality, we will compare the old and the new panel display. We will start with the classic display by highlighting its weaknesses.

Classic Panel

According to the current documentation, a panel can be displayed in the following way:

To open this kind of panel, we use the following function: Xrm.Panel.loadPanel(url, title). You can find all the details about this function in the following documentation.

However, this function allows opening only one panel at a time. That is, you can’t open several panels at the same time. In my opinion, this remains a major weakness of this component.


Modern Panel

Unlike the classic panel, the new version allows us to instantiate several panels thanks to the new Xrm.App.sidePanes factory. Using this new object, it will be possible to build several panels at the same time, as shown below:

Minimized Panel

Tab navigating to “My Tasks” view

Tab navigating to an HTML WebRessource


Below is the code implementing the new panel. I use the MEA.Apps.RD.onLoad function which runs while the MDA application is loading. You can find more details about the app loading event on my blog: How to run JavaScript code when loading a model driven app?

if (typeof (MEA) == "undefined") { MEA = {} };
if (typeof (MEA.Apps) == "undefined") { MEA.Apps = {} };
if (typeof (MEA.Apps.RD) == "undefined") { MEA.Apps.RD = {} };
MEA.Apps.RD = {
onLoad: async function () {
//Xrm.Panel.loadPanel("WebResources/mea_/Webpages/Youtube.html", "Panel 1");
var sidePanes = Xrm.App.sidePanes;
sidePanes.state = 0
var pane1Config = {
title: "Youtube",
imageSrc: "https://img.icons8.com/office/16/000000/youtube.png",
badge: true,
}
var pane2Config = {
title: "Twitter",
imageSrc: "https://img.icons8.com/fluent/48/000000/twitter.png",
badge: true,
}
var pane3Config = {
title: "Activities",
imageSrc: "https://img.icons8.com/ios/50/000000/task-planning.png",
badge: true,
alwaysRender:false
}
var pane1 = await sidePanes.createPane(pane1Config);
var pane2 = await sidePanes.createPane(pane2Config);
var pane3 = await sidePanes.createPane(pane3Config);
sidePanes.state = 0
var pageInput1 = {
pageType: "webresource",
webresourceName: "mea_/Webpages/Youtube.html"
};
var pageInput2 = {
pageType: "webresource",
webresourceName: "mea_/Webpages/twitter.html"
};
var pageInput3 = {
pageType: "entitylist",
entityName: "activitypointer",
viewId: "58295bc0-bce4-eb11-bacb-000d3a9587a6"
};
await pane1.navigate(pageInput1);
await pane2.navigate(pageInput2);
await pane3.navigate(pageInput3);
}
}

Hope it helps…

6 thoughts on “First look at the multi-tab panel (sidePanes)

  1. Hi Mehdi,

    Thanks for the blogpost! This is very cool functionality and I’ve been playing around with it.

    I was wondering if you know about other page types that might be available. So far I see « entitylist » and « webresource », but do you know of any way to just inplement html without using a webresource?
    This way I could make the content of the page a bit more flexible onLoad of a record.

    For instance, I could choose which YouTube video to show depending on the type of record a user navigates to. Any tips?

    Best regards,
    Eline

    Like

    1. Find out the solution:
      – first of all, attribute « canClose » must be set to true for the pane you want to close
      – after that Xrm.App.sidePanes.getPane(« PaneName »).close()

      Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s