Coding Examples

Sled Tests

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

API Reference

Velo

Picasso

GraphQL (Alpha)

# openModal()

Opens a [dashboard modal extension](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/dashboard-modals/about-dashboard-modals) on your app's dashboard page.

![Open modal](https://wixmp-833713b177cebf373f611808.wixmp.com/images/5a292577254f3178bfc78d6daed8053e.gif)

> **Notes:** 
> - This method does not yet work when [developing sites](fallback::https://dev.wix.com/docs/develop-websites) or [building apps with Blocks](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-blocks).
> - Before you call this method, you need a dashboard modal extension. Learn more about implementing dashboard modal extensions with the [Wix CLI](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/dashboard-extensions/dashboard-modals/add-dashboard-modal-extensions-with-the-cli) and in [self-hosted apps](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/dashboard-extensions/add-self-hosted-dashboard-modal-extensions).

## Method Declaration

```ts
(modalInfo: ModalInfo) => { modalClosed: Promise<Serializable> }
```

## Parameters

| Name        | Type        | Description                                                |
|:------------|:------------|:-----------------------------------------------------------|
| `modalInfo` | `ModalInfo` | Information about the dashboard modal to open. |

> **Note:** `openModal()` used to accept 2 parameters: `modalId` and `params`. These parameters have been wrapped inside a `modalInfo` object. Using 2 parameters is deprecated but still supported.

#### `ModalInfo` Object

| Name      | Type                  | Description                                                                |
|:----------|:----------------------|:---------------------------------------------------------------------------|
| `modalId` | `string`              | ID of the dashboard modal extension to open, as defined in the Wix Dev Center. |
| `params`  | `Record<string, any>` | Optional. Custom data to pass into the dashboard modal extension. The extension can access this data using [`observeState()`](fallback::https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state). |


## Returns

```
{ modalClosed: Promise<Serializable> }
```

> **Note:** Do not use relative CSS height units such as `vh` in the extensions opened by this method. Extension heights are adjusted automatically. If your extension uses relative height units by default, make sure to turn them off. 

## Examples
> **Note:** To call this method in [self-hosted apps](fallback::https://dev.wix.com/docs/sdk/articles/get-started/about-self-hosted-apps), you need to create a [client](portalId::b85dea5b-341b-493b-b99e-4d4ca12baaa2resourceId::aa3fa305-fec3-49f1-9700-c5a794c51cf6*fallback::https://dev.wix.com/docs/sdk/articles/work-with-the-sdk/about-the-wix-client). See the [setup](resourceId::b5088d52-82f9-44cc-b1a2-fea83606d85d#setup*fallback::https://github.com/wix-private/developer-docs/blob/1421320689b7eae86b7a7368cd498fe0be1ec695/js-sdk-docs/dashboard/intro.md#setup*original::./intro.md#setup) guide for more details.

### Open a modal

```js
import { dashboard } from '@wix/dashboard';

dashboard.openModal({ modalId: '1d52d058-0392-44fa-bd64-ed09275a6fcc' });
```

### Pass extra data when opening a modal

```ts
import { dashboard } from '@wix/dashboard';

dashboard.openModal({ 
  modalId: '1d52d058-0392-44fa-bd64-ed09275a6fcc', 
  params: { firstName: 'Name' } 
});
```
You can access the data passed to `openModal()` in your extension code using [`observeState()`](resourceId::8a52c81b-a8bc-4f21-8433-2bcaac9e53aa*fallback::https://github.com/wix-private/developer-docs/blob/1421320689b7eae86b7a7368cd498fe0be1ec695/js-sdk-docs/dashboard/observeState.md*original::./observeState.md).

### Get notified when the modal is closed
```js
import { dashboard } from '@wix/dashboard';

const { modalClosed } = dashboard.openModal({ modalId: '1d52d058-0392-44fa-bd64-ed09275a6fcc' });

modalClosed.then(result => {
  if(result) {
    console.log('The modal was closed and returned the value:', result);
  } else {
    console.log('The modal was closed without any data.'); 
  }
})
```

Name	Type	Description
`modalId`	`string`	ID of the dashboard modal extension to open, as defined in the Wix Dev Center.
`params`	`Record<string, any>`	Optional. Custom data to pass into the dashboard modal extension. The extension can access this data using `observeState()`.