Contact Us Now - Call us on

Microsoft Dynamics CRM

xRM

Resources

About Us

Find Us

 

Gap Consulting Microsoft Dynamics CRM Blog

Displaying Data From a Parent Record on a Child Form Using an HTML Web Resource

 

image

A common requirement of users when viewing records such as contacts is to be able to see information which belongs to a parent record immediately on a child form so to eliminate the need to navigate up to the parent record. In CRM v4.0, an iframe in conjunction with an aspx page was needed in order to display such information and this would frequently be outside the capabilities of the system customiser.

With the introduction of HTML web resources in CRM2011 we can use these in conjunction with jscript to display values from fields contained in a parent record.

The header section is a nice feature in CRM2011 but it is rather limited in terms of formatting and if you are not careful, adding three or four fields vertically can quickly use up a lot of screen real estate. By using the HTML web resource, we can fit more information in a smaller amount of space.

The screenshot shows an example where we have added 3 html web resources to the header in order to give the user immediate visibility of pertinent details for a parent secretary, customer, and even other fields held on the record being viewed.

So how do we implement this? The following example will display 4 fields from a parent customer on a contact form. This can be applied to any entity which has a ‘customer’ lookup and with a little more adapting, can be used to simply show information from any parent record.

To start with, you must create 2 web resources. Firstly, take the ‘jquery1.4.1.min’ jscript web resource (available in the Microsoft CRM2011 SDK in the following folder once extracted: ..sdk\samplecode\js\restendpoint\jqueryrestdataoperations\jqueryrestdataoperations\scripts ) and add this to your solution.

Secondly, create a css web resource called ‘master.css’ which contains the following line of code (this ensures our HTML web resources blend into the form nicely):

body { font-family:Segoe UI; font-size:11px; margin:0px; background-color:F6F8FA; border:0px; }

Then, create the HTML web resource containing the following code (Note: script highlighted in yellow should be adapted to your requirements). Ensure the references to your jscript and css web resources are amended accordingly:

<HTML><HEAD><TITLE>Contact Header Company</TITLE>
<SCRIPT type=text/javascript src="../ClientGlobalContext.js.aspx"></SCRIPT>
<SCRIPT type=text/javascript src="../gap_jscript/jquery1.4.1.min.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="../gap_styles/master.css"></LINK>
<SCRIPT language=javascript>

    function retrieveCustomerInfo() {

        var customerAttribute = parent.Xrm.Page.data.entity.attributes.get("parentcustomerid");

        if (customerAttribute != null) {

            customerValue = customerAttribute.getValue();

            if (customerValue != null && customerValue[0] != null) {
                var customerType = customerValue[0].typename;
                var customerId = customerValue[0].id;

                switch (customerType) {
                    case "account":
                        {
                            return retrieveRecord(customerId, "AccountSet", retrieveCompleted, null);
                        }
                        break;
                    case "contact":
                        {
                            return retrieveRecord(customerId, "ContactSet", retrieveCompleted, null);
                        }
                        break;
                }
            }
        }
    }

    function retrieveRecord(id, odataSetName, successCallback, errorCallback) {
        var context = GetGlobalContext();
        var serverUrl = context.getServerUrl();

        var odataEndPoint = "/XRMServices/2011/OrganizationData.svc";

        if (!id) {
            alert("record id is required.");
            return;
        }

        if (!odataSetName) {
            alert("odataSetName is required.");
            return;
        }

        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            url: serverUrl + odataEndPoint + "/" + odataSetName + "(guid'" + id + "')",
            beforeSend: function (XMLHttpRequest) {
           
                XMLHttpRequest.setRequestHeader("Accept", "application/json");
            },
            success: function (data, textStatus, XmlHttpRequest) {
                if (successCallback) {
                    successCallback(data.d, textStatus, XmlHttpRequest);
                }
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {
                if (errorCallback)
                    errorCallback(XmlHttpRequest, textStatus, errorThrown);
                else
                    errorHandler(XmlHttpRequest, textStatus, errorThrown);
            }
        });
    }

    function retrieveCompleted(data, textStatus, XmlHttpRequest) {
/*Display the required fields and hide if the fields are null */
        var entity = data;
        var AddressLine1 = (entity.Address1_Line1 == null) ? "" : entity.Address1_Line1;
        var AddressLine2 = (entity.Address1_Line2 == null) ? "" : entity.Address1_Line2;
        var AddressCity = (entity.Address1_City  == null) ? "" : entity.Address1_City;
        var PostCode = (entity.Address1_PostalCode == null) ? "" : entity.Address1_PostalCode;

        if (address1_line1 != "") {
            document.getElementById("address1_line1").innerHTML = "Address 1: " + AddressLine1;
        }
        else {
            document.getElementById('address1_line1').style.visibility = 'hidden';
        }

        if (address1_line2 != "") {
            document.getElementById("address1_line2").innerHTML = "Address 2: " + AddressLine2;
        }
        else {
            document.getElementById('address1_line2').style.visibility = 'hidden';
        }

        if (address1_city != "") {
            document.getElementById("address1_city").innerHTML = "City: " + AddressCity;
        }
        else {
            document.getElementById('address1_city').style.visibility = 'hidden';
        }
              if (address1_postalcode != "") {
            document.getElementById("address1_postalcode").innerHTML = "Post Code: " + PostCode;
        }
        else {
            document.getElementById('address1_postalcode').style.visibility = 'hidden';
        }
     
    }
    </SCRIPT>

<META charset=utf-8></HEAD>
<BODY onload=retrieveCustomerInfo() contentEditable=true>
<DIV id=address1_line1></DIV>
<DIV id=address1_line2></DIV>
<DIV id=address1_city></DIV>
<DIV id=address1_postalcode></DIV></BODY></HTML>

 

A relatively straight forward use of web resources to enhance the end user experience and reduce those all important number of clicks.

 

Rob Boyers

Print | posted on Friday, June 10, 2011 10:40 PM |

Feedback

No comments posted yet.

Post Comment

Title  
Name  
Email
Url
Comment   
Please add 2 and 5 and type the answer here: