interface-iboarduicommands

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

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:

NameType
panels"all" | UIPanel | UIPanel[]

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:

NameType
mode"editor" | "commentor" | "viewer"

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:

NameType
panels"all" | UIPanel | UIPanel[]

Returns: void


closeBottomPanel

closeBottomPanel(data?: any): void

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

Parameters:

NameTypeDescription
data?anyIgnored for now.

Returns: void


closeLeftSidebar

closeLeftSidebar(data?: any): void

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

Parameters:

NameTypeDescription
data?anyIgnored for now.

Returns: void


closeLibrary

closeLibrary(data?: any): void

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

Parameters:

NameTypeDescription
data?anyIgnored for now.

Returns: void


closeModal

closeModal(data?: any): void

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

Parameters:

NameTypeDescription
data?anyIgnored for now.

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:

NameTypeDescription
containerHTMLElementAn HTMLElement containing the draggable items.
optionsDraggableItemsContainerOptionsDefine the conditions and behavior of the draggable items.

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:

NameTypeDescription
iframeURLstringthe url that will be open in the iframe. If a relative url is used, it will be relative to the defined web plugin url.
options?undefined | { height?: undefined | number ; width?: undefined | number }Options for the bottomPanel. options.width: default 120px, min value: 80px; max: value 320px options.height: default 48px, min value: 48px; max: value 200px

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, options?: undefined | { width?: undefined | number }): 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:

NameTypeDescription
iframeURLstringthe url that will be open in the iframe. If a relative url is used, it will be relative to the defined web plugin url.
options?undefined | { width?: undefined | number }Options for the sidebar. Current only width is available.

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:

NameTypeDescription
iframeURLstringthe url that will be open in the iframe. If a relative url is used, it will be relative to the defined web plugin url.
options{ title: string }Options for the library. Current only title is available.

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:

NameTypeDescription
iframeURLstringthe url that will be open in the iframe. If a relative url is used, it will be relative to the defined web plugin url.
options?{ height?: undefined | number ; width?: undefined | number } | { fullscreen: boolean }Options for the modal. You can define specific dimensions or make it fullscreen.

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:

NameType
valueHTMLElement | string | { height?: undefined | number ; width?: undefined | number }

Returns: void


Did this page help you?