Skip to main content

Hi,

I’ve just finished building the simple Miro Web Plugin to count the number of widgets by type and would like to add a button on the sidebar which creates a sticky on the board with the count.

I tried adding the button to HTML using the code below but the button itself is not clickable, is this not supported on the sidebar? 

let button = document.createElement('button');
button.className = 'stat-list__button';
button.innerText = 'Create Totals';
button.addEventListener('click', function() {
    alert("Test");
}, false);
statView.appendChild(button);

Thanks for the help!

Tudor

@Tudor

Take an example like this … (at its src/index.js)

https://github.com/miroapp/app-examples/blob/master/template-builder/src/index.js

 

And look at its index.js (which is setup here to define

-1) the UI (“icon24” SVG of icon)

-2) the location of that icon extensionPoints:{toolbar: {..}
”toolbar 

https://developers.miro.com/docs/web-plugins-features#section-render-custom-views

https://developers.miro.com/docs/how-to-use-extension-points

-3)  the functionality (the callback passed to onClick.    In this case(and in many other apps who want to open Miro UI extension point like sidebar or library )  the callback is a Miro method for “ui.openo yourExtensionPoint]]” ) , —> but I’ve seen it working where the callback to onClick is just another function lower in index.js and no html page has to be opened. The button just runs the rest of your operations there (count by type, create sticky(s)— in your case). Give that a try. 


Long story, short: 

index.js in that sample project above ... IS the toolbar button you seek. 

 

—

I recommend scouring through the examples here for a mixture of approaches. https://github.com/miroapp/app-examples

 

Reply


Terms & Conditions