Power Pages — Create Custom Button to Update Data via Web AP

Power Pages Tutorial — Create a Custom Button to Update Data via Web API

In this tutorial, you’ll learn how to create a custom button in Microsoft Power Pages (formerly Power Apps Portals) that updates data in Microsoft Dataverse using the Web API.

This step-by-step guide will help you securely perform server-side updates (PATCH calls) from your portal form with proper token-based authentication.
We’ll take the Sales Order form as an example and build a “Submit to BC” button that changes the order’s status when clicked.

Objective

After completing this tutorial, you’ll be able to:

• Add custom action buttons to Power Pages.

• Safely call Dataverse Web API using JavaScript.

• Use the PortalWebapiJS Web Template to manage authentication.

• Configure and enable entity-level Web API permissions.

• Test the complete integration end-to-end.

Step 1: Create a Custom Button in the Power Pages Form

1. Open your desired form (e.g., “Edit Sales Order”).

2. Click + Add → HTML text in the form layout.

3. Paste this code inside:

<a href="#" 

   id="submitToBCBtn" 

   class="btn btn-primary" 

   style="font-size:13px; padding:4px 10px;">

   Submit to BC

</a>

This creates a visually styled Bootstrap button that users will click to trigger the update.

Step 2: Edit Page Code in VS Code (Online Editor)

• In Power Pages Studio, click Edit Code (top-right) and approve VS Code access.

• Open the file: web-pages/Edit Sales Order.en-US.webpage.copy.html

• This file defines the HTML and script for your Sales Order form.

Step 3: Include PortalWebapiJS and Add JavaScript

At the very top of your HTML file, include the PortalWebapiJS template:

{% include 'PortalWebapiJS' %}

Then add the following script:
<script>
$(document).ready(function() {
  debugger;

  // Fetch orderrecordid from query string
  const urlParams = new URLSearchParams(window.location.search);
  let orderrecordid = urlParams.get("id");

  // If not in URL, fallback to hidden field
  if (!orderrecordid) {
    var recordIdInput = $("input[name='EntityFormControl_EntityId']").val();
    if (recordIdInput) {
      orderrecordid = recordIdInput.replace(/[{}]/g, "");
    }
  }

  // Button click event
  $("#submitToBCBtn").on("click", function() {
    if (orderrecordid) {
      submitordertoBC(orderrecordid);
    } else {
      alert("Order record ID is missing!");
    }
  });
});

function submitordertoBC(orderrecordid) {
  webapi.safeAjax({
    type: "PATCH",
    url: "/_api/salesorders(" + orderrecordid + ")", // GUID of the sales order
    contentType: "application/json",
    data: JSON.stringify({
      "statecode": 1 // Example: mark order as “Pending”
    }),
    success: function() {
      alert("Sales order updated to Business Central");
      window.location.href = "/forums"; // Redirect after success
    },
    error: function(err) {
      alert("Failed to update sales order");
      console.error(err);
    }
  });
}
</script>

What it does:
Fetches record ID from the page.
Sends a PATCH request to update the Dataverse Sales Order record.
Alerts success/failure and redirects afterward

Step 4: Create Web Template — PortalWebapiJS
Go to Portal Management App → Web Templates → + New
Name: PortalWebapiJS
Website: your Power Pages site
Source: paste this code
<script>
(function(webapi, $){
  function safeAjax(ajaxOptions) {
    var deferredAjax = $.Deferred();

    shell.getTokenDeferred().done(function (token) {
      // Add CSRF (anti-forgery) header
      if (!ajaxOptions.headers) {
        $.extend(ajaxOptions, {
          headers: { "__RequestVerificationToken": token }
        });
      } else {
        ajaxOptions.headers["__RequestVerificationToken"] = token;
      }

      $.ajax(ajaxOptions)
        .done(function(data, textStatus, jqXHR) {
          validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
        })
        .fail(deferredAjax.reject);
    })
    .fail(function() {
      deferredAjax.rejectWith(this, arguments);
    });

    return deferredAjax.promise();
  }

  webapi.safeAjax = safeAjax;
})(window.webapi = window.webapi || {}, jQuery)
</script>

Purpose:
Handles authentication using the portal’s anti-forgery token.
Protect your PATCH, POST, and DELETE requests.

Step 5: Configure Site Settings for Web API Access
Go to Portal Management → Site Settings and create entries:



Name
                Value




Webapi/salesorder/enabled
                        true


Webapi/salesorder/fields
                        statecode



You can add multiple entities (like invoice, contact, etc.)

This enables secure access to update Sales Order data via Web API.

Step 6: Sync and Publish the Site
Save all your code changes in VS Code.
Click Sync to push changes to Power Pages.
In Power Pages Studio → Publish Site.
After publishing, open the Sales Order page.

Step 7: Test the Functionality
Open your Sales Order form in the portal.
Click the Submit to BC button.
Open the browser console and observe:
A PATCH request to /api/data/v9.2/salesorders(<GUID>)
Status 204 No Content indicates success.
You’ll see an alert confirming the order update.

You’ll get an alert → “Sales order updated to Business Central”.

✅ That means your patch was successful!

Summary

In this tutorial, you learned how to:
Add a custom button to a Power Pages form.
Use JavaScript (jQuery) to perform Dataverse Web API updates.
Implement a PortalWebapiJS helper for token-based authentication.
Configure site settings for secure entity access.
Test and publish your live update action

Final Thoughts
With this setup, you can extend your portal to handle dynamic data updates directly from the front end — without exposing sensitive logic.

You can reuse the same pattern to:
Approve/Reject records
Integrate Business Central or CRM workflows
Trigger Power Automate flows
This is a scalable, secure way to modernize your Power Pages!

Thank you
Dharmendra Chavda