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

Application login sample

JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"size": "medium",
			"weight": "bolder",
			"text": "Application Login",
			"horizontalAlignment": "center",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "Input.Text",
			"style": "text",
			"id": "UserVal",
			"label": "Username",
			"isRequired": true,
			"errorMessage": "Username is required"
		},
		{
			"type": "Input.Text",
			"id": "PassVal",
			"style": "password",
			"label": "Password",
			"isRequired": true,
			"errorMessage": "Password is required"
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Login",
			"data": {
				"id": "LoginVal"
			}
		}
	]
}

Data JSON

{
	"ApplicationInfo": {
		"title": "Application Login"
	}
}

Template JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "TextBlock",
			"size": "medium",
			"weight": "bolder",
			"text": " ${ApplicationInfo.title}",
			"horizontalAlignment": "center",
			"wrap": true,
			"style": "heading"
		},
		{
			"type": "Input.Text",
			"style": "text",
			"id": "UserVal",
			"label": "Username",
			"isRequired": true,
			"errorMessage": "Username is required"
		},
		{
			"type": "Input.Text",
			"id": "PassVal",
			"style": "password",
			"label": "Password",
			"isRequired": true,
			"errorMessage": "Password is required"
		}
	],
	"actions": [
		{
			"type": "Action.Submit",
			"title": "Login",
			"data": {
				"id": "LoginVal"
			}
		}
	]
}

Adaptive Card