Understanding the $pages Client API in Power Pages and its Key Features

In this article, you will learn about the new feature $pages in Power Pages, which is currently in preview (not recommended for production environments). $pages is part of the client-side API that provides powerful tools to interact with your Power Pages site programmatically, making it easier to manage forms, records, and navigation on your site.

The $pages API offers several key functionalities:

1 - Form & Control Manipulation

You can programmatically access and modify form fields and controls, including getting or setting values, and managing visibility and disabled states.
For example - it will get all form details from current page

let forms = $pages.currentPage.forms.getAll();

2 - List Interaction

You can identify, list, and retrieve particular list instances or elements that appear on the current webpage by targeting them specifically through their unique HTML element IDs.
For example - it will get all lists from current page.

let lists = $pages.currentPage.lists.getAll();

3 - Web API Access

The $pages.webAPI object simplifies interactions with the Power Pages Web API, automatically handling authentication and CSRF tokens, allowing to create & read operations on Microsoft Dataverse tables directly from client-side code.
For example - this code will create record in Dataverse table.

$pages.webAPI.createRecord(entitySetName: string, data: object):

For example - this code will retrieve record from Dataverse table.

$pages.webAPI.retrieveRecord(entitySetName: string, id: string, options?: string)

4 - Multistep Form Navigation

It provides methods for controlling user flow through complex, multi-step forms, such as goToNextStep() and goToPreviousStep().
for example - how to retrieve a multistep form, inspect it, and advance to the next step.

let $pages = await Microsoft.Dynamic365.Portal.onPagesClientApiReady();
let form = $pages.currentPage.forms.getFormById('multiform_#1');
console.log(`Form id: ${form.id} has ${form.controls.length} controls.`);

if (form.getVisible()) {
console.log('Form is currently visible.');
}

let tabs = form.tabs;
console.log(`Form has ${tabs.length} tabs.`);

form.goToNextStep();

Right now, the $pages API is accessed through a global variable named $pages (recommended naming convention) after the client API has been initialized.

You can read more about from Microsoft official documentation

Conclusion

In this article, we explored the powerful capabilities of the $pages API in Power Pages, which allows for programmatic interaction with your site’s forms, lists. while $pages is still in preview, it offers valuable tools for building customizable and user-friendly applications, and we can expect even more functionality as it evolves.