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

view raw loadModernPanel.js hosted with ❤ by GitHub

Hope it helps…