Tips for Creating Interactive HTML Web Resources in Dynamics 365

Dominic Jarvis, 18 April 2018

HTML Web Resources can be a super handy way to add additional functionality to a form, whether this is to add information from an outside source, or to add (what amounts to) a custom control to the form.

Due to the flexibility of HTML (and the CSS and JavaScript that is inevitably bundled with it), custom Web Resources can be incredibly useful.

Here are a couple of things you can do to make your custom Web Resources more interactive and flexible.

Accessing Web Resource Window from Form

It’s actually incredibly easy to interact with JavaScript functions inside your Web Resource from the form.

You can access the Web Resource window from any form scripts, including onLoad, onChange, and onSave events. Simply use the following code to obtain the Web Resource window, and then you can interact with the Web Resource as you see fit. In the following code, we’re executing a JavaScript function within the Web Resource:

Xrm.Page.ui.controls.get("<WebResource_Name>").getObject().contentWindow.<JavaScript_Function>(parameters);

Accessing Form Window from Web Resource

If you want to interact with the form from the Web Resource, this is also a piece of cake. In fact, you can access the Xrm.Page client side context from the resource, as the form is just the parent element on the page. This makes the call something similar to:

parent.Xrm.Page.<Function_Name>;

Note that as of CRM 9, parent.Xrm.* is only available from web resources hosted in forms. More information here: https://docs.microsoft.com/en-us/dynamics365/get-started/whats-new/customer-engagement/important-changes-coming

It’s also possible to call a custom JavaScript function that is loaded in the parent window (form script window) from the Web resource.

parent.<Custom_Function_Name>;

Interact with the Dynamics 365 Web API (Or SOAP Endpoint)

Interacting with the Dynamics 365 Web API is easy in custom web resources, as you don’t have to deal with authentication or any hassles like that. This means that you can use Web Resources to display information from other areas of the business.

Some example use cases of this would be custom data displays – dynamic aggregates, data displays or additional visualisations not provided OOTB.
For example, we might have an event management system. When we select a venue for an event, we might want to know what other events are being held at that venue and when. We can’t do this with a subgrid OOTB, so an alternative might be to create a web resource to display this information.

I’ve created a small example of what this might look like: omitting the WebAPI calls for brevity.

The flow looks something like this:

      • On Load or Change of the Venue field on an Event

      • Call the updateEventsTable function

              > This gets all Events for this Venue

              > Passes these through to the function in the WebResource called ‘updateEventData’

              > This updates the table with the new information

    • The method in the web resource gets the information from the array, then updates the table accordingly.

    •  With a little styling, the table ends up being presented on the form like this:

If we wanted to extend this a bit further, we could add a refresh button to the grid, which then calls the ‘updateEventsTable’ method in the parent form.