Opening an HTML Web Resource from a Subgrid Button in Dynamics 365 CRM

An Australia-based linen manufacturing and distribution company was using Microsoft Dynamics 365 to manage their sales lifecycle.

Their sales process included:

1. Opportunities
2. Products stored in the Product entity
3. Opportunity Products added through a subgrid

The issue arose when sales representatives needed to add multiple existing products to an Opportunity.

The Real Problem

Out-of-the-box behavior in Dynamics 365 allows users to:

1. Click Add Existing Product
2. Search for a product
3. Select one product
4. Save
5. Repeat the process again and again

While this works functionally, it becomes inefficient for organizations managing:

1. Large product catalogs
2. Multiple product variations
3. Frequent bulk product additions

This resulted in:

1. Increased manual effort
2. Operationally inefficient
3. Reduced sales productivity

The business requirement was clear:

Users should be able to select multiple existing products and create Opportunity Product records in bulk, from a single interface.

Architectural Decision

Instead of:

1. Customizing standard dialogs
2. Implementing complex client-side overrides
3. Writing heavy synchronous plugins

To address this, we introduced a custom button on the Opportunity Products subgrid. When clicked, it opens an HTML web resource that allows users to select multiple existing products in a single interface. The selected products are then processed through a Custom Action, which handles the bulk creation of Opportunity Product records server-side.

Why Use an HTML Web Resource?

In Microsoft Dataverse, not every customization belongs directly inside the main form.

Sometimes we need:

1. A richer UI
2. Multi-select capabilities
3. Controlled record creation logic
4. Better user workflow control

HTML Web Resources allow us to build:

1. Custom layouts
2. Advanced selection logic
3. Grid-style interfaces
4. Batch record creation

Without disturbing the standard CRM experience.

The Web Resource

We created an HTML web resource named:

new_BulkAddOpportunityProducts.html

The HTML web resource renders a searchable grid of existing Product records, allowing users to perform multi-selection. The selected product IDs are then passed to a Custom Action, which handles the creation of related Opportunity Product records against the active Opportunity.

Opening the HTML Web Resource from the Subgrid Button

The key technical step was opening the HTML page when the custom ribbon button is clicked.

We used modern navigation APIs.

JavaScript Used on the Ribbon Button

function openBulkProductSelector(executionContext) {
    var formContext = executionContext.getFormContext();
    var opportunityId = formContext.data.entity.getId();

    if (!opportunityId) {
        console.log("No Opportunity record found.");
        return;
    }

    var pageInput = {
        pageType: "webresource",
        webresourceName: "new_BulkAddOpportunityProducts.html",
        data: opportunityId.replace("{", "").replace("}", "")
    };

    var navigationOptions = {
        target: 2, // Opens as dialog
        width: 900,
        height: 600,
        position: 1
    };

    Xrm.Navigation.navigateTo(pageInput, navigationOptions)
        .then(function () {
            console.log("Web resource opened successfully.");
        })
        .catch(function (error) {
            console.error("Error opening web resource:", error);
        });
}

How This Works

When the custom button is clicked, the script first retrieves the current Opportunity record ID. This ID is then passed as a parameter to the HTML web resource so that the selected products can be associated with the correct Opportunity. The web resource is opened as a modal dialog using the target: 2 navigation option, ensuring that users can complete the bulk selection process without leaving the form.

Inside the HTML Web Resource

Within the HTML web resource:

1. The Opportunity ID is retrieved from query string parameters.
2. Users select multiple existing products.
3. The selected product IDs are passed to a Custom Action.
4. The Custom Action executes server-side logic to create Opportunity Product records.

This design ensures:

1. Business logic remains server-side
2. Bulk record creation is transactional
3. Validation rules are centrally managed
4. Security context is respected

All without navigating away from the form.

How This Approach Saved Time

Faster User Workflow

Users select multiple products in one screen.

Clean Architecture

To encapsulate, with this design the Client was able to:

1. Reduced repetitive clicks
2. Improved sales efficiency
3. Cleaner CRM customization

Opening an HTML Web Resource from a button in Microsoft Dynamics 365 is a powerful extension technique.

It allows organizations to:

1. Enhance user experience
2. Maintain architectural clarity
3. Extend CRM safely and cleanly

We hope you found this blog useful, and if you would like to discuss anything, you can reach out to us at transform@cloudfronts.com