Dashboard Modal Extensions Files and Code

When you generate a dashboard modal extension, the CLI adds the following files to your project:

  • <your-modal-name>.extension.ts: Builds the modal.
  • <your-modal-name>.tsx: Defines the modal content.
  • <your-modal-name>.config.ts: Contains configurable modal properties.

Modal builder

The <your-modal-name>.extension.ts file contains the dashboard modal builder configuration.

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

Copy

Builder fields

FieldTypeDescription
idstringThe modal ID (GUID) is automatically generated and shouldn't be changed. The ID is used to register the modal in the project dashboard. The ID must be unique across all pages in the project.
titlestringThe modal title. The title is used to refer to the modal in the project dashboard.
widthnumberInitial width of the modal while loading.
heightnumberInitial height of the modal while loading.
componentstringPath of the modal content.

Here's an example builder definition:

Copy

Modal content

The <your-modal-name>.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 SDK to access Wix business solutions and site data.
  • 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.

Modal configuration

The <your-modal-name>.config.ts file contains the configurable properties for the dashboard modal.

Here is an example of the configuration:

Copy
Did this help?