Add Dashboard Page Extensions with the Wix CLI

You can add dashboard pages to your project using dashboard page extensions. These pages let you or your users manage sites and business data from the dashboard. They're not visible to site visitors.

The Wix CLI makes it easy to create and develop dashboard page extensions, and to manage them in the sidebar.

For general information about this extension type, read About Dashboard Page Extensions.

Follow the instructions below to:

1. Create a dashboard page extension for your project.
2. Customize your dashboard page.

Once this task is complete, you have a dashboard page extension that adds a new dashboard page to either your headless project's site, or your users' sites.

Before you begin

• You must have a project that was created using the Wix CLI.
• You must be logged into your Wix account. If you don't have one, sign up for a Wix account.
• Learn how to interact with the Wix dashboard using the Wix Dashboard SDK.

Step 1 | Create the extension

1. Run the generate command and follow the prompts to create a dashboard page extension.

2. Enter a name for your page's folder. The CLI will create this directory with the chosen name containing your page's files.

3. Enter the route for your page. The route is the path that is appended to the dashboard base URL to access the dashboard page.

Upon completion, the extension files will be created in your project directory with the following structure:

For more information about these files, see Dashboard Page Extension Files and Code.

Step 2 | Customize your dashboard page

1. Run the dev command to open the dev menu.

2. Click the link to open the dashboard in your browser and navigate to the page you've created. Leave this window open.

3. Go to your dashboard page's .tsx file and change subtitle in Page.Content to "Hello world!":

   Copy

4. Save your file.

5. Navigate back to the dashboard page in your browser and see your changes.

Dashboard menu plugins

If you use a dashboard menu plugin to navigate to your dashboard page, you can customize your dashboard page extension to interact with any data passed from the dashboard page that hosts the menu plugin.

1. Make sure the @wix/dashboard package is installed in your project.
2. Add the following import statement to your code:
   Copy

3. To retrieve the data from the dashboard page, call the observeState() method.
   Copy

4. Use React to add code and logic to your dashboard page.

Build and deploy your project

Once your project is ready for production, you can build and deploy it.

Delete a dashboard page

To delete an existing dashboard page from your project:

1. Delete the folder that contains your dashboard page extension's files.
2. Remove the import and .use() statements for the extension from the extensions.ts file.

See also

• Dashboard Page Extension Files and Code
• About Dashboard Page Extensions