> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Dashboard Page Extension Files and Code ## Article: Dashboard Page Extension Files and Code ## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/dashboard-extensions/dashboard-pages/dashboard-page-extension-files-and-code.md ## Article Content: # Dashboard Page Extension Files and Code
**Deprecated** The Wix CLI for Apps is deprecated and no longer receives updates or new features. New projects should use the unified [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md).
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-metadata-pagejson). - `page.tsx`: Defines the [page content](#page-content-pagetsx). The location of the page's subfolder determines the [route](#page-routes) 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: ```ts type BackOfficePageConfig = { id: string; title: string; additionalRoutes?: string[]; sidebar?: { disabled?: boolean; priority?: number; whenActive?: { selectedPageId?: string; hideSidebar?: boolean; }; }; }; ``` Here's an example metadata definition: ```json { "id": "15a6e3ad-620e-416b-840d-367be43a4fd8", "title": "My CLI App Page", "sidebar": { "whenActive": { "hideSidebar": true } } } ``` ## Metadata fields The following metadata fields can be used in the configuration object: | Field | Type | Description | |----------------------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `id` | string | Page ID as a ([GUID](https://en.wikipedia.org/wiki/Universally_unique_identifier)). The ID is used to register the page in the [app dashboard](https://manage.wix.com/account/custom-apps). 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. ![Dashboard sidebar label](https://wixmp-833713b177cebf373f611808.wixmp.com/images/6bc5fe6cc1a0b4a1898dc7f8f8f06b1b.png) | | `additionalRoutes` (optional) | string[] | A list of routes that lead to this page (in addition to the main route defined by the [file path convention](#page-routes)). 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](https://react.dev/) component that renders when the page is active. Inside a dashboard page component you can use: - The [Wix Dashboard React SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard-react-deprecated/introduction.md) to navigate users to pages in the dashboard, display modals, and send users alerts using toasts. - The [Wix Design System](https://www.wix-pages.com/wix-design-system/?path=/story/getting-started--about) to display content using the same React components Wix uses to build its own dashboard pages. - The [Wix Javascript SDK](https://dev.wix.com/docs/sdk.md) 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: ```bash src └── dashboard └── pages ├── products │ ├── page.json │ ├── page.tsx │ └── analytics │ ├── page.json │ └── page.tsx ├── orders │ ├── page.json │ └── page.tsx ├── page.json └── page.tsx ``` This app adds the following 4 pages to the dashboard: | Page name | Folder location | Dashboard page route | |------------------|---------------------------------------|-------------------------| | Index | `dashboard/pages/page.json` | `/` | | Products | `dashboard/pages/products/page.json` | `/products` | | Analytics | `dashboard/pages/products/analytics/page.json` | `/products/analytics` | | Orders | `dashboard/pages/orders/page.json` | `/orders` |