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!
Adaptive Card 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. More about templating
Food order sample
Data JSON
{
"@context":"http://schema.org",
"@type":"Restaurant",
"url":"http://www.thisisarestaurant.com",
"name":"The Restaurant",
"image":"http://www.example.com/image-of-some-restaurant.jpg",
"description":"This is an example restaurant that serves American cuisine.",
"servesCuisine":[
"American cuisine"
],
"hasMenu":{
"@type":"Menu",
"name":"Dine-In Menu",
"description":"Menu for in-restaurant dining only.",
"hasMenuSection":[
{
"@type":"MenuSection",
"name":"Steak",
"description":"How would you like your steak prepared?",
"image":"https://contososcubademo.azurewebsites.net/assets/steak.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuSection":[
{
"@type":"MenuSection",
"name":"Chicken",
"description":"Do you have any allergies?",
"image":"https://contososcubademo.azurewebsites.net/assets/chicken.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuItem":{
"@type":"MenuItem",
"name":"Potato Skins",
"description":"Small serving of stuffed potato skins.",
"offers":{
"@type":"Offer",
"price":"7.49",
"priceCurrency":"USD"
},
"suitableForDiet":"http://schema.org/GlutenFreeDiet"
}
},
{
"@type":"MenuSection",
"name":"Tofu",
"description":"Would you like it prepared vegan?",
"image":"https://contososcubademo.azurewebsites.net/assets/tofu.jpg",
"offers":{
"@type":"Offer",
"availabilityEnds":"T8:22:00",
"availabilityStarts":"T8:22:00"
},
"hasMenuItem":{
"@type":"MenuItem",
"name":"Pea Soup",
"description":"Creamy pea soup topped with melted cheese and sourdough croutons.",
"offers":{
"@type":"Offer",
"price":"3.49",
"priceCurrency":"USD"
}
}
}
]
}
]
}
}
Template JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Your registration is almost complete",
"size": "Medium",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "What type of food do you prefer?",
"wrap": true
},
{
"type": "ImageSet",
"imageSize": "medium",
"images": [
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].image}"
},
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].hasMenuSection[0].image}"
},
{
"type": "Image",
"url": "${hasMenu.hasMenuSection[0].hasMenuSection[1].image}"
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "${hasMenu.hasMenuSection[0].description}",
"size": "Medium",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "SteakTemp",
"style": "expanded",
"choices": [
{
"title": "Rare",
"value": "rare"
},
{
"title": "Medium-Rare",
"value": "medium-rare"
},
{
"title": "Well-done",
"value": "well-done"
}
]
},
{
"type": "Input.Text",
"id": "SteakOther",
"isMultiline": true,
"placeholder": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Steak"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].hasMenuSection[0].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "${hasMenu.hasMenuSection[0].hasMenuSection[0].description}",
"size": "Medium",
"wrap": true
},
{
"type": "Input.ChoiceSet",
"id": "ChickenAllergy",
"style": "expanded",
"isMultiSelect": true,
"choices": [
{
"title": "I'm allergic to peanuts",
"value": "peanut"
}
]
},
{
"type": "Input.Text",
"id": "ChickenOther",
"isMultiline": true,
"placeholder": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Chicken"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.ShowCard",
"title": "${hasMenu.hasMenuSection[0].hasMenuSection[1].name}",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "${hasMenu.hasMenuSection[0].hasMenuSection[1].description}",
"size": "Medium",
"wrap": true
},
{
"type": "Input.Toggle",
"id": "Vegetarian",
"title": "Please prepare it vegan",
"valueOn": "vegan",
"valueOff": "notVegan",
"wrap": false
},
{
"type": "Input.Text",
"id": "VegOther",
"isMultiline": true,
"placeholder": "Any other preparation requests?"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "OK",
"data": {
"FoodChoice": "Vegetarian"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
]
}
Adaptive Card
