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:

Copy
FieldTypeDescription
idstringThe modal ID (GUID) 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.
titlestringThe modal title. The title is used to refer to the modal in the app dashboard.
widthnumberInitial 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.
heightnumberInitial 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:

Copy

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.
Did this help?