Getting Started
An Adaptive Card is a JSON-serialized card object model.
The basic structure of a card is as follows:
AdaptiveCard
- The root object describes the AdaptiveCard itself, including its element makeup, its actions, how it should be spoken, and the schema version required to render it.body
- The body of the card is made up of building-blocks known aselements
. Elements can be composed in nearly infinite arrangements to create many types of cards.actions
- Many cards have a set of actions a user may take on it. This property describes those actions which typically get rendered in an "action bar" at the bottom.
This sample card which includes a single line of text followed by an image.
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Here is a ninja cat"
},
{
"type": "Image",
"url": "http://adaptivecards.io/content/cats/1.png"
}
]
}
Every element has a type
property which identifies what kind of object it is. Looking at the above card, you can see we have two elements, a TextBlock
and an Image
.
All Adaptive Card elements stack vertically and expand to the width of their parent (think display: block
in HTML). However, you can use a ColumnSet
to create side-by-side columns of containers.
The most fundamental elements are:
- TextBlock - adds a block of text with properties to control what the text looks like
- Image - adds an image with properties to control what the image looks like
Cards can also have containers, which arrange a collection of child elements.
- Container - Defines a a collection of elements
- ColumnSet/Column - Defines a collection of columns, each column is a container
- FactSet - Container of Facts
- ImageSet - Container of Images so that UI can show appropriate photo gallery experience for a collection of images.
Input elements allow you to ask for native UI to build simple forms:
- Input.Text - get text content from the user
- Input.Date - get a Date from the user
- Input.Time - get a Time from the user
- Input.Number - get a Number from the user
- Input.ChoiceSet - Give the user a set of choices and have them pick
- Input.Toggle - Give the user a single choice between two items and have them pick
Actions add buttons to the card. These can perform a variety of actions, like opening a URL or submitting some data.
- Action.OpenUrl - the button opens an external URL for viewing
- Action.ShowCard - Requests a sub-card to be shown to the user.
- Action.Submit - Ask for all of the input elements to be gathered up into an object which is then sent to you through some method defined by the host application.
Example Action.Submit: With Skype, an Action.Submit will send a Bot Framework bot activity back to the bot with the Value property containing an object with all of the input data on it.
- Browse Sample cards for inspiration
- Use the Schema Explorer to browse the available elements
- Build a card using the Interactive Visualizer
- Get in touch with any feedback you have