IModalDialog

View source on GitHub

Modal dialog.

To display the dialog, return an IMessage with Actions.showModal in actions and pass the dialog configuration in modalDialogProps. Use Actions.closeModal to close it.

info

dialogBody and dialogFooter are rendered in separate contexts. Components in dialogFooter cannot update components in dialogBody using Actions.updateContext, and vice versa.

Examples

Interactive document preview modal with dynamic content loading

import {
  IModalDialog,
  ModalDisplayType,
  Components,
  ButtonSize,
  Actions,
  ToastType,
} from "@onlyoffice/docspace-plugin-sdk";

const filePreviewModal: IModalDialog = {
  displayType: ModalDisplayType.modal,
  dialogHeader: "Document Preview",
  dialogBody: {
    children: [
      {
        component: Components.iFrame,
        props: {
          src: "https://example.com/preview/doc.pdf",
          width: "100%",
          height: "600px"
        }
      }
    ]
  },
  dialogFooter: {
    children: [
      {
        component: Components.button,
        props: {
          label: "Close",
          size: ButtonSize.normal,
          onClick: () => {
            return {
              actions: [Actions.closeModal]
            };
          }
        }
      }
    ]
  },
  autoMaxWidth: true,
  autoMaxHeight: true,
  withFooterBorder: true,
  fullScreen: false,
  eventListeners: [
    {
      name: "documentLoaded",
      onAction: async () => {
        return {
          actions: [Actions.showToast],
          toastProps: [{
            type: ToastType.success,
            title: "Document loaded successfully"
          }]
        };
      }
    }
  ],
  onClose: () => {
    return {
      actions: [Actions.closeModal]
    };
  },
  onLoad: async () => {
    const documentDetails = await fetchDocumentDetails();
    return {
      newDialogHeader: `Preview: ${documentDetails.name}`,
      newDialogBody: {
        children: [
          {
            component: Components.iFrame,
            props: {
              src: documentDetails.previewUrl,
              width: "100%",
              height: "600px"
            }
          }
        ]
      }
    };
  }
}

Side panel settings dialog with API key configuration

const apiKeyInput: IInput = {
  value: "",
  type: InputType.password,
  placeholder: "Enter your API key",
  onChange: (value) => ({
    actions: [Actions.updateProps],
    newProps: { ...apiKeyInput, value }
  })
};

const settingsPanel: IModalDialog = {
  displayType: ModalDisplayType.aside,
  dialogHeader: "Plugin Settings",
  dialogBody: {
    children: [
      {
        component: Components.label,
        props: { text: "API Key" }
      },
      {
        component: Components.input,
        props: apiKeyInput
      }
    ]
  },
  autoMaxWidth: false,
  autoMaxHeight: true,
  withFooterBorder: true,
  fullScreen: false,
  onClose: () => ({
    actions: [Actions.closeModal]
  }),
  onLoad: async () => {
    const settings = await loadSettings();
    return {
      newDialogBody: {
        children: [
          {
            component: Components.label,
            props: { text: "API Key" }
          },
          {
            component: Components.input,
            props: { ...apiKeyInput, value: settings.apiKey }
          }
        ]
      }
    };
  }
}

Properties

Property	Type	Description
displayType	ModalDisplayType	Defines the modal dialog display type
dialogHeader?	string	Defines the modal dialog header
dialogBody	IBox	Defines the modal dialog body
dialogFooter?	IBox	Defines the modal dialog footer
autoMaxWidth?	boolean	Specifies whether the "max-width: auto" property is set
autoMaxHeight?	boolean	Specifies whether the "max-height: auto" property is set
withoutBodyPadding?	boolean	Specifies whether the modal dialog body has no paddings
withoutHeaderMargin?	boolean	Specifies whether the modal dialog header has no bottom margins
withFooterBorder?	boolean	Specifies whether the border betweeen the body and footer is displayed
fullScreen?	boolean	Specifies whether to display the modal dialog body in the full screen mode without paddings
eventListeners?	{ name: string; onAction: () => void | Promise<void> | IMessage | Promise<IMessage>; }[]	Defines the event listeners.
onClose	() => void | Promise<void> | IMessage | Promise<IMessage>	Sets a function which is triggered whenever the "Close" button in the modal dialog is clicked
onLoad	() => Promise<{ newDialogHeader?: string; newDialogBody: IBox; newDialogFooter?: IBox; }>	Sets a function which is triggered whenever the modal dialog is loaded.

ModalDisplayType

View source on GitHub

The supported modal dialog types.

Enumeration Members

modal

modal: "modal";

Modal dialog displayed in the center of the screen

aside

aside: "aside";

Modal dialog displayed as a side panel