How to make a sidebar plugin, rather than a pop-up plugin


Userlevel 1
Badge +1

Hey all, I’m working on developing a Miro plugin and would like to find out how I can make my plugin take up the sidebar, rather than opening up as a pop-up. I’ve attached a screenshot of the difference between the sidebar and pop-up plugins which I am referring to (Let me know if there is a correct way to name these!).

 

The documentation only has openPanel and openModal which do not work for me. Any help would be much appreciated! 

 

Cheers!

 

 

BoardUI Documentation
Sidebar Plugin
Pop-up Plugin

 


11 replies

Userlevel 7
Badge +12

@Joseph Low - It looks like Clusterizer is still using SDK 1.0. According to the following documentation, openLeftSidebar has been removed in 2.0:

https://developers.miro.com/docs/web-sdk-comparison-guide#modals

 

Userlevel 5
Badge +1

Hi, 

 

Robert is right, in the new version of SDK (v2), we only support 2 extension points for the moment:

  • The app panel that you can open using openPanel. It opens on the right on the side bar and you can control its height. 
  • A modal view openModal that you can fully configure

 

More information here.

 

I would be interested to understand why the app panel doesn’t fit your need and why the leftSideBar is a better fit for your need.

 

Userlevel 7
Badge +12

A benefit of Panel over LeftSidebar:

 

Userlevel 1
Badge +1

I see . So the only way for me to make my plugin on the left sidebar is to downgrade to SDK V1?

 

I do prefer the left sidebar as it does not obstruct what is on the user’s board. Our plugin requires a fair bit of back-and-forth interaction between selecting things on the Miro board and interacting with the plugin.

 

For openPanel, our users tend to accidentally close the plugin (causing the plugin state to reset), and the openModal is not suited for our needs as the user still needs to select items on the board while the plugin is open.

Userlevel 7
Badge +12

@Joseph Low

I do prefer the left sidebar as it does not obstruct what is on the user’s board.

From my tests, both the SDK 1.0 and 2.0 Sidebar and Panel do temporarily obstruct the board’s content:

 

Looking at the SDK documentation, you may be able minimize the obstruction by panning/resizing the board using the Viewport property?

https://developers.miro.com/docs/viewport_viewport

For openPanel, our users tend to accidentally close the plugin (causing the plugin state to reset), and the openModal is not suited for our needs as the user still needs to select items on the board while the plugin is open.

Do you have an example of how exactly users are doing this? Are they accidentally clicking on the “X”?

Userlevel 1
Badge +1

Hello Community


As I see it, the LeftSideBar has the advantage that you could create further widget (like sticky notes) without the disappearing of the panel. This isn’t the case for the openPanel panel in the SDK 2.0.

At least I could not find a way, to implement this behaviour.

 

 

Userlevel 2
Badge +1

Hello Vladimir, 

The good news is you can indeed drag and drop items from an open panel to the board. Here is a documentation page that provides more information and some samples:
https://developers.miro.com/docs/add-drag-and-drop-to-your-app
 

I hope this does cater to your use case and answers your query. If not, please provide more details and we’ll be happy to help.

Thanks and have a good one!

 

Best,

Mira 

Userlevel 1
Badge

In my opinion, it would be lovely to be able to keep an app menu open for longer than just one click interaction. 

Userlevel 6
Badge +4

Hey @Tboeh, you’re referring to the primary app bar on the left hand side in Miro, right?
 

 

Userlevel 1
Badge

Maybe I misunderstood something there, but what I understood is that if I create a panel and interact with the elements that are in the panel, once the action is finished (like creating a widget on the board) the panel closes. Is there a way to prevent that?

Userlevel 6
Badge +4

Hey @Tboeh thanks for clarifying!

The app panel for an SDK app doesn’t have to close after an action is taken. Is is possible you’re calling the close modal method somewhere, or have some sort of timeout set on openModal? 

You might find this example app helpful — it opens a modal where you can drag and drop images. You’ll notice if you drag an item from the panel, the panel remains open:
https://github.com/miroapp/app-examples/tree/main/examples/drag-and-drop

Reply