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:
extension.json: Defines the page metadata.page.tsx: Defines the page content.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:
The original structure of the generated extensions extension.json is as follows:
| Field | Type | Description |
|---|---|---|
compId | string | Page ID as a (GUID). The ID is used to register the page and must be unique across all pages in the project. |
compType | string | Always BACK_OFFICE_PAGE for dashboard pages. |
compName | string | The page name. |
compData.backOfficePage.hostingPlatform | string | Always BUSINESS_MANAGER. |
compData.backOfficePage.title | string | The page title. |
compData.backOfficePage.sidebar (optional) | object | Sidebar configuration for the page. |
compData.backOfficePage.sidebar.whenActive.hideSidebar (optional) | boolean | Whether the sidebar will be shown when the page is active. |
compData.backOfficePage.sidebar.disabled (optional) | boolean | Whether 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) | 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. |
compData.backOfficePage.sidebar.whenActive.selectedPageId (optional) | string | When 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. |
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: