Here we will learn to open a HTML web resource and pass form data using JavaScript. Before we start, make sure to subscribe to CRM Crate so that you stay up-to-date in field of Dynamics 365.
Why do we need to navigate a HTML web resource using JavaScript?
Consider a scenario in Dynamics 365 where we need to open a HTML Web Page during the “OnClick” event of form’s ribbon button. We can achieve this requirement by triggering a JavaScript during the ribbon button’s “OnClick” event and calling the HTML web resource from the JavaScript.
Client API used for calling web resource from the JavaScript –
openWebResource (Client API reference)
Xrm.Navigation.openWebResource(webResourceName,windowOptions,data)
Below are the parameter consumed by the openWebResource Client API
| Name | Type | Required | Description |
|---|---|---|---|
| webResourceName | String | Yes | Name of the HTML web resource to open. |
| windowOptions | Object | No | Window options for opening the web resource. The object contains the following values: – height: (Optional) Number. Height of the window to open in pixels. – width: (Optional) Number. Width of the window to open in pixels. |
| data | String | No | Data to be passed into the data parameter. This data will be embedded in the web resource window URL. |
JavaScript snippet code –
//CRM Crate - JavaScript Snippet
function callMethod (executionContext) {
//Client API's 1st Parameter.
var webresourceName = "cc_html"; // Name Of The Web Resource.
//Client APIs 2nd Parameter.
var windowOptions = { height: 400, width: 400 }; //Dimension Of New Window.
//Client APIs 3rd Parameter.
formContext = executionContext;
var fieldValue = formContext.getAttribute("cc_name").getValue(); //Record's field "Name" Passed As A Data.
//Calling openWebResource Client API.
Xrm.Navigation.openWebResource(webresourceName, windowOptions, fieldValue);
}HTML Web Resource Code –
<!-- CRM Crate HTML Code -->
<html><head><meta></head><body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
<p>Record Name == </p>
<p id="variable"></p>
<script>
<!-- Retrieving Window URL -->
var url = window.location.href;
<!-- Processing The Data From URL -->
var dataIndex = url.lastIndexOf("=") + 1;
var dataLenght = url.length;
var recordData = url.slice(dataIndex,dataLenght);
var processedRecordData = recordData.replace("%20"," ");
<!-- Appending Data To HTML Element -->
document.getElementById("variable").innerHTML = processedRecordData;
</script>
</body></html>Demonstrating the implementation in Dynamics 365 CRM –
- Open the Dynamics 365 entity form on which the above JavaScript and HTML web resource has been configured.
- Trigger the JavaScript by clicking the ribbon button “Generate Document”.
- This will open the HTML Page in a new browser window.
Important Note: – We can also use the client API navigateTo (Client API reference) for achieving this requirement.
Thus we learned to open a HTML web resource, pass the form data using JavaScript in Dynamics 365 CRM.
If i want to see details of any employee from entity in new tab and i have already added html web resource with js then how can i fetch id of opening employee of entity in html web resource
You can use D365 Client APIs to fetch the Dataverse Table data.
areee yrrrr. kya chizz hai yesb!