Passing Parameters from Dynamics 365 Main Form to an HTML Web Resource

 This guide explains how to pass parameters from a Dynamics 365 main form to an HTML web resource by enabling a built-in feature and retrieving the parameters dynamically in your HTML.


Step 1: Enable Parameter Passing in the Web Resource Settings

  1. Open the Form Editor for the desired entity.
  2. Add or edit your HTML web resource.
  3. Under the Advanced section of the web resource configuration:
    • Check the option Pass record object-type code and unique identifier as parameters (as shown in the image).
  4. Save and publish your changes.



This setting automatically passes the following parameters to the web resource:

  • id: The unique identifier (GUID) of the current record.
  • typename: The logical name of the entity associated with the current record.

Step 2: Parse URL Parameters in the HTML Web Resource

Use JavaScript in your HTML web resource to retrieve the passed parameters. The URLSearchParams API simplifies parsing the query string.

Utility Function to Parse Parameters

function getQueryStringParameter(paramToRetrieve)
{
    var params = new URLSearchParams(window.location.search);
    return params.get(paramToRetrieve);
}

This function retrieves the value of any parameter in the query string.


Step 3: Retrieve the id and typename Parameters

With the above utility function, extract the id and typename parameters dynamically in your HTML.

Example Code:

// Retrieve the record's unique identifier (GUID) and entity logical name
var recordId = getQueryStringParameter("id");
var typeName = getQueryStringParameter("typename");

// Output the parameters (for debugging or further use)
console.log("Record ID: " + recordId);
console.log("Entity Logical Name: " + typeName);


Step 4: Use the Parameters in the HTML Web Resource

You can utilize the extracted parameters to dynamically display or process data related to the current record.

Example: Displaying Record Details in HTML


<!DOCTYPE html>
<html>
<head>
    <title>Record Details</title>
    <script>
        function displayRecordDetails()
        {
            var recordId = getQueryStringParameter("id");
            var typeName = getQueryStringParameter("typename");

            document.getElementById("recordDetails").innerText =
                "Entity: " + typeName + "\nRecord ID: " + recordId;
        }
    </script>
</head>
<body onload="displayRecordDetails()">
    <h1>Record Details</h1>
    <pre id="recordDetails"></pre>
</body>
</html>

Step 5: Test Your Web Resource

  1. Open any record in Dynamics 365.
  2. Verify that the web resource correctly displays or uses the id and typename parameters.
  3. Use browser developer tools to inspect the query string and debug if needed.

By simply enabling the Pass record object-type code and unique identifier as parameters option and implementing URL parameter parsing in your HTML, you can create powerful, dynamic web resources in Dynamics 365.

No comments:

Post a Comment