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

Stock update sample

JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"speak": "Microsoft stock is trading at $62.30 a share, which is down .32%",
	"body": [
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "Microsoft Corporation",
					"size": "medium",
					"wrap": true,
					"style": "heading"
				},
				{
					"type": "TextBlock",
					"text": "Nasdaq Global Select: MSFT",
					"isSubtle": true,
					"spacing": "none",
					"wrap": true
				},
				{
					"type": "TextBlock",
					"text": "Fri, May 3, 2019 1:00 PM",
					"wrap": true
				}
			]
		},
		{
			"type": "Container",
			"spacing": "none",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"width": "stretch",
							"items": [
								{
									"type": "TextBlock",
									"text": "128.90",
									"size": "extraLarge",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"text": "▲ 2.69 USD (2.13%)",
									"color": "good",
									"spacing": "none",
									"wrap": true
								}
							]
						},
						{
							"type": "Column",
							"width": "auto",
							"items": [
								{
									"type": "FactSet",
									"facts": [
										{
											"title": "Open",
											"value": "127.42"
										},
										{
											"title": "High",
											"value": "129.43"
										},
										{
											"title": "Low",
											"value": "127.25"
										}
									]
								}
							]
						}
					]
				}
			]
		}
	]
}

Data JSON

{
	"symbol": "MSFT",
	"companyName": "Microsoft Corporation",
	"primaryExchange": "Nasdaq Global Select",
	"sector": "Technology",
	"calculationPrice": "close",
	"open": 127.42,
	"openTime": 1556890200,
	"close": 128.9,
	"closeTime": 1556913600,
	"high": 129.43,
	"low": 127.25,
	"latestPrice": 128.9,
	"latestSource": "Close",
	"latestTime": "May 3, 2019",
	"latestUpdate": 1556913600,
	"latestVolume": 24835154,
	"iexRealtimePrice": null,
	"iexRealtimeSize": null,
	"iexLastUpdated": null,
	"delayedPrice": 128.9,
	"delayedPriceTime": 1556913600,
	"extendedPrice": 129.04,
	"extendedChange": 0.14,
	"extendedChangePercent": 0.00109,
	"extendedPriceTime": 1556917190,
	"previousClose": 126.21,
	"change": 2.69,
	"changePercent": 0.02131,
	"iexMarketPercent": null,
	"iexVolume": null,
	"avgTotalVolume": 22183270,
	"iexBidPrice": null,
	"iexBidSize": null,
	"iexAskPrice": null,
	"iexAskSize": null,
	"marketCap": 987737229888,
	"peRatio": 30.84,
	"week52High": 131.37,
	"week52Low": 93.96,
	"ytdChange": 0.30147812013916003
}

Template JSON

{
	"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
	"type": "AdaptiveCard",
	"version": "1.5",
	"body": [
		{
			"type": "Container",
			"items": [
				{
					"type": "TextBlock",
					"text": "${companyName}",
					"size": "medium",
					"wrap": true,
					"style": "heading"
				},
				{
					"type": "TextBlock",
					"text": "${primaryExchange}: ${symbol}",
					"isSubtle": true,
					"spacing": "none",
					"wrap": true
				},
				{
					"type": "TextBlock",
					"text": "{{DATE(${formatEpoch(latestUpdate, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}} {{TIME(${formatEpoch(latestUpdate, 'yyyy-MM-ddTHH:mm:ssZ')})}}",
					"wrap": true
				}
			]
		},
		{
			"type": "Container",
			"spacing": "none",
			"items": [
				{
					"type": "ColumnSet",
					"columns": [
						{
							"type": "Column",
							"width": "stretch",
							"items": [
								{
									"type": "TextBlock",
									"text": "${formatNumber(latestPrice, 2)} ",
									"size": "extraLarge",
									"wrap": true
								},
								{
									"type": "TextBlock",
									"text": "${if(change >= 0, '▲', '▼')} ${formatNumber(change,2)} USD (${formatNumber(changePercent * 100, 2)}%)",
									"color": "${if(change >= 0, 'good', 'attention')}",
									"spacing": "none",
									"wrap": true
								}
							]
						},
						{
							"type": "Column",
							"width": "auto",
							"items": [
								{
									"type": "FactSet",
									"facts": [
										{
											"title": "Open",
											"value": "${open} "
										},
										{
											"title": "High",
											"value": "${high} "
										},
										{
											"title": "Low",
											"value": "${low} "
										}
									]
								}
							]
						}
					]
				}
			]
		}
	]
}

Adaptive Card