{"id":1221,"date":"2013-12-30T15:05:21","date_gmt":"2013-12-30T15:05:21","guid":{"rendered":"http:\/\/mahenderpal.wordpress.com\/?p=1221"},"modified":"2015-12-28T13:23:52","modified_gmt":"2015-12-28T13:23:52","slug":"step-by-step-creating-quick-entity-view-in-ms-crm-2011","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=1221","title":{"rendered":"Step by Step creating Quick Entity View in MS CRM 2011"},"content":{"rendered":"<p>During one of our projects we got a requirement to show related entity fields, based on the lookup selection, just like the Quick Entity View feature that we have in Microsoft CRM 2013, so I thought of replicating that for Microsoft CRM 2011. In this article I am sharing code and how to do that so that it can help someone with similar requirements.<\/p>\n<p>Let\u2019s say we want to show contact fields in an account entity form based on the primary lookup selection. To implement this requirement we can use a HTML web resource and use the rest of the endpoints to get contact data based on the contact id selected. So mainly we have the following three steps:<\/p>\n<ul>\n<li>Create HTML web resource to get data from child entity and create a html table on the fly.<\/li>\n<li>Add HTML web resource in the parent entity form.<\/li>\n<li>Create an onchange handler to refresh a HTML web resource when the lookup value is changed.<\/li>\n<\/ul>\n<p>So let\u2019s create a HTML web resource and name it \u201c\/ContactQuickView.html\u201d as in the following.<\/p>\n<p><a href=\"http:\/\/mahenderpal.files.wordpress.com\/2013\/12\/htmlwebresource.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1222 aligncenter\" src=\"http:\/\/mahenderpal.files.wordpress.com\/2013\/12\/htmlwebresource.png\" alt=\"htmlwebresource\" width=\"500\" height=\"322\" \/><\/a><\/p>\n<p>Click on Text Editor and paste below code:-<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\"> \r\n&lt;html lang = &quot;en-us&quot; &gt; &lt; head &gt;\r\n    &lt;title&gt; Contact Quick View &lt;\/title&gt; &lt; style type = &quot;text\/css&quot; &gt;\r\n    body {\r\n        font - family: segoe ui;\r\n        background - color: #F6F8FA;\r\n    }\r\ntable {\r\n    border - spacing: 8 px;\r\n    width = &quot;100%&quot;;\r\n}\r\ntd {\r\n    width: 130 px;\r\n    background - color: #F6F8FA;\r\n    font - size: 13 px;\r\n} &lt; \/style&gt; &lt; script src = &quot;..\/ClientGlobalContext.js.aspx&quot; &gt; &lt; \/script&gt; &lt; script type = &quot;text\/javascript&quot; &gt;\r\n    \/\/check if document is loaded or not\r\n    document.onreadystatechange = function() {\r\n        if (document.readyState == &quot;complete&quot;) {\r\n            parseEntityID();\r\n        }\r\n    }\r\n\r\nfunction parseEntityID() {\r\n    var queryParam = GetGlobalContext().getQueryStringParameters().data;\r\n    var fields = queryParam.split(&quot;,&quot;);\r\n    var TabName = fields[1];\r\n    var SectionName = fields[2];\r\n    if ((window.parent.Xrm.Page.data.entity.attributes.get(fields[0]) != null) &amp; amp; &amp; amp;\r\n        (window.parent.Xrm.Page.data.entity.attributes.get(fields[0]).getValue() != null)) {\r\n        var ContactID = window.parent.Xrm.Page.data.entity.attributes.get(fields[0]).getValue()[0].id;\r\n        \/\/change tab and section name here\r\n        window.parent.Xrm.Page.ui.tabs.get(TabName).sections.get(SectionName).setVisible(true);\r\n        RetrieveContactRecord(ContactID);\r\n    } else {\r\n        window.parent.Xrm.Page.ui.tabs.get(TabName).sections.get(SectionName).setVisible(false);\r\n    }\r\n}\r\n\/\/Read contact information\r\nfunction RetrieveContactRecord(id) {\r\n    var ServerURL = window.parent.Xrm.Page.context.getServerUrl();\r\n    var ServiceURL = ServerURL + &quot;\/xrmservices\/2011\/organizationdata.svc&quot;;\r\n    var req = new XMLHttpRequest();\r\n    req.open(&quot;GET&quot;, ServiceURL + &quot;\/Contact&quot; + &quot;Set(guid'&quot; + id + &quot;')&quot;, true);\r\n    req.setRequestHeader(&quot;Accept&quot;, &quot;application\/json&quot;);\r\n    req.setRequestHeader(&quot;Content-Type&quot;, &quot;application\/json; charset=utf-8&quot;);\r\n    req.onreadystatechange = function() {\r\n        if (this.readyState == 4 \/* complete *\/ ) {\r\n            if (this.status == 200) {\r\n                successCallback(JSON.parse(this.responseText).d);\r\n            } else {\r\n                alert('Error while reading contact information');\r\n            }\r\n        }\r\n    };\r\n    req.send();\r\n}\r\n\/\/Added for cross browser support.\r\nfunction setText(element, text) {\r\n    if (typeof element.innerText != &quot;undefined&quot;) {\r\n        element.innerText = text;\r\n    } else {\r\n        element.textContent = text;\r\n    }\r\n}\r\n\/\/Generate html table to show records\r\nfunction successCallback(ResultSet) {\r\n    \/\/store lables\r\n    var lbs = new Array();\r\n    lbs[0] = &quot;Business Phone&quot;;\r\n    lbs[1] = &quot;Email&quot;;\r\n    lbs[2] = &quot;City&quot;;\r\n    lbs[3] = &quot;ZIP\/Postal Code&quot;;\r\n    lbs[4] = &quot;State\/Province&quot;;\r\n    lbs[5] = &quot;Country\/Region&quot;;\r\n\r\n    \/\/store values\r\n    var vals = new Array();\r\n    vals[0] = (ResultSet.Telephone1 != null) ? ResultSet.Telephone1 : &quot; &quot;;\r\n    vals[1] = (ResultSet.EMailAddress1 != null) ? ResultSet.EMailAddress1 : &quot; &quot;;\r\n    vals[2] = (ResultSet.Address1_City != null) ? ResultSet.Address1_City : &quot; &quot;;\r\n    vals[3] = (ResultSet.Address1_PostalCode != null) ? ResultSet.Address1_PostalCode : &quot; &quot;;\r\n    vals[4] = (ResultSet.Address1_StateOrProvince != null) ? ResultSet.Address1_StateOrProvince : &quot; &quot;;\r\n    vals[5] = (ResultSet.Address1_Country != null) ? ResultSet.Address1_Country : &quot; &quot;;\r\n\r\n    \/\/Create a table and header using the DOM\r\n    var oTable = document.createElement(&quot;table&quot;);\r\n    var oTBody = document.createElement(&quot;tbody&quot;);\r\n\r\n    for (var i = 0; i &lt; 6; i++) {\r\n        var oTRow = document.createElement(&quot;tr&quot;);\r\n        var oTRowBlank = document.createElement(&quot;td&quot;);\r\n        var oTRowTDBlank1 = document.createElement(&quot;td&quot;);\r\n        var oTRowTDBlank2 = document.createElement(&quot;td&quot;);\r\n        j = i;\r\n        var oTRowTD1 = document.createElement(&quot;td&quot;);\r\n        oTRowTD1.style.color = '003DB2';\r\n        setText(oTRowTD1, lbs[i]);\r\n        var oTRowTD2 = document.createElement(&quot;td&quot;);\r\n        setText(oTRowTD2, vals[j]);\r\n        oTRow.appendChild(oTRowTD1);\r\n        oTRow.appendChild(oTRowTD2);\r\n        oTRow.appendChild(oTRowBlank);\r\n        oTRow.appendChild(oTRowTDBlank2);\r\n\r\n        if (i + 1 &lt; lbs.length) {\r\n            var oTRowTD3 = document.createElement(&quot;td&quot;);\r\n            oTRowTD3.style.color = '003DB2';\r\n            setText(oTRowTD3, lbs[i + 1]);\r\n            var oTRowTD4 = document.createElement(&quot;td&quot;);\r\n            setText(oTRowTD4, vals[j + 1]);\r\n            oTRow.appendChild(oTRowTD3);\r\n            oTRow.appendChild(oTRowTD4);\r\n            oTRow.appendChild(oTRowTDBlank1);\r\n        }\r\n        i++;\r\n        oTBody.appendChild(oTRow);\r\n    }\r\n    oTable.appendChild(oTBody);\r\n    document.body.appendChild(oTable);\r\n} &lt; \/script&gt; &lt; meta charset = &quot;utf-8&quot; &gt; &lt; \/head&gt;&lt;body&gt; &lt; \/body&gt;&lt;\/html &gt;\r\n<\/pre>\n<p><strong>Note<\/strong>: Please make sure to change quotations sign if you are copying code.<\/p>\n<p>Now we have html web resource ready, place it under the parent entity form, while placing web resource we need to pass three parameters:<\/p>\n<ul>\n<li>Name of the lookup field for child entity.<\/li>\n<li>Name of the tab and section where we have placed web resource like below<\/li>\n<\/ul>\n<p><a href=\"http:\/\/mahenderpal.files.wordpress.com\/2013\/12\/htmlwebresourceparameter1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1224 aligncenter\" src=\"http:\/\/mahenderpal.files.wordpress.com\/2013\/12\/htmlwebresourceparameter1.png\" alt=\"htmlwebresourceparameter\" width=\"437\" height=\"425\" \/><\/a><\/p>\n<p>Now we need to create a JS webresource and need to use below code. We have to call this function on primary contact\u00a0 lookup field onchange on account entity form\u00a0to refresh web resource once value will be changed.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\"> \r\nfunction reloadTerrtoryQuickView()\r\n\r\n{ var wrControl = Xrm.Page.ui.controls.get(&quot;WebResource_TerritoryQuickView&quot;);\r\n\r\nwrControl.setSrc(wrControl.getSrc()); }\r\n<\/pre>\n<p>And once we will open account form it will show related information based on the primary contact selected like below<\/p>\n<p><a href=\"http:\/\/mahenderpal.files.wordpress.com\/2013\/12\/contactviewimage.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1225 aligncenter\" src=\"http:\/\/mahenderpal.files.wordpress.com\/2013\/12\/contactviewimage.png\" alt=\"contactviewImage\" width=\"500\" height=\"59\" \/><\/a>Enjoy !!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>During one of our projects we got a requirement to show related entity fields, based on the lookup selection, just like the Quick Entity View feature that we have in Microsoft CRM 2013, so I thought of replicating that for Microsoft CRM 2011. In this article I am sharing code and how to do that so that it can help&#8230; <a href=\"https:\/\/himbap.com\/blog\/?p=1221\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,19],"tags":[88,107,293,295,294],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1221"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1221"}],"version-history":[{"count":4,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1221\/revisions"}],"predecessor-version":[{"id":2011,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1221\/revisions\/2011"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}