Show Dynamics 365 Account Contacts in Side Panel HTML Table

Create a JavaScript webresource

Create a JavaScript webresource with the below Code.

var APY = APY || { namespace: true };
APY.Account = APY.Account || { namespace: true };
APY.Account.LoadPromotions = function (executionContext) {
    "use strict";
    try {
        var formContext = executionContext.getFormContext();
        var qs = "accountid=" + formContext.data.entity.getId().replace('{', '').replace('}', '');
        Xrm.App.sidePanes.createPane({
            title: "Contacts",
            paneId: "ContactList",
            canClose: true
        }).then((pane) => {
            pane.navigate({
                pageType: "webresource",
                webresourceName: "cr235_SidePane.html",
                data: encodeURIComponent(qs)
            });
        });
    }
    catch (e) {
        APY.Common.ShowAlertDialog("Ok", e.message + "An error occured. Please contact your System Administrator", "Error Dialog");
    }
};

Create an Html web resource

Create an Html web resource with the below code.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>
    <script>
        var Xrm = null;

        function loadContacts() {
            debugger;
            Xrm = parent.Xrm;
            var serverURL = Xrm.Page.context.getClientUrl();
            var id = Xrm.Page.data.entity.getId();
            var fetchXml = "<fetch mapping='logical' output-format='xml-platform' version='1.0' distinct='false'>" +
                "  <entity name='contact'>" +
                "    <attribute name='fullname' />" +
                "    <attribute name='firstname' />" +
                "    <attribute name='lastname' />" +
                "    <order descending='false' attribute='fullname' />" +
                "    <filter type='and'>" +
                "      <condition value='" + id + "' attribute='parentcustomerid' uitype='account' uiname='Test' operator='eq' />" +
                "    </filter>" +
                "  </entity>" +
                "</fetch>";

            var encodedFetchXML = encodeURIComponent(fetchXml);
            var req = new XMLHttpRequest();
            req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v9.1/contacts?fetchXml=" + encodedFetchXML, false);
            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) {
                    req.onreadystatechange = null;
                    if (this.status === 200) {
                        var results = JSON.parse(this.response).value;
                        debugger;
                        if (results.length > 0) {
                            for (let i = 0; i < results.length; i++) {
                                var html = "<tr><td><p onclick='productClicked(" + results[i].firstname + ");' style='cursor: pointer;text-decoration: underline;color: blue;'>" + results[i].lastname + "</p></td><td>" + results[i].fullname + "</td></tr>";
                                $("#contactsLists").append(html);
                            }
                        } else {
                            Xrm.Utility.alertDialog(this.statusText);
                        }
                    }
                }
            };
            req.send();
        }

        function productClicked(ProductNumber) {
            console.log(ProductNumber);
        }
    </script>
    <meta charset="utf-8">
</head>
<body onload="loadContacts()" onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;">
    <table>
        <thead>
            <tr>
                <th>Contact</th>
                <th>Information</th>
            </tr>
            <tr>
            </tr>
        </thead>
        <tbody id="contactsLists">
        </tbody>
        <tbody>
        </tbody>
    </table>
</body>
</html>