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.
Here are a couple of things you can do to make your custom Web Resources more interactive and flexible.
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:
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
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.