Working With HTML Webresource In Dynamics CRM

Article

Introduction

During certain scenarios, we must build a custom HTML to show data from Dynamics CRM as per customer requirements. As an example, a separate tab was shown on contact form to show selected contact’s Account Address details in the below use case.

Step 1

Login to the required environment and select the required solution [Contact Customizations Solution in this case] as shown in the below figure.

Html Webresource in Dynamics CRM

Figure 1

Step 2

After Step 1, create a Webresource of type HTML and upload an empty HTML as shown in the below figure.

Html Webresource in Dynamics CRM

Figure 2

Step 3

After Step 2, open HTML and write the below code

<html>
<head>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script type="text/javascript">
function onLoad() {
    var contactGUID = parent.Xrm.Page.data.entity.getId().replace("{","").replace("}","");;
             Xrm.WebApi.retrieveRecord("contact", contactGUID, "?$select=fullname&$expand=account_primary_contact($select=address1_line1)").then(
            function success(result) {
                console.log("Retrieved values of Account :  Address: " + result.account_primary_contact[0].address1_line1);
                                                document.getElementById("contactpara").innerHTML = "Retrieved values of Account :  Address: "+result.account_primary_contact[0].address1_line1;
                // perform operations on record retrieval
            },
            function (error) {
                console.log(error.message);
                // handle error conditions
            }
        );
}
</script>
</head>
<body onload="onLoad()">
This is a Html Web resource<br>
<p id="contactpara"></p>
</body>
</html>

as shown in the below figure.

Html Webresource in Dynamics CRM

Figure 3

Step 4

After Step 3, go to the contact form and create a tab and section and in that add this Webresource save it and publish it as shown in the below figure

Html Webresource in Dynamics CRM

Figure 4

Step 5

After Step 4, open any contact record and select Custom Html Tab and observe Selected contact related Account Address information displayed in contact record as shown in the below figure.

Html Webresource in Dynamics CRM

Figure 5

Note:

Make sure to publish all customizations and upload HTML file.
Make sure to include ClientGlobalContext.js.aspx script otherwise you get an issue with parent.xrm object in code.

Conclusion

In this way, one can easily use HTML as a Webresource to show contact related information in custom way other than using Forms.