Skip to main content

I was thinking of building a plug-in to do this (but not using the existing story widget - just creating something custom): https://community.miro.com/wish-list-32/user-story-mapping-feature-collapsible-rows-5526

It would involve

  1. A story board wrapper - which could automatically stack the rows vertically
  2. Rows which could contain stickers and notes etc (could be frames)
  3. Shapes on each row that could act as buttons to toggle expanding them and collapsing them - as well as triggering the main wrapper to re align the rows vertically

Can I do this with the tools in the SDK?

I got the Hello World app working, but I didn’t see an example of someone making a new widget - which I think I would need to do for point 2 above, or at least add an onClick listener to a shape - is that possible? Could I add something to the menu of a frame saying it is a story wrapper or a story row, and then something to the menu of a shape to designate it as an expand collapse toggle for the row it is in?

 

Hey Josh,

 

Really cool idea, and love it that you’re thinking about solving problems like this using Miro’s platform! Hopefully I can shed a bit of light on some of Miro’s platform capabilities and some ways you might approach something like this. 

Before diving into the solutions around this, I do want to mention some limitations. To start with an answer to one of your questions above, custom widgets are not available in Miro, but you could potentially create a solution using Miro’s built in elements (Frames, Shapes, etc)

 

Another limitation you might run into, is trying to manipulate (create/read/update) some of the elements you mention in the original post. Only certain elements in Miro are editable, but unfortunately the user story mapping element is not. You can find a full list of elements you can access using Miro’s platform here: https://developers.miro.com/docs/widgets-manipulation

 

Luckily, one thing that will be helpful, is that we can edit/update cards using the Web SDK and REST API!

 

One of the last limitations I wanted to mention, is that you’re not able to listen to events on the Miro board. This mean if you want to collapse the rows, it would need to be done from the app interface, which is what you normally see on the left sidebar when you first launch/open your app. 

 

You’ll have to build the logic to control the custom layout instead of relying on the user mapping widget, but If you’re going to build something like this—I would approach it in the following manner: 

 

Let’s say we have a few rows and columns on a Miro board, and not inside of a user map.

 

  1. Select all the cards, and store the selection in a variable. This will contain all of the selection items, and information you can use, like their position, size, and content: https://developers.miro.com/docs/interface-iboardselectioncommands
  2. Map over the different elements, and move the position of the ones you want to collapse into 1 row. You’ll have to decide how you want to display the “collapsed” or hidden ones, but putting them all on top of each other could be 1 simple solution. 

You’ll want to make sure you can expand the selection as well, which you can either do by keeping a reference of the original positions of the cards, or simply by re-organizing/expanding them into a bigger layout that you customize.

 

Hopefully this helps and gives a bit more context on how you could do this! Long story short, you’ll need to do a lot of this custom, but should be possible in one way or another.

 

 

 

 

Thanks for the prompt and thorough response.
Unfortunately I would need to be able to listen for a click on a shape or custom widget. I want to make something that can be viewed and interacted with by execs, not designers or devs.
Thanks for setting the possibilities all out so clearly!

J

 

 

Reply


Terms & Conditions