2022-12-21 changelog

Miro Web SDK 2.0 supports board item metadata and more styles for text and shape items

What's new

Miro Web SDK 2.0 supports board item metadata

Besides functionality to get and set app metadata at board level, the Miro Web SDK 2.0 now offers the ability to get and set metadata for board items at app level:

•  Experimental
  getMetadata enables retrieving board item metadata for the key that you pass as an argument with the method.
  The response contains the metadata value assigned to the requested key.
•  Experimental
  setMetadata enables setting board item metadata to make it available on the board that the app is running on.

Apps can access only the board item metadata that they set. They cannot access metadata set by other apps.

What's changed

Miro Web SDK 2.0 supports more styles for text and shape items

We added support for additional style properties to customize the look and feel of shape and text items.

Shape item

You can now programmatically control also the following style properties of shape items:

• Color of the text inside a shape item: color
• Style (type), width (thickness), color, and opacity level of the line that delimits the boundaries of a shape item:
  • borderStyle
  • borderWidth
  • borderColor
  • borderOpacity
• Opacity level of the fill color of a shape item: fillOpacity

// shape item 'style' object, with the new properties  
style: {
  color: '#ff0000', // New style property
  fillColor: '#ffff00',
  fontFamily: 'arial', 
  fontSize: 14, 
  textAlign: 'center', 
  textAlignVertical: 'middle', 
  borderStyle: 'normal', // New style property
  borderOpacity: 1.0, // New style property
  borderColor: '#ff7400', // New style property
  borderWidth: 2, // New style property
  fillOpacity: 1.0, // New style property
},

Text item

You can now programmatically control also the following style property of text items:

• Color of the text assigned to the content property of the text item: color

// text item 'style' object, with the new property
style: {
  color: '#1a1a1a', // New style property
  fillColor: 'transparent',
  fillOpacity: 1,
  fontFamily: 'arial',
  fontSize: 14,
  textAlign: 'left',
},