HTML Table is not rendering

Customer Engagement
1

Hi Experts,

I am trying to get case records and show it in a dialogue in HTML table format.
I created a button in Case form and when user clicked on the button it should display a table with records.
But it is not rendering correctly.

image
image577×550 18.2 KB

Please check the image this how I am getting dialogue instead of HTML table I am getting HTML code for creating table as it is.

Below is the code I am using in webresource, which is attached to the button.

function showCasePopup(executionContext) {
    debugger;
    var formContext;

    if (executionContext) {
        formContext = executionContext.getFormContext(); // Normal form event
    } else if (typeof Xrm !== "undefined" && Xrm.Page) {
        formContext = Xrm.Page; // Legacy support for older versions
    } else {
        console.error("Execution context is undefined. Ensure the function is triggered correctly.");
        return;
    }

    var caseId = formContext.data.entity.getId();
    if (!caseId) {
        Xrm.Navigation.openAlertDialog({ text: "No case record found!" });
        return;
    }

    caseId = caseId.replace("{", "").replace("}", ""); // Clean GUID

    // Fetch Case Details using Web API
    Xrm.WebApi.retrieveRecord("incident", caseId, "?$select=title,caseorigincode,prioritycode,statecode,statuscode").then(
        function (result) {
            var htmlContent = `
                <table border='1' style='width:100%; border-collapse: collapse;'>
                    <tr><th>Field</th><th>Value</th></tr>
                    <tr><td>Title</td><td>${result["title"]}</td></tr>
                    <tr><td>Origin</td><td>${result["caseorigincode"]}</td></tr>
                    <tr><td>Priority</td><td>${result["prioritycode"]}</td></tr>
                    <tr><td>State</td><td>${result["statecode"]}</td></tr>
                    <tr><td>Status</td><td>${result["statuscode"]}</td></tr>
                </table>
            `;

            Xrm.Navigation.openAlertDialog({ text: htmlContent, title: "Case Details" }, { height: 300, width: 400 });
        },
        function (error) {
            console.log("Error fetching case details: " + error.message);
        }
    );
}

Please guide me.
Thank you in Advance.