Answered

Can't create widget using miro.board.widgets.create(). TypeError: Cannot read property 'name' of undefined

  • 10 May 2021
  • 4 replies
  • 212 views

Hello, I am trying to programmatically populate a board with predefined shape widgets.

 

N.B i can successfully create a frame widget, but not its children and attempting to separately render child widgets hasn’t worked for me either.

 

Please see stack trace below, I suspect that the error is originating from the Miro Web Plugin SDK.

Looking through the documentation, I can’t see a requirement for a ‘name’ property for a widget.. tested and adding a name property to the json object results in the same error.

Please, Let me know

Regards, R

TypeError: Cannot read property 'name' of undefined
    at Function.t.getName (Board.4b1e51e782d99f6d574d.js:2)
    at t.setFontSizeOfStyle (Board.4b1e51e782d99f6d574d.js:2)
    at n.setWidgetData (Board.4b1e51e782d99f6d574d.js:2)
    at n.setJsonData (Board.4b1e51e782d99f6d574d.js:2)
    at n.setData (Board.4b1e51e782d99f6d574d.js:2)
    at new n (Board.4b1e51e782d99f6d574d.js:2)
    at create (Board.4b1e51e782d99f6d574d.js:2)
    at Object.e.create (Board.4b1e51e782d99f6d574d.js:2)
    at t.create (Board.4b1e51e782d99f6d574d.js:2)
    at e.createFromData (Board.4b1e51e782d99f6d574d.js:2)
    at Board.4b1e51e782d99f6d574d.js:2
    at e.applyChanges (Board.4b1e51e782d99f6d574d.js:2)
    at e.o.value [as applyChanges] (application-core.0a3dbd1a495be8e64cd5.js:2)
    at e.n.value [as createFromData] (Board.4b1e51e782d99f6d574d.js:2)
    at e.create (BoardSdk.e87d1ecfb7458dfe0744.js:1)
    at kt (BoardSdk.e87d1ecfb7458dfe0744.js:1)
    at BoardSdk.e87d1ecfb7458dfe0744.js:1
    at Array.map (<anonymous>)
    at e.<anonymous> (BoardSdk.e87d1ecfb7458dfe0744.js:1)
    at (index):216
    at Object.next ((index):216)
    at (index):216
    at new Promise (<anonymous>)
    at c ((index):216)
    at e.create (BoardSdk.e87d1ecfb7458dfe0744.js:1)
    at e.r.value (BoardSdk.e87d1ecfb7458dfe0744.js:1)
    at e.o.value [as create] (BoardSdk.e87d1ecfb7458dfe0744.js:1)
    at t.processCommand (BoardSdk.e87d1ecfb7458dfe0744.js:1)
    at e.processCommandFromIFrame (BoardSdk.e87d1ecfb7458dfe0744.js:1)
    at T (BoardSdk.e87d1ecfb7458dfe0744.js:1)

 

icon

Best answer by Anthony Roux 18 May 2021, 16:00

View original

4 replies

Userlevel 5
Badge +1

Hi @Reuben Su'a,

 

Could you please share with us the code sample that throws this error? 

 

Thanks,

Anthony 

I am simply calling miro.board.widgets.create( room.children )  where room.children is an array of widget objects similar to the one i have attached below. quite literally if I comment this line out the plugin works fine...

{
"style": {
"padding": null,
"backgroundOpacity": 1,
"backgroundColor": "#1b458c",
"borderColor": "#1a1a1a",
"borderStyle": "normal",
"borderOpacity": 1,
"borderWidth": 2,
"fontSize": 26,
"fontFamily": "OpenSans",
"textColor": "#ffffff",
"textAlign": "center",
"textAlignVertical": "middle",
"shapeType": "rectangle"
},
"text": "<strong>Flexi<strong></strong></strong>",
"x": -13104.9162094731,
"y": 6964.16873528896,
"width": 355.556475636959,
"height": 184.266494673168,
"rotation": 270,
"type": "shape"
}

 

Userlevel 5
Badge +1

Thanks for sharing this.

Some elements of the Styling are Enums. This is the case for example for fontFamily. It takes a number as parameter, not a string of the name of the font.

The SDK provides enums for these specific values:

miro.enums.*

In the case of the fontFamily you can use:

miro.enums.fontFamily.OPEN_SANS

This is the case as well for:

To fix your issue you will need to change your code for: 

{
"style": {
"padding": null,
"backgroundOpacity": 1,
"backgroundColor": "#1b458c",
"borderColor": "#1a1a1a",
"borderStyle": "normal",
"borderOpacity": 1,
"borderWidth": 2,
"fontSize": 26,
"fontFamily": miro.enums.fontFamily.OPEN_SANS,
"textColor": "#ffffff",
"textAlign": miro.enums.textAlign.CENTER,
"textAlignVertical": miro.enums.textAlignVertical.MIDDLE,
"shapeType": "rectangle"
},
"text": "<strong>Flexi<strong></strong></strong>",
"x": -13104.9162094731,
"y": 6964.16873528896,
"width": 355.556475636959,
"height": 184.266494673168,
"rotation": 270,
"type": "shape"
}

 

Regards,

Anthony

ah thats it, thank you vey much. not sure how i missed this but perhaps a better error message would have prevented this.

Reply