How to use Xrm and formContext in HTML WebResource in Dynamics 365 CRM

Sending
User Review
0 (0 votes)

Introduction

In this blog we will explore how to pass ‘Xrm’ and ‘formContext’ in HTML pages using the
‘getContentWindow’ client API in Unified Interface of Dynamics 365 CRM so that we can get or set the form attributes inside the HTML web resource.  As we all know, parent.Xrm is going to deprecate in near future so below is the supported way to use the ‘Xrm’ and ‘formContext’ in HTML page.

Suppose there is a HTML web resource on Account entity form which shows notes record related to a Parent Account. And from the HTML page we need to read or set some fields on Account record using formContext and also want to do CRUD operations inside the HTML Page using Xrm.webapi. So, the Xrm and formContext won’t be accessed directly in HTML page. To access, you can follow the below steps:

1. Add the below code in the ‘onLoad’ event handler of Account entity. The below code is written in Typescript so you need to compile it in JavaScript and add it on ‘onLoad’ event of the account form.

onLoad(executionContext: any): void {

let functionName: string = “onLoad”;

try {

//validate execution context

if (!CRMWork_Account_Library.isValid(executionContext)) { return }

//get form context

let formContext = executionContext.getFormContext();

//validate form context

if (!CRMWork_Account_Library.isValid(formContext)) { return }

//Get AccountNotes control

let accountNotesControl = formContext.getControl(“WebResource_AccountNotes”)

//Validate control

if (CRMWork_Account_Library.isValid(accountNotesControl)) {

//get getContentWindow

accountNotesControl.getContentWindow().then(

function (contentWindow) {

//Pass xrm and formcontext

contentWindow.setClientApiContext(Xrm,formContext);

}

)

}

}

catch (ex) {

CRMWork_Account_Library.throwError(functionName, ex);

}

}

In the above code, we are accessing the HTML page using getControl method. Using the getContentWindow() which returns a content window instance representing an IFRAME or web resource we are going to pass the parameter ‘Xrm’ and ‘formContext’ in HTML page.

‘WebResource_AccountNotes’ is the name of the HTML web resource control added on the Account form.

HTML WebResource in Dynamics 365 CRM

2. Bind the above code on ‘Onload’ of the Account form as shown in below screenshot:

HTML WebResource in Dynamics 365 CRM

3. Now, add the following code in your HTML web resource:

<script>

function setClientApiContext(xrm, formContext) {

//To set the attribute on Account form

formContext.getAttribute(“preferredcontactmethodcode”).setValue(1);

//To do CRUD operation

var data =

{

“subject”: “Sample”,

}

// create Note record

xrm.WebApi.createRecord(“annotation”, data).then(

function success(result) {

console.log(“Notes created with ID: ” + result.id);

},

function (error) {

console.log(error.message);

// handle error conditions

}

);

}

</script>

You can see in above function we have set the value of the ‘preferredcontactmethodcode’ attribute on Account record and we created a new note record using Xrm.webapi functions.

Note: The function name defined in the HTML page i.e. ‘setClientApiContext’ should use the same function name while calling in Onload function of Form event handler.

Conclusion

As illustrated above, you can now pass ‘Xrm’ and ‘formContext’ in HTML pages using the
‘getContentWindow’ client API in Unified Interface of Dynamics 365 CRM.