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.
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
Weather large sample
Data JSON
{
"data": [
{
"moonrise_ts": 1572993161,
"wind_cdir": "SSE",
"rh": 90,
"pres": 1012.95,
"high_temp": 8.6,
"sunset_ts": 1573001147,
"ozone": 252.181,
"moon_phase": 0.768526,
"wind_gust_spd": 4.4,
"snow_depth": 0,
"clouds": 70,
"ts": 1572940860,
"sunrise_ts": 1572966051,
"app_min_temp": 3.7,
"wind_spd": 1.33298,
"pop": 25,
"wind_cdir_full": "south-southeast",
"slp": 1021.94,
"valid_date": "2019-11-05",
"app_max_temp": 10.2,
"vis": 22.5692,
"dewpt": 6.8,
"snow": 0,
"uv": 1.74992,
"weather": {
"icon": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
"code": 803,
"description": "Broken clouds"
},
"wind_dir": 162,
"max_dhi": null,
"clouds_hi": 0,
"precip": 0.3125,
"low_temp": 7.7,
"max_temp": 10.4,
"moonset_ts": 1572946958,
"datetime": "2019-11-05",
"temp": 8.5,
"min_temp": 5.7,
"clouds_mid": 0,
"clouds_low": 70
},
{
"moonrise_ts": 1573081007,
"wind_cdir": "NNE",
"rh": 88,
"pres": 1015.48,
"high_temp": 12.3,
"sunset_ts": 1573087463,
"ozone": 263.048,
"moon_phase": 0.845631,
"wind_gust_spd": 5,
"snow_depth": 0,
"clouds": 60,
"ts": 1573027260,
"sunrise_ts": 1573052542,
"app_min_temp": 3.3,
"wind_spd": 1.50821,
"pop": 35,
"wind_cdir_full": "north-northeast",
"slp": 1024.5,
"valid_date": "2019-11-06",
"app_max_temp": 12.3,
"vis": 23.125,
"dewpt": 6.6,
"snow": 0,
"uv": 2.93193,
"weather": {
"icon": "https://adaptivecards.io/content/Drizzle-Square.png",
"code": 803,
"description": "Broken clouds"
},
"wind_dir": 18,
"max_dhi": null,
"clouds_hi": 17,
"precip": 0.5,
"low_temp": 5,
"max_temp": 12.3,
"moonset_ts": 1573037127,
"datetime": "2019-11-06",
"temp": 8.5,
"min_temp": 6.6,
"clouds_mid": 9,
"clouds_low": 46
},
{
"moonrise_ts": 1573168702,
"wind_cdir": "SE",
"rh": 71,
"pres": 1006.39,
"high_temp": 13.1,
"sunset_ts": 1573173781,
"ozone": 257.617,
"moon_phase": 0.909923,
"wind_gust_spd": 1.80495,
"snow_depth": 0,
"clouds": 94,
"ts": 1573113660,
"sunrise_ts": 1573139032,
"app_min_temp": 0.5,
"wind_spd": 0.77653,
"pop": 0,
"wind_cdir_full": "southeast",
"slp": 1022.86,
"valid_date": "2019-11-07",
"app_max_temp": 13.1,
"vis": 24.135,
"dewpt": 2.6,
"snow": 0,
"uv": 1.10983,
"weather": {
"icon": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
"code": 804,
"description": "Overcast clouds"
},
"wind_dir": 136,
"max_dhi": null,
"clouds_hi": 94,
"precip": 0,
"low_temp": 4.4,
"max_temp": 13.4,
"moonset_ts": 1573127315,
"datetime": "2019-11-07",
"temp": 7.7,
"min_temp": 4.2,
"clouds_mid": 0,
"clouds_low": 0
},
{
"moonrise_ts": 1573256318,
"wind_cdir": "SSE",
"rh": 71,
"pres": 1006.02,
"high_temp": 15.8,
"sunset_ts": 1573260100,
"ozone": 258.722,
"moon_phase": 0.958606,
"wind_gust_spd": 2.11071,
"snow_depth": 0,
"clouds": 93,
"ts": 1573200060,
"sunrise_ts": 1573225523,
"app_min_temp": 2.7,
"wind_spd": 0.802894,
"pop": 0,
"wind_cdir_full": "south-southeast",
"slp": 1022.2,
"valid_date": "2019-11-08",
"app_max_temp": 15.8,
"vis": 24.1349,
"dewpt": 4.5,
"snow": 0,
"uv": 0.989995,
"weather": {
"icon": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
"code": 804,
"description": "Overcast clouds"
},
"wind_dir": 167,
"max_dhi": null,
"clouds_hi": 93,
"precip": 0,
"low_temp": 6.1,
"max_temp": 15.9,
"moonset_ts": 1573217557,
"datetime": "2019-11-08",
"temp": 9.6,
"min_temp": 6,
"clouds_mid": 6,
"clouds_low": 0
},
{
"moonrise_ts": 1573343920,
"wind_cdir": "SW",
"rh": 78,
"pres": 1008.56,
"high_temp": 14,
"sunset_ts": 1573346422,
"ozone": 257.936,
"moon_phase": 0.988998,
"wind_gust_spd": 3.61965,
"snow_depth": 0,
"clouds": 88,
"ts": 1573286460,
"sunrise_ts": 1573312013,
"app_min_temp": 2.5,
"wind_spd": 1.00688,
"pop": 0,
"wind_cdir_full": "southwest",
"slp": 1024.28,
"valid_date": "2019-11-09",
"app_max_temp": 14,
"vis": 24.135,
"dewpt": 5.2,
"snow": 0,
"uv": 1.06772,
"weather": {
"icon": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
"code": 804,
"description": "Overcast clouds"
},
"wind_dir": 228,
"max_dhi": null,
"clouds_hi": 88,
"precip": 0,
"low_temp": 5,
"max_temp": 14.1,
"moonset_ts": 1573307883,
"datetime": "2019-11-09",
"temp": 9,
"min_temp": 5.9,
"clouds_mid": 13,
"clouds_low": 0
}
],
"city_name": "King",
"lon": "-122.1232",
"timezone": "America/Los_Angeles",
"lat": "47.6718",
"country_code": "US",
"state_code": "WA"
}
Template JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"speak": "Weather forecast for ${formatEpoch(data[0].sunrise_ts, 'dddd')} is high of ${formatNumber(data[0].app_max_temp / 5 * 9 + 32, 0)} and low of ${formatNumber(data[0].app_min_temp / 5 * 9 + 32, 0)} degrees with a ${formatNumber(data[0].precip * 100, 0)}% chance of rainWinds will be ${formatNumber(data[0].wind_gust_spd, 0)} mph from the ${data[0].wind_cdir}",
"backgroundImage": "https://adaptivecards.io/content/Mostly%20Cloudy-Background.jpg",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": 35,
"items": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/Mostly%20Cloudy-Square.png",
"size": "stretch",
"altText": "Mostly cloudy weather"
}
]
},
{
"type": "Column",
"width": 65,
"items": [
{
"type": "TextBlock",
"text": "{{DATE(${formatEpoch(data[0].sunrise_ts, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}",
"weight": "bolder",
"size": "large",
"wrap": true,
"color": "dark",
"style": "heading"
},
{
"type": "TextBlock",
"text": "${formatNumber(data[0].app_min_temp / 5 * 9 + 32, 0)} / ${formatNumber(data[0].app_max_temp / 5 * 9 + 32, 0)}",
"size": "medium",
"spacing": "none",
"wrap": true,
"color": "dark"
},
{
"type": "TextBlock",
"text": "${formatNumber(data[0].precip * 100, 0)}% chance of rain",
"spacing": "none",
"wrap": true,
"color": "dark"
},
{
"type": "TextBlock",
"text": "Winds ${data[0].wind_gust_spd} mph ${data[0].wind_cdir}",
"spacing": "none",
"wrap": true,
"color": "dark"
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"$data": "${data}",
"$when": "${$index != 0}",
"type": "Column",
"width": 20,
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "${formatEpoch(sunrise_ts, 'dddd')}",
"wrap": true,
"color": "dark"
},
{
"type": "Image",
"size": "auto",
"url": "${weather.icon}",
"altText": "${weather.description}"
},
{
"type": "TextBlock",
"text": "**High**\t${formatNumber(app_max_temp / 5 * 9 + 32, 0)}",
"wrap": true,
"color": "dark",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "**Low**\t${formatNumber(app_min_temp / 5 * 9 + 32, 0)}",
"wrap": true,
"color": "dark",
"spacing": "none",
"horizontalAlignment": "center"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"title": "View ${formatEpoch(sunrise_ts, 'dddd')}, ${weather.description}. Highest temperature ${formatNumber(app_max_temp / 5 * 9 + 32, 0)} degrees. Lowest temperature ${formatNumber(app_min_temp / 5 * 9 + 32, 0)} degrees.",
"url": "https://www.microsoft.com"
}
}
]
}
]
}
Adaptive Card
