How To Use HTML Webresource In Dynamics CRM

Introduction

In some cases, we must create custom HTML to display data from Dynamics CRM based on the needs of the customer. In the use case below, a separate tab was presented on the demo form to show selected entity account details.

Step 1
Login to the required Powerapps environment using URL make.powerapps.com by providing the user name and password and click on Solution on the left-hand side and after chose the required solution as shown in the below figure.

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

Update the bellow code into “Test HTML” webresource.

<html>
<head>
<script src=”ClientGlobalContext.js.aspx” type=”text/javascript”></script>
<script type=”text/javascript”>
function onLoad() {
var testLookup = parent.Xrm.Page.data.entity.getId().replace(“{“, “”).replace(“}”, “”);;
Xrm.WebApi.retrieveRecord(“crmdemo_ajay”, testLookup, “?$select=crmdemo_account&$expand=crmdemo_testslookup($select=schemaname)”).then(
function success(result) {
console.log(“Retrieved values :” + result[“crmdemo_account”]);
document.getElementById(“value”).innerHTML = “Retrieved values :” + result[“crmdemo_account”];
},
function (error) {
console.log(error.message);
}
);
}
</script>
<meta>
<meta>
</head>
<body onload=”onLoad()” onfocusout=”parent.setEmailRange();” style=”overflow-wrap: break-word;”>
This is a Html Web resource<br>
<p id=”value”></p>

</body>
</html>

Step 3
After Step 2, go to the entity and select which form you want and create a tab and section and in that add this Webresource save it and publish it as shown in the below figure

Step 4
After Step 3, open any record and select Demo Html Tab and observe Selected related field information displayed under tab as shown in the below figure.