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?

Hope it helps…