Samples and Templates
These samples are just a teaser of the type of cards you can create. Go ahead and tweak them to make any scenario possible!
Choose sample:
Templating enables the separation of data from the layout in an Adaptive Card. It helps design a card once, and then populate it with real data at runtime. Note: The binding syntax changed in May 2020. Get started with templating
Show card wizard child cards sample
JSON
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Please provide the following information:"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"actions": [
{
"type": "Action.ShowCard",
"title": "1. Name",
"card": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"type": "Container",
"id": "nameProperties",
"items": [
{
"type": "Input.Text",
"placeholder": "First Name",
"id": "FirstName",
"isRequired": true,
"errorMessage": "First Name is required"
},
{
"type": "Input.Text",
"placeholder": "Middle Name",
"id": "MiddleName"
},
{
"type": "Input.Text",
"placeholder": "Last Name",
"id": "LastName",
"isRequired": true,
"errorMessage": "Last Name is required"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "2. Address",
"card": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"type": "Container",
"id": "addressProperties",
"items": [
{
"type": "Input.Text",
"placeholder": "Address line 1",
"id": "AddressLine1"
},
{
"type": "Input.Text",
"placeholder": "Address line 2",
"id": "AddressLine2"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"placeholder": "City",
"id": "City"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"placeholder": "State",
"id": "State"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.Text",
"placeholder": "Zip Code",
"id": "Zip"
}
]
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "3. Phone/Email",
"card": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"type": "Input.Text",
"placeholder": "Cell Number",
"id": "CellPhone"
},
{
"type": "Input.Text",
"placeholder": "Home Number",
"id": "HomePhone"
},
{
"type": "Input.Text",
"placeholder": "Email Address",
"id": "Email"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
]
}
}
]
}
}
]
}
}
]
}
Adaptive Card