Add Dashboard Modal Extensions with the CLI
The dashboard modal extension allows you to extend your Wix app's functionality by adding modals to your app's dashboard. You can control the modal using openModal()
and closeModal()
from the dashboard SDK or from useDashboard()
in the dashboard-react SDK.
Follow the instructions below to:
- Create a dashboard modal extension for a Wix CLI app.
- Customize and test your dashboard modal extension.
- Build and deploy your app.
Before you begin
- You must have an app project that was created using the Wix CLI.
- You must be logged in to your Wix Developer account. If you don’t already have one, sign up for a Wix Developer account.
Step 1 | Create the extension
-
Run the following command and follow the prompts to create a dashboard modal extension:
Copy1npm run generate -
Enter a name for your modal's folder. The CLI will create this directory with the chosen name containing your modal’s files.
-
Enter the name of your modal. This name will be used to refer to your modal in the Wix Dev Center.
Upon completion, the dashboard modal extension folder and files will be created in your local app files in the "dashboard" folder with the following structure:
1src2└── dashboard3 └── modals4 └── <your-modal-folder-name>5 ├── modal.json6 └── modal.tsx
For more on the files and their structure, see Dashboard Modal Extensions Files and Code.
Step 2 | Customize your modal
-
Run the following command to open the dev menu:
Copy1npm run dev -
Choose a dashboard page to display. This will open a browser window previewing your dashboard page.
-
Add code to your dashboard page that triggers your modal to open. Use
openModal()
from the dashboard SDK or fromuseDashboard()
in the dashboard-react SDK. You can find your modal's ID in themodal.json
file. -
Edit your
modal.tsx
file to customize the modal itself. For example, change the text inside<Text>
toMy Dashboard Modal
:Copy1function Modal() {2const { closeModal } = useDashboard();34return (5<WixDesignSystemProvider>6<MessageModalLayout7title="Wix CLI Modal"8primaryButtonText="Close"9primaryButtonOnClick={() => closeModal()}10>11<Box direction="vertical" align="center" paddingTop="4">12<Text>My Dashboard Modal</Text>13</Box>14</MessageModalLayout>15</WixDesignSystemProvider>16);17} -
Save your files.
-
Go back to your dashboard page, open your modal, and see your change.
Step 3 | Build and deploy your app
Now that your app is ready for production, you can build your app and create a version in the Dev Center.
-
Run the following command to build your app:
Copy1npm run build -
Run the following command and follow the prompts to create an app version:
Copy1npm run create-versionAn app version allows you to publish an app to the Wix App Market or install it on a site with a direct install URL.
For more information about building and deploying your app, see Build and Deploy an App with the CLI.