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:

  • 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.

Advertisement

4 thoughts on “How to run JavaScript code when loading a model driven app?

    1. Hi,
      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.

      Like

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 )

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