Answered

How to link nodes programmatically?

  • 18 November 2020
  • 4 replies
  • 817 views
M

Hello!

Using the miro javascript sdk, I have built a plugin to create shape groups based on a given input. Now I would also like to create the links between shapes programmatically. Take a look at the picture below, please.

The links were created manually to show what is the intended result. 

Since I have reference to the widgets it should somehow be possible to create links between them. But I did not find a corresponding method. 

Ideas how to achieve that?


Thanks, Markus

icon

Best answer by Viktor Razumov 18 November 2020, 12:12

View original

4 replies

V
Rank
Userlevel 1

Hi Markus,

 

To create links you can use the same method miro.board.widgets.create() => Promise<SDK.IWidget[]>. Please see an example below:

 

miro.board.widgets.create({
	type: 'LINE',
	startWidgetId: startWidgetObject.id,
	endWidgetId: endWidgetObject.id,
	style: {
	    lineColor: '#000000',
	    lineEndStyle: miro.enums.lineArrowheadStyle.CIRCLE,
		lineStartStyle: miro.enums.lineArrowheadStyle.NONE,
		lineStyle: miro.enums.lineStyle.NORMAL,
		lineThickness: 1,
		lineType: miro.enums.lineType.ARROW,
	},
}),

 

Daniela Gavidia
Rank
Userlevel 4
Badge

Hello Markus,

 

The links between the widgets in your screenshot are LINE widgets. LINE widgets have the following properties:
https://developers.miro.com/docs/interface-ilinewidget
 

In order to create a LINE widget that connects two other widgets in the board you would have to provide the ids of the widgets it connects as the properties startWidgetId and endWidgetId. For example, here I create a LINE widget that connects two STICKER widgets in my board:
 

await miro.board.widgets.create({
  type: "LINE", 
  startWidgetId: "3074457351730884646", 
  endWidgetId: "3074457351730884672", 
  style: {
    lineEndStyle: miro.enums.lineArrowheadStyle.FILLED_ARROW
  }
})

That creates an arrow connecting my two STICKER widgets:
 

 

I hope this helps.

 

Kind regards.

 

Daniela

Developer Experience Team

S

How can we do this with v2 ? 

B

Connector is currently unsupported for v2 according to this:

https://developers.miro.com/docs/board-items#unsupported-items

Reply


Terms & Conditions