ICreateDialog

Modal dialog for creating certain item (file, folder, etc.). The user gets the full access to the functionality but cannot control the layout.

To display the dialog, return an IMessage with Actions.showCreateDialogModal in actions and pass the dialog configuration in createDialogProps. Use Actions.updateCreateDialogModal to update an open dialog.

Examples

Document creation dialog with multiple format options

let format = "docx";

const newDocumentDialog: ICreateDialog = {
  title: "Create New Document",
  startValue: "Untitled",
  visible: true,
  options: [
    {
      key: "docx",
      label: "Word Document",
      icon: "word.svg"
    },
    {
      key: "xlsx",
      label: "Excel Spreadsheet",
      icon: "excel.svg"
    },
    {
      key: "pptx",
      label: "PowerPoint Presentation",
      icon: "powerpoint.svg"
    }
  ],
  selectedOption: {
    key: "docx",
    label: "Word Document",
    icon: "word.svg"
  },
  onSelect: (option) => {
    format = option.key;

    return {
      actions: [Actions.updateCreateDialogModal],
      createDialogProps: {
        ...newDocumentDialog,
        selectedOption: option,
        extension: option.key
      }
    };
  },
  onSave: async (e, value) => {
    // A throw here keeps the dialog open and hands the error to onError
    await createDocument(value, format);

    // The dialog then closes by itself: isCloseAfterCreate defaults to true
    return {
      actions: [Actions.showToast],
      toastProps: [{
        title: `Document "${value}" created successfully`,
        type: ToastType.success
      }]
    };
  },
  onError: (error) => {
    return {
      actions: [Actions.showToast],
      toastProps: [{
        title: "Failed to create document. Please try again.",
        type: ToastType.error
      }]
    };
  },
  onCancel: (e) => {
    // Clean up any temporary state if needed
  },
  onClose: (e) => {
    // Additional cleanup or analytics
  },
  isCreateDialog: true,
  extension: "docx"
}

Name check that keeps the error text in the dialog

const newDiagramDialog: ICreateDialog = {
  title: "Create diagram",
  startValue: "New diagram",
  visible: true,
  isCreateDialog: true,
  isAutoFocusOnError: true,
  extension: "drawio",
  onSave: async (e, value) => {
    if (!value.trim()) throw new Error("Enter a diagram name");

    await drawIo.createNewFile(value);
  },
  onError: (error) => ({
    actions: [Actions.updateCreateDialogModal],
    createDialogProps: { ...newDiagramDialog, errorText: error.message }
  })
};

Properties

Property	Type	Description
title	string	Defines the modal dialog title.
startValue	string	Defines the modal dialog start value.
visible	boolean	Specifies if the modal dialog is visible or not.
isCreateDisabled	boolean	Specifies if the create button is disabled.
isCloseAfterCreate	boolean	Specifies if the modal dialog should be closed after the create action. Default true Remarks: Once onSave resolves, the dialog closes whatever its message sets, so an errorText returned there disappears with it. To keep the dialog open on a validation error, throw from onSave and return the text from onError: the dialog is never closed on that path. With false, the plugin closes the dialog itself with Actions.updateCreateDialogModal and visible: false.
options	IComboBoxItem[]	Defines an array of the modal dialog options.
selectedOption	IComboBoxItem	Defines the selected modal dialog option.
errorText	string	Error text to display when validation fails or an error occurs. Remarks: Return it from onError or onChange. Returned from a successful onSave, it closes together with the dialog unless isCloseAfterCreate is false.
onSelect	(option: IComboBoxItem) => void | IMessage	Sets a function which is triggered whenever the modal dialog option is selected.
onChange	(value: string) => void | IMessage	Sets a function which is triggered whenever the input value changes.
onSave	(e: any, value: string) => void | Promise<void> | IMessage | Promise<IMessage>	Sets a function which is triggered whenever the data in the modal dialog is saved.
onCancel	(e: any) => void	Sets a function which is triggered whenever an action in the modal dialog is canceled.
onClose	(e: any) => void	Sets a function which is triggered whenever the modal dialog is closed.
onError	(e: any) => void | Promise<void> | IMessage | Promise<IMessage>	Sets a function which is triggered whenever an error occurs during the onSave operation. Remarks: Runs when onSave throws or rejects. The dialog stays open whatever isCloseAfterCreate is, so an errorText set by the returned message stays on screen.
isCreateDialog	boolean	Specifies if this modal dialog is for creating certain item (file, folder, etc.).
isAutoFocusOnError	boolean	Specifies if this modal dialog should automatically focus on the error input field when an error occurs during the onSave operation.
extension	string	Defines an extension of an item which will be created (file, folder, etc.).