Power Pages Client API (Preview): Native Client-Side Library for Forms and Data

When building advanced, data‑driven sites on Power Pages, developers often encounter limitations and fragility in standard DOM manipulation. Relying on jQuery selectors to hide fields or move elements is prone to breaking when the underlying HTML structure changes. Furthermore, performing Web API operations (CRUD) often requires repetitive boilerplate code to handle CSRF tokens and safe AJAX wrappers.

The new Client API (Preview) addresses this by providing a stable, object-oriented $pages namespace. This allows developers to interact with site components using supported methods rather than hacking the DOM, ensuring reliability, maintainability, and upgrade safety.

What’s New: The $pages Object

Client API exposes a global $pages object that acts as the entry point for all client-side operations.

Form & Control Manipulation: Programmatically get or set values, visibility, and disabled states for controls without guessing ID attributes.

Multistep Form Navigation: Native methods like goToNextStep() and goToPreviousStep() to control user flow through complex wizard-style forms.

Simplified Web API: A dedicated $pages.webAPI object that wraps Dataverse calls (Create, Read, Update, Delete) with clean async/await patterns, automatically handling the complexity of authentication headers.

User & Session Management: Methods to trigger $pages.user.signIn() or signOut() and manage site languages dynamically.

How to Get Started

To use the Client API, you must ensure your logic runs only after the API is fully initialized. The $pages object is not available immediately on page load.

1. Initialize with onPagesClientApiReady

Use the new Microsoft.Dynamic365.Portal.onPagesClientApiReady function. The modern approach uses await to ensure a clean, sequential flow.

// Modern async/await initialization
let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();
console.log(“Client API is ready!”);

2. Manipulate UI Controls (Read/Write/Hide)

Instead of searching for #element_id, use the forms collection to access controls securely.

// Get the API instance
let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();

// Retrieve a specific form by ID
let form = $pages.currentPage.forms.getFormById(‘form_#1’);

// Access controls
let controls = form.controls;

// Example: Hide the first control if it exists
if (controls.length > 0) {
console.log(`Hiding control: ${controls[0].getName()}`);
controls[0].setVisible(false);
}

3. Interact with Dataverse (Web API)

Create and retrieve records using the simplified $pages.webAPI methods.

Note: Ensure you have configured Table Permissions and enabled the Web API for the specific tables you are accessing.

// Create a new Contact record
await $pages.webAPI.createRecord(‘contacts’, {
firstName: ‘John’,
lastName: ‘Doe’
});

// Retrieve Accounts with OData query ($select)
let accounts = await $pages.webAPI.retrieveMultipleRecords(‘accounts’, ‘$select=name&$top=3’);
console.log(`Retrieved ${accounts.length} accounts.`);

We are looking forward to your feedback

Your feedback will help us continue to build on and improve the capabilities of this feature. We want to hear from you!

Please explore the Client API documentation and let us know your thoughts. You can submit your feedback and feature ideas on the Power Pages Ideas site.

The post Power Pages Client API (Preview): Native Client-Side Library for Forms and Data appeared first on Microsoft Power Platform Blog.
Source: Microsoft Power Platform