Update HTML on Form Save Button

As we know that, we can embed a HTML page in the Form using IFRAME/Web Resource control. Recently, we had a requirement where for some purpose we need Record Id of the form and some Form field values in an HTML page embedded in the Form and based on that we need to show some details to the user.  As we know that, there is an option on the web resource control to pass record details to the html through the query string. Therefore, we used this concept to get the record details.

In CRM 2011, when we create a new record through the Record form, the form gets refreshed on every save. Due to this HTML page also gets refreshed. So in html page, we had a choice to check if the GUID of record exist, then show the details else hide the content or do not show anything.

However, this feature is not available in CRM 2013 and it does not refresh the record Form as scripts works in Asynchronous mode. Therefore, on every save html page remains as it is after the record creation and when first time, user opens Create form it sends GUID of the record as null and after saving the record query string remains as it is. Then, we added a refresh button on the html form and on click of that button it will manually retrieve GUID of the record using “parent.Xrm.Page.data.entity.getId();” and based on that we show the content to the user. However, this was the manual process where user had to click on the button to see the Content after saving the record.

Therefore, to avoid this, we did some research on it and we came to the following conclusion.

–          We wanted to refresh the html page when user saves or updates the record. Therefore, to achieve this, we added a script on the form, which will trigger “onsave” and “onload” of the form.

–          So, we wrote a script where,

1. We retrieved the GUID of the record and other form field values.
2. Then, we retrieved the query string of html from its IFRAME/WebResource Control
3. Then we appended record details to the querystring like this “&data=recordId”
4. Then we set this new querystring url again to the IFRAME/WebResource Control.
5. Therefore, when we set the new querystring url to the IFRAME/WebResource it reloads the html and we were able to retrieve record details in a HTML.

Below is the code snippet that we used to trigger it “onsave” and “onload” of the form

function setRecordDetails() {

//get record id

var recordId = Xrm.Page.data.entity.getId();

 

//validate recordid

if (recordId != null && recordId != undefined && recordId != “”) {

 

//get the querystring from the control

var querystring = Xrm.Page.getControl(“WebResource_HtmlPage”).getSrc();

 

//set the new querystring

Xrm.Page.getControl(“WebResource_HtmlPage”).setSrc(querystring + “&data=” + recordId);

}

}

 

In html page, we wrote below script:

$(document).ready(function () {

 

//get the recordid

var recordid = Xrm.Page.context.getQueryStringParameters().Id;

 

//get the querydata

var queryData = Xrm.Page.context.getQueryStringParameters().data;

 

//validate recordid

if (recordid == null || recordid == undefined || recordid == “”) { recordid = queryData;

}

showHtml(recordid);

});

Limitations:

–          Please note that, if you are already sending custom parameters through the Web Resource Control then it already uses data as an extra query string parameter. Therefore, you need to edit in the existing data parameter and append your record details to it.

–          You cannot send large data through the query string as it has character limit. Therefore, if you need any form field values, then you can only send RecordId through the parameter then in the HTML, you can use SOAP or REST methods to retrieve the relevant data.

Note:

The OnLoad event is fired even after the Save event, but this is limited to the very first Save i.e., the OnLoad event will be fired when the Form is in Create state and you save the form, after that, once the form is in Existing state, the Saving of data won`t fire OnLoad event.

Conclusion:

To show latest details in a HTML page, we need to write a script on save and on load of the form which can set the new query string URL for the html which also refreshes the html.