The functionality will be illustrated with a simple scenario that consists of loading a side panel when opening a model driven app. Before the demonstration this is a panel definition according to Microsoft docs.
What is a panel?The panel displays a web page represented by a URL in the static area in the side pane, which appears on all pages in the model-driven apps web client.
How does it work ?
To achieve this scenario, the following two elements should be implemented:
- Load the panel:
- For this demo, it’s just an HTML web resource containing an embedded YouTube video featuring one of my favorite artists.
- It can be achieved with the following method:
- Docs: https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/reference/xrm-panel/loadpanel
- Trigger the panel initialization when the application is opened:
- Model driven apps support “onLoad” event handlers similarly to forms.
- The event handler is configured by editing the model driven app XML.
Event Handler configuration:
First, a solution containing the model driven app to be configured is needed:
After exporting and extracting the solution content, the modification of the Model Driven XML will be done on the “customizations.xml” file.
The next step is to add the below XML to the customization.xml file. This must be added to the existing AppModule node in the customization.xml file.
After adding the configuration below, the MEA.Apps.SalesHub.onLoad function will be executed when loading the model driven app.
<EventHandlers> <EventHandler eventname="onload" functionname="MEA.Apps.SalesHub.onLoad" libraryname="mea_/Scripts/SalesHub.js" parameters="" enable="true" /> </EventHandlers>
Finally, compress the three files to generate the solution that will be ready to import.
I note that this method is not documented. I was inspired by the new Teams Calls feature introduced to Dynamics 365 for Sales in the Wave 1 2021 release. I hope this feature will be available for us soon in future versions.
I could not make this work, added everything like explained but the sidepane won’t load.
I recommend you to use a function that displays an alert. Once it works you can implement the logic you want, like displaying a panel.
After importing the solution, don’t forget to publish all custumizations and refresh your browser with ctrl+f5.
The discussed approach works without any problem for me.