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!

Important note about accessibility: In version 1.3 of the schema we introduced a label property on Inputs to improve accessibility. If the Host app you are targeting supports v1.3 you should use label instead of a TextBlock as seen in some samples below. Once most Host apps have updated to the latest version we will update the samples accordingly.

Choose Sample:

Use Adaptive Card Templating Updated May 2020

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

Restaurant order sample

JSON

{
	"type": "AdaptiveCard",
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"text": "Malt & Vine Order Form",
			"size": "large",
			"wrap": true,
			"weight": "bolder",
			"style": "heading"
		},
		{
			"type": "Input.ChoiceSet",
			"id": "EntreeSelectVal",
			"label": "Which entree would you like?",
			"style": "filtered",
			"isRequired": true,
			"errorMessage": "This is a required input",
			"placeholder": "Please choose",
			"choices": [
				{
					"title": "Steak",
					"value": "1"
				},
				{
					"title": "Chicken",
					"value": "2"
				},
				{
					"title": "Tofu",
					"value": "3"
				}
			]
		},
		{
			"type": "Input.ChoiceSet",
			"id": "SideVal",
			"label": "Which side would you like?",
			"style": "filtered",
			"isRequired": true,
			"errorMessage": "This is a required input",
			"placeholder": "Please choose",
			"choices": [
				{
					"title": "Baked Potato",
					"value": "1"
				},
				{
					"title": "Rice",
					"value": "2"
				},
				{
					"title": "Vegetables",
					"value": "3"
				},
				{
					"title": "Noodles",
					"value": "4"
				},
				{
					"title": "No Side",
					"value": "5"
				}
			]
		},
		{
			"type": "Input.ChoiceSet",
			"id": "DrinkVal",
			"label": "Which drink would you like?",
			"style": "filtered",
			"isRequired": true,
			"errorMessage": "This is a required input",
			"placeholder": "Please choose",
			"choices": [
				{
					"title": "Water",
					"value": "1"
				},
				{
					"title": "Soft Drink",
					"value": "2"
				},
				{
					"title": "Coffee",
					"value": "3"
				},
				{
					"title": "Natural Juice",
					"value": "4"
				},
				{
					"title": "No Drink",
					"value": "5"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Place Order"
		}
	]
}

Data JSON

{
	"FormInfo": {
		"title": "Malt & Vine Order Form"
	},
	"Order": {
		"questions": [
			{
				"question": "Which entree would you like?",
				"items": [
					{
						"choice": "Steak",
						"value": "1"
					},
					{
						"choice": "Chicken",
						"value": "2"
					},
					{
						"choice": "Tofu",
						"value": "3"
					}
				]
			},
			{
				"question": "Which side would you like?",
				"items": [
					{
						"choice": "Baked Potato",
						"value": "1"
					},
					{
						"choice": "Rice",
						"value": "2"
					},
					{
						"choice": "Vegetables",
						"value": "3"
					},
					{
						"choice": "Noodles",
						"value": "4"
					},
					{
						"choice": "No Side",
						"value": "5"
					}
				]
			},
			{
				"question": "Which drink would you like?",
				"items": [
					{
						"choice": "Water",
						"value": "1"
					},
					{
						"choice": "Soft Drink",
						"value": "2"
					},
					{
						"choice": "Coffee",
						"value": "3"
					},
					{
						"choice": "Natural Juice",
						"value": "4"
					},
					{
						"choice": "No Drink",
						"value": "5"
					}
				]
			}
		]
	}
}

Template JSON

{
	"type": "AdaptiveCard",
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"text": "${FormInfo.title}",
			"size": "large",
			"wrap": true,
			"weight": "bolder",
			"style": "heading"
		},
		{
			"type": "Input.ChoiceSet",
			"id": "EntreeSelectVal",
			"label": "${Order.questions[0].question}",
			"style": "filtered",
			"isRequired": true,
			"errorMessage": "This is a required input",
			"placeholder": "Please choose",
			"choices": [
				{
					"$data": "${Order.questions[0].items}",
					"title": "${choice}",
					"value": "${value}"
				}
			]
		},
		{
			"type": "Input.ChoiceSet",
			"id": "SideVal",
			"label": "${Order.questions[1].question}",
			"style": "filtered",
			"isRequired": true,
			"errorMessage": "This is a required input",
			"placeholder": "Please choose",
			"choices": [
				{
					"$data": "${Order.questions[1].items}",
					"title": "${choice}",
					"value": "${value}"
				}
			]
		},
		{
			"type": "Input.ChoiceSet",
			"id": "DrinkVal",
			"label": "${Order.questions[2].question}",
			"style": "filtered",
			"isRequired": true,
			"errorMessage": "This is a required input",
			"placeholder": "Please choose",
			"choices": [
				{
					"$data": "${Order.questions[2].items}",
					"title": "${choice}",
					"value": "${value}"
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Place Order"
		}
	]
}

Adaptive Card