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 itinerary sample
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": "http://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": "http://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"
},
{
"type": "TextBlock",
"text": "Sarah Hum",
"separator": true
},
{
"type": "TextBlock",
"text": "Jeremy Goldberg",
"spacing": "None"
},
{
"type": "TextBlock",
"text": "Evan Litvak",
"spacing": "None"
},
{
"type": "TextBlock",
"text": "2 Stops",
"weight": "Bolder",
"spacing": "Medium"
},
{
"type": "TextBlock",
"text": "{{DATE(${string(Segments[0].DepartureDateTime)}, SHORT)}} {{TIME(${string(Segments[0].DepartureDateTime)})}}",
"weight": "Bolder",
"spacing": "None"
},
{
"type": "ColumnSet",
"separator": true,
"columns": [
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"$when": "${Segments[0].OriginStation == 11235}",
"text": "${Places[0].Name}",
"isSubtle": true
},
{
"type": "TextBlock",
"$when": "${Segments[0].OriginStation == 13554}",
"text": "${Places[1].Name}",
"isSubtle": true
},
{
"type": "TextBlock",
"size": "ExtraLarge",
"color": "Accent",
"$when": "${Segments[0].OriginStation == 11235}",
"text": "${Places[0].Code}",
"spacing": "None"
},
{
"type": "TextBlock",
"size": "ExtraLarge",
"color": "Accent",
"$when": "${Segments[0].OriginStation == 13554}",
"text": "${Places[1].Code}",
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/airplane.png",
"size": "Small",
"spacing": "None"
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"$when": "${Segments[0].DestinationStation == 11235}",
"text": "${Places[0].Name}",
"horizontalAlignment": "Right",
"isSubtle": true
},
{
"type": "TextBlock",
"$when": "${Segments[0].DestinationStation == 13554}",
"text": "${Places[1].Name}",
"horizontalAlignment": "Right",
"isSubtle": true
},
{
"type": "TextBlock",
"size": "ExtraLarge",
"color": "Accent",
"$when": "${Segments[0].DestinationStation == 11235}",
"text": "${Places[0].Code}",
"horizontalAlignment": "Right",
"spacing": "None"
},
{
"type": "TextBlock",
"size": "ExtraLarge",
"color": "Accent",
"$when": "${Segments[0].DestinationStation == 13554}",
"text": "${Places[1].Code}",
"horizontalAlignment": "Right",
"spacing": "None"
}
]
}
]
},
{
"type": "TextBlock",
"text": "Non-Stop",
"weight": "Bolder",
"spacing": "Medium"
},
{
"type": "TextBlock",
"text": "{{DATE(${string(Segments[1].ArrivalDateTime)}, SHORT)}} {{TIME(${string(Segments[1].ArrivalDateTime)})}}",
"weight": "Bolder",
"spacing": "None"
},
{
"type": "ColumnSet",
"separator": true,
"columns": [
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"$when": "${Segments[1].OriginStation == 11235}",
"text": "${Places[0].Name}",
"isSubtle": true
},
{
"type": "TextBlock",
"$when": "${Segments[1].OriginStation == 13554}",
"text": "${Places[1].Name}",
"isSubtle": true
},
{
"type": "TextBlock",
"size": "ExtraLarge",
"color": "Accent",
"$when": "${Segments[1].OriginStation == 11235}",
"text": "${Places[0].Code}",
"spacing": "None"
},
{
"type": "TextBlock",
"size": "ExtraLarge",
"color": "Accent",
"$when": "${Segments[1].OriginStation == 13554}",
"text": "${Places[1].Code}",
"spacing": "None"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://adaptivecards.io/content/airplane.png",
"size": "Small",
"spacing": "None"
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"$when": "${Segments[1].DestinationStation == 11235}",
"text": "${Places[0].Name}",
"horizontalAlignment": "Right",
"isSubtle": true
},
{
"type": "TextBlock",
"$when": "${Segments[1].DestinationStation == 13554}",
"text": "${Places[1].Name}",
"horizontalAlignment": "Right",
"isSubtle": true
},
{
"type": "TextBlock",
"size": "ExtraLarge",
"color": "Accent",
"$when": "${Segments[1].DestinationStation == 11235}",
"text": "${Places[0].Code}",
"horizontalAlignment": "Right",
"spacing": "None"
},
{
"type": "TextBlock",
"size": "ExtraLarge",
"color": "Accent",
"$when": "${Segments[1].DestinationStation == 13554}",
"text": "${Places[1].Code}",
"horizontalAlignment": "Right",
"spacing": "None"
}
]
}
]
},
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "Total",
"size": "Medium",
"isSubtle": true
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Right",
"text": "$${BookingOptions[0].BookingItems[0].Price}",
"size": "Medium",
"weight": "Bolder"
}
]
}
]
}
]
}
Adaptive Card
