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.

The location of the page's subfolder determines the route to the page.

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:

Copy

Here's an example builder definition:

Copy

Builder fields

The following fields can be used in the configuration object:

FieldTypeDescription
idstringPage ID as a (GUID). The ID is used to register the page in the app dashboard. It must be unique across all pages in the app.
titlestringThe page title. The title is used as the browser tab title and as the dashboard sidebar label if the page is configured to appear in the sidebar.
routePathstringRoute that lead to this page. Use this route in code to reference the page.
componentstringA route to the page content component.

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.
Did this help?