Skip to main content
Answered

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

R

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)

 

Best answer by Anthony Roux

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

View original
Was it helpful?

4 replies

Anthony Roux
Mironeer
Forum|alt.badge.img+1

Hi @Reuben Su'a,

 

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

 

Thanks,

Anthony 

R
  • Reuben Su'a
  • Author
  • Beginner
  • 2 replies
  • May 10, 2021

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"
}

 

Anthony Roux
Mironeer
Forum|alt.badge.img+1
  • Anthony Roux
  • Mironeer
  • 215 replies
  • Answer
  • May 18, 2021

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

R
1 person likes this
  • R
    Reuben Su'a
R
  • Reuben Su'a
  • Author
  • Beginner
  • 2 replies
  • May 27, 2021

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

Anthony Roux
1 person likes this
  • Anthony Roux
    Anthony Roux

Reply


Behind the Canvas: Powering Innovation in Miro

Terms & Conditions