{"id":850,"date":"2014-08-22T11:10:01","date_gmt":"2014-08-22T05:40:01","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=850"},"modified":"2014-08-22T11:10:01","modified_gmt":"2014-08-22T05:40:01","slug":"update-html-on-form-save-button","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2014\/08\/update-html-on-form-save-button\/","title":{"rendered":"Update HTML on Form Save Button"},"content":{"rendered":"<p style=\"text-align: justify;\">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.\u00a0 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.<\/p>\n<p style=\"text-align: justify;\">In CRM 2011, when we create a new record through the Record form, the form gets refreshed on\u00a0every 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.<\/p>\n<p style=\"text-align: justify;\">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\u00a0every save\u00a0html page remains as it is after the record creation and\u00a0when 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 \u201cparent.Xrm.Page.data.entity.getId();\u201d 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.<\/p>\n<p style=\"text-align: justify;\">Therefore, to avoid this, we did some research on it and we came to the following conclusion.<\/p>\n<p style=\"text-align: justify;\">&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 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 \u201consave\u201d\u00a0and \u201conload\u201d\u00a0of the form.<\/p>\n<p style=\"text-align: justify;\">&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 So, we wrote a script where,<\/p>\n<ol style=\"text-align: justify;\">\n<li>We retrieved the GUID of the record and other form field values.<\/li>\n<li>Then, we retrieved the query string of html from its IFRAME\/WebResource Control<\/li>\n<li>Then we appended record details to the\u00a0querystring\u00a0like this \u201c&amp;data=recordId\u201d<\/li>\n<li>Then we set this new\u00a0querystring\u00a0url\u00a0again to the IFRAME\/WebResource Control.<\/li>\n<li>Therefore, when we set the new\u00a0querystring\u00a0url\u00a0to the IFRAME\/WebResource it reloads the html and we were able to retrieve record details in a HTML.<\/li>\n<\/ol>\n<p style=\"text-align: justify;\">Below is the code snippet that we used to trigger it \u201consave\u201d\u00a0and \u201conload\u201d\u00a0of the form<\/p>\n<p>function setRecordDetails() {<\/p>\n<p>\/\/get record id<\/p>\n<p>var recordId = Xrm.Page.data.entity.getId();<\/p>\n<p>&nbsp;<\/p>\n<p>\/\/validate recordid<\/p>\n<p>if (recordId != null &amp;&amp; recordId != undefined &amp;&amp; recordId != &#8220;&#8221;) {<\/p>\n<p>&nbsp;<\/p>\n<p>\/\/get the querystring from the control<\/p>\n<p>var querystring = Xrm.Page.getControl(&#8220;WebResource_HtmlPage&#8221;).getSrc();<\/p>\n<p>&nbsp;<\/p>\n<p>\/\/set the new querystring<\/p>\n<p>Xrm.Page.getControl(&#8220;WebResource_HtmlPage&#8221;).setSrc(querystring + &#8220;&amp;data=&#8221; + recordId);<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>&nbsp;<\/p>\n<p>In html page, we wrote below script:<\/p>\n<p>$(document).ready(function () {<\/p>\n<p>&nbsp;<\/p>\n<p>\/\/get the recordid<\/p>\n<p>var recordid = Xrm.Page.context.getQueryStringParameters().Id;<\/p>\n<p>&nbsp;<\/p>\n<p>\/\/get the querydata<\/p>\n<p>var queryData = Xrm.Page.context.getQueryStringParameters().data;<\/p>\n<p>&nbsp;<\/p>\n<p>\/\/validate recordid<\/p>\n<p>if (recordid == null || recordid == undefined || recordid == &#8220;&#8221;) { recordid = queryData;<\/p>\n<p>}<\/p>\n<p>showHtml(recordid);<\/p>\n<p>});<\/p>\n<p><strong>Limitations:<\/strong><\/p>\n<p style=\"text-align: justify;\">&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 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.<\/p>\n<p style=\"text-align: justify;\">&#8211; \u00a0 \u00a0 \u00a0 \u00a0 \u00a0You 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.<\/p>\n<p><strong><em>Note:<\/em><\/strong><\/p>\n<p style=\"text-align: justify;\"><em>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.<\/em><\/p>\n<p style=\"text-align: justify;\"><strong>Conclusion:<\/strong><\/p>\n<p style=\"text-align: justify;\">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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2014\/08\/update-html-on-form-save-button\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[21,22,24],"tags":[828,895,1416,1417],"class_list":["post-850","post","type-post","status-publish","format-standard","hentry","category-dynamics-crm-2013","category-dynamics-crm-2015","category-dynamics-crm-2016","tag-form-save","tag-html","tag-record","tag-recordid"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=850"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/850\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}