Add icon click to your app
Enable clicking an icon to call a function that performs an action.
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:
- You have a Miro account.
- You're signed in to Miro.
- Your Miro account has a Developer team.
- Your development environment includes Node.js 14.15 or a later version.
Load the Miro Web SDK and the index.js
files
index.js
filesThe 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
icon:click
eventWhen 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
Updated 11 months ago