Collapsible Rows

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.