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

Input form with rtl sample

JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"text": "Please select your language:",
			"wrap": true
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "English",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "TextBlock",
						"size": "medium",
						"weight": "bolder",
						"text": "Registration Form",
						"horizontalAlignment": "center",
						"wrap": true,
						"style": "heading"
					},
					{
						"type": "Input.Text",
						"label": "Name",
						"style": "text",
						"id": "SimpleValENG",
						"isRequired": true,
						"errorMessage": "Name is required"
					},
					{
						"type": "Input.Text",
						"label": "Email",
						"style": "email",
						"id": "EmailValENG"
					},
					{
						"type": "Input.Text",
						"label": "Phone",
						"style": "tel",
						"id": "TelValENG"
					},
					{
						"type": "Input.Text",
						"label": "Comments",
						"style": "text",
						"isMultiline": true,
						"id": "MultiLineValENG"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "Submit"
					}
				]
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "عربي",
			"tooltip": "Arabic",
			"card": {
				"type": "AdaptiveCard",
				"rtl": true,
				"body": [
					{
						"type": "TextBlock",
						"size": "medium",
						"weight": "bolder",
						"text": "إستمارة تسجيل",
						"horizontalAlignment": "center",
						"wrap": true,
						"style": "heading"
					},
					{
						"type": "Input.Text",
						"label": "اسم",
						"style": "text",
						"id": "SimpleValARA",
						"isRequired": true,
						"errorMessage": "مطلوب اسم"
					},
					{
						"type": "Input.Text",
						"label": "بريد الالكتروني",
						"style": "email",
						"id": "EmailValARA"
					},
					{
						"type": "Input.Text",
						"label": "هاتف",
						"style": "tel",
						"id": "TelValARA"
					},
					{
						"type": "Input.Text",
						"label": "تعليقات",
						"style": "text",
						"isMultiline": true,
						"id": "MultiLineValARA"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "يقدم"
					}
				]
			}
		}
	]
}
Data JSON
{
	"FormInfo": {
		"titleENG": "Registration Form",
		"titleARA": "إستمارة تسجيل"
	}
}
Template JSON
{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"text": "Please select your language:",
			"wrap": true
		}
	],
	"actions": [
		{
			"type": "Action.ShowCard",
			"title": "English",
			"card": {
				"type": "AdaptiveCard",
				"body": [
					{
						"type": "TextBlock",
						"size": "medium",
						"weight": "bolder",
						"text": " ${FormInfo.titleENG}",
						"horizontalAlignment": "center",
						"wrap": true,
						"style": "heading"
					},
					{
						"type": "Input.Text",
						"label": "Name",
						"style": "text",
						"id": "SimpleValENG",
						"isRequired": true,
						"errorMessage": "Name is required"
					},
					{
						"type": "Input.Text",
						"label": "Email",
						"style": "email",
						"id": "EmailValENG"
					},
					{
						"type": "Input.Text",
						"label": "Phone",
						"style": "tel",
						"id": "TelValENG"
					},
					{
						"type": "Input.Text",
						"label": "Comments",
						"style": "text",
						"isMultiline": true,
						"id": "MultiLineValENG"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "Submit"
					}
				]
			}
		},
		{
			"type": "Action.ShowCard",
			"title": "عربي",
			"tooltip": "Arabic",
			"card": {
				"type": "AdaptiveCard",
				"rtl": true,
				"body": [
					{
						"type": "TextBlock",
						"size": "medium",
						"weight": "bolder",
						"text": " ${FormInfo.titleARA}",
						"horizontalAlignment": "center",
						"wrap": true,
						"style": "heading"
					},
					{
						"type": "Input.Text",
						"label": "اسم",
						"style": "text",
						"id": "SimpleValARA",
						"isRequired": true,
						"errorMessage": "مطلوب اسم"
					},
					{
						"type": "Input.Text",
						"label": "بريد الالكتروني",
						"style": "email",
						"id": "EmailValARA"
					},
					{
						"type": "Input.Text",
						"label": "هاتف",
						"style": "tel",
						"id": "TelValARA"
					},
					{
						"type": "Input.Text",
						"label": "تعليقات",
						"style": "text",
						"isMultiline": true,
						"id": "MultiLineValARA"
					}
				],
				"actions": [
					{
						"type": "Action.Submit",
						"title": "يقدم"
					}
				]
			}
		}
	]
}
Adaptive Card