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

Food order with validation sample

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": "https://contososcubademo.azurewebsites.net/assets/steak.jpg",
					"altText": "Steak cut with fries"
				},
				{
					"type": "Image",
					"url": "https://contososcubademo.azurewebsites.net/assets/chicken.jpg",
					"altText": "Fried chicken with lettuce"
				},
				{
					"type": "Image",
					"url": "https://contososcubademo.azurewebsites.net/assets/tofu.jpg",
					"altText": "Tofu topped with red sauce"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "Steak",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.ChoiceSet",
						"id": "SteakTemp",
						"style": "expanded",
						"label": "How would you like your steak prepared?",
						"isRequired": true,
						"errorMessage": "Please select one of the above options",
						"choices": [
							{
								"title": "Rare",
								"value": "rare"
							},
							{
								"title": "Medium-Rare",
								"value": "medium-rare"
							},
							{
								"title": "Well-done",
								"value": "well-done"
							}
						]
					},
					{
						"type": "Input.Text",
						"id": "SteakOther",
						"isMultiline": true,
						"label": "Any other preparation requests?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK",
						"data": {
							"FoodChoice": "Steak"
						}
					}
				]
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "Chicken",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Toggle",
						"id": "ChickenAllergy",
						"valueOn": "noPeanuts",
						"valueOff": "peanuts",
						"title": "I'm allergic to peanuts",
						"label": "Do you have any allergies?"
					},
					{
						"type": "Input.Text",
						"id": "ChickenOther",
						"isMultiline": true,
						"label": "Any other preparation requests?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK",
						"data": {
							"FoodChoice": "Chicken"
						}
					}
				]
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "Tofu",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "Input.Toggle",
						"id": "Vegetarian",
						"title": "Please prepare it vegan",
						"label": "Would you like it prepared vegan?",
						"valueOn": "vegan",
						"valueOff": "notVegan"
					},
					{
						"type": "Input.Text",
						"id": "VegOther",
						"isMultiline": true,
						"label": "Any other preparation requests?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK",
						"data": {
							"FoodChoice": "Vegetarian"
						}
					}
				]
			}
		}
	]
}
Data JSON
{
   "@context":"http://schema.org",
   "@type":"Restaurant",
   "url":"https://www.thisisarestaurant.com",
   "name":"The Restaurant",
   "image":"https://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": "Input.ChoiceSet",
						"id": "SteakTemp",
						"style": "expanded",
						"label": "${hasMenu.hasMenuSection[0].description}",
						"isRequired": true,
						"errorMessage": "Please select one of the above options",
						"choices": [
							{
								"title": "Rare",
								"value": "rare"
							},
							{
								"title": "Medium-Rare",
								"value": "medium-rare"
							},
							{
								"title": "Well-done",
								"value": "well-done"
							}
						]
					},
					{
						"type": "Input.Text",
						"id": "SteakOther",
						"isMultiline": true,
						"label": "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": "Input.Toggle",
						"id": "ChickenAllergy",
						"valueOn": "noPeanuts",
						"valueOff": "peanuts",
						"title": "I'm allergic to peanuts",
						"label": "${hasMenu.hasMenuSection[0].hasMenuSection[0].description}"
					},
					{
						"type": "Input.Text",
						"id": "ChickenOther",
						"isMultiline": true,
						"label": "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": "Input.Toggle",
						"id": "Vegetarian",
						"title": "Please prepare it vegan",
						"label": "${hasMenu.hasMenuSection[0].hasMenuSection[1].description}",
						"valueOn": "vegan",
						"valueOff": "notVegan"
					},
					{
						"type": "Input.Text",
						"id": "VegOther",
						"isMultiline": true,
						"label": "Any other preparation requests?"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK",
						"data": {
							"FoodChoice": "Vegetarian"
						}
					}
				],
				"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
			}
		}
	]
}
Adaptive Card