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:

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

Inputs sample

JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"size": "medium",
			"weight": "bolder",
			"text": "Input.Text elements",
			"horizontalAlignment": "center",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "TextBlock",
			"text": "Name",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "text",
			"id": "SimpleVal"
		},
		{
			"type": "TextBlock",
			"text": "Homepage",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "url",
			"id": "UrlVal"
		},
		{
			"type": "TextBlock",
			"text": "Email",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "email",
			"id": "EmailVal"
		},
		{
			"type": "TextBlock",
			"text": "Phone",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "tel",
			"id": "TelVal"
		},
		{
			"type": "TextBlock",
			"text": "Comments",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "text",
			"isMultiline": true,
			"id": "MultiLineVal"
		},
		{
			"type": "TextBlock",
			"text": "Quantity",
			"wrap": true
		},
		{
			"type": "Input.Number",
			"min": -5,
			"max": 5,
			"value": 1,
			"id": "NumVal"
		},
		{
			"type": "TextBlock",
			"text": "Due Date",
			"wrap": true
		},
		{
			"type": "Input.Date",
			"id": "DateVal",
			"value": "2017-09-20"
		},
		{
			"type": "TextBlock",
			"text": "Start time",
			"wrap": true
		},
		{
			"type": "Input.Time",
			"id": "TimeVal",
			"value": "16:59"
		},
		{
			"type": "TextBlock",
			"size": "medium",
			"weight": "bolder",
			"text": "Input.ChoiceSet",
			"horizontalAlignment": "center",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "TextBlock",
			"text": "What color do you want? (compact)",
			"wrap": true
		},
		{
			"type": "Input.ChoiceSet",
			"id": "CompactSelectVal",
			"style": "compact",
			"value": "1",
			"choices": [
				{
					"title": "Red",
					"value": "1"
				},
				{
					"title": "Green",
					"value": "2"
				},
				{
					"title": "Blue",
					"value": "3"
				}
			]
		},
		{
			"type": "TextBlock",
			"text": "What color do you want? (expanded)",
			"wrap": true
		},
		{
			"type": "Input.ChoiceSet",
			"id": "SingleSelectVal",
			"style": "expanded",
			"value": "1",
			"choices": [
				{
					"title": "Red",
					"value": "1"
				},
				{
					"title": "Green",
					"value": "2"
				},
				{
					"title": "Blue",
					"value": "3"
				}
			]
		},
		{
			"type": "TextBlock",
			"text": "What colors do you want? (multiselect)",
			"wrap": true
		},
		{
			"type": "Input.ChoiceSet",
			"id": "MultiSelectVal",
			"isMultiSelect": true,
			"value": "1,3",
			"choices": [
				{
					"title": "Red",
					"value": "1"
				},
				{
					"title": "Green",
					"value": "2"
				},
				{
					"title": "Blue",
					"value": "3"
				}
			]
		},
		{
			"type": "TextBlock",
			"size": "medium",
			"weight": "bolder",
			"text": "Input.Toggle",
			"horizontalAlignment": "center",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "Input.Toggle",
			"title": "I accept the terms and conditions (True/False)",
			"valueOn": "true",
			"valueOff": "false",
			"id": "AcceptsTerms"
		},
		{
			"type": "Input.Toggle",
			"title": "Red cars are better than other cars",
			"valueOn": "RedCars",
			"valueOff": "NotRedCars",
			"id": "ColorPreference"
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Submit",
			"data": {
				"id": "1234567890"
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "Show Card",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "TextBlock",
						"text": "Enter comment",
						"wrap": true
					},
					{
						"type": "Input.Text",
						"style": "text",
						"id": "CommentVal"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK"
					}
				]
			}
		}
	]
}
Data JSON
{
    "ParticipantInfoForm":{
        "title":"Input.Text elements"
    },
    "Survey": {
        "title":"Input ChoiceSet",
        "questions": [
                {
                    "question":"What color do you want? (compact)",
                    "items": [
                        {
                            "choice":"Red",
                            "value":"1"
                        },
                        {
                            "choice":"Green",
                            "value":"2"
                        },
                        {
                            "choice":"Blue",
                            "value":"3"
                        }
                    ]
                },
                {
                    "question": "What color do you want? (expanded)",
                    "items": [
                        {
                            "choice":"Red",
                            "value":"1"
                        },
                        {
                            "choice":"Green",
                            "value":"2"
                        },
                        {
                            "choice":"Blue",
                            "value":"3"
                        }
                    ]
                },
                {
                    "question": "What color do you want? (multiselect)",
                    "items": [
                        {
                            "choice":"Red",
                            "value":"1"
                        },
                        {
                            "choice":"Green",
                            "value":"2"
                        },
                        {
                            "choice":"Blue",
                            "value":"3"
                        }
                    ]
                },
                {
                    "question":"I accept the terms and conditions (True/False)"
                },
                {
                    "question":"Red cars are better than other cars"
                }
            ]
        }
}
Template JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.0",
	"body": [
		{
			"type": "TextBlock",
			"size": "Medium",
			"weight": "Bolder",
			"text": " ${ParticipantInfoForm.title}",
			"horizontalAlignment": "Center",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "TextBlock",
			"text": "Name",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "text",
			"id": "SimpleVal"
		},
		{
			"type": "TextBlock",
			"text": "Homepage",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "url",
			"id": "UrlVal"
		},
		{
			"type": "TextBlock",
			"text": "Email",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "email",
			"id": "EmailVal"
		},
		{
			"type": "TextBlock",
			"text": "Phone",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "tel",
			"id": "TelVal"
		},
		{
			"type": "TextBlock",
			"text": "Comments",
			"wrap": true
		},
		{
			"type": "Input.Text",
			"style": "text",
			"isMultiline": true,
			"id": "MultiLineVal"
		},
		{
			"type": "TextBlock",
			"text": "Quantity",
			"wrap": true
		},
		{
			"type": "Input.Number",
			"min": -5,
			"max": 5,
			"value": 1,
			"id": "NumVal"
		},
		{
			"type": "TextBlock",
			"text": "Due Date",
			"wrap": true
		},
		{
			"type": "Input.Date",
			"id": "DateVal",
			"value": "2017-09-20"
		},
		{
			"type": "TextBlock",
			"text": "Start time",
			"wrap": true
		},
		{
			"type": "Input.Time",
			"id": "TimeVal",
			"value": "16:59"
		},
		{
			"type": "TextBlock",
			"size": "Medium",
			"weight": "Bolder",
			"text": "${Survey.title} ",
			"horizontalAlignment": "Center",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "TextBlock",
			"text": "${Survey.questions[0].question}",
			"wrap": true
		},
		{
			"type": "Input.ChoiceSet",
			"id": "CompactSelectVal",
			"value": "1",
			"choices": [
				{
					"$data": "${Survey.questions[0].items}",
					"title": "${choice}",
					"value": "${value}"
				}
			]
		},
		{
			"type": "TextBlock",
			"text": "${Survey.questions[1].question}",
			"wrap": true
		},
		{
			"type": "Input.ChoiceSet",
			"id": "SingleSelectVal",
			"style": "expanded",
			"value": "1",
			"choices": [
				{
					"$data": "${Survey.questions[1].items}",
					"title": "${choice}",
					"value": "${value}"
				}
			]
		},
		{
			"type": "TextBlock",
			"text": "${Survey.questions[2].question}",
			"wrap": true
		},
		{
			"type": "Input.ChoiceSet",
			"id": "MultiSelectVal",
			"isMultiSelect": true,
			"value": "1,3",
			"choices": [
				{
					"$data": "${Survey.questions[2].items}",
					"title": "${choice}",
					"value": "${value}"
				}
			]
		},
		{
			"type": "TextBlock",
			"size": "Medium",
			"weight": "Bolder",
			"text": "Input.Toggle",
			"horizontalAlignment": "Center",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "Input.Toggle",
			"title": "${Survey.questions[3].question}",
			"id": "AcceptsTerms",
			"wrap": false,
			"value": "false"
		},
		{
			"type": "Input.Toggle",
			"title": "${Survey.questions[4].question}",
			"valueOn": "RedCars",
			"valueOff": "NotRedCars",
			"id": "ColorPreference",
			"wrap": false,
			"value": "NotRedCars"
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Submit",
			"data": {
				"id": "1234567890"
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "Show Card",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "TextBlock",
						"text": "Enter comment",
						"wrap": true
					},
					{
						"type": "Input.Text",
						"style": "text",
						"id": "CommentVal"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "OK"
					}
				],
				"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
			}
		}
	]
}
Adaptive Card