Dynamically Loading an External Library in a Dynamics 365 Web Resource

When working with Microsoft Dynamics 365 / Dataverse, JavaScript web resources are a powerful way to extend form behavior. However, loading large third‑party libraries (like Excel parsers, charting tools, or PDF generators) directly in every context is not always ideal.

In this article, we’ll look at a clean and safe approach to dynamically loading an external JavaScript library only when it’s needed — using a real‑world example with SheetJS.

Why Load Libraries Dynamically?

There are several reasons to avoid bundling or always loading external libraries:

• Performance – Large libraries slow down form load times

• Context awareness – Some clients (like Microsoft Teams) have limitations

• Reusability – Load the library only when required

• Maintainability – Easily update the CDN version without redeploying web resources

Dynamic loading solves all of these problems.

The Scenario

We want to:

• Execute code on form OnLoad

• Detect the current client (Web, Outlook, Teams)

• Load SheetJS (xlsx) only if the form is not running inside Microsoft Teams

The OnLoad Function

Here is the full JavaScript example used in a Dynamics 365 form web resource:

OnLoad: function (executionContext) {
    var formContext = executionContext.getFormContext();

    var client = Xrm.Utility
        .getGlobalContext()
        .client
        .getClient();

    if (client !== "Mobile") {
        var script = document.createElement("script");
        script.src = "https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js";
        script.async = true;
        script.defer = true;
        script.onload = function () {
            console.log("SheetJS library loaded successfully");
        };
        document.head.appendChild(script);
    }
}

Step‑by‑Step Breakdown

1. Access the Form Context

var formContext = executionContext.getFormContext();

This is the recommended approach for interacting with the form in modern Dynamics 365.

2. Detect the Client Type

var client = Xrm.Utility.getGlobalContext().client.getClient();

Possible values include:

• Web

• Mobile

• ... 

This allows us to apply conditional logic depending on where the form is running.

3. Create the Script Element

var script = document.createElement("script");

This uses the browser’s native DOM API to inject JavaScript dynamically.

4. Load the Library from a CDN

script.src = "https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js";

Using a CDN ensures:

• Faster load times

• Automatic version updates

• Reduced web resource size

5. Handle the Load Event

script.onload = function () {
    console.log("SheetJS library loaded successfully");
};

This guarantees that your code only executes after the library is fully available.

6. Append to the Document Head

document.head.appendChild(script);

At this point, the browser downloads and executes the external library.

Best Practices

• Always check the client context

• Load libraries only when necessary

• Use onload callbacks for dependent logic

• Avoid blocking scripts on form load

• Don’t assume availability in Teams or Mobile clients

When Should You Use This Pattern?

Dynamic loading is ideal when:

• Exporting data to Excel

• Generating documents

• Using visualization libraries

• Adding advanced parsing or calculation logic