Implement Data Summarization API for Dataverse in Power Pages

In today’s AI-driven world, summarizing information has become incredibly easy. We can summarize long articles, web pages, books, and even lengthy videos within seconds using AI tools. Microsoft is gradually bringing similar AI capabilities into the Power Platform ecosystem.

One interesting feature I recently explored is the Dataverse record summarization capability in Power Pages. This allows us to generate AI-powered summaries of Dataverse records directly from a portal page. I tried this feature with one of my custom entity forms and it worked really well.

In this article, we will walk through how to enable the summarization feature in Power Pages and how it can be used in a custom HTML form using Dataverse data.

Topics

Understanding Dataverse Record Summarization

Power Pages allows external users to interact with Dataverse data through secure portal pages. Sometimes records in Dataverse contain a lot of descriptive information such as notes, appointment details, or long text fields. Reading the entire content can take time for portal users.

The Data Summarization API helps solve this problem by generating a short summary of the record using AI. Instead of reading the entire form, users can quickly understand the important information from the summarized output.

Required Site Settings in Power Pages

Before using the summarization feature, a few configurations must be completed in Power Pages. First, the Dataverse table that you plan to summarize must have the site setting for enabling the web API. If you are not aware, please refer the link here. This allows the portal page to access the record data that will be sent for summarization. Once the table permissions are configured, you need to create the required site settings in Power Pages. These site settings enable the Data Summarization API, define the fields that can be summarized, and control how the summarization request is processed. By properly configuring these settings, the portal can securely retrieve the record data and generate AI-powered summaries.

There are three important site settings that must be configured to use the summarization capability.

Enable Summarization

This setting enables the summarization capability in Power Pages.

Name: WebAPI/AI/Summarize/Enabled Value: true

Content Size Limit

This setting defines the maximum amount of content that can be sent to the summarization API.

Name: WebAPI/AI/Summarize/ContentSizeLimit Value: 100000

The content size can be configured up to 100000 characters depending on the amount of text present in the Dataverse record.

Prompt Configuration

The prompt defines how the AI should generate the summary. Developers can customize the prompt depending on the business requirement.

Name: WebAPI/AI/Summarize/Prompt Value: Summarize the following appointment details clearly.

By changing the prompt, we can control how the summary is generated and what type of response the AI should return.

Implementing Summarization in a Custom HTML Form

After configuring the required site settings, the summarization API can be used in a Power Pages page. For this demonstration, I created a custom HTML form using HTML, JavaScript, and Liquid. The form retrieves data from a Dataverse table and sends the content to the summarization API.

When the user triggers the summarization action, the content from the Dataverse record is sent to the API and the summarized response is returned to the page.

<div class="card">
  <div class="card-header">
    Appointment Form
  </div>
  <div class="card-body">
    {% if request.params.id %}
    {% assign appointment=entities['mw_appointment'][request.params.id] %}
    <form>
      <div class="row">
        <div class="col-lg-6 col-sm-12">
          <div class="mb-3">
            <label for="firstNameField" class="form-label">First Name</label>
            <input type="text" class="form-control" id="firstNameField" value="{{appointment.mw_firstname}}"
              disabled>
          </div>
        </div>
        <div class="col-lg-6 col-sm-12">
          <div class="mb-3">
            <label for="lastNameField" class="form-label">Last Name</label>
            <input type="text" class="form-control" id="lastNameField" value="{{appointment.mw_lastname}}"
              disabled>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12">
          <div class="mb-3">
            <label for="emailAddressField" class="form-label">Email Address</label>
            <input type="text" class="form-control" id="emailAddressField" value="{{appointment.mw_emailaddress}}"
              disabled>
          </div>
        </div>
        <div class="col-lg-6 col-sm-12">
          <div class="mb-3">
            <label for="mobileNumberField" class="form-label">Mobile Number</label>
            <input type="text" class="form-control" id="mobileNumberField" value="{{appointment.mw_mobilenumber}}"
              disabled>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-sm-12">
          <div class="mb-3">
            <label for="appointmentDateField" class="form-label">Appointment Date</label>
            <input type="text" class="form-control" id="appointmentDateField"
              value="{{appointment.mw_appointment_date}}" disabled>
          </div>
        </div>
        <div class="col-lg-6 col-sm-12">
          <div class="mb-3">
            <label for="appointmentSlotField" class="form-label">Appointment Slot</label>
            <input type="text" class="form-control" id="appointmentSlotField"
              value="{{appointment.mw_appointment_slot.label}}" disabled>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 col-sm-12">
          <div class="mb-3">
            <label for="subjectField" class="form-label">Subject</label>
            <textarea class="form-control" id="subjectField" disabled>{{appointment.mw_subject}}</textarea>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12 col-sm-12">
          <div class="accordion" id="accordionSummaryExample">
            <h2 class="accordion-header" id="headingTwo">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseAccordion" aria-expanded="false" aria-controls="collapseAccordion">
                <i class="bi bi-lightning-fill"></i> AI Summary
              </button>
            </h2>
            <div id="collapseAccordion" class="accordion-collapse collapse" aria-labelledby="headingTwo"
              data-bs-parent="#accordionSummaryExample">
              <div class="accordion-body" id="summaryText" aria-live="polite"></div>
            </div>
          </div>
        </div>
      </div>

      <script>
        (function () {
          const collapseEl = document.getElementById('collapseAccordion');
          const content = document.getElementById('summaryText');

          collapseEl.addEventListener('show.bs.collapse', function () {

            content.innerHTML = `
  <div class="d-flex align-items-center gap-2">
    <div class="spinner-border text-primary" role="status" aria-hidden="true" style="width: 1.5rem; height: 1.5rem;"></div>
    <span>Loading summary…</span>
  </div>`;

            // Get id from query string
            const id = new URL(window.location.href).searchParams.get("id");
            if (!id) {
              content.innerHTML = `
    <div class="text-danger">Unable to load summary: missing appointment id.</div>`;
              return;
            }

            // Make the API call
            shell.ajaxSafePost({
              type: "POST",
              url: "/_api/summarization/data/v1.0/mw_appointments(" + encodeURIComponent(id) + ")?$select=mw_firstname,mw_lastname,mw_emailaddress,mw_mobilenumber,mw_appointment_date,mw_appointment_slot,mw_subject,mw_appointment_status",
              data: JSON.stringify({
                "InstructionIdentifier": "Summarization/prompt/appointment_summary"
              }),
              contentType: "application/json; charset=utf-8"
            })
              .done(function (response) {
                const summary = response && (response.Summary || response.summary || "").trim();
                if (summary) {
                  content.textContent = summary;
                  alreadyLoaded = true;
                } else {
                  content.innerHTML = `<div class="text-muted">No summary available for this appointment.</div>`;
                }
              })
              .fail(function (xhr, status, err) {
                console.error("Failed to load summary:", status, err);
                content.innerHTML = `<div class="text-danger">We ran into an issue loading the summary. Please try again.</div>`;
              });
          });
        })();
      </script>
      {% endif %}
  </div>
  <div class="card-footer">
    <button class="btn btn-danger" disabled>Close</button>
  </div>
</div>

Example Using Appointment Table

For this example, I used the Appointment table from Dataverse. The form retrieves appointment details such as descriptions or notes entered by users. Instead of displaying the full text content, the summarization API generates a short and meaningful summary.

This approach helps portal users quickly understand the important information from the record without reading the entire description.

Conclusion

This feature is especially useful when working with records that contain large amounts of text, helping users quickly understand key information. As AI capabilities continue to evolve within the Power Platform, features like this will make Power Pages portals more intelligent and user friendly.

References

• Data summarization API overview (preview) | Microsoft Learn
• Introducing the Power Pages Data Summarization API — Microsoft Power Platform Blog
• Add Copilot summarization to case page (Preview) | Microsoft Learn

Have a great day!

Originally published at https://www.tamilarasu.blog on March 15, 2026.