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

Input form sample

JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": 2,
					"items": [
						{
							"type": "TextBlock",
							"text": "Tell us about yourself",
							"weight": "bolder",
							"size": "medium",
							"wrap": true,
							"style": "heading"
						},
						{
							"type": "TextBlock",
							"text": "We just need a few more details to get you booked for the trip of a lifetime!",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "Don't worry, we'll never share or sell your information.",
							"isSubtle": true,
							"wrap": true,
							"size": "small"
						},
						{
							"type": "Input.Text",
							"id": "myName",
							"label": "Your name (Last, First)",
							"isRequired": true,
							"regex": "^[A-Z][a-z]+, [A-Z][a-z]+$",
							"errorMessage": "Please enter your name in the specified format"
						},
						{
							"type": "Input.Text",
							"id": "myEmail",
							"label": "Your email",
							"regex": "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
							"isRequired": true,
							"errorMessage": "Please enter a valid email address",
							"style": "email"
						},
						{
							"type": "Input.Text",
							"id": "myTel",
							"label": "Phone Number (xxx xxx xxxx)",
							"regex": "^\\(?([0-9]{3})\\)?[-.\\s]?([0-9]{3})[-.\\s]?([0-9]{4})$",
							"errorMessage": "Invalid phone number. Please enter a 10 digit phone number",
							"style": "tel"
						}
					]
				},
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "Image",
							"url": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg",
							"size": "auto",
							"altText": "Diver in the Great Barrier Reef"
						}
					]
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Submit"
		}
	]
}

Data JSON

{
	"title": "Tell us about yourself",
	"body": "We just need a few more details to get you booked for the trip of a lifetime!",
	"disclaimer": "Don't worry, we'll never share or sell your information.",
	"properties": [
		{
			"id": "myName",
			"label": "Your name (Last, First)",
			"validation": "^[A-Z][a-z]+, [A-Z][a-z]+$",
			"error": "Please enter your name in the specified format"
		},
		{
			"id": "myEmail",
			"label": "Your email",
			"validation": "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
			"error": "Please enter a valid email address"
		},
		{
			"id": "myTel",
			"label": "Phone Number (xxx-xxx-xxxx)",
			"validation": "^[0-9]{3}-[0-9]{3}-[0-9]{4}$",
			"error": "Invalid phone number. Use the specified format: 3 numbers, hyphen, 3 numbers, hyphen and 4 numbers"
		}
	],
	"thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg",
	"thumbnailAlt": "Diver in the Great Barrier Reef"
}

Template JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "ColumnSet",
			"columns": [
				{
					"type": "Column",
					"width": 2,
					"items": [
						{
							"type": "TextBlock",
							"text": "${title}",
							"weight": "bolder",
							"size": "medium",
							"style": "heading",
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "${body}",
							"isSubtle": true,
							"wrap": true
						},
						{
							"type": "TextBlock",
							"text": "${disclaimer}",
							"isSubtle": true,
							"wrap": true,
							"size": "small"
						},
						{
							"type": "Container",
							"$data": "${properties}",
							"items": [
								{
									"type": "Input.Text",
									"label": "${label}",
									"id": "${id}",
									"regex": "${validation}",
									"errorMessage": "${error}",
									"isRequired": true
								}
							]
						}
					]
				},
				{
					"type": "Column",
					"width": 1,
					"items": [
						{
							"type": "Image",
							"url": "${thumbnailUrl}",
							"altText": "${thumbnailAlt}",
							"size": "auto"
						}
					]
				}
			]
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Submit"
		}
	]
}

Adaptive Card