Steps to Embed a HTML Page in a Model-Driven App Form

 Step 1: Upload the HTML file as a Web Resource

Open your solution, then click on + New and select Web Resource.

Add your HTML code.

Set the File Type to 'Webpage (HTML)', provide a Name and Display Name, then click Save.


HTML CODE:

<!DOCTYPE html>

<html>

<head>

    <title>Account Info</title>

    <meta charset="utf-8" />

    <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>

    <style>

        body {

            font-family: "Segoe UI", sans-serif;

            padding: 20px;

        }

    </style>

</head>

<body>

    <h2>Account Information</h2>

    <p>

<strong>Record Id:</strong> <span id="id">Loading...</span><br/>

<strong>Entity Name:</strong> <span id="entityName"></span><br />

            <strong>Org Name:</strong> <span id="orgName"></span><br/>

<strong>Account Name:</strong> <span id="accountName"></span></p>


    <script>

        function getQueryParam(param) {

            const urlParams = new URLSearchParams(window.location.search);

            return urlParams.get(param);

        }


        async function loadAccountInfo() {

            const id = getQueryParam("id");

            const typename = getQueryParam("typename");

            const orgName = getQueryParam("orgname");


            if (!id || !typename) {

                document.getElementById("accountName").textContent = "Missing parameters.";

 document.getElementById("entityName").textContent ="Missing parameters." ;

 document.getElementById("id").textContent = "New Form";

                return;

            }

 document.getElementById("id").textContent = id || "New Form";

 document.getElementById("entityName").textContent =typename  || "Missing parameters." ;

 document.getElementById("orgName").textContent =orgName || "Missing parameters.";

            try {

                const result = await Xrm.WebApi.retrieveRecord(typename, id);

                console.log(result);

                document.getElementById("accountName").textContent = result.name || "Not found";

            } catch (error) {

                console.error("Error fetching account:", error);

                document.getElementById("accountName").textContent = "Error loading data.";

            }

        }


        // Run when page loads

        window.onload = loadAccountInfo;

    </script>

</body>

</html>

Step 2: Add the HTML web page in form

Open the Account table, then click on 'Forms'.

Click on the Main form to open it.

Add a new one-column tab to the form.

Click on 'New Section'.

From the components section, select 'HTML Web Resource', search for your web resource, and add it to the page.

After adding the web resource, the form will look like the image below.
Click 'Save' and then 'Publish' the form.


Step 3: Play the Model Driven app

Click on any record

then click the new tab added to the form. there you can see we are able to show the data in HTML page


Thats it we added our first html page to model driven app

Scenarios you can use HTML web page

1. Custom Read-Only UI / Visualization

You can create a rich, styled layout that visually summarizes record data, like:

  • A business card view

  • A styled profile panel

  • KPI tiles or summary boxes

Example:

Show account name, status, total revenue with icons and colors in a beautiful format.

2. Interactive Widgets

Use HTML + JavaScript to create dynamic components not available natively.

Example:

  • Signature pad

  • Star rating control

  • Toggle buttons

  • Color picker

These interact with Dataverse fields using Xrm.WebApi.

3. Embedded External Content

Show content from external systems or APIs (secured via authentication).

Example:

  • Embed a dashboard from Power BI or another BI tool

  • Display a user profile from an HR system

  • Load images or documents from Azure Blob, AWS, etc.

4. Form-Based Mini Apps

You can embed full mini-apps inside a form using HTML + JavaScript.

Example:

A task planner, checklist, timeline, or calendar component scoped to the current record.

These can update data back to Dataverse using API calls.

5. Conditional Logic or UI Enhancements

HTML gives you control to show/hide, animate, or format fields conditionally in ways Power Apps UI can't do easily.

Example:

Show a warning message or custom banner if a record meets certain criteria (e.g., account balance too low, overdue status).

You can even change layout or style dynamically using JavaScript.

Technologies You Can Combine

  • HTML + CSS for layout and style

  • JavaScript for logic

  • Xrm.WebApi for reading/writing Dataverse data

  • ClientGlobalContext.js.aspx to access Xrm from HTML

  • FetchXML (optionally via Xrm.WebApi.retrieveMultipleRecords())

Comments

Post a Comment

Popular posts from this blog

Step-by-Step Guide: Power Automate Custom Connector Using Graph API from Azure App Service

Image
Step 1: Open Power Automate, navigate to the Custom Connectors tab, and select Create from blank as shown in the image below. custom connector(click image for better resolution) Step 2: In the General tab, upload an icon (less than 1MB), add a description, select the correct scheme (in my case, HTTPS ), and provide the host name. For example, if your API URL is https://graph.microsoft.com/v1.0/users/{email} , the host name will be the highlighted part — graph.microsoft.com . Step 3: Go to the Security tab. Here, you need to select the authentication method. Choose OAuth 2.0 as the authentication type, as shown in the image below. Step 4: Select the Identity Provider as Azure Active Directory . Check the box Enable Service Principal Support . This option allows you to create a connection using a Client ID and Client Secret instead of using the user's own authentication. Next, provide the Client ID , Client Secret , Tenant ID , and other required details as shown in t...
Read more

Step-by-Step: Give Unique Permissions to OneDrive Files Using Power Automate and Graph API (No Premium License Needed)

Image
We are uploading files through Power Apps using the Attachment control. In the backend, a Power Automate flow uploads these files to OneDrive and assigns unique permissions . Since Power Automate does not have a built-in connector to directly assign unique permissions in OneDrive, we are handling this through the Microsoft Graph API (without using a custom connector). Step 1: Create a Blank Power Apps Application Open Power Apps Studio. Select New app > Start with a page design as shown below. Step 2 :  select Blank Canvas  Step 3: Add an Attachment Control In Power Apps, the Attachment control is not available directly from the standard controls list. To get the Attachment control: Add an Edit Form to your app. Connect the form to a SharePoint list . Once connected, the form will automatically include the Attachments field. You can then use this Attachment control to upload files. Step 4: Keep Only the Attachment Control Since we only need th...
Read more

Unleashing Power Apps with Your Local MSSQL Data

Image
  Step 1: Install LocalDB Before proceeding, make sure LocalDB is installed on your computer. You can refer to the installation guide using this link . Step 2: Install SQL Server Management Studio (SSMS) Download and install SSMS by following this link . Step 3: Open SSMS Launch SQL Server Management Studio . You will see a window like the one shown below. Then, click on Connect . Step 4: Create a Database and Tables After connecting to the server, create a new database and the required tables as shown in the image below. To create a database: Right-click on Databases in the Object Explorer Select New Database Provide a name and click OK To create a table: Expand your newly created database Right-click on Tables Select New Table , then define your columns and data types Step 5: Install the On-Premises Data Gateway To connect your local database with cloud services like Power BI or Power Apps, you need to install the On-Premises Data Gateway . 👉 Click on this lin...
Read more