{"id":24342,"date":"2020-08-05T15:19:24","date_gmt":"2020-08-05T15:19:24","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=24342"},"modified":"2022-06-13T13:48:42","modified_gmt":"2022-06-13T08:18:42","slug":"how-to-use-xrm-and-formcontext-in-html-webresource-in-dynamics-365-crm","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/08\/how-to-use-xrm-and-formcontext-in-html-webresource-in-dynamics-365-crm\/","title":{"rendered":"How to use Xrm and formContext in HTML WebResource in Dynamics 365 CRM"},"content":{"rendered":"

Introduction<\/h2>\n

In this blog we will explore how to pass \u2018Xrm\u2019<\/strong> and \u2018formContext\u2019<\/strong> in HTML pages using the
\n\u2018getContentWindow\u2019<\/strong> client API in Unified Interface of Dynamics 365 CRM so that we can get or set the form attributes inside the HTML web resource. \u00a0As we all know, parent.Xrm is going to deprecate in near future so below is the supported way to use the \u2018Xrm\u2019 and \u2018formContext\u2019 in HTML page.<\/p>\n

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\u2019t be accessed directly in HTML page. To access, you can follow the below steps:<\/p>\n

1. Add the below code in the \u2018onLoad\u2019 event handler of Account entity. The below code is written in Typescript so you need to compile it in JavaScript and add it on \u2018onLoad\u2019 event of the account form.<\/p>\n

onLoad(executionContext:any):\u00a0void\u00a0{<\/p>\n

try\u00a0{<\/p>\n

\/\/validate\u00a0execution\u00a0context<\/p>\n

if\u00a0(executionContext\u00a0!=\u00a0undefined\u00a0)<\/p>\n

{<\/p>\n

\/\/get\u00a0form\u00a0context<\/p>\n

let\u00a0formContext\u00a0=\u00a0executionContext.getFormContext();<\/p>\n

\/\/validate\u00a0form\u00a0context<\/p>\n

if\u00a0(formContext\u00a0!=\u00a0undefined\u00a0)\u00a0{<\/p>\n

\/\/Get\u00a0AccountNotes\u00a0control<\/p>\n

let\u00a0accountNotesControl\u00a0=\u00a0formContext.getControl(“WebResource_AccountNotes”);<\/p>\n

\/\/Validate\u00a0control<\/p>\n

if\u00a0(accountNotesControl\u00a0!=\u00a0null\u00a0&&\u00a0accountNotesControl\u00a0!=\u00a0undefined)\u00a0{<\/p>\n

\/\/get\u00a0getContentWindow<\/p>\n

accountNotesControl.getContentWindow().then(<\/p>\n

function\u00a0(contentWindow)\u00a0{<\/p>\n

\/\/Pass\u00a0xrm\u00a0and\u00a0formcontext<\/p>\n

contentWindow.setClientApiContext(Xrm,formContext);<\/p>\n

}<\/p>\n

)<\/p>\n

}<\/p>\n

}<\/p>\n

else{<\/p>\n

\/\/Show\u00a0alert<\/p>\n

Xrm.Navigation.openAlertDialog({\u00a0title:\u00a0“Error”,\u00a0text:\u00a0“formContext\u00a0is\u00a0undefined”\u00a0});<\/p>\n

}\u00a0}<\/p>\n

else{<\/p>\n

\/\/Show\u00a0alert<\/p>\n

Xrm.Navigation.openAlertDialog({\u00a0title:\u00a0“Error”,\u00a0text:\u00a0“executionContext\u00a0is\u00a0undefined”\u00a0});<\/p>\n

}<\/p>\n

}<\/p>\n

catch\u00a0(ex)\u00a0{<\/p>\n

\/\/Show\u00a0alert<\/p>\n

Xrm.Navigation.openAlertDialog({\u00a0title:\u00a0“Error”,\u00a0text:\u00a0ex.message\u00a0});<\/p>\n

}<\/p>\n

}<\/p>\n

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 \u2018Xrm\u2019 and \u2018formContext\u2019 in HTML page.<\/p>\n

\u2018WebResource_AccountNotes\u2019 is the name of the HTML web resource control added on the Account form.<\/p>\n

\"HTML<\/p>\n

2. Bind the above code on \u2018Onload\u2019 of the Account form as shown in below screenshot:<\/p>\n

\"HTML<\/p>\n

3. Now, add the following code in your HTML web resource:<\/p>\n

<script><\/p>\n

function setClientApiContext(xrm, formContext) {<\/p>\n

\/\/To set the attribute on Account form<\/p>\n

formContext.getAttribute(“preferredcontactmethodcode”).setValue(1);<\/p>\n

\/\/To do CRUD operation<\/p>\n

var data =<\/p>\n

{<\/p>\n

“subject”: “Sample”,<\/p>\n

}<\/p>\n

\/\/ create Note record<\/p>\n

xrm.WebApi.createRecord(“annotation”, data).then(<\/p>\n

function success(result) {<\/p>\n

console.log(“Notes created with ID: ” + result.id);<\/p>\n

},<\/p>\n

function (error) {<\/p>\n

console.log(error.message);<\/p>\n

\/\/ handle error conditions<\/p>\n

}<\/p>\n

);<\/p>\n

}<\/p>\n

<\/script><\/p>\n

You can see in above function we have set the value of the \u2018preferredcontactmethodcode\u2019 attribute on Account record and we created a new note record using Xrm.webapi functions.<\/p>\n

Note:<\/em><\/strong><\/p>\n

1. The above blog will only work on Unified Interface.<\/p>\n

2. The function name defined in the HTML page i.e. \u2018setClientApiContext\u2019 should use the same function name while calling in Onload function of Form event handler.<\/p>\n

Conclusion<\/strong><\/h2>\n

As illustrated above, you can now pass \u2018Xrm\u2019<\/strong> and \u2018formContext\u2019<\/strong> in HTML pages using the
\n\u2018getContentWindow\u2019<\/strong> client API in Unified Interface of Dynamics 365 CRM.<\/p>\n

Marketing4Dynamics<\/a> \u2013 Mailchimp and Dynamics 365 CRM integration to plan effective sales strategies, increase sales and improve ROI<\/div><\/div><\/h2>\n