In a continuation of my earlier article, Adaptive Cards with Microsoft Teams with Examples, we continue with the details of how to create these Adaptive Cards authored with JSON templates. The templates can be used as-is, edited to suit your organization’s needs, or used as a launching point to customize your templates.
Samples and Templates of Adaptive Cards for Microsoft Teams
This is exciting as these select samples and templates are created and offered for Microsoft Teams to show what you can create. These can be copied, edited, and tweaked to create any possible scenario. There are limitless scenarios to design and create.
Adaptive Cards with Microsoft Teams – JSON Templates Part 1 of this series includes the templates for Activity Update Sample, Activity Update with Labels, Calendar Reminder, and Calendar Reminder with Labels. This installment of this series will include templates for Image Gallery, Weather Compact, and Weather Large.
Image Gallery
Data JSON: { "_type": "Images", "instrumentation": { "pingUrlBase": "https://www.bingapis.com/api/ping?IG=08FFB177A90A4DF585A703215CEC19AA&CID=070910FF0C0362112C11188E0DD06323&ID=", "pageLoadPingUrl": "https://www.bingapis.com/api/ping/pageload" }, "readLink": "https://www.bing.com/api/V7/images/search?q=cats", "webSearchUrl": "https://www.bing.com/images/search?q=cats&FORM=OIIARP", "webSearchUrlPingSuffix": "DevEx,5042.1", "totalEstimatedMatches": 1000, "value": [ { "name": "Proxecto Gato: cats wallpapers by bighdwallpapers", "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=DF010D14AC241C0AC39B5EAFD85F8B117825C79B&simid=608001210598098509", "webSearchUrlPingSuffix": "DevEx,5043.1", "thumbnailUrl": "https://tse2.mm.bing.net/th?id=OIP.M42428010d527fc1225757ada9d9a8bccH0&pid=Api", "datePublished": "2012-08-23T12:00:00", "contentUrl": "https://4.bp.blogspot.com/-XkviAtJ1s6Q/T3YFb2RUhDI/AAAAAAAAAVQ/EHomLZlFMKo/s1600/small+cat.jpg", "hostPageUrl": "https://proxectogato.blogspot.com/2012/08/cats-wallpapers-by-bighdwallpapers.html", "hostPageUrlPingSuffix": "DevEx,5006.1", "contentSize": "241661 B", "encodingFormat": "jpeg", "hostPageDisplayUrl": "proxectogato.blogspot.com/2012/08/cats-wallpapers-by...", "width": 1600, "height": 1200, "thumbnail": { "width": 480, "height": 360 }, "imageInsightsToken": "ccid_QkKAENUn*mid_DF010D14AC241C0AC39B5EAFD85F8B117825C79B*simid_608001210598098509", "insightsSourcesSummary": { "shoppingSourcesCount": 1, "recipeSourcesCount": 0 }, "imageId": "DF010D14AC241C0AC39B5EAFD85F8B117825C79B", "accentColor": "5A4E46" }, { "name": "Kitten - Cats Wallpaper (18565791) - Fanpop", "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=6119DF9238F0C40EC3C326F41919BAFBF88F5CA4&simid=608041523156487908", "webSearchUrlPingSuffix": "DevEx,5044.1", "thumbnailUrl": "https://tse3.mm.bing.net/th?id=OIP.M7dfb8973bca22c4939102df3ae3de66do0&pid=Api", "datePublished": "2012-06-29T23:55:00", "contentUrl": "https://images4.fanpop.com/image/photos/18500000/Kitten-cats-18565791-1024-768.jpg", "hostPageUrl": "https://www.fanpop.com/clubs/cats/images/18565791/title/kitten-wallpaper", "hostPageUrlPingSuffix": "DevEx,5011.1", "contentSize": "207480 B", "encodingFormat": "jpeg", "hostPageDisplayUrl": "www.fanpop.com/clubs/cats/images/18565791/title/kitten-wallpaper", "width": 1024, "height": 768, "thumbnail": { "width": 300, "height": 225 }, "imageInsightsToken": "ccid_ffuJc7yi*mid_6119DF9238F0C40EC3C326F41919BAFBF88F5CA4*simid_608041523156487908", "insightsSourcesSummary": { "shoppingSourcesCount": 1, "recipeSourcesCount": 0 }, "imageId": "6119DF9238F0C40EC3C326F41919BAFBF88F5CA4", "accentColor": "7D694E" }, { "name": "Wonderous Cats Admiration of the docile feline", "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=EDF89351A0ECA99617C859D06F71450FCB5EF2E3&simid=608032623984250213", "webSearchUrlPingSuffix": "DevEx,5045.1", "thumbnailUrl": "https://tse1.mm.bing.net/th?id=OIP.M38d3aa9aa6cc8c444492212efdb3a91dH0&pid=Api", "datePublished": "2014-04-27T22:53:00", "contentUrl": "https://www.andrew.cmu.edu/user/cfperron/cats/images/cat8.jpg", "hostPageUrl": "https://www.andrew.cmu.edu/user/cfperron/cats/", "hostPageUrlPingSuffix": "DevEx,5016.1", "contentSize": "484631 B", "encodingFormat": "jpeg", "hostPageDisplayUrl": "www.andrew.cmu.edu/user/cfperron/cats", "width": 2015, "height": 1511, "thumbnail": { "width": 480, "height": 359 }, "imageInsightsToken": "ccid_ONOqmqbM*mid_EDF89351A0ECA99617C859D06F71450FCB5EF2E3*simid_608032623984250213", "insightsSourcesSummary": { "shoppingSourcesCount": 1, "recipeSourcesCount": 0 }, "imageId": "EDF89351A0ECA99617C859D06F71450FCB5EF2E3", "accentColor": "5F4937" } ], "queryExpansions": [ { "text": "Grumpy Cat", "displayText": "Grumpy", "webSearchUrl": "https://www.bing.com/images/search?q=Grumpy+Cat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Grumpy%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRPATC", "webSearchUrlPingSuffix": "DevEx,5049.1", "searchLink": "https://www.bing.com/api/V7/images/search?q=Grumpy+Cat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Grumpy%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d", "thumbnail": { "thumbnailUrl": "https://tse3.mm.bing.net/th?q=Grumpy+Cat&pid=Api&mkt=en-US&adlt=moderate&t=1" } }, { "text": "Funny Cats", "displayText": "Funny", "webSearchUrl": "https://www.bing.com/images/search?q=Funny+Cats&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Funny%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRPATC", "webSearchUrlPingSuffix": "DevEx,5051.1", "searchLink": "https://www.bing.com/api/V7/images/search?q=Funny+Cats&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Funny%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d", "thumbnail": { "thumbnailUrl": "https://tse2.mm.bing.net/th?q=Funny+Cats&pid=Api&mkt=en-US&adlt=moderate&t=1" } } ], "nextOffsetAddCount": 0, "pivotSuggestions": [ { "pivot": "cats", "suggestions": [ { "text": "Felidae", "displayText": "Felidae", "webSearchUrl": "https://www.bing.com/images/search?q=Felidae&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Felidae%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRQBPS", "webSearchUrlPingSuffix": "DevEx,5134.1", "searchLink": "https://www.bing.com/api/V7/images/search?q=Felidae&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Felidae%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d", "thumbnail": { "thumbnailUrl": "https://tse3.mm.bing.net/th?q=Felidae&pid=Api&mkt=en-US&adlt=moderate&t=1" } }, { "text": "African Wildcat", "displayText": "African Wildcat", "webSearchUrl": "https://www.bing.com/images/search?q=African+Wildcat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22African+Wildcat%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRQBPS", "webSearchUrlPingSuffix": "DevEx,5136.1", "searchLink": "https://www.bing.com/api/V7/images/search?q=African+Wildcat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22African+Wildcat%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d", "thumbnail": { "thumbnailUrl": "https://tse3.mm.bing.net/th?q=African+Wildcat&pid=Api&mkt=en-US&adlt=moderate&t=1" } } ] } ], "displayShoppingSourcesBadges": false, "displayRecipeSourcesBadges": true } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Here are some cool photos", "size": "Large", "wrap": true }, { "type": "TextBlock", "text": "Sorry some of them are repeats", "size": "Medium", "weight": "Lighter", "wrap": true }, { "type": "ImageSet", "imageSize": "medium", "images": [ { "type": "Image", "url": "${value[0].contentUrl}" }, { "type": "Image", "url": "${value[1].contentUrl}" }, { "type": "Image", "url": "${queryExpansions[0].thumbnail.thumbnailUrl}" }, { "type": "Image", "url": "${queryExpansions[1].thumbnail.thumbnailUrl}" }, { "type": "Image", "url": "${pivotSuggestions[0].suggestions[0].thumbnail.thumbnailUrl}" }, { "type": "Image", "url": "${pivotSuggestions[0].suggestions[1].thumbnail.thumbnailUrl}" }, { "type": "Image", "url": "${value[2].thumbnailUrl}" } ] } ] }
Weather Compact
Data JSON { "coord":{ "lon":-122.12, "lat":47.67 }, "weather":[ { "id":802, "main":"Clouds", "description":"scattered clouds", "icon":"03n" } ], "base":"stations", "main": { "temp":281.05, "pressure":1022, "humidity":81, "temp_min":278.15, "temp_max":283.15 }, "visibility":16093, "wind": { "speed":4.1, "deg":360 }, "rain":{}, "clouds": { "all":40 }, "dt":1572920478, "sys":{ "type":1, "id":5798, "country":"US", "sunrise":1572879421, "sunset":1572914822 }, "timezone":-28800, "id":5808079, "name":"Redmond", "cod":200 } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "speak": "The forecast for Seattle ${formatEpoch(dt, 'MMMM d')} is mostly clear with a High of ${formatNumber((main.temp_max - 273) * 9 / 5 + 32, 0)} degrees and Low of ${formatNumber((main.temp_min - 273) * 9 / 5 + 32, 0)} degrees", "body": [ { "type": "TextBlock", "text": "${name}, WA", "size": "Large", "isSubtle": true, "wrap": true }, { "type": "TextBlock", "text": "{{DATE(${formatEpoch(dt, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}} {{TIME(${formatEpoch(dt, 'yyyy-MM-ddTHH:mm:ssZ')})}}", "spacing": "None", "wrap": true }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png", "size": "Small" } ] }, { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "${formatNumber((main.temp - 273) * 9 / 5 + 32, 0)}", "size": "ExtraLarge", "spacing": "None", "wrap": true } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "°F", "weight": "Bolder", "spacing": "Small", "wrap": true } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Hi ${formatNumber((main.temp_max - 273) * 9 / 5 + 32, 0)}", "horizontalAlignment": "Left", "wrap": true }, { "type": "TextBlock", "text": "Lo ${formatNumber((main.temp_min - 273) * 9 / 5 + 32, 0)}", "horizontalAlignment": "Left", "spacing": "None", "wrap": true } ] } ] } ] }
Weather Large
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://messagecardplayground.azurewebsites.net/assets/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://messagecardplayground.azurewebsites.net/assets/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://messagecardplayground.azurewebsites.net/assets/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://messagecardplayground.azurewebsites.net/assets/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://messagecardplayground.azurewebsites.net/assets/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.0", "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://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Background.jpg", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": 35, "items": [ { "type": "Image", "url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png", "size": "Stretch" } ] }, { "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 }, { "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 }, { "type": "TextBlock", "text": "${formatNumber(data[0].precip * 100, 0)}% chance of rain", "spacing": "None", "wrap": true }, { "type": "TextBlock", "text": "Winds ${data[0].wind_gust_spd} mph ${data[0].wind_cdir}", "spacing": "None", "wrap": true } ] } ] }, { "type": "ColumnSet", "columns": [ { "$data": "${data}", "$when": "${$index != 0}", "type": "Column", "width": 20, "items": [ { "type": "TextBlock", "horizontalAlignment": "Center", "text": "${formatEpoch(sunrise_ts, 'dddd')}", "wrap": true }, { "type": "Image", "size": "auto", "url": "${weather.icon}" }, { "type": "FactSet", "horizontalAlignment": "Right", "facts": [ { "title": "High", "value": "${formatNumber(app_max_temp / 5 * 9 + 32, 0)}" }, { "title": "Low", "value": "${formatNumber(app_min_temp / 5 * 9 + 32, 0)}" } ] } ], "selectAction": { "type": "Action.OpenUrl", "title": "View ${formatEpoch(sunrise_ts, 'dddd')}", "url": "https://www.microsoft.com" } } ] } ] }
JSON Scripts and Templates: Microsoft.com