Samples and Templates
These samples are just a teaser of the type of cards you can create. Go ahead and tweak them to make any scenario possible!
Adaptive Card Templating enables the separation of data from the layout in an Adaptive Card. It helps design a card once, and then populate it with real data at runtime. More about templating
Flight details sample
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": "http://messagecardplayground.azurewebsites.net/assets/TxP_Background.png",
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://messagecardplayground.azurewebsites.net/assets/TxP_Flight.png"
}
],
"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}"
}
],
"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}"
}
],
"width": "auto"
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"text": "{{TIME(${string(reservationFor.departureTime)})}}"
}
],
"width": 1
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"size": "Medium",
"text": "{{TIME(${string(reservationFor.arrivalTime)})}}"
}
],
"width": 1
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "{{DATE(${string(reservationFor.departureTime)}, SHORT)}}",
"isSubtle": true,
"wrap": true
}
],
"width": 1
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "{{DATE(${string(reservationFor.departureTime)}, SHORT)}}",
"isSubtle": true,
"wrap": true
}
],
"width": 1
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "${reservationFor.departureAirport.city}",
"isSubtle": true
}
],
"width": 1
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "${reservationFor.arrivalAirport.city}",
"isSubtle": true
}
],
"width": 1
}
],
"height": "stretch"
},
{
"type": "ActionSet",
"separator": true,
"actions": [
{
"type": "Action.Submit",
"title": "Check in",
"style": "positive"
},
{
"type": "Action.Submit",
"title": "View in calendar"
}
],
"spacing": "Medium"
}
]
}
],
"width": 55
}
],
"height": "stretch"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Adaptive Card
