Adaptive Cards with Microsoft Teams – JSON Templates Part 2

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

  • Tuesday, November 23, 2021 By : Mike Maadarani    0 comment