> 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: Add Dashboard Modal Extensions with the CLI

## Article: Add Dashboard Modal Extensions with the CLI

## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/dashboard-extensions/dashboard-modals/add-dashboard-modal-extensions-with-the-cli.md

## Article Content:

# Add Dashboard Modal Extensions with the Wix CLI for Apps

<blockquote classname="note">

**CLI Documentation Notice**

We've released a [new Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). Continue here if your project uses the Wix CLI for Apps. [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md). 

</blockquote>

The [dashboard modal extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-modals/about-dashboard-modals.md) 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](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md). 

Follow the instructions below to:
1. Create a dashboard modal extension for a Wix CLI app.
1. Customize and test your dashboard modal extension.
1. Build and deploy your app.

## Before you begin

- You must have an app project that was [created using the Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/about-the-wix-cli-for-apps.md).
- You must be logged in to your Wix Studio account. If you don’t already have one, [sign up for a Wix Studio account](https://manage.wix.com/account/custom-apps).

## Step 1 | Create the extension 

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

    ```bash
    npm run generate -- --type=DASHBOARD_MODAL
    ```

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

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

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:

```bash
src
└── dashboard
    └── modals
        └── <your-modal-folder-name>
            ├── modal.json
            └── modal.tsx
```

For more on the files and their structure, see [Dashboard Modal Extensions Files and Code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-modals/dashboard-modal-extension-files-and-code.md).

## Step 2 | Customize your modal

1. Run the following command to open the dev menu:
    ```bash
    npm run dev
    ```

1. Choose a dashboard page to display. This will open a browser window previewing your dashboard page.

1. Add code to your dashboard page that triggers your modal to open. Use `openModal()` from the [dashboard SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard/open-modal.md). You can find your modal's ID in the `modal.json` file.

1. Edit your `modal.tsx` file to customize the modal itself. For example, change the text inside `<Text>` to `My Dashboard Modal`:
    ```tsx
    function Modal() {
      const { closeModal } = useDashboard();

      return (
        <WixDesignSystemProvider>
          <MessageModalLayout
            title="Wix CLI Modal"
            primaryButtonText="Close"
            primaryButtonOnClick={() => closeModal()}
          >
             <Box direction="vertical" align="center" paddingTop="4">
             <Text>My Dashboard Modal</Text>
           </Box>
         </MessageModalLayout>
       </WixDesignSystemProvider>
      );
    }
    ``` 

1. 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()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md) function. 

        ```js
        dashboard.observeState((componentParams) => {
          console.log("componentParams:", componentParams);
        });
        ```

    1. Use React to add code and logic to your modal. 
    
1. Save your files.

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

## Step 3 | Build and deploy your app

Now that your app is ready for production, you can build your app and release a version on the [**Custom Apps** page](https://manage.wix.com/account/custom-apps) in your Wix Studio workspace.


1. Run the following command to build your app:
    ```bash
    npm run build
    ```

1. Run the following command and follow the prompts to release an app version:
    ```bash
    npm run release
    ```

   An app version allows you to publish an app to the [Wix App Market](https://www.wix.com/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](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/app-development/build-and-deploy-an-app-with-the-cli.md).

## Delete a dashboard modal

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

> **Note**: If you've already [created a version](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/app-development/build-and-deploy-an-app-with-the-cli.md#step-3--create-an-app-version) of your app, deleting a dashboard modal's files from your project does not remove the dashboard modal from your app's latest version in the app dashboard. To remove the dashboard modal, create a new version after deleting the [dashboard modal's files](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-modals/dashboard-modal-extension-files-and-code.md).


## See also

- [Tutorial | Create an App with Wix CLI](https://dev.wix.com/docs/build-apps/get-started/quick-start/create-an-app-with-wix-cli.md)
- [Tutorial | Build a Locations App Using the Wix CLI](https://dev.wix.com/docs/build-apps/get-started/tutorials/tutorial-build-a-locations-app-with-the-cli.md#tutorial--build-a-locations-app-using-the-wix-cli)