Dashboard Page Extension Files and Code

Within your app project, the source code for dashboard pages is found in the src/dashboard/pages folder.

Each page is defined in its own subfolder that contains two files:

• page.json: Defines the page metadata.
• page.tsx: Defines the page content.

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

Page metadata (page.json)

The page.json file contains a dashboard page’s metadata.

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

Here's an example metadata definition:

Metadata fields

The following metadata fields can be used in the configuration object:

Field	Type	Description
id	string	Page 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.
title	string	The 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.
additionalRoutes (optional)	string[]	A list of routes that lead to this page (in addition to the main route defined by the file path convention). This is useful if you want to support multiple routes for the same page or for backward compatibility. For example, if you want both /products and /products/list to lead to the same page.
sidebar (optional)	object	An object that defines the behavior of this page in the dashboard sidebar.
sidebar.disabled (optional)	boolean	Whether the page is shown in the sidebar. If true, the page is not shown in the sidebar. Defaults to false.
sidebar.priority (optional)	number	The priority of the page entry in the sidebar. Determines the page location in relation to other app pages. Smaller numbers mean higher priority.
sidebar.whenActive.selectedPageId (optional)	string	When the page is the currently active page, this setting determines the page that is selected in the sidebar. You can use this when you have a page that is 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.
sidebar.whenActive.hideSidebar (optional)	boolean	Whether the sidebar will be shown when the page is active. If true, the sidebar is hidden when the page is active. Defaults to false. Hiding the sidebar creates a more immersive experience by gaining more screen real estate.

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.

Page Routes

The location of a dashboard page's files within the src/dashboard/pages folder determines the route to the page. The route is the path that is appended to the dashboard base URL to access the dashboard page. Therefore, you should name your page folders using URL-friendly names.

To create longer routes, nest the folders for pages files inside of subfolders.

For example, consider this folder structure:

This app adds the following 4 pages to the dashboard: