Skip to main content

Add icon click to your app

The Miro Web SDK implements events with board.ui.on.
When a specific event type occurs, an event handler calls a function after the specified event has occurred.

Goal

Use the Miro Web SDK to let users click an icon so that they can trigger an action, such as opening a panel or displaying a modal.

Video 1. The icon:click event enables clicking the app icon on the toolbar to open a panel.

Prerequisites

Before you begin, make sure that:

Load the Miro Web SDK and the index.js files

The index.html file of the Miro starter app already includes <script> tags to load the Miro Web SDK and the index.js files.
If you prefer to create an index.html file from scratch, make sure that it has at least the following HTML elements and structure:

index.html example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My app implements icon click</title>
    <!-- Loads the Miro Web SDK -->
    <script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
    <!-- Loads the companion JS file with the logic -->
    <script src="index.js"></script>
  </head>
  <body>
    <!-- HTML body content goes here -->
  </body>
</html>

Add the icon:click event

When index.html loads, it fetches index.js. This is the file that contains the logic to initialize your app. For example:

  • Add an app icon to the board toolbar.
  • Make the app icon clickable.
  • Listen to click events so that clicking the app icon calls a function that performs an action on the board.

If you're using the create-miro-app CLI tool, the icon:click event is already implemented in the index.js file.

Please note that at this time it is only possible to trigger click events from icons in the toolbar. It is not possible to set add click event listeners on board items.

If you prefer to create an index.js file from scratch, make sure that it features at least the following code:

index.js example

async function init() {
  // Enable the 'icon:click' event on the app icon
  await miro.board.ui.on("icon:click", async () => {
    // In this example: when the app icon is clicked, a method opens a panel
    await miro.board.ui.openPanel({
      // The content displayed on the panel is fetched from the specified HTML resource
      url: "app.html"
    });
  });
}

init();

See also