locked
CRM 2011 - Populate HTML Web Resource in form Header with OData/REST call RRS feed

  • Question

  • Is it possible to populate an HTML web resource in a form's header with data from a REST call?  I would like to first know if this is possible and then, secondly, if someone could provide some guidance on where to start then I would appreciate it.  Thanks!
    Monday, September 23, 2013 9:35 PM

Answers

  • It is possible - here is a very basic example, notice is it using window.parent.Xrm... to reference the hosting form.

    <!DOCTYPE html >
    <html lang="en-us">
    <head>
        <title></title>
        <script type="text/javascript">
            document.onreadystatechange = function () {
                if (document.readyState == "complete") {
                    var serverUrl = window.parent.Xrm.Page.context.getClientUrl();
                    var oDataSelect = serverUrl + "/XRMServices/2011/OrganizationData.svc/ContactSet(guid'" + window.parent.Xrm.Page.data.entity.getId() + "')?$select=MobilePhone";
    
                    var req = new XMLHttpRequest();
                    req.open("GET", oDataSelect, false);
                    req.setRequestHeader("Accept", "application/json");
                    req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
                    req.onreadystatechange = function () {
                        if (req.readyState === 4) {
                            if (req.status === 200) {
                                var retrieved = JSON.parse(req.responseText).d;
                                if (retrieved != null) {
                                    var message = document.createElement("p");
                                    SetText(message, retrieved.MobilePhone);
                                    document.body.appendChild(message);
                                }
                            }
                        }
                    };
                    req.send();
                }
            }
    
            function SetText(element, text) {
                if (typeof element.innerText != "undefined") {
                    element.innerText = text;
                }
                else {
                    element.textContent = text;
                }
            }
        </script>
    </head>
    <body>
    </body>
    </html>
    


    Jason Lattimer
    My Blog -  Follow me on Twitter -  LinkedIn

    Monday, September 23, 2013 11:11 PM
    Moderator

All replies

  • It is possible - here is a very basic example, notice is it using window.parent.Xrm... to reference the hosting form.

    <!DOCTYPE html >
    <html lang="en-us">
    <head>
        <title></title>
        <script type="text/javascript">
            document.onreadystatechange = function () {
                if (document.readyState == "complete") {
                    var serverUrl = window.parent.Xrm.Page.context.getClientUrl();
                    var oDataSelect = serverUrl + "/XRMServices/2011/OrganizationData.svc/ContactSet(guid'" + window.parent.Xrm.Page.data.entity.getId() + "')?$select=MobilePhone";
    
                    var req = new XMLHttpRequest();
                    req.open("GET", oDataSelect, false);
                    req.setRequestHeader("Accept", "application/json");
                    req.setRequestHeader("Content-Type", "application/json;charset=utf-8");
                    req.onreadystatechange = function () {
                        if (req.readyState === 4) {
                            if (req.status === 200) {
                                var retrieved = JSON.parse(req.responseText).d;
                                if (retrieved != null) {
                                    var message = document.createElement("p");
                                    SetText(message, retrieved.MobilePhone);
                                    document.body.appendChild(message);
                                }
                            }
                        }
                    };
                    req.send();
                }
            }
    
            function SetText(element, text) {
                if (typeof element.innerText != "undefined") {
                    element.innerText = text;
                }
                else {
                    element.textContent = text;
                }
            }
        </script>
    </head>
    <body>
    </body>
    </html>
    


    Jason Lattimer
    My Blog -  Follow me on Twitter -  LinkedIn

    Monday, September 23, 2013 11:11 PM
    Moderator
  • Thank you, JLattimer, for your response.  I believe I have almost got it working, however, I am receiving an error which I see in the console:

    Uncaught TypeError: Object function ( ) { } has no method 'getAttribute'

    I am referencing the ClientGlobalContext.js.aspx correctly so the method should be recognized.  Here is my code below:

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="../../new_/sdk/rest.js" type="text/javascript"></script>
        <script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div>
            <table>
                <tr>
                    <td id="accountName"></td>
                    <td id="address1Line1"></td>
                    <td id="address1Line2"></td>
                    <td id="address1Line3"></td>
                    </tr><tr>
                    <td id="address1City"></td>
                    <td id="address1StateOrProvince"></td>
                    <td colspan="2" id="address1Zip"></td>
                        </tr><tr>
                    <td colspan="4" id="address1CountryRegion"></td>
                </tr>
            </table>    
        </div>
    
    
        <script type="text/javascript">
    
            $(document).ready(function () {
                account_onchange();
            });
     
            //  Account OnChange
            function account_onchange() {
    
                //  Validation to check if there is a value in the Account lookup field
                var lookup = Xrm.Page.getAttribute("new_accountid").getValue();
    
                if ((lookup != null) && (lookup != "undefined")) {
                    var accountNameId = Xrm.Page.getAttribute("new_accountid").getValue()[0];
                    //  Get Account Details call
                    getAccountDetails(accountNameId.id);
                }
    
            }
    
            //  Grabs the specific details from the parent Account record
            function getAccountDetails(AccountId) {
                SDK.REST.retrieveRecord(
                 AccountId,
                 "Account",
                 null, null,
                 function (account) {
    
                     $("#accountName").val(account.Name);
                     $("#address1Line1").val(account.Address1_Line1);
                     $("#address1Line2").val(account.Address1_Line2);
                     $("#address1Line3").val(account.Address1_Line3);
                     $("#address1Line2").val(account.Address1_City);
                     $("#address1StateOrProvince").val(account.Address1_StateOrProvince);
                     $("#address1Zip").val(account.Address1_PostalCode);
                     $("#address1CountryRegion").val(account.Address1_Country);
    
                 }
    
                 )
            };
    
        </script>
    
    </body>
    </html>
    

    Please let me know if I am missing anything.  Thanks for your help!

    Wednesday, September 25, 2013 8:42 PM
  • Is the "window.parent..." necessary?  What is its purpose?  Thanks
    Wednesday, September 25, 2013 8:44 PM
  • Got it.  I used the "window.parent.Xrm.Page.getAttribute(..." and it worked.  Thanks!
    Wednesday, September 25, 2013 9:24 PM