Skip to main content

Notifications

Announcements

No record found.

Microsoft Dynamics CRM (Archived)

How to show related data in dynamic table of html web resource

Posted on by 95

Hi Everyone,

                  I want to show Primary Contact Details in Html web resource when Primary Contact Look up id (primarycontactid) on Account Form.

For this I have Created Web resource to display the Related Data and i used WebApi to get related Contact Data

And Dynamically created Table to display fetched Data.

But My Web resource did't showing any data while selecting primary Contact.

This is My Code...

<html><head>
<title>Contact Quick View</title>
<style type="text/css">
body {
font - family: segoe ui;
background - color: #F6F8FA;
}
table {
border - spacing: 8 px;
width = "100%";
}
td {
width: 130 px;
background - color: #F6F8FA;
font - size: 13 px;
}
</style>

<script src="../ClientGlobalContext.js.aspx">
</script>
<script type="text/javascript">
//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) & amp; & amp;
(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;
window.parent.Xrm.Page.ui.tabs.get(general).sections.get(contactview).setVisible(true);
RetrieveContactRecord(ContactID);
} else
{
window.parent.Xrm.Page.ui.tabs.get(general).sections.get(contactview).setVisible(false);
}
}
//Read contact information
function RetrieveContactRecord(id) {
var req = new XMLHttpRequest();
req.open("GET", window.parent.Xrm.Page.context.getClientUrl() + "/api/data/v8.2/contacts(" + id + ", true);

req.setRequestHeader("OData-MaxVersion", "4.0");
req.setRequestHeader("OData-Version", "4.0");

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

req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
req.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
successCallback(JSON.parse(this.response));
} 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>
<meta charset="utf-8"><meta charset="utf-8"><meta charset="utf-8"></head>
<body style="word-wrap: break-word;">

<br></body></html>

------------------------------------------

In web Resource I passed three parameters (primarycontactid,general,contactview)

*This post is locked for comments

  • VermaNitin Profile Picture
    VermaNitin 455 on at
    RE: How to show related data in dynamic table of html web resource

    Hi,

    Ok, so in order to show the details of the Primary Contact on a custom HTML you need to follow the below steps.

    1. For better performance segregate the HTML and script parts in two separate files.
    2. Register event handler on form load and on change of primary contact of account.
    3. Check if the primary contact contains data, show/hide the grid based on that.
    4. There are some modifications needed in your code. Please refer the below code

    function parseEntityID() {
    if (window.parent.Xrm.Page.data.entity.attributes.get("primarycontactid").getValue()[0].id != null) {
    var ContactID = window.parent.Xrm.Page.data.entity.attributes.get("primarycontactid").getValue()[0].id;
    RetrieveContactRecord(ContactID);
    } else {
    // window.parent.Xrm.Page.ui.tabs.get(general).sections.get(contactview).setVisible(false);
    }
    }
    //Read contact information
    function RetrieveContactRecord(id) {
    id = id.replace('{', '').replace('}', '');
    var contactId = '/api/data/v8.2/contacts(' + id + ')';
    var req = new XMLHttpRequest();
    req.open("GET", window.parent.Xrm.Page.context.getClientUrl() + contactId, true);
    req.setRequestHeader("OData-MaxVersion", "4.0");
    req.setRequestHeader("OData-Version", "4.0");
    req.setRequestHeader("Accept", "application/json");
    req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
    req.onreadystatechange = function () {
    if (this.readyState == 4) {
    if (this.status == 200) {
    successCallback(JSON.parse(this.response));
    } 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>

    You need to call the parseEntityID function on load of form and on change of primary contact.

    Hope it helps!

    Many thanks,

    Nitin Verma

  • Sreeekanth Profile Picture
    Sreeekanth 95 on at
    RE: How to show related data in dynamic table of html web resource

    But I want To show it in a html grid

  • VermaNitin Profile Picture
    VermaNitin 455 on at
    RE: How to show related data in dynamic table of html web resource

    HI,

    Is it mandatory to use custom HTML?

    Quick View form can be a simple and efficient replacement to your custom HTML.

    Please let me know if it helps!

    Many thanks,

    Nitin Verma

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,253 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,188 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans