Adaptive Cards with Microsoft Teams – JSON Templates Part 7

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 7 includes templates for Sporting Event, Stock Update, and Agenda.

Sporting Event

Data JSON:

{
  "id": 401117857,
  "season": 2019,
  "week": 1,
  "season_type": "regular",
  "start_date": "2019-08-31T19:30:00Z",
  "neutral_site": false,
  "conference_game": false,
  "attendance": null,
  "venue_id": 3852,
  "venue": "Navy-Marine Corps Memorial Stadium",
  "home_team": "Navy",
  "home_conference": "American Athletic",
  "home_points": 45,
  "home_line_scores": [
    10,
    14,
    14,
    7
  ],
  "away_team": "Holy Cross",
  "away_conference": null,
  "away_points": 7,
  "away_line_scores": [
    0,
    7,
    0,
    0
  ]
}

Template JSON: 

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "speak": "The Seattle Seahawks beat the Carolina Panthers 40-7",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "auto",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "https://adaptivecards.io/content/cats/3.png",
                                    "size": "Medium"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "SHADES",
                                    "horizontalAlignment": "Center",
                                    "weight": "Bolder",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "stretch",
                            "separator": true,
                            "spacing": "Medium",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "{{DATE(${string(start_date)}, SHORT)}}",
                                    "horizontalAlignment": "Center",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Final",
                                    "spacing": "None",
                                    "horizontalAlignment": "Center",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "${home_points} - ${away_points}",
                                    "size": "ExtraLarge",
                                    "horizontalAlignment": "Center",
                                    "wrap": true
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "auto",
                            "separator": true,
                            "spacing": "Medium",
                            "items": [
                                {
                                    "type": "Image",
                                    "url": "https://adaptivecards.io/content/cats/2.png",
                                    "size": "Medium",
                                    "horizontalAlignment": "Center"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "SKINS",
                                    "horizontalAlignment": "Center",
                                    "weight": "Bolder",
                                    "wrap": true
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Stock Update

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.2",
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "${companyName}",
                    "size": "Medium",
                    "wrap": true
                },
                {
                    "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} "
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Agenda

Data JSON:

{
        "@odata.context": "https://outlook.office.com/api/beta/$metadata#Me/Events/$entity",
        "@odata.id": "https://outlook.office.com/api/beta/Users('ddfcd489-628b-40d7-b48b-57002df800e5@1717622f-1d94-4d0c-9d74-709fad664b77')/Events('AAMkAGI2TG93AAA=')",
        "@odata.etag": "W/\"nfZyf7VcrEKLNoU37KWlkQAAA0x48w==\"",
        "Id": "AAMkAGI2TG93AAA=",
        "ChangeKey": "nfZyf7VcrEKLNoU37KWlkQAAA0x48w==",
        "Categories": [],
        "CreatedDateTime": "2014-10-19T23:13:47.3959685Z",
        "LastModifiedDateTime": "2014-10-19T23:13:47.6772234Z",
        "Subject": "Contoso Campaign Status Meeting",
        "BodyPreview": "Setting up some time to review the budget and planning on the Contoso Project",
        "Body": {
            "ContentType": "HTML",
            "Content": "\r\n\r\n\r\n\r\n\r\nSetting up some time to review the budget and planning on the Contoso Project\r\n\r\n\r\n"
        },
        "Importance": "Normal",
        "HasAttachments": false,
        "Start": {
            "DateTime": "2014-10-13T21:00:00",
            "TimeZone": "Pacific Standard Time"
        },
        "End": {
            "DateTime": "2014-10-13T22:00:00",
            "TimeZone": "Pacific Standard Time"
        },        
        "Location": {
            "DisplayName": "Conf Room Bravern-2/9050",
            "Address": null
        },
        "ShowAs": "Busy",
        "IsAllDay": false,
        "IsCancelled": false,
        "IsOrganizer": true,
        "ResponseRequested": true,
        "Type": "SeriesMaster",
        "SeriesMasterId": null,
        "Attendees": [
            {
                "EmailAddress": {
                    "Address": "[email protected]",
                    "Name": "Janet Schorr"
                },
                "Status": {
                    "Response": "None",
                    "Time": "0001-01-01T00:00:00Z"
                },
                "Type": "Required"
            },
            {
                "EmailAddress": {
                    "Address": "[email protected]",
                    "Name": "Pavel Bansky"
                },
                "Status": {
                    "Response": "None",
                    "Time": "0001-01-01T00:00:00Z"
                },
                "Type": "Required"
            }
        ],
        "Recurrence": {
            "Pattern": {
                "Type": "Weekly",
                "Interval": 1,
                "Month": 0,
                "Index": "First",
                "FirstDayOfWeek": "Sunday",
                "DayOfMonth": 0,
                "DaysOfWeek": [
                    "Monday"
                ]
            },
            "RecurrenceTimeZone": "Pacific Standard Time",
            "Range": {
                "Type": "NoEnd",
                "StartDate": "2014-10-13",
                "EndDate": "2014-11-13",
                "NumberOfOccurrences": 0
            }
        },
        "OriginalEndTimeZone": "Pacific Standard Time",
        "OriginalStartTimeZone": "Pacific Standard Time",
        "Organizer": {
            "EmailAddress": {
                "Address": "[email protected]",
                "Name": "Alex D"
            },
        "OnlineMeetingUrl": null
        }
    }

Template JSON: 

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "ColumnSet",
            "horizontalAlignment": "Center",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "ColumnSet",
                            "horizontalAlignment": "Center",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://messagecardplayground.azurewebsites.net/assets/LocationGreen_A.png"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "**Redmond**",
                                            "wrap": true
                                        },
                                        {
                                            "type": "TextBlock",
                                            "spacing": "None",
                                            "text": "8a - 12:30p",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "auto"
                                }
                            ]
                        }
                    ],
                    "width": 1
                },
                {
                    "type": "Column",
                    "spacing": "Large",
                    "separator": true,
                    "items": [
                        {
                            "type": "ColumnSet",
                            "horizontalAlignment": "Center",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://messagecardplayground.azurewebsites.net/assets/LocationBlue_B.png"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "**Bellevue**",
                                            "wrap": true
                                        },
                                        {
                                            "type": "TextBlock",
                                            "spacing": "None",
                                            "text": "12:30p - 3p",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "auto"
                                }
                            ]
                        }
                    ],
                    "width": 1
                },
                {
                    "type": "Column",
                    "spacing": "Large",
                    "separator": true,
                    "items": [
                        {
                            "type": "ColumnSet",
                            "horizontalAlignment": "Center",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://messagecardplayground.azurewebsites.net/assets/LocationRed_C.png"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "**Seattle**",
                                            "wrap": true
                                        },
                                        {
                                            "type": "TextBlock",
                                            "spacing": "None",
                                            "text": "8p",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "auto"
                                }
                            ]
                        }
                    ],
                    "width": 1
                }
            ]
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "horizontalAlignment": "Left",
                                            "url": "https://messagecardplayground.azurewebsites.net/assets/Conflict.png"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "spacing": "None",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "2:00 PM",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "stretch"
                                }
                            ]
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "1hr",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ],
                    "width": "110px"
                },
                {
                    "type": "Column",
                    "backgroundImage": {
                        "url": "https://messagecardplayground.azurewebsites.net/assets/SmallVerticalLineGray.png",
                        "fillMode": "RepeatVertically",
                        "horizontalAlignment": "Center"
                    },
                    "items": [
                        {
                            "type": "Image",
                            "horizontalAlignment": "Center",
                            "url": "https://messagecardplayground.azurewebsites.net/assets/CircleGreen_coffee.png"
                        }
                    ],
                    "width": "auto",
                    "spacing": "None"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "**${Subject}**",
                            "wrap": true
                        },
                        {
                            "type": "ColumnSet",
                            "spacing": "None",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://messagecardplayground.azurewebsites.net/assets/location_gray.png"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "${Location.DisplayName}",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "stretch"
                                }
                            ]
                        },
                        {
                            "type": "ImageSet",
                            "spacing": "Small",
                            "imageSize": "Small",
                            "images": [
                                {
                                    "type": "Image",
                                    "url": "https://messagecardplayground.azurewebsites.net/assets/person_w1.png",
                                    "size": "Small"
                                },
                                {
                                    "type": "Image",
                                    "url": "https://messagecardplayground.azurewebsites.net/assets/person_m1.png",
                                    "size": "Small"
                                },
                                {
                                    "type": "Image",
                                    "url": "https://messagecardplayground.azurewebsites.net/assets/person_w2.png",
                                    "size": "Small"
                                }
                            ]
                        },
                        {
                            "type": "ColumnSet",
                            "spacing": "Small",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://messagecardplayground.azurewebsites.net/assets/power_point.png"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "**Contoso Brand Guidelines** shared by **Susan Metters**",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "stretch"
                                }
                            ]
                        }
                    ],
                    "width": 40
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "None",
            "columns": [
                {
                    "type": "Column",
                    "width": "110px"
                },
                {
                    "type": "Column",
                    "backgroundImage": {
                        "url": "https://messagecardplayground.azurewebsites.net/assets/SmallVerticalLineGray.png",
                        "fillMode": "RepeatVertically",
                        "horizontalAlignment": "Center"
                    },
                    "items": [
                        {
                            "type": "Image",
                            "horizontalAlignment": "Center",
                            "url": "https://messagecardplayground.azurewebsites.net/assets/Gray_Dot.png"
                        }
                    ],
                    "width": "auto",
                    "spacing": "None"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "ColumnSet",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://messagecardplayground.azurewebsites.net/assets/car.png"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "about 45 minutes",
                                            "isSubtle": true,
                                            "wrap": true
                                        }
                                    ],
                                    "width": "stretch"
                                }
                            ]
                        }
                    ],
                    "width": 40
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "None",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "8:00 PM",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "spacing": "None",
                            "text": "1hr",
                            "isSubtle": true,
                            "wrap": true
                        }
                    ],
                    "width": "110px"
                },
                {
                    "type": "Column",
                    "backgroundImage": {
                        "url": "https://messagecardplayground.azurewebsites.net/assets/SmallVerticalLineGray.png",
                        "fillMode": "RepeatVertically",
                        "horizontalAlignment": "Center"
                    },
                    "items": [
                        {
                            "type": "Image",
                            "horizontalAlignment": "Center",
                            "url": "https://messagecardplayground.azurewebsites.net/assets/CircleBlue_flight.png"
                        }
                    ],
                    "width": "auto",
                    "spacing": "None"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "**Alaska Airlines AS1021 flight to Chicago**",
                            "wrap": true
                        },
                        {
                            "type": "ColumnSet",
                            "spacing": "None",
                            "columns": [
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "Image",
                                            "url": "https://messagecardplayground.azurewebsites.net/assets/location_gray.png"
                                        }
                                    ],
                                    "width": "auto"
                                },
                                {
                                    "type": "Column",
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "Seattle Tacoma International Airport (17801 International Blvd, Seattle, WA, United States)",
                                            "wrap": true
                                        }
                                    ],
                                    "width": "stretch"
                                }
                            ]
                        },
                        {
                            "type": "Image",
                            "url": "https://messagecardplayground.azurewebsites.net/assets/SeaTacMap.png",
                            "size": "Stretch"
                        }
                    ],
                    "width": 40
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}

JSON Scripts and Templates: Microsoft.com

  • Saturday, January 08, 2022 By : Mike Maadarani    0 comment