How to Create a Quick Entity View in Microsoft CRM 2011

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.

Let’s 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:

Create HTML web resource to get data from a child entity and create a HTML table on the fly.
Add a HTML web resource in the parent entity form.
Create an onchange handler to refresh a HTML web resource when the lookup value is changed.

So let’s create a HTML web resource and name it “/ContactQuickView.html” as in the following.

htmlwebresource

Click on a Text Editor and paste the following code:

<head>

<title>Contact Quick View</title>

body

{

font-family: segoe ui;

background-color: #F6F8FA;

}

table

{border-spacing:8px;

width="100%";

}

td { width: 130px;

background-color: #F6F8FA;

font-size: 13px;

}

</style>

//check if document is loaded or not

document.onreadystatechange = function () {

if (document.readyState == "complete") {

parseEntityID();

}

function parseEntityID() {

var queryParam = GetGlobalContext().getQueryStringParameters().data;

var fields = queryParam.split(",");

var TabName = fields[1];

var SectionName = fields[2];

if ((window.parent.Xrm.Page.data.entity.attributes.get(fields[0]) != null) && (window.parent.Xrm.Page.data.entity.attributes.get(fields[0]).getValue() != null)) {

var ContactID = window.parent.Xrm.Page.data.entity.attributes.get(fields[0]).getValue()[0].id;

//change tab and section name here

window.parent.Xrm.Page.ui.tabs.get(TabName).sections.get(SectionName).setVisible(true);

RetrieveContactRecord(ContactID);

}

else

{ window.parent.Xrm.Page.ui.tabs.get(TabName).sections.get(SectionName).setVisible(false); }

}

//Read contact information

function RetrieveContactRecord(id) {

var ServerURL = window.parent.Xrm.Page.context.getClientUrl();

var ServiceURL = ServerURL + "/xrmservices/2011/organizationdata.svc";

var req = new XMLHttpRequest();

req.open("GET", ServiceURL + "/Contact" + "Set(guid'" + id + "')", true);

req.setRequestHeader("Accept", "application/json");

req.setRequestHeader("Content-Type", "application/json; charset=utf-8");

req.onreadystatechange = function () {

if (this.readyState == 4 /* complete */) {

if (this.status == 200) { successCallback(JSON.parse(this.responseText).d); }

else { alert('Error while reading contact information'); }

}

};

req.send();

}

//Added for cross browser support.

function setText(element, text) {

if (typeof element.innerText != "undefined") {

element.innerText = text;

}

else { element.textContent = text; }

}

//Generate html table to show records

function successCallback(ResultSet) {

//store lables

var lbs = new Array();

lbs[0] = "Business Phone";

lbs[1] = "Email";

lbs[2] = "City";

lbs[3] = "ZIP/Postal Code";

lbs[4] = "State/Province";

lbs[5] = "Country/Region";

//store values

var vals = new Array();

vals[0] = (ResultSet.Telephone1 != null) ? ResultSet.Telephone1 : " ";

vals[1] = (ResultSet.EMailAddress1 != null) ? ResultSet.EMailAddress1 : " ";

vals[2] = (ResultSet.Address1_City != null) ? ResultSet.Address1_City : " ";

vals[3] = (ResultSet.Address1_PostalCode != null) ? ResultSet.Address1_PostalCode : " ";

vals[4] = (ResultSet.Address1_StateOrProvince != null) ? ResultSet.Address1_StateOrProvince : " ";

vals[5] = (ResultSet.Address1_Country != null) ? ResultSet.Address1_Country : " ";

//Create a table and header using the DOM

var oTable = document.createElement("table");

var oTBody = document.createElement("tbody");

for (var i = 0; i < 6; i++) {

var oTRow = document.createElement("tr");

var oTRowBlank = document.createElement("td");

var oTRowTDBlank1 = document.createElement("td");

var oTRowTDBlank2 = document.createElement("td");

j = i;

var oTRowTD1 = document.createElement("td");

oTRowTD1.style.color = '003DB2';

setText(oTRowTD1, lbs[i]);

var oTRowTD2 = document.createElement("td");

setText(oTRowTD2, vals[j]);

oTRow.appendChild(oTRowTD1);

oTRow.appendChild(oTRowTD2);

oTRow.appendChild(oTRowBlank);

oTRow.appendChild(oTRowTDBlank2);

if (i + 1 < lbs.length) {

var oTRowTD3 = document.createElement("td");

oTRowTD3.style.color = '003DB2';

setText(oTRowTD3, lbs[i + 1]);

var oTRowTD4 = document.createElement("td");

setText(oTRowTD4, vals[j + 1]);

oTRow.appendChild(oTRowTD3);

oTRow.appendChild(oTRowTD4);

oTRow.appendChild(oTRowTDBlank1);

}

i++;

oTBody.appendChild(oTRow);

}

oTable.appendChild(oTBody);

document.body.appendChild(oTable);

}

</script>

</head>

<body>

</body>

</html>

Now we have a HTML web resource ready, place it under the parent entity form. While placing a web resource we need to pass the following three parameters:

Name of the lookup field for the child entity.
Name of the tab
Section where we have placed a web resource as in the following:

html web resource parameter

Now we need to create a JS webresource and use the following code. We need to call this function on the primary contact lookup field onchange on the account entity form, to refresh the web resource once the value will be changed.

function reloadTerrtoryQuickView() {

var wrControl = Xrm.Page.ui.controls.get("WebResource_TerritoryQuickView");

wrControl.setSrc(wrControl.getSrc());

}

And once we will open an account form it show the related information based on the primary contact selected as in the following: