Dashboard Modal Extensions Files and Code

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:

1
Type BackOfficeModalConfig = {
2
  id: string;
3
  title: string;
4
  width: number;
5
  height: number;
6
};

Here's an example metadata definition:

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

id

The modal ID (GUID) is automatically generated and shouldn't be changed.

The ID is used to register the modal in the Wix Dev Center. The ID must be unique across all pages in the app.

title

The modal title.

The title is used to refer to the modal in the Dev Center.

width

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

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.

Modal content (modal.tsx)

The modal.tsx file contains the dashboard modal content.

The content is defined as a React component that renders when the modal is active.

Inside a dashboard modal component you may choose to use:

• The Wix Dashboard React SDK to navigate users to pages in the dashboard, display other dashboard modals, or send users alerts and updates using toasts.
• The Wix Design System to use the same React components Wix uses to build its own dashboard pages.