Dashboard Modal Extensions Files and Code

This feature is in Developer Preview and is subject to change.

Within your project, the source code for dashboard modals is located in the src/extensions/ folder. Each modal is defined in its own subdirectory:

Copy

Modal metadata (extension.json)

The extension.json file contains the dashboard modal metadata. The structure is as follows:

Copy
FieldTypeDescription
compIdstringThe modal ID (GUID) is automatically generated and shouldn't be changed. Must be unique across all extensions in the project.
compTypestringAlways BACK_OFFICE_MODAL for dashboard modals.
compNamestringThe modal name.
compData.backOfficeModal.hostingPlatformstringAlways BUSINESS_MANAGER.
compData.backOfficeModal.titlestringThe modal title.
compData.backOfficeModal.widthnumberInitial width of the modal in pixels.
compData.backOfficeModal.heightnumberInitial height of the modal in pixels.

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?