Test Environment. You are currently using the Webex for Developers test environment. Apps created here will not be available for use with Webex Teams. Please visit Webex for Developers to manage your apps.

Buttons and Cards now support Adaptive Cards 1.2

May 20, 2020
Gaurav Sharma
Gaurav SharmaProduct Manager
Buttons and Cards now support Adaptive Cards 1.2

We've made several improvements to Buttons and Cards that we're pleased to share with you. Buttons and Cards, which use Microsoft's Adaptive Cards framework, add interactivity to messages in Webex Teams. Starting today, you can now:

  1. Design and build cards right here on Webex for Developers with an interactive Buttons & Cards Designer
  2. Use new elements and properties from Adaptive Cards 1.2
  3. Ensure that cards you've created are well-formed and will be sent without error with instant validation from the Messages API

Let's dig into each of these features.

Buttons and Cards Designer

The new Buttons and Cards Designer is now available here on Webex for Developers: https://developer.webex.com/buttons-and-cards-designer

The designer lets you design cards with an interactive GUI. Once your card is ready, use the linked JSON to send your card. Spend less time worrying about the card's JSON syntax and spend your energy on more important tasks.

screenshot of interactive Webex Buttons and Cards Designer

Support for Adaptive Cards 1.2

Elements and Properties added to your arsenal from the Adaptive Card 1.2 release include:

  • RichTextBlock
  • TextRun
  • ActionSet
  • fontType for TextBlock
  • bleed, minHeight properties for Container
  • style, bleed, minHeight properties for ColumnSet
  • bleed, minHeight, properties for Column
  • inlineAction property for Input.Text
  • wrap property for Input.Toggle
  • wrap property for Input.ChoiceSet
  • backgroundImage property of adaptiveCard and container

Here are a few examples of how you might leverage the new 1.2 schema elements.

The RichTextBlock and TextRun elements provide a set of attributes that give you fine grained control over the formatting of text in a card, enabling cards with text that looks like this:

screenshot of Webex Card with rich text styling and background image

The new ActionSet element provides you with freedom to include action buttons anywhere in the card and not just at the end of a card:

screenshot of Webex Card multiple sets of actions

We encourage you to play around with all of the elements that are now available in the new Buttons and Cards Designer.

There are still a few Adaptive Card schema elements and attributes which are not supported by Webex Teams:

  • Media
  • speak and verticalContentAlignment property for Adaptive Cards
  • fallback and requires property on the Element level
  • height property for the ColumnSet
  • Action.ToggleVisibility for ActionSet or Actions

Enhanced Validation Support

To help make it more obvious which aspects of the Adaptive Card schema we do and don’t support, we have enhanced the Messages API validation for messages with card attachments. Requests that receive an HTTP 200 response will always result in an attempt to render the card, while responses with a non-200 response will not. The endpoint will return 400 responses with clear error messages in cases where your card uses an unsupported “version” field or includes any of the unsupported elements or attributes. If the card's JSON is malformed, you will receive an HTTP 400 response right away.

A few examples can be seen here:

screenshot of Postman encountering an error when attempting to send a card with an unsupported property

screenshot of Postman encountering an error when attempting to send a card with an unsupported version

We're excited to bring you these new time-saving features for Buttons and Cards. If you have product feedback or if you have any questions, please reach out to Webex Developer Support.