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
Saturday, January 29, 2022
By : Mike Maadarani
0 comment