Interface: IBoardUICommands

Commands to manipulate the user interface of the current board and make use of
container extension points.

When a container extension point is opened (e.g. the sidebar) an iframe will be created
and loaded based on the options you use to open it. There are different mechanism to communicate
between these iframes, such events and states.

Read more about Extension Points

Hierarchy

• IBoardUICommands

Index

Methods

• __clearToolbarModeLimit
• __hideButtonsPanels
• __limitToolbarMode
• __selectDefaultTool
• __showButtonsPanels
• closeBottomPanel
• closeLeftSidebar
• closeLibrary
• closeModal
• initDraggableItemsContainer
• openBottomPanel
• openLeftSidebar
• openLibrary
• openModal
• resizeTo

Methods

__clearToolbarModeLimit

▸ __clearToolbarModeLimit(): void

Removes any limitation set with __limitToolbarMode.

Note: this will not allow a non-authorized user to modify the board

Returns: void

__hideButtonsPanels

▸ __hideButtonsPanels(panels: "all" | UIPanel | UIPanel[]): void

Hides interface panels UIPanel

experimental

Parameters:

Returns: void

__limitToolbarMode

▸ __limitToolbarMode(mode: "editor" | "commentor" | "viewer"): void

Sets the toolbar mode. Some modes show more options than other. Example: the viewer can only see the default tool.

Note: this will not limit the ability of the current user to interact with the board widgets.

Parameters:

Returns: void

__selectDefaultTool

▸ __selectDefaultTool(): void

Selects the board default tool

experimental

Returns: void

__showButtonsPanels

▸ __showButtonsPanels(panels: "all" | UIPanel | UIPanel[]): void

Shows interface panels UIPanel

Parameters:

Returns: void

closeBottomPanel

▸ closeBottomPanel(data?: any): void

Closes the bottom panel.
Throws error if the bottom panel was not opened by the plugin

Parameters:

Returns: void

closeLeftSidebar

▸ closeLeftSidebar(data?: any): void

Closes the left sidebar.
Throws error if the sidebar was not opened by the plugin

Parameters:

Returns: void

closeLibrary

▸ closeLibrary(data?: any): void

Closes the library.
Throws error if the library was not opened by the plugin

Parameters:

Returns: void

closeModal

▸ closeModal(data?: any): void

Closes the modal.
Throws error if the modal was not opened by the plugin

Parameters:

Returns: void

initDraggableItemsContainer

▸ initDraggableItemsContainer(container: HTMLElement, options: DraggableItemsContainerOptions): void

Enables a container (HTMLElement) to have draggable elements (items).

Note: Not all items inside the container will be draggable.
See DraggableItemsContainerOptions to know how to define them.

Items dynamically added to the container will be draggable if matching the conditions defined in DraggableItemsContainerOptions

todo add link to a guide with a full working example

Parameters:

Returns: void

Example

//This example code should run in a container extension point like the left sidebar or the library.
miro.onReady(() => {
  // Contains the draggable elements
  const draggable = document.getElementById("draggables-container");
  miro.board.ui.initDraggableItemsContainer(draggable, {
    // matching elements will be draggable
    draggableItemSelector: ".drag-me",
    getDraggableItemPreview: function () {
      return {
        url: "https://dummyimage.com/600x400/000000/ffffff&text=Drag+Me",
      };
    },
    onDrop: function () {
      miro.showNotification("You dropped something");
    },
  });
});

openBottomPanel

▸ openBottomPanel(iframeURL: string, options?: undefined | { height?: undefined | number ; width?: undefined | number }): Promise<any>

Opens the bottom panel extension point and loads an iframe with the iframeURL.

You can communicate with this iframe by using the broadcastData method.

Parameters:

Returns: Promise<any>

A promise that will be resolved once the bottomPanel is closed.

Example

miro.onReady(async () => {
  miro.initialize({
    extensionPoints: {
      // create a button on the bottom bar
      bottomBar: {
        title: "Open a modal",
        svgIcon:
          '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          miro.board.ui.openBottomPanel("/sidebar.html", {
            width: 200,
            height: 200,
          });
        },
      },
    },
  });
});

openLeftSidebar

▸ openLeftSidebar(iframeURL: string): Promise<any>

Opens the left sidebar and loads an iframe with the iframeURL.

You can communicate with this iframe by using the broadcastData method.

Parameters:

Returns: Promise<any>

A promise that will be resolved once the left sidebar is closed.

Example

miro.onReady(async () => {
  miro.initialize({
    extensionPoints: {
      // create a button on the bottom bar
      bottomBar: {
        title: "Open a sidebar",
        svgIcon:
          '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          // open the sidebar when clicked
          // `/sidebar.html` will be relative to the plugin url
          miro.board.ui.openLeftSidebar("/sidebar.html");

          // send a message to the sidebar after 5 seconds
          setTimeout(() => {
            miro.broadcastData("Hello from the bottom bar");
          }, 5000);
        },
      },
    },
  });
});

openLibrary

▸ openLibrary(iframeURL: string, options: { title: string }): Promise<any>

Opens the library extension point and loads an iframe with the iframeURL.

You can communicate with this iframe by using the broadcastData method.

Parameters:

Returns: Promise<any>

A promise that will be resolved once the library is closed.

Example

miro.onReady(async () => {
  miro.initialize({
    extensionPoints: {
      // create a button on the bottom bar
      bottomBar: {
        title: "Open the library",
        svgIcon:
          '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          // `/library.html` will be relative to the plugin url
          miro.board.ui.openLibrary("/library.html", { title: "The library!" });
        },
      },
    },
  });
});

openModal

▸ openModal(iframeURL: string, options?: { height?: undefined | number ; width?: undefined | number } | { fullscreen: boolean }): Promise<any>

Opens the modal extension point and loads an iframe with the iframeURL.

You can communicate with this iframe by using the broadcastData method.

Parameters:

Returns: Promise<any>

A promise that will be resolved once the modal is closed.

Example

miro.onReady(async () => {
  miro.initialize({
    extensionPoints: {
      // create a button on the bottom bar
      bottomBar: {
        title: "Open a modal",
        svgIcon:
          '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          miro.board.ui.openModal("/modal.html", { width: 400, height: 400 }).then(() => {
            miro.showNotification("modal closed");
          });
        },
      },
    },
  });
});

resizeTo

▸ resizeTo(value: HTMLElement | string | { height?: undefined | number ; width?: undefined | number }): void

Resizes the current iframe inside the bottom-panel.

todo this method does not exist
resizeToInner does exist

The left sidebar and the modal are not yet supported.

Parameters:

Returns: void