Understanding the Difference: Xrm.Navigation.openWebResource vs Xrm.Navigation.navigateTo in Dynamics 365

Introduction

Microsoft Dynamics 365 provides Xrm.Navigation.openWebResource and Xrm.Navigation.navigateTo for enhancing user interfaces. Although both serve to open different types of pages, their specific functionalities cater to distinct use cases.

Xrm.Navigation.openWebResource

Functionality: This method is used to open a web resource. It cannot directly open entity records but is ideal for displaying HTML pages or custom dialogs.

Use Case: Ideal for both static and dynamic displays, ranging from informational dialogs to interactive forms and custom interfaces.

Sample Code:

function openMyWebResource() {

    var webResourceName = "new_myWebResource.html";

    var windowOptions = { openInNewWindow: true, height: 300, width: 400 };

    var customParameters = "param1=value1&param2=value2";

    Xrm.Navigation.openWebResource(webResourceName, windowOptions, customParameters);

}

The following two sample codes are for custom buttons to trigger.

For a Main Form:

LaunchCustomWebResource = function (webResourceName, width, height, primaryControl) {

    var formContext = primaryControl;

    var entityID = formContext.data.entity.getId().replace('{', '').replace('}', '');

    var customParameters = `entityIds=${entityID}`;

    var windowOptions = { openInNewWindow: true, height: height, width: width };

    Xrm.Navigation.openWebResource(webResourceName, windowOptions, customParameters);

};

Key Points:

• Retrieves the current record's ID.
• Passes this ID to the web resource for context-specific operations.
• Customizes the pop-up window's dimensions.
• 
  

For Multiple Records (Subgrid/Main Grid):

LaunchCustomWebResourceForMultiple = function (webResourceName, width, height, selectedControl) {

    var gridContext = selectedControl.getGrid();

    var selectedEntities = gridContext.getSelectedRows();

    if (selectedEntities.getLength() === 0) {

        alert("Please select one or more records.");

        return;

    }

    var entityIds = selectedEntities.getArray().map(entity => entity.getData().getEntity().getId().replace('{', '').replace('}', ''));

    var customParameters = `entityIds=${entityIds.join(",")}`;

    var windowOptions = { openInNewWindow: true, height: height, width: width };

    Xrm.Navigation.openWebResource(webResourceName, windowOptions, customParameters);

};

Key Points:

• Gathers IDs of selected records from a grid.
• Passes these IDs to the web resource, enabling actions on multiple records.
• Window customization as per requirements.

Xrm.Navigation.navigateTo

Functionality: This method navigates to an entity form or web resource within Dynamics 365, allowing for more complex data passing.

Sample Code for Entity Record:

async function navigateToEntityRecord() {

    const pageInput = {

        pageType: "entityrecord",

        entityName: "account",

        entityId: "GUID"  // Replace with actual GUID

    };

    const navigationOptions = {

        target: 2,

        width: 400,

        height: 300

    };

    await Xrm.Navigation.navigateTo(pageInput, navigationOptions);

}

Sample Code for Web Resource:

async function navigateToWebResource() {

    const formData = { /* Data here */ };

    const pageInput = {

        pageType: "webresource",

        webresourceName: "new_myWebResource.html",

        data: JSON.stringify(formData)

    };

    const navigationOptions = {

        target: 2,

        width: 450,

        height: 300

    };

    await Xrm.Navigation.navigateTo(pageInput, navigationOptions);

}

Use Case: Ideal for complex forms, navigating to specific entity records, and maintaining seamless user experience within Dynamics 365.

Key Differences:

1. Functionality:

   • openWebResource: Opens web resources only.
   • navigateTo: Opens both web resources and specific entity records.

2. Data Passing:

   • openWebResource: Parameters visible in URL.
   • navigateTo: Encapsulates data, not visible in URL.

3. Use Cases:

   • openWebResource: Displaying custom pages or dialogs.
   • navigateTo: Navigating to entity records or web resources with complex interactions.