How to run JavaScript code when loading a model driven app?

Have you ever needed to execute a JavaScript code when opening a model driven app? Maybe to initialize some global variables, display a notification or open a dialog (…) This blog will discuss a way to meet this need using a method that is not yet documented and therefore not yet supported by Microsoft.

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: Xrm.Panel.loadPanel(url, title)
  • 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.