CRM Crate

Dynamics 365 | Open a HTML web resource and pass form data using JavaScript

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

NameTypeRequiredDescription
webResourceNameStringYesName of the HTML web resource to open.
windowOptionsObjectNoWindow 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.
dataStringNoData 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.

5 1 vote
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
error: CRM Crate Security Engine - Disabled Right Click & Selection!

Congratulations!

Well Done,
Welcome to CRM Crate

Stay tuned with us and get all latest updates and learning in Microsoft CRM and related techonologes.

Practise EXams

Free!!

Sharpen your skills with our free practise exams.