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 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",
								"label": "First Name",
								"id": "FirstName",
								"isRequired": true,
								"errorMessage": "First Name is required"
							},
							{
								"type": "Input.Text",
								"label": "Middle Name",
								"id": "MiddleName"
							},
							{
								"type": "Input.Text",
								"label": "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",
											"label": "Address line 1",
											"id": "AddressLine1"
										},
										{
											"type": "Input.Text",
											"label": "Address line 2",
											"id": "AddressLine2"
										},
										{
											"type": "ColumnSet",
											"columns": [
												{
													"type": "Column",
													"width": "stretch",
													"items": [
														{
															"type": "Input.Text",
															"label": "City",
															"id": "City"
														}
													]
												},
												{
													"type": "Column",
													"width": "stretch",
													"items": [
														{
															"type": "Input.Text",
															"label": "State",
															"id": "State"
														}
													]
												},
												{
													"type": "Column",
													"width": "stretch",
													"items": [
														{
															"type": "Input.Text",
															"label": "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",
												"label": "Cell Number",
												"id": "CellPhone"
											},
											{
												"type": "Input.Text",
												"label": "Home Number",
												"id": "HomePhone"
											},
											{
												"type": "Input.Text",
												"label": "Email Address",
												"id": "Email"
											}
										],
										"actions": [
											{
												"type": "Action.Submit",
												"title": "Submit"
											}
										]
									}
								}
							]
						}
					}
				]
			}
		}
	]
}
Data JSON
{
	"formTitle": "Please provide the following information:",
	"nameCard": {
		"title": "Name",
		"idPrefix": "name",
		"fields": [
			{
				"label": "First Name",
				"id": "FirstName",
				"required": true
			},
			{
				"label": "Middle Name",
				"id": "MiddleName",
				"required": false
			},
			{
				"label": "Last Name",
				"id": "LastName",
				"required": true
			}
		]
	},
	"addressCard": {
		"title": "Address",
		"idPrefix": "address",
		"textInputFields": [
			{
			"label": "Address line 1",
			"id": "addressLine1",
				"required": true
			},
			{
				"label": "Address line 2",
				"id": "addressLine2",
				"required": false
			}
		],
		"columnFields": [
			{
				"label": "City",
				"id": "city",
				"required": false
			},
			{
				"label": "State",
				"id": "state",
				"required": false
			},
			{
				"label": "Zip Code",
				"id": "zip",
				"required": true
			}
		]
	},
	"contactCard": {
		"title": "Phone/Email",
		"idPrefix": "contact",
		"fields": [
			{
				"label": "Mobile number",
				"id": "mobileNumber",
				"required": false
			},
			{
				"label": "Home number",
				"id": "homeNumber",
				"required": false
			},
			{
				"label": "Email address",
				"id": "emailAddress",
				"required": true
			}
		]
	}
}
Template JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"text": "${formTitle}"
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "${nameCard.title}",
			"card": {
				"type": "AdaptiveCard",
				"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
				"body": [
					{
						"type": "Container",
						"id": "${nameCard.idPrefix}Properties",
						"items": [
							{
								"$data": "${nameCard.fields}",
								"type": "Input.Text",
								"label": "${label}",
								"id": "${id}",
								"isRequired": "${required}",
								"errorMessage": "'${label}' is required"
							}
						]
					}
				],
				"actions": [
					{
						"type": "Action.ShowCard",
						"title": "${addressCard.title}",
						"card": {
							"type": "AdaptiveCard",
							"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
							"body": [
								{
									"type": "Container",
									"id": "${addressCard.idPrefix}Properties",
									"items": [
										{
											"$data": "${addressCard.textInputFields}",
											"type": "Input.Text",
											"label": "${label}",
											"id": "${id}",
											"isRequired": "${required}",
											"errorMessage": "'${label} is required"
										},
										{
											"type": "ColumnSet",
											"columns": [
												{
													"$data": "${addressCard.columnFields}",
													"type": "Column",
													"width": "stretch",
													"items": [
														{
															"type": "Input.Text",
															"label": "${label}",
															"id": "${id}",
															"isRequired": "${required}",
															"errorMessage": "'${label}' is required"
														}
													]
												}
											]
										}
									]
								}
							],
							"actions": [
								{
									"type": "Action.ShowCard",
									"title": "${contactCard.title}",
									"card": {
										"type": "AdaptiveCard",
										"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
										"body": [
											{
												"$data": "${contactCard.fields}",
												"type": "Input.Text",
												"label": "${label}",
												"id": "${id}",
												"isRequired": "${required}",
												"errorMessage": "'${label}' is required"
											}
										],
										"actions": [
											{
												"type": "Action.Submit",
												"title": "Submit"
											}
										]
									}
								}
							]
						}
					}
				]
			}
		}
	]
}
Adaptive Card