Dashboard Page Extension Files and Code

This feature is in Developer Preview and is subject to change.

Within your project, the source code for dashboard pages is found in the src/extensions/ folder. Each page is defined in its own subfolder that contains two files:

Page metadata (extension.json)

The extension.json file contains a dashboard page's metadata.

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

Copy

The original structure of the generated extensions extension.json is as follows:

Copy
FieldTypeDescription
compIdstringPage ID as a (GUID). The ID is used to register the page and must be unique across all pages in the project.
compTypestringAlways BACK_OFFICE_PAGE for dashboard pages.
compNamestringThe page name.
compData.backOfficePage.hostingPlatformstringAlways BUSINESS_MANAGER.
compData.backOfficePage.titlestringThe page title.
compData.backOfficePage.sidebar (optional)objectSidebar configuration for the page.
compData.backOfficePage.sidebar.whenActive.hideSidebar (optional)booleanWhether the sidebar will be shown when the page is active.
compData.backOfficePage.sidebar.disabled (optional)booleanWhether the page is shown in the sidebar. If true, the page isn't shown in the sidebar. Defaults to false.
compData.backOfficePage.sidebar.priority (optional)numberThe priority of the page entry in the sidebar. Determines the page location in relation to other app pages. Smaller numbers mean higher priority.
compData.backOfficePage.sidebar.whenActive.selectedPageId (optional)stringWhen the page is the currently active page, this setting determines the page that's selected in the sidebar. You can use this when you have a page that's a nested page and doesn't have an entry in the sidebar, but you want the sidebar to display some pages as active. For example, you might have a number of pages for specific products. You don't want these pages cluttering up the sidebar, so you set them not to display there. However, when one of the product pages is active, you might want the products list page to be selected in the sidebar. Defaults to the current page.
compData.backOfficePage.additionalRoutes (optional)string[]A list of routes that lead to this page (in addition to the main route defined by the folder structure). Useful if you want to support multiple routes for the same page or for backward compatibility.

Page content (page.tsx)

The page.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?