Actions

View source on GitHub

A collection of events that will be processed on the portal side.

Pass these values in the actions array of an IMessage returned from an event handler (onClick, onChange, onSubmit, etc.). Most actions read their configuration from the matching *Props parameter of the message.

Enumeration Members

updateProps

updateProps: "update-props";

Calls a function to update the state of the item which action was passed. It does not work if the newProps parameter is not passed to the message.

Example

const message: IMessage = {
  newProps: {...acceptButton, isDisabled: true},
  actions: [Actions.showToast, Actions.updateStatus, Actions.updateProps],
  toastProps,
}

updateContext

updateContext: "update-context";

Calls a function to update the state of the parent or child items which were passed. It does not work if the contextProps parameter is not passed to the message.

Example

const message: IMessage = {
  actions: [Actions.updateProps, Actions.updateContext],
  newProps: {...nameInputProps, value},
  contextProps: [
    {
      name: "accept-button",
      props: {
        ...acceptButtonProps,
        isDisabled: !value,
      },
    },
  ],
}

updateStatus

updateStatus: "update-status";

Calls a function to update the plugin status.

Example

const message: IMessage = {
  newProps: {...acceptButton, isDisabled: true},
  actions: [Actions.showToast, Actions.updateProps, Actions.updateStatus],
  toastProps,
}

updateContextMenuItems

updateContextMenuItems: "update-context-menu-items";

Calls a function to update all the context menu items.

Example

const message: IMessage = {
  actions: [Actions.updateContextMenuItems],
}

updateInfoPanelItems

updateInfoPanelItems: "update-info-panel-items";

Calls a function to update all the info panel items.

Example

const message: IMessage = {
  actions: [Actions.updateInfoPanelItems],
}

updateMainButtonItems

updateMainButtonItems: "update-main-button-items";

Calls a function to update all the main button menu items.

Example

const message: IMessage = {
  actions: [Actions.updateMainButtonItems],
}

updateProfileMenuItems

updateProfileMenuItems: "update-profile-menu-items";

Calls a function to update all the profile menu items.

Example

const message: IMessage = {
  actions: [Actions.updateProfileMenuItems],
}

updateFileItems

updateFileItems: "update-file-items";

Calls a function to update all the file items.

Example

const message: IMessage = {
  actions: [Actions.updateFileItems],
}

updateEventListenerItems

updateEventListenerItems: "update-event-listener-items";

Calls a function to update all the event listener items.

Example

const message: IMessage = {
  actions: [Actions.updateEventListenerItems],
}

showToast

showToast: "show-toast";

Calls a function to display a toast notification after the user actions. It does not work if the toastProps parameter is not passed to the message.

Example

const message: IMessage = {
  newProps: {...acceptButton, isDisabled: true},
  actions: [Actions.showToast, Actions.updateProps, Actions.updateStatus],
  toastProps,
}

showCreateDialogModal

showCreateDialogModal: "show-create-dialog-modal";

Calls a function to open a modal window for creating certain item (file, folder, etc.). It does not work if the createDialogProps parameter is not passed to the message.

Example

const message: IMessage = {
  actions: [Actions.showCreateDialogModal],
  createDialogProps: {
    title: "Create diagram",
    startValue: "New diagram",
    visible: true,
    isCreateDialog: true,
    extension: ".drawio",
    onSave: async (e: any, value: string) => {
      await drawIo.createNewFile(value)
    },
    onCancel: (e: any) => {
      drawIo.setCurrentFolderId(null)
    },
    onClose: (e: any) => {
      drawIo.setCurrentFolderId(null)
    },
  },
}

updateCreateDialogModal

updateCreateDialogModal: "update-create-dialog-modal";

Calls a function to update a modal window for creating certain item (file, folder, etc.). It does not work if the createDialogProps parameter is not passed to the message.

Example

const message: IMessage = {
  actions: [Actions.updateCreateDialogModal],
  createDialogProps: {
    title: "some title value",
  },
};

showModal

showModal: "show-modal";

Calls a function to open a modal window. It does not work if the modalDialogProps parameter is not passed to the message.

Example

const message: IMessage = {
  actions: [Actions.showModal],
  modalDialogProps: openFromUrlProps,
}

closeModal

closeModal: "close-modal";

Calls a function to close a modal window.

Example

const message: IMessage = {
  actions: [Actions.closeModal],
}

sendPostMessage

sendPostMessage: "send-post-message";

Calls a function to send a message to a frame. It does not work if the postMessage parameter is not passed to the message or the specified frame is not found.

Example

const message: IMessage = {
  actions: [Actions.sendPostMessage],
  postMessage: {
    frameId: this.frameId,
    message: {
      action: "export",
      format: this.format,
      xml: msg.xml,
      spinKey: "export",
    },
  },
}

saveSettings

saveSettings: "save-settings";

Calls a function to save the data that was transferred in the settings parameter and returns it in the "setAdminPluginSettingsValue" method each time the plugin is requested. It functions only when the "Save" button is clicked in the "Settings" block.

Example

const onSaveButtonClick = (): IMessage => {
  return {
    actions: [Actions.saveSettings, Actions.showToast],
    settings: JSON.stringify({ apiKey: apiKeyInput.value }),
    toastProps: [{ type: ToastType.success, title: "Settings saved" }],
  };
}

showSelector

showSelector: "show-selector";

Calls a function to display a selector. It does not work if the selectorProps parameter is not passed to the message.

Example

const message: IMessage = {
  actions: [Actions.showSelector],
  selectorProps: {
    type: SelectorType.Base,
    props: { ...selectorProps },
  },
}

updateSelector

updateSelector: "update-selector";

Calls a function to update a selector. It does not work if the selectorProps parameter is not passed to the message.

Example

const message: IMessage = {
  actions: [Actions.updateSelector],
  selectorProps: {
    type: SelectorType.Base,
    props: { ...selectorProps },
  },
}

closeSelector

closeSelector: "close-selector";

Calls a function to close a selector.

Example

const message: IMessage = {
  actions: [Actions.closeSelector],
}

addFloatingOperationsButton

addFloatingOperationsButton: "add-floating-operations-button";

Calls a function to add operations in floating button. Multiple plugins can show operations simultaneously - they will be aggregated. It does not work if the floatingOperationsButtonProps parameter is not passed to the message.

note

Each floating operations is identified by its id. Calling this action again will not replace the previous operations.

Example

const message: IMessage = {
  actions: [Actions.addFloatingOperationsButton],
  floatingOperationsButtonProps: { ...floatingOperationsButtonProps },
}

updateFloatingOperationsButton

updateFloatingOperationsButton: "update-floating-operations-button";

Calls a function to update operations in floating button. It does not work if the floatingOperationsButtonProps parameter is not passed to the message.

Examples

const message: IMessage = {
  actions: [Actions.updateFloatingOperationsButton],
  floatingOperationsButtonProps: { ...floatingOperationsButtonProps },
}

note

To update the status directly, use the dispatchMessage callback from the onLoad event.

onLoad(dispatchMessage) {
  const message: IMessage = {
    actions: [Actions.updateFloatingOperationsButton],
    floatingOperationsButtonProps: { ...floatingOperationsButtonProps },
  }
  dispatchMessage(message)
}

removeFloatingOperationsButton

removeFloatingOperationsButton: "remove-floating-operations-button";

Calls a function to remove the floating operations. It does not work if the floatingOperationsButtonPropsId parameter is not passed to the message.

Example

const message: IMessage = {
  actions: [Actions.removeFloatingOperationsButton],
  floatingOperationsButtonPropsId: floatingOperationsButtonProps.id,
}

navigate

navigate: "navigate";

Calls a function to navigate to the specified path. All actions listed after navigate will be called after the navigation is complete. It does not work if the navigatePath parameter is not passed to the message.

Example

const message: IMessage = {
  actions: [Actions.navigate],
  navigatePath: "/rooms/shared/12345",
}

openInfoPanel

openInfoPanel: "open-info-panel";

Calls a function to open the plugin info panel. The tab to open is passed in the infoPanelTab parameter.

Example

const message: IMessage = {
  actions: [Actions.openInfoPanel],
  infoPanelTab: "info_details",
}

showMediaViewer

showMediaViewer: "show-media-viewer";

Calls a function to open the plugin media viewer. The viewer configuration is passed in the mediaViewerProps parameter.

Example

const message: IMessage = {
  actions: [Actions.showMediaViewer],
  mediaViewerProps: { ...mediaViewerProps },
}

updateMediaViewer

updateMediaViewer: "update-media-viewer";

Calls a function to update the plugin media viewer. The new configuration is passed in the mediaViewerProps parameter.

Example

const message: IMessage = {
  actions: [Actions.updateMediaViewer],
  mediaViewerProps: { ...mediaViewerProps },
}

closeMediaViewer

closeMediaViewer: "close-media-viewer";

Calls a function to close the plugin media viewer.

Example

const message: IMessage = {
  actions: [Actions.closeMediaViewer],
}