Skip to main content
Answered

baackgroundColor property for miro.board.widgets.create method

U

I have the following code to recursively create a custom sticky widget from a CSV inside a web plugin. 

miro.board.widgets.create({
      "type": "sticker",
      "style": {
        "backgroundColor": "#ea94bb",
        "fontFamily": "Bangers",
        "textAlign": "right"
      },
      "text": data[i][filter],
      "x": ( 220 * horizontal ),
      "y": ( 220 * vertical )
    })

Regardless of what color I substitute in the backgroundColor property, I cannot get the stickies to generate as that color. They always get created yellow. I have run this same method with the “shape” widget and I get the correct specified background color. 

It there some nuanced approach to coloring stickers that I am just overlooking? I have been through the API documentation at least two dozen times. 

Best answer by Anthony Roux

Hi @uxmccauley,

 

It can be a bit confusing but the background color parameter for stickers is different than the one for shapes. You can find it documented here.

 

In your case you need to replace backgroundColor by stickerBackgroundColor.

 

This should solve the issue.

Anthony

View original
Was it helpful?
100% found this helpful

5 replies

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

Hi @uxmccauley,

 

It can be a bit confusing but the background color parameter for stickers is different than the one for shapes. You can find it documented here.

 

In your case you need to replace backgroundColor by stickerBackgroundColor.

 

This should solve the issue.

Anthony

U
1 person likes this
  • U
    uxmccauley
U
  • uxmccauley
  • Author
  • Beginner
  • 3 replies
  • May 18, 2021

Oh neato! Thanks so much. I will try that today. 

U
  • uxmccauley
  • Author
  • Beginner
  • 3 replies
  • May 18, 2021

I tried that and I get this error. 

 

U
  • uxmccauley
  • Author
  • Beginner
  • 3 replies
  • May 18, 2021

Guess what, I realized that I am an idiot. I moved that prop into the style object and it works great now! Let’s just find a way to dynamically add tags and life will be amazing. 

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

FYI: when using Styling, some elements are actually enums (this is the case for “textAlign”). You can take a look at this post to see how to use the Miro SDK enums. 

 

Not sure what you are trying to do with tags but you can easily tag stickers using something like:

 

let allStickers = await miro.board.widgets.get({type: 'sticker'})

miro.board.tags.create({title: 'Red tag', color: '#F24726', widgetIds: allStickers})

 

U
1 person likes this
  • U
    uxmccauley

Reply


Behind the Canvas: Powering Innovation in Miro

Terms & Conditions