how to get value from microsoft dynamics crm form to html web resource

Question

I am working on Microsoft Dynamics CRM 2016. I have a description field on my Lead form along with that I have added an HTML web resource. When I enter a description value on the CRM form, it should display on my HTML web resource.

How can this be achieved?

HTML web resource code:

<html>
<head>
<script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script text="text/javascript">
    var description = Xrm.Page.getAttribute("description").getValue();
</script>
</head>
<body>
<table>
  <thead><tr><th>Parameter</th><th>Value</th></tr></thead>
  <tbody>
   <tr><td>description</td><td id="description">null</td></tr>

  </tbody>
 </table>
</body>
</html>

Then in the web resource's properties I have:

added a custom parameter: (data)= RelatedEntity=leads&RelatedField=description
enabled the option to pass record object-type code and unique identifier as parameters
added description in dependencies

You should expand the question to show you tried to solve the problem (i.e. describe one or more solutions you attempted but don't work for you and specify *why* they don't work for you) otherwise the question is going to be downvoted and ignored because of lack of research on your part. Also, include the CRM version (2016 means 8.0 or 8.1 ?) — Alex, May 08 '17 at 11:58

score 2 · Answer 1 · edited May 23 '17 at 11:54

You could attach a JavaScript onChange() event to the description attribute. The event would get the value of the description, then get the element from your HTML control and then set the element's value equal to the description attribute's value.

Here's an example of how it might look:

function descriptionOnChange() {
    // Get the value of the description attribute.
    var description = Xrm.Page.getAttribute('description').getValue();

    // Get the HTML iFrame object.
    var iFrame = Xrm.Page.ui.controls.get('IFRAME_WebResourceName').getObject();

    // Get the element from the iFrame.
    var element = iFrame.contentWindow.document.getElementById('htmlDescription');

    // Set the element's value.
    element.value = description;
}

Note: ensure cross-frame scripting is not disabled in your iFrame's properties:

You may however receive an error if cross-domain iFrame requests are blocked. See this post for an explanation and workaround.

The workaround's implementation in CRM might look like this:

Add a <script> tag to your HTML's <body> to accept and process a message:

<script>
    window.addEventListener('message', function(event) {
        if (~event.origin.indexOf('https://<yourCRMUrl>')) {
            document.getElementById('htmlDescription').value = event.data;
        } else {
            return;
        }
    })
</script>

Change the contents of your description attribute's onChange() event to this:

var description = Xrm.Page.getAttribute("description").getValue();
var iFrame = Xrm.Page.ui.controls.get('IFRAME_WebResourceName').getObject();

iFrame.contentWindow.postMessage(description, '*');

or just make the web resource display the value of the field from the WebAPI and in the form refresh the iframe onsave — Alex, May 08 '17 at 15:14
I've made quite a few assumptions given the limited information in the question. One is that the sooner the HTML iFrame can receive the data the better. — Dave Clark, May 08 '17 at 15:48
Thank you for reply. I have edited my question which is whatever I have tried. Can you please help me based on that? — pkm, May 09 '17 at 04:44

Aron · Answer 2 · 2017-05-09T13:08:54.067

1

You can try something like this:

<html>
<head>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script type="text/javascript">
function onLoad() {
    var description = parent.Xrm.Page.getAttribute("description").getValue();
    document.getElementById("description").innerHTML = description;
}
</script>
</head>
<body onload="onLoad()">
<table>
  <thead><tr><th>Parameter</th><th>Value</th></tr></thead>
  <tbody>
   <tr><td>description</td><td id="description">null</td></tr>
  </tbody>
 </table>
</body>
</html>

Also, as your code grows you can move it into its own web resource, and include it in the html head like this:

 <script src="myLibrary.js" type="text/javascript"></script>

edited May 09 '17 at 13:08

answered May 08 '17 at 13:25

Aron

3,877
3
14
21

parent.Xrm.Page.getAttribute() is deprecated. – Dennis Rieke Feb 11 '20 at 10:17
1

[This article](https://learn.microsoft.com/en-us/power-platform/important-changes-coming) from 02/05/2020 says: _Although Xrm.Page is deprecated, parent.Xrm.Page will continue to work in case of HTML web resources embedded in forms as this is the only way to access the form context from the HTML web resource._ – Aron Feb 11 '20 at 13:53
Thank you so much! This article helped me verry much. – Dennis Rieke Feb 12 '20 at 08:29

score 0 · Answer 3 · answered Jul 03 '23 at 13:20

I've put my button on Account.

HTML:-

<html>
<head>
    <meta>
</head>
<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">

<p>Account Name:</p>
<p id="accountName"></p>

<p>Telephone:</p>
<p id="telephone"></p>

<p>Fax:</p>
<p id="fax"></p>

<p>Website URL:</p>
<p id="websiteUrl"></p>

<script>
    //<!-- Retrieving Window URL -->
    var url = window.location.href;

    //<!-- Processing The Data From URL -->
    var dataIndex = url.lastIndexOf("=") + 1;
    var dataLength = url.length;
    var recordData = url.slice(dataIndex, dataLength);
    var processedRecordData = decodeURIComponent(recordData.replace(/\+/g, ' '));

    //<!-- Splitting the processedRecordData into separate values -->
    var values = processedRecordData.split(",");

    //<!-- Appending Data to HTML Elements -->
    document.getElementById("accountName").innerHTML = values[0] || "";
    document.getElementById("telephone").innerHTML = values[1] || "";
    document.getElementById("fax").innerHTML = values[2] || "";
    document.getElementById("websiteUrl").innerHTML = values[3] || "";
</script>

</body>
</html>

JavaScript:-

function getValue(primarycontrol) {

    var formContext = primarycontrol;

    var AccountName = formContext.getAttribute("name").getValue();
    var Telephone = formContext.getAttribute("telephone1").getValue();
    var Fax = formContext.getAttribute("fax").getValue();
    var WebsiteUrl = formContext.getAttribute("websiteurl").getValue();

    var windowsoption = { height: 400, width: 400 };

    var parameters = encodeURIComponent(AccountName) + ',' +
                     encodeURIComponent(Telephone) + ',' +
                     encodeURIComponent(Fax) + ',' +
                     encodeURIComponent(WebsiteUrl);
                     
    Xrm.Navigation.openWebResource("ispl_HTML_Form", windowsoption, parameters);
}

how to get value from microsoft dynamics crm form to html web resource

3 Answers3