Add Dashboard Modal Extensions with the Wix CLI for Headless

Dashboard modal extensions allow you to add modals to your headless project's dashboard. You can control the modal using openModal() and closeModal() from the dashboard SDK.

Follow the instructions below to:

1. Create a dashboard modal extension for your project.
2. Customize and test your dashboard modal extension.
3. Build and deploy your project.

Before you begin

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

Step 1 | Create the extension

1. Run the following command and follow the prompts to create a dashboard modal extension:

   Copy

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

3. Enter the name of your modal. This name will be used to refer to your modal in your project's dashboard.

Upon completion, the dashboard modal extension folder and files will be created in your local project files in the 'src/extensions/' folder with the following structure:

For more on the files and their structure, see Dashboard Modal Extensions Files and Code.

Step 2 | Customize your modal

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

   Copy

2. Choose a dashboard page to display. This will open a browser window previewing your project's dashboard page.

3. Add code to your dashboard page that triggers your modal to open. Use openModal() from the dashboard SDK. You can find your modal's ID in the modal.json file.

4. Edit your modal.tsx file to customize the modal itself. For example, change the text inside <Text> to My Dashboard Modal:

   Copy

5. Set your dashboard modal extension to interact with custom data passed by the openModal() function or any data passed from the dashboard page hosting a menu plugin that navigates to your modal.

   1. To retrieve the data, use the observeState() function.

      Copy

   2. Use React to add code and logic to your modal.

6. Save your files.

7. Go back to your dashboard page, open your modal, and see your changes.

Step 3 | Build and deploy your project

Now that your project is ready for production, you can build your project and release your project.

1. Run the following command to build your project:

   Copy

2. Run the following command and follow the prompts to release your project:

   Copy

For more information about building and deploying your project, see Build and Deploy a Project with the Wix CLI for Headless.

Delete a dashboard modal

To delete an existing dashboard modal from your project, delete the subfolder under src/extensions/ that contains your dashboard modal's files.