Add Dashboard Modal Extensions with the Wix CLI

Dashboard modal extensions allow you to add modals to site dashboards. For headless projects, modals appear in your site's dashboard. For app projects, modals appear in your users' site'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.

Step 1 | Create the extension

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

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. For app projects, this name will be used to refer to your modal in your app's dashboard.

Upon completion, the extension files will be created in your project directory 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 dev command to open the dev menu.

2. Choose a dashboard page to display. This will open a browser window previewing the 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 your .extension.ts file.

4. Edit your .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() method or any data passed from the dashboard page hosting a menu plugin that navigates to your modal.

   1. To retrieve the data, call the observeState() method.

      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.

Build and deploy your project

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

Delete a dashboard modal

To delete an existing dashboard modal from your project:

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

See also

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