Dashboard Page Extension Files and Code

When you generate a dashboard page extension, the CLI adds the following files to your project:

• <your-page-name>.extension.ts: Builds the page.
• <your-page-name>.tsx: Defines the page content.

Page builder

The <your-page-name>.extension.ts file contains a dashboard page's builder configuration.

The page builder is defined using the following schema, shown here as a TypeScript type:

Here's an example builder definition:

Builder fields

The following fields can be used in the configuration object:

Sidebar order (priority)

When your project has more than 1 dashboard page, set priority on each extensions.dashboardPage() so the dashboard sidebar lists the pages in the order you want. Smaller numbers appear higher in the list.

Set priority in each page's <your-page-name>.extension.ts file. For example, for a project with a Settings page and a Reports page:

Both pages must be registered in src/extensions.ts. The CLI adds that registration when it generates the extension.

After you change priorities, build and release your project so the updated sidebar order is registered. See Build and Deploy with the CLI.

If you're migrating from the legacy Wix CLI for Headless, copy the page's compData.backOfficePage.sidebar.priority value from the page's extension.json to the builder's priority field.

Page content

The <your-page-name>.tsx file contains a dashboard page's content.

The content is defined as a React component that renders when the page is active.

Inside a dashboard page component you can use:

• The Wix Dashboard React SDK to navigate users to pages in the dashboard, display modals, and send users alerts using toasts.
• The Wix Design System to display content using the same React components Wix uses to build its own dashboard pages.
• The Wix JavaScript SDK to access and manage other Wix data.
• httpClient.fetchWithAuth from @wix/essentials to call your project's own backend HTTP endpoints.