Miro – Create actionable link in a frame

  • 14 February 2023
  • 6 replies
  • 140 views

Badge +1

Hello, 

 

Is there a way to create an actionable link in a frame? I am trying to create the links using Web SDK?

 

I would like to create this action in the top corner of the frame, If there are items, I would like to push the items to any, and add the link

 

Thanks

Sara


6 replies

Userlevel 2
Badge +1

Hi @Sara tom,

Thank you for reaching out.

If I understand correctly, you'd like to create a sort of hot corner on a frame. In either the top-right or top-left corner of the frame; is it correct?

Could you share a bit more context about your use case?

 

> If there are items, I would like to push the items to any, and add the link

 

  • Where would the items be? Inside the frame? Or outside the frame on the board?
  • Where would you like to push the items? To an array?
  • Where would you like to add the link?
  • How would the action be triggered? By hovering the mouse over the hot corner of the frame? Or in a different way?

Apologies for bothering you with so many questions. Your replies will help me better understand your use case so that I can get back to you with a more accurate answer.

Best,

marco

Technical writer | Developer support | DevX

Badge +1

Thanks @Marco Spinello for responding it so quickly!!

We are in the exploratory phase to see if we can integrate Miro with our internal application. It is just like Github & Miro integration. I will take Github issues as an example.

Assume users would create all the data tied to an issue in a frame:

  • Description
  • steps to reproduce
  • Reporter
  • One or more screenshots

So we will have multiple frames on a board, each representing an issue. So when the Miro plugin submits to create git issues, it will create one issue per frame. Once the issue is created in Git, I would like to add a card or text that can display the link to the git issue in the top corner of the frame.

So my requirements is to add llnk to Git issue n top corner

 

 

 

Userlevel 2
Badge +1

Hi @Sara tom,

Thank you so much for taking the time to get back with more context: it's very helpful.

 

Probably the easiest option for you to integrate this data flow between Miro and an external application is through app cards: https://developers.miro.com/docs/app-card-use-cases
They are more flexible than frames, and you could use the app card custom fields to map the data that you want to import into Miro.

 

If you wish to achieve similar results with frames, you'd need to map child text and image items to specific fields or IDs in the data origin.
You could map a text item to fetch the data source URL and insert it in the text.content field, for example.

If you sync the data with a cron job or a scheduler, the URL data would populate the text.content field when this information becomes available. In this case, you would not need the frame to listen to an event to do that.

 

Currently, these are the events that the Web SDK supports: https://developers.miro.com/docs/ui_boardui#supported-events
Unfortunately, there are no frame-specific events available at this time.

 

As an alternative, you could move this logic to the backend and consider using webhooks: https://developers.miro.com/reference/webhooks-overview

 

Would any of these options be viable, or is displaying all the synced data inside frames a hard requirement for your desired implementation?

 

Best,

marco

Technical writer | Developer support | DevX

Userlevel 2
Badge +1

Hi @Sara tom,

I double-checked with the engineers who own the Web SDK: for your use case, they also recommend implementing it through app cards.

The tutorial that syncs GitHub issues with Miro app cards covers a similar use case, and it can provide some guidance to get you started.

Best,

marco

Technical writer | Developer support | DevX

Badge +1

Thanks @Marco Spinello for checking.. Can App Card contains multiple fields to hold all information related  to an issue. 

Say I  want to have a parent container that holds different fields like description, steps to reproduce, notes and also add screen shots to an issue. User will be adding the details for multiple issues in Miro board.  

Userlevel 2
Badge +1

Hi @Sara tom

App cards are designed to map the information structure in the data source that they sync with.

You can map app card custom fields to specific fields in the data source. 

The description field of the app card supports text and a subset of HTML tags, but no images.

You may wish to consider the image item to pull images from a data source to a Miro board.
It's not possible to embed an image item within an app card, but related images could be positioned next to or under the app card they refer to, for example.

If users update issue information on a Miro board, the data in the app card would be synced with its data source, but the images would remain unsynced, and available only on the board.
The experimental:items:update event fires when items on the board are updated. If your app listens to it, it can trigger an action when users update the images on the board, fetch the updated image data, and send it to an external application.

Best,

marco

Technical writer | Developer support | DevX

Reply