Adding MindMap items via REST API?


I have a MindMap and would like to add more items there using my script.
 

Obviously I want the new elements to have the same style as the ones already created - but they turn to be quite ugly (notice the white background of the “Sample Widget”). :-(


The only differences between the “widget” object that was created manually and the one created by script are

Created on Miro UI Created by script
    "id": "3458764523334544261",
    "style": {
        "backgroundOpacity": 1.0,
        "backgroundColor": "#ffffffff",
        "borderColor": "#ffffffff",
        "borderStyle": "normal",
        "borderOpacity": 1.0,
        "borderWidth": 2.0,
        "fontSize": 14,
        "fontFamily": "OpenSans",
        "textColor": "#1a1a1a",
        "textAlign": "right",
        "shapeType": "text_rect"
    },
    "text": "<p>SIP trunk</p>",
    "x": -437.200615234375,
    "y": 10.0,
    "width": 56.4,
    "scale": 1.0,
    "rotation": 0.0,
    "type": "text",
    "mindmap": {
        "theme": "colorBranch",
        "layout": "butterfly"
    }
}
    "id": "3458764523708892789",
    "style": {
        "padding": 0,
        "backgroundOpacity": 1.0,
        "backgroundColor": "#ffffff",
        "borderColor": "#ffffff",
        "borderStyle": "normal",
        "borderOpacity": 1.0,
        "borderWidth": 2.0,
        "fontSize": 14,
        "fontFamily": "OpenSans",
        "textColor": "#1a1a1a",
        "textAlign": "right",
        "shapeType": "text_rect"
    },
    "text": "Sample Widget",
    "x": 35.0,
    "y": 28.0,
    "width": 100.0,
    "scale": 1.0,
    "rotation": 0.0,
    "type": "text",
    "capabilities": {
        "editable": true
    }
 

 style.padding (which I do not think matters - plus I can only set it to 0 or 8) and the mindmap structure, which I cannot provide via API: "message": "\"mindmap\" property is not allowed"

Any suggestions?


12 replies

Userlevel 3
Badge +1

And if you remove the background color ?

And if you remove the background color ?

How do I remove the background color? You mean do not supply that parameter at all when creating a new widget?

And if you remove the background color ?

Thank you for your advice! I do not understand how it worked - but it worked. I removed the “backgoundColor” element completely:
 

https://api.miro.com/v1/boards/uXjVO8_yUTU=/widgets

{

    "style": {

        "fontSize": 14,

        "textAlign": "right"

    },

    "type": "text",

    "text": "<p>New Sample Widget</p>",

    "x": -42,

    "y": 46

}

and then I get in response backgroundColor assigned anyway
Response body:

{

    "id": "3458764523723863156",

    "style": {

        "padding": 0,

        "backgroundOpacity": 1.0,

        "backgroundColor": "#ffffffff",

        "borderColor": "#ffffffff",

        "borderStyle": "normal",

        "borderOpacity": 1.0,

        "borderWidth": 2.0,

        "fontSize": 14,

        "fontFamily": "OpenSans",

        "textColor": "#1a1a1a",

        "textAlign": "right",

        "shapeType": "text_rect"

    },

    "text": "<p>New Sample Widget</p>",

    "x": -42.0,

    "y": 46.0,

    "width": 100.0,

    "scale": 1.0,

    "rotation": 0.0,

    "type": "text",

...

}

but now all the sudden the new widget has a regular-looking background!

 

Still it would be great for Miro developers to fix API & documentation

Userlevel 3
Badge +1

And if you remove the background color ?

Thank you for your advice! I do not understand how it worked - but it worked. I removed the “backgoundColor” element completely:
 

https://api.miro.com/v1/boards/uXjVO8_yUTU=/widgets

{     "style": {         "fontSize": 14,         "textAlign": "right"     },     "type": "text",     "text": "<p>New Sample Widget</p>",     "x": -42,     "y": 46 }

and then I get in response backgroundColor assigned anyway
Response body: {     "id": "3458764523723863156",     "style": {         "padding": 0,         "backgroundOpacity": 1.0,         "backgroundColor": "#ffffffff",         "borderColor": "#ffffffff",         "borderStyle": "normal",         "borderOpacity": 1.0,         "borderWidth": 2.0,         "fontSize": 14,         "fontFamily": "OpenSans",         "textColor": "#1a1a1a",         "textAlign": "right",         "shapeType": "text_rect"     },     "text": "<p>New Sample Widget</p>",     "x": -42.0,     "y": 46.0,     "width": 100.0,     "scale": 1.0,     "rotation": 0.0,     "type": "text", ... }

but now all the sudden the new widget has a regular-looking background!

 

Still it would be great for Miro developers to fix API & documentation

YES :) 

And now I have another challenge: the items I create via script stay glued to their position on the board no matter if I drag their parent node. The nodes created via Miro editor move along with the parent node, which is what expected.

 

Also the “align child nodes” feature that is available for the “native” MindMap elements does not seem to affect the widgets I add

 

and this function is not even available for the nodes I create via API. :-(

 

Any idea how to create “true” MindMap nodes?

Userlevel 3
Badge +1

I do not have any true knowledge on progamming / coding..
but i’m a good trouble shooter / problme solver and I do understand how it’s all working.. 

So.. my first thought : 

in your transcript, did you put a fix position.. or did you create one with link to the nod parents unfix. 
ex. each new nod is created at the left of the parents and is only linked to the previous node or the next one.. not on your board direclty.. (is it clear?? 😛 ) In my head.. it is :P 😂

Userlevel 3
Badge +1

And if you remove the background color ?

Thank you for your advice! I do not understand how it worked - but it worked. I removed the “backgoundColor” element completely:
 

https://api.miro.com/v1/boards/uXjVO8_yUTU=/widgets

{     "style": {         "fontSize": 14,         "textAlign": "right"     },     "type": "text",     "text": "<p>New Sample Widget</p>",     "x": -42,     "y": 46 }

and then I get in response backgroundColor assigned anyway
Response body: {     "id": "3458764523723863156",     "style": {         "padding": 0,         "backgroundOpacity": 1.0,         "backgroundColor": "#ffffffff",         "borderColor": "#ffffffff",         "borderStyle": "normal",         "borderOpacity": 1.0,         "borderWidth": 2.0,         "fontSize": 14,         "fontFamily": "OpenSans",         "textColor": "#1a1a1a",         "textAlign": "right",         "shapeType": "text_rect"     },     "text": "<p>New Sample Widget</p>",     "x": -42.0,     "y": 46.0,     "width": 100.0,     "scale": 1.0,     "rotation": 0.0,     "type": "text", ... }

but now all the sudden the new widget has a regular-looking background!

 

Still it would be great for Miro developers to fix API & documentation

YES :) 

I thinks the problem is here : "x": -42.0,     "y": 46.0,  

The problem is that even if I do not supply (x;y) during the request to create a widget, they get assigned automatically - and the item stays “glued”

 

Sending POST request to https://api.miro.com/v1/boards/uXjVO61LItE=/widgets

JSON data:  {
    "style": {
        "fontSize": 14,
        "textAlign": "right"
    },
    "type": "text",
    "text": "<p>New Sample Widget #2</p>"
}

received status code 201 
Response body:  {
    "id": "3458764524067109504",
    "style": {
        "padding": 0,
        "backgroundOpacity": 1.0,
        "backgroundColor": "#ffffffff",
        "borderColor": "#ffffffff",
        "borderStyle": "normal",
        "borderOpacity": 1.0,
        "borderWidth": 2.0,
        "fontSize": 14,
        "fontFamily": "OpenSans",
        "textColor": "#1a1a1a",
        "textAlign": "right",
        "shapeType": "text_rect"
    },
    "text": "<p>New Sample Widget #2</p>",
    "x": 0.0,
    "y": 0.0,
    "width": 100.0,
    "scale": 1.0,
    "rotation": 0.0,
    "type": "text",
    "capabilities": {
        "editable": true
    }
}
 


in your transcript, did you put a fix position.. or did you create one with link to the nod parents unfix. 
ex. each new nod is created at the left of the parents and is only linked to the previous node or the next one.. not on your board direclty.. (is it clear?? 😛 ) In my head.. it is :P 😂

It seems that through API I cannot just create a widget, attached to another widget - I have to create an “independent” widget first and then link it to its parent using “line” item.

Userlevel 7
Badge +3

@Andriy Zhylenko 

Unfortunately - The API and SDK do not support mind map widget/item types. 

@Andriy Zhylenko

Unfortunately - The API and SDK do not support mind map widget/item types. 

Thanks!

Miro team - do you have specific plans to fix it in API v2?

Userlevel 7
Badge +3

@Andriy Zhylenko 
In developer documentation site you’ll find “Roadmap” in the upper right. 
 


Look under released and in progress and if its not there look to see if its requested. If it isnt create a request card. If it requested, up vote it. 

 
 


Here is the feature request for CRUD mindmaps - this is your need. I suggest you upvote it. 
https://portal.productboard.com/bs3msuyjdbfr8dfxd84wngpn/c/39-crud-mindmap?utm_medium=social&utm_source=portal_share

Reply