Build dynamic HTML table and display on entity form using JavaScript and HTML web resource in Dynamics CRM 2011

I have a requirement to build dynamic HTML table and display on Account form using HTML web resource and JavaScript.

Here is my scenario; I have two entities; Account and AccountService. There is 1:N relationship between Account and AccountService. AccountService entity has name and account fields. Requirement is to get account services from AccountService entity based on account guid and display on Account form.

I have created new HTML web resource for displaying account services and added on Account form.

Here is HTML web resource code, I am using oDATA and JavaScript in HTML web resource.

 

<html>
<head>
    <title>Account Services</title>
    <script src="ls_Script_JQuery_1.7.1.min"></script>
    <script src="ClientGlobalContext.js.aspx"></script>
    <script language="javascript" type="text/javascript">
        function loadAccountServices() {
            //Get Account Guid
            var accountId = window.parent.Xrm.Page.data.entity.getId();
            //Get Account Services
            var accountServices = getAccountServices(accountId);
            if (accountServices != null && accountServices.length > 0) {
                var tableData = "";
                for (var i = 0; i < accountServices.length; i++) {
                    var service = accountServices[i].ls_name;
                    if (service != null) {
                        //dynamically add table data with Service Names
                        tableData = tableData + "<tr><td>" + service + "</td></tr>";
                    }
                }
                //Create HTML table
                var table = "<table style='font-family:Segoe UI;font-weight:normal;font-size:13px;'><tr style='height:20px'><td style='text-decoration:underline;'>Account Services</td></tr>" + tableData + "</table>";
                //show table data on the Account form
                window.document.writeln(table);
            }
        }
        //get Account Services
        function getAccountServices(accountId) {
            var serverUrl = location.protocol + "//" + location.host + "/" + Xrm.Page.context.getOrgUniqueName();
            var oDataUri = serverUrl + "/xrmservices/2011/OrganizationData.svc/ls_accountserviceSet?$select=ls_name&$filter=ls_Account/Id eq guid'" + accountId + "'";
            var accountServices = null;
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                url: oDataUri,
                async: false,
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("Accept", "application/json");
                },
                success: function (data, textStatus, XmlHttpRequest) {
                    if (data != null && data.d.results.length > 0) {
                        accountServices = data.d.results;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
            return accountServices;
        }
    </script>
</head>
<body onload="loadAccountServices();">
</body>
</html>


How it looks on Account Form:

Account Services

Advertisements

One thought on “Build dynamic HTML table and display on entity form using JavaScript and HTML web resource in Dynamics CRM 2011

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s