> 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: Dashboard Modal Extensions Files and Code

## Article: Dashboard Modal Extensions Files and Code

## Article Link: https://dev.wix.com/docs/wix-cli/legacy-clis/legacy-wix-cli-for-apps/supported-extensions/dashboard-extensions/dashboard-modals/dashboard-modal-extensions-files-and-code.md

## Article Content:

# Dashboard Modal Extensions Files and Code

<blockquote classname="warning">

**Deprecated**

The Wix CLI for Apps is deprecated and no longer receives updates or new features. New projects should use the unified [Wix CLI](https://dev.wix.com/docs/wix-cli/guides/about-the-wix-cli.md). [Determine which CLI your project uses](https://dev.wix.com/docs/wix-cli/guides/development/determine-which-cli-your-project-uses.md).

</blockquote>

Within your app project, the source code for dashboard modals is found in the `src/dashboard/modals` folder.

Each modal is defined in its own subfolder that contains two files:
- **`modal.json`**: Defines the modal metadata.
- **`modal.tsx`**: Defines the modal content.

## Modal metadata (modal.json)

The `modal.json` file contains the dashboard modal metadata.

The modal metadata is defined using the following schema, shown here as a TypeScript type:

```ts
Type BackOfficeModalConfig = {
  id: string;
  title: string;
  width: number;
  height: number;
};

```

| Field  | Type   | Description |
|--------|--------|-------------|
| `id`   | string | The modal ID ([GUID](https://en.wikipedia.org/wiki/Universally_unique_identifier)) is automatically generated and shouldn't be changed. The ID is used to register the modal in the app dashboard. The ID must be unique across all pages in the app. |
| `title`| string | The modal title. The title is used to refer to the modal in the app dashboard. |
| `width`| number | Initial width of the modal while loading, in pixels. Width may be adjusted dynamically based on the content of the modal or limited by the size of the modal's container. |
| `height`| number | Initial height of the modal while loading, in pixels. Height may be adjusted dynamically based on the content of the modal or limited by the size of the modal's container. |


Here's an example metadata definition:

```json
{
 "id": "78bfd8a5-6cbd-4dd4-b574-5a298952dd58",
 "title": "My CLI App Modal",
 "width": 600,
 "height": 400
}

```

## Modal content (modal.tsx)

The `modal.tsx` file contains the dashboard modal content.

The content is defined as a [React](https://react.dev/) component that renders when the modal is active.

Inside a dashboard modal component you may choose to use:

- The [Wix Dashboard React SDK](https://dev.wix.com/docs/sdk/host-modules/dashboard-react-deprecated/introduction.md) to navigate users to pages in the dashboard, display other dashboard modals, or send users alerts and updates using toasts.
- The [Wix Design System](https://www.wix-pages.com/wix-design-system/?path=/story/getting-started--about) to use the same React components Wix uses to build its own dashboard pages.