Adaptive Cards with Microsoft Teams – JSON Templates Part 8

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.

In this series, Adaptive Cards with Microsoft Teams – JSON Templates Part 8, includes templates for Flight Itinerary, Flight Update, and Flight Status.

Flight Itinerary

Data JSON:

{
  "Segments": [
    {
      "Id": 1,
      "OriginStation": 11235,
      "DestinationStation": 13554,
      "DepartureDateTime": "2017-05-30T19:25:00Z",
      "ArrivalDateTime": "2017-05-30T20:55:00Z",
      "Carrier": 881,
      "OperatingCarrier": 881,
      "Duration": 90,
      "FlightNumber": "1463",
      "JourneyMode": "Flight",
      "Directionality": "Outbound"
    },
    {
      "Id": 2,
      "OriginStation": 13554,
      "DestinationStation": 11235,
      "DepartureDateTime": "2017-06-02T19:25:00Z",
      "ArrivalDateTime": "2017-06-02T20:55:00Z",
      "Carrier": 881,
      "OperatingCarrier": 881,
      "Duration": 90,
      "FlightNumber": "1463",
      "JourneyMode": "Flight",
      "Directionality": "Inbound"
    }
  ],
  "BookingOptions": [
    {
      "BookingItems": [
        {
          "AgentID": 4499211,
          "Status": "Current",
          "Price": 4032.54,
          "Deeplink": "https://partners.api.skyscanner.net/apiservices/deeplink/v2?_cje=jzj5DawL5[...]",
          "SegmentIds": [
            1,
            2
          ]
        }
      ]
    }
  ],
    "Places": [
    {
      "Id": 13554,
      "ParentId": 4698,
      "Code": "SFO",
      "Type": "Airport",
      "Name": "San Francisco"
    },
    {
      "Id": 13558,
      "ParentId": 5796,
      "Code": "AMS",
      "Type": "Airport",
      "Name": "Amsterdam"
    }
  ],
  "Carriers": [
    {
      "Id": 881,
      "Code": "BA",
      "Name": "British Airways",
      "ImageUrl": "https://s1.apideeplink.com/images/airlines/BA.png"
    }
  ],
  "Query": {
    "Country": "GB",
    "Currency": "GBP",
    "Locale": "en-gb",
    "Adults": 3,
    "Children": 0,
    "Infants": 0,
    "OriginPlace": "2343",
    "DestinationPlace": "13554",
    "OutboundDate": "2017-05-30",
    "InboundDate": "2017-06-02",
    "LocationSchema": "Default",
    "CabinClass": "Economy",
    "GroupPricing": false
  }
 }

Template JSON: 

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "speak": "Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM",
  "body": [
    {
      "type": "TextBlock",
      "text": "Passengers",
      "weight": "Bolder",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "Sarah Hum",
      "separator": true,
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "Jeremy Goldberg",
      "spacing": "None",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "Evan Litvak",
      "spacing": "None",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "2 Stops",
      "weight": "Bolder",
      "spacing": "Medium",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "{{DATE(${string(Segments[0].DepartureDateTime)}, SHORT)}} {{TIME(${string(Segments[0].DepartureDateTime)})}}",
      "weight": "Bolder",
      "spacing": "None",
      "wrap": true
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "$when": "${Segments[0].OriginStation == 11235}",
              "text": "${Places[0].Name}",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "TextBlock",
              "$when": "${Segments[0].OriginStation == 13554}",
              "text": "${Places[1].Name}",
              "isSubtle": true,
              "wrap": true
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "$when": "${Segments[0].DestinationStation == 11235}",
              "text": "${Places[0].Name}",
              "horizontalAlignment": "Right",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "TextBlock",
              "$when": "${Segments[0].DestinationStation == 13554}",
              "text": "${Places[1].Name}",
              "horizontalAlignment": "Right",
              "isSubtle": true,
              "wrap": true
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "spacing": "none",
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "size": "ExtraLarge",
              "color": "Accent",
              "$when": "${Segments[0].OriginStation == 11235}",
              "text": "${Places[0].Code}",
              "spacing": "None",
              "wrap": true
            },
            {
              "type": "TextBlock",
              "size": "ExtraLarge",
              "color": "Accent",
              "$when": "${Segments[0].OriginStation == 13554}",
              "text": "${Places[1].Code}",
              "spacing": "None",
              "wrap": true
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Image",
              "url": "https://adaptivecards.io/content/airplane.png",
              "size": "Small",
              "spacing": "None"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "size": "ExtraLarge",
              "color": "Accent",
              "$when": "${Segments[0].DestinationStation == 11235}",
              "text": "${Places[0].Code}",
              "horizontalAlignment": "Right",
              "spacing": "None",
              "wrap": true
            },
            {
              "type": "TextBlock",
              "size": "ExtraLarge",
              "color": "Accent",
              "$when": "${Segments[0].DestinationStation == 13554}",
              "text": "${Places[1].Code}",
              "horizontalAlignment": "Right",
              "spacing": "None",
              "wrap": true
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Non-Stop",
      "weight": "Bolder",
      "spacing": "Medium",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "{{DATE(${string(Segments[1].ArrivalDateTime)}, SHORT)}} {{TIME(${string(Segments[1].ArrivalDateTime)})}}",
      "weight": "Bolder",
      "spacing": "None",
      "wrap": true
    },
    {
      "type": "ColumnSet",
      "separator": true,
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "$when": "${Segments[1].OriginStation == 11235}",
              "text": "${Places[0].Name}",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "TextBlock",
              "$when": "${Segments[1].OriginStation == 13554}",
              "text": "${Places[1].Name}",
              "isSubtle": true,
              "wrap": true
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "$when": "${Segments[1].DestinationStation == 11235}",
              "text": "${Places[0].Name}",
              "horizontalAlignment": "Right",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "TextBlock",
              "$when": "${Segments[1].DestinationStation == 13554}",
              "text": "${Places[1].Name}",
              "horizontalAlignment": "Right",
              "isSubtle": true,
              "wrap": true
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "spacing": "none",
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "size": "ExtraLarge",
              "color": "Accent",
              "$when": "${Segments[1].OriginStation == 11235}",
              "text": "${Places[0].Code}",
              "spacing": "None",
              "wrap": true
            },
            {
              "type": "TextBlock",
              "size": "ExtraLarge",
              "color": "Accent",
              "$when": "${Segments[1].OriginStation == 13554}",
              "text": "${Places[1].Code}",
              "spacing": "None",
              "wrap": true
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Image",
              "url": "https://adaptivecards.io/content/airplane.png",
              "size": "Small",
              "spacing": "None"
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "size": "ExtraLarge",
              "color": "Accent",
              "$when": "${Segments[1].DestinationStation == 11235}",
              "text": "${Places[0].Code}",
              "horizontalAlignment": "Right",
              "spacing": "None",
              "wrap": true
            },
            {
              "type": "TextBlock",
              "size": "ExtraLarge",
              "color": "Accent",
              "$when": "${Segments[1].DestinationStation == 13554}",
              "text": "${Places[1].Code}",
              "horizontalAlignment": "Right",
              "spacing": "None",
              "wrap": true
            }
          ]
        }
      ]
    },
    {
      "type": "ColumnSet",
      "spacing": "Medium",
      "columns": [
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "text": "Total",
              "size": "Medium",
              "isSubtle": true,
              "wrap": true
            }
          ]
        },
        {
          "type": "Column",
          "width": 1,
          "items": [
            {
              "type": "TextBlock",
              "horizontalAlignment": "Right",
              "text": "$${formatNumber(BookingOptions[0].BookingItems[0].Price, 2)}",
              "size": "Medium",
              "weight": "Bolder",
              "wrap": true
            }
          ]
        }
      ]
    }
  ]
}

Flight Update

{
  "@context": "http://schema.org",
  "@type": "FlightReservation",
  "reservationId": "RXJ34P",
  "reservationStatus": "http://schema.org/ReservationConfirmed",
  "passengerPriorityStatus": "Fast Track",
  "passengerSequenceNumber": "ABC123",
  "securityScreening": "TSA PreCheck",
  "underName": {
    "@type": "Person",
    "name": "Sarah Hum"
  },
  "reservationFor": {
    "@type": "Flight",
    "flightNumber": "KL605",
    "provider": {
    "@type": "Airline",
    "name": "KLM",
    "iataCode": "KL",
    "boardingPolicy": "http://schema.org/ZoneBoardingPolicy"
    },
    "seller": {
    "@type": "Airline",
    "name": "KLM",
    "iataCode": "KL"
    },
    "departureAirport": {
    "@type": "Airport",
    "name": "Amsterdam Airport",
    "iataCode": "AMS"
    },
    "departureTime": "2017-03-04T09:20:00-01:00",
    "arrivalAirport": {
    "@type": "Airport",
    "name": "San Francisco Airport",
    "iataCode": "SFO"
    },
    "arrivalTime": "2017-03-05T08:20:00+04:00"
  }
  }

Template JSON: 

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "speak": "Flight KL0605 to San Fransisco has been delayed.It will not leave until 10:10 AM.",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "size": "Small",
                            "url": "https://adaptivecards.io/content/airplane.png"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Flight Status",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "DELAYED",
                            "horizontalAlignment": "Right",
                            "spacing": "None",
                            "size": "Large",
                            "color": "Attention",
                            "wrap": true
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "separator": true,
            "spacing": "Medium",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Passengers",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "${underName.name}",
                            "spacing": "Small",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "Jeremy Goldberg",
                            "spacing": "Small",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "Evan Litvak",
                            "spacing": "Small",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Seat",
                            "horizontalAlignment": "Right",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "14A",
                            "horizontalAlignment": "Right",
                            "spacing": "Small",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "14B",
                            "horizontalAlignment": "Right",
                            "spacing": "Small",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "14C",
                            "horizontalAlignment": "Right",
                            "spacing": "Small",
                            "wrap": true
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Flight",
                            "isSubtle": true,
                            "weight": "Bolder",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "${reservationFor.flightNumber}",
                            "spacing": "Small",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Departs",
                            "isSubtle": true,
                            "horizontalAlignment": "Center",
                            "weight": "Bolder",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "{{TIME(${string(reservationFor.departureTime)})}}",
                            "color": "Attention",
                            "weight": "Bolder",
                            "horizontalAlignment": "Center",
                            "spacing": "Small",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Arrives",
                            "isSubtle": true,
                            "horizontalAlignment": "Right",
                            "weight": "Bolder",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "{{TIME(${string(reservationFor.arrivalTime)})}}",
                            "color": "Attention",
                            "horizontalAlignment": "Right",
                            "weight": "Bolder",
                            "spacing": "Small",
                            "wrap": true
                        }
                    ]
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "Medium",
            "separator": true,
            "columns": [
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${reservationFor.departureAirport.name}",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "${reservationFor.departureAirport.iataCode}",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "spacing": "None",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": " ",
                            "wrap": true
                        },
                        {
                            "type": "Image",
                            "url": "https://adaptivecards.io/content/airplane.png",
                            "size": "Small"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${reservationFor.arrivalAirport.name}",
                            "isSubtle": true,
                            "horizontalAlignment": "Right",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "${reservationFor.arrivalAirport.iataCode}",
                            "horizontalAlignment": "Right",
                            "size": "ExtraLarge",
                            "color": "Accent",
                            "spacing": "None",
                            "wrap": true
                        }
                    ]
                }
            ]
        }
    ]
}

Flight Details

Data JSON:

{
        "@context": "http://schema.org",
        "@type": "FlightReservation",
        "reservationId": "RXJ34P",
        "reservationStatus": "http://schema.org/ReservationConfirmed",
        "passengerPriorityStatus": "Fast Track",
        "passengerSequenceNumber": "ABC123",
        "securityScreening": "TSA PreCheck",
        "underName": {
          "@type": "Person",
          "name": "Eva Green"
        },
        "reservationFor": {
          "@type": "Flight",
          "flightNumber": "UA110",
          "provider": {
                "@type": "Airline",
                "name": "Continental",
                "iataCode": "CO",
                "boardingPolicy": "http://schema.org/ZoneBoardingPolicy"
          },
          "seller": {
                "@type": "Airline",
                "name": "United",
                "iataCode": "UA"
          },
          "departureAirport": {
                "@type": "Airport",
                "name": "San Francisco Airport",
                "city": "San Francisco",
                "iataCode": "SFO"
          },
          "departureTime": "2017-03-04T20:15:00-08:00",
          "arrivalAirport": {
                "@type": "Airport",
                "name": "John F. Kennedy International Airport",
                "city": "New York",
                "iataCode": "JFK"
          },
          "arrivalTime": "2017-03-05T06:30:00-05:00"
        }
  }

Template JSON: 

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Container",
                            "backgroundImage": "https://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
                            "items": [
                                {
                                    "type": "Image",
                                    "horizontalAlignment": "center",
                                    "url": "https://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png",
                                    "altText": "Departing airplane"
                                }
                            ],
                            "bleed": true
                        },
                        {
                            "type": "Container",
                            "spacing": "none",
                            "style": "emphasis",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "extraLarge",
                                    "weight": "lighter",
                                    "color": "Accent",
                                    "text": "Flight to ${reservationFor.arrivalAirport.iataCode}",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "spacing": "small",
                                    "text": "${reservationFor.provider.name}  Air Lines flight ${reservationFor.flightNumber} ",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "spacing": "none",
                                    "text": "Confirmation code: ${reservationId}",
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "spacing": "none",
                                    "text": "4 hours 15 minutes",
                                    "wrap": true
                                }
                            ],
                            "bleed": true,
                            "height": "stretch"
                        }
                    ],
                    "width": 45,
                    "height": "stretch"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Container",
                            "height": "stretch",
                            "items": [
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "size": "extraLarge",
                                                    "weight": "lighter",
                                                    "text": "${reservationFor.departureAirport.iataCode}",
                                                    "wrap": true
                                                }
                                            ],
                                            "width": "auto"
                                        },
                                        {
                                            "type": "Column",
                                            "verticalContentAlignment": "center",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "url": "https://messagecardplayground.azurewebsites.net/assets/graydot2x2.png",
                                                    "width": "10000px",
                                                    "height": "2px"
                                                }
                                            ],
                                            "width": "stretch"
                                        },
                                        {
                                            "type": "Column",
                                            "spacing": "small",
                                            "verticalContentAlignment": "center",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "url": "https://messagecardplayground.azurewebsites.net/assets/smallairplane.png",
                                                    "height": "16px"
                                                }
                                            ],
                                            "width": "auto"
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "horizontalAlignment": "right",
                                                    "size": "extraLarge",
                                                    "weight": "lighter",
                                                    "text": "${reservationFor.arrivalAirport.iataCode}",
                                                    "wrap": true
                                                }
                                            ],
                                            "width": "auto"
                                        }
                                    ]
                                },
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "RichTextBlock",
                                                    "inlines": [
                                                        {
                                                            "type": "TextRun",
                                                            "size": "medium",
                                                            "text": "{{TIME(${string(reservationFor.departureTime)})}}\\n",
                                                            "wrap": true
                                                        },
                                                        {
                                                            "type": "TextRun",
                                                            "text": "{{DATE(${string(reservationFor.departureTime)}, SHORT)}}\\n",
                                                            "isSubtle": true,
                                                            "wrap": true
                                                        },
                                                        {
                                                            "type": "TextRun",
                                                            "text": "${reservationFor.departureAirport.city}",
                                                            "isSubtle": true,
                                                            "wrap": true
                                                        }
                                                    ]
                                                }
                                            ],
                                            "width": 1
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "RichTextBlock",
                                                    "horizontalAlignment": "right",
                                                    "inlines": [
                                                        {
                                                            "type": "TextRun",
                                                            "size": "medium",
                                                            "text": "{{TIME(${string(reservationFor.arrivalTime)})}}\\n",
                                                            "wrap": true
                                                        },
                                                        {
                                                            "type": "TextRun",
                                                            "text": "{{DATE(${string(reservationFor.arrivalTime)}, SHORT)}}\\n",
                                                            "isSubtle": true,
                                                            "wrap": true
                                                        },
                                                        {
                                                            "type": "TextRun",
                                                            "text": "${reservationFor.arrivalAirport.city}",
                                                            "isSubtle": true,
                                                            "wrap": true
                                                        }
                                                    ]
                                                }
                                            ],
                                            "width": 1
                                        }
                                    ]
                                },
                                {
                                    "type": "ActionSet",
                                    "separator": true,
                                    "actions": [
                                        {
                                            "type": "Action.Submit",
                                            "title": "Check in",
                                            "style": "positive"
                                        },
                                        {
                                            "type": "Action.Submit",
                                            "title": "View"
                                        }
                                    ],
                                    "spacing": "medium"
                                }
                            ]
                        }
                    ],
                    "width": 55
                }
            ],
            "height": "stretch"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.0"
}


25.	 Simple Fallback  

Data JSON:

{
    "fallback": {
        "message":"No graph support. Guess we'll just use this textblock instead."
    }
}

Template JSON: 

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "Fallback test:",
            "wrap": true
        },
        {
            "type": "Steve Holt!",
            "egg": "her?",
            "fallback": "drop"
        },
        {
            "type": "Graph",
            "someProperty": "foo",
            "fallback": {
                "type": "TextBlock",
                "text": "${fallback.message}",
                "wrap": true
            }
        }
    ]
}

JSON Scripts and Templates: Microsoft.com

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