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
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
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 Part 6, we have included Inputs, Inputs with Validation, and Restaurant templates.
Inputs
Data JSON: { "ParticipantInfoForm":{ "title":"Input.Text elements" }, "Survey": { "title":"Input ChoiceSet", "questions": [ { "question":"What color do you want? (compact)", "items": [ { "choice":"Red", "value":"1" }, { "choice":"Green", "value":"2" }, { "choice":"Blue", "value":"3" } ] }, { "question": "What color do you want? (expanded)", "items": [ { "choice":"Red", "value":"1" }, { "choice":"Green", "value":"2" }, { "choice":"Blue", "value":"3" } ] }, { "question": "What color do you want? (multiselect)", "items": [ { "choice":"Red", "value":"1" }, { "choice":"Green", "value":"2" }, { "choice":"Blue", "value":"3" } ] }, { "question":"I accept the terms and conditions (True/False)" }, { "question":"Red cars are better than other cars" } ] } } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": " ${ParticipantInfoForm.title}", "horizontalAlignment": "Center", "wrap": true, "style": "heading" }, { "type": "TextBlock", "text": "Name", "wrap": true }, { "type": "Input.Text", "style": "text", "id": "SimpleVal" }, { "type": "TextBlock", "text": "Homepage", "wrap": true }, { "type": "Input.Text", "style": "url", "id": "UrlVal" }, { "type": "TextBlock", "text": "Email", "wrap": true }, { "type": "Input.Text", "style": "email", "id": "EmailVal" }, { "type": "TextBlock", "text": "Phone", "wrap": true }, { "type": "Input.Text", "style": "tel", "id": "TelVal" }, { "type": "TextBlock", "text": "Comments", "wrap": true }, { "type": "Input.Text", "style": "text", "isMultiline": true, "id": "MultiLineVal" }, { "type": "TextBlock", "text": "Quantity", "wrap": true }, { "type": "Input.Number", "min": -5, "max": 5, "value": 1, "id": "NumVal" }, { "type": "TextBlock", "text": "Due Date", "wrap": true }, { "type": "Input.Date", "id": "DateVal", "value": "2017-09-20" }, { "type": "TextBlock", "text": "Start time", "wrap": true }, { "type": "Input.Time", "id": "TimeVal", "value": "16:59" }, { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "${Survey.title} ", "horizontalAlignment": "Center", "wrap": true, "style": "heading" }, { "type": "TextBlock", "text": "${Survey.questions[0].question}", "wrap": true }, { "type": "Input.ChoiceSet", "id": "CompactSelectVal", "value": "1", "choices": [ { "$data": "${Survey.questions[0].items}", "title": "${choice}", "value": "${value}" } ] }, { "type": "TextBlock", "text": "${Survey.questions[1].question}", "wrap": true }, { "type": "Input.ChoiceSet", "id": "SingleSelectVal", "style": "expanded", "value": "1", "choices": [ { "$data": "${Survey.questions[1].items}", "title": "${choice}", "value": "${value}" } ] }, { "type": "TextBlock", "text": "${Survey.questions[2].question}", "wrap": true }, { "type": "Input.ChoiceSet", "id": "MultiSelectVal", "isMultiSelect": true, "value": "1,3", "choices": [ { "$data": "${Survey.questions[2].items}", "title": "${choice}", "value": "${value}" } ] }, { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "Input.Toggle", "horizontalAlignment": "Center", "wrap": true, "style": "heading" }, { "type": "Input.Toggle", "title": "${Survey.questions[3].question}", "id": "AcceptsTerms", "wrap": false, "value": "false" }, { "type": "Input.Toggle", "title": "${Survey.questions[4].question}", "valueOn": "RedCars", "valueOff": "NotRedCars", "id": "ColorPreference", "wrap": false, "value": "NotRedCars" } ], "actions": [ { "type": "Action.Submit", "title": "Submit", "data": { "id": "1234567890" } }, { "type": "Action.ShowCard", "title": "Show Card", "card": { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "Enter comment", "wrap": true }, { "type": "Input.Text", "style": "text", "id": "CommentVal" } ], "actions": [ { "type": "Action.Submit", "title": "OK" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } } ] }
Inputs with Validation
Data JSON: { "ParticipantInfoForm":{ "title":"Input.Text elements" }, "Survey": { "title":"Input ChoiceSet", "questions": [ { "question":"What color do you want? (compact)", "items": [ { "choice":"Red", "value":"1" }, { "choice":"Green", "value":"2" }, { "choice":"Blue", "value":"3" } ] }, { "question": "What color do you want? (expanded)", "items": [ { "choice":"Red", "value":"1" }, { "choice":"Green", "value":"2" }, { "choice":"Blue", "value":"3" } ] }, { "question": "What color do you want? (multiselect)", "items": [ { "choice":"Red", "value":"1" }, { "choice":"Green", "value":"2" }, { "choice":"Blue", "value":"3" } ] }, { "question":"I accept the terms and conditions (True/False)" }, { "question":"Red cars are better than other cars" } ] } } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "size": "medium", "weight": "bolder", "text": " ${ParticipantInfoForm.title}", "horizontalAlignment": "center", "wrap": true, "style": "heading" }, { "type": "Input.Text", "label": "Name", "style": "text", "id": "SimpleVal", "isRequired": true, "errorMessage": "Name is required" }, { "type": "Input.Text", "label": "Homepage", "style": "url", "id": "UrlVal" }, { "type": "Input.Text", "label": "Email", "style": "email", "id": "EmailVal" }, { "type": "Input.Text", "label": "Phone", "style": "tel", "id": "TelVal" }, { "type": "Input.Text", "label": "Comments", "style": "text", "isMultiline": true, "id": "MultiLineVal" }, { "type": "Input.Number", "label": "Quantity", "min": -5, "max": 5, "value": 1, "id": "NumVal", "errorMessage": "The quantity must be between -5 and 5" }, { "type": "Input.Date", "label": "Due Date", "id": "DateVal", "value": "2017-09-20" }, { "type": "Input.Time", "label": "Start time", "id": "TimeVal", "value": "16:59" }, { "type": "TextBlock", "size": "medium", "weight": "bolder", "text": "${Survey.title} ", "horizontalAlignment": "center", "wrap": true, "style": "heading" }, { "type": "Input.ChoiceSet", "id": "CompactSelectVal", "label": "${Survey.questions[0].question}", "style": "compact", "value": "1", "choices": [ { "$data": "${Survey.questions[0].items}", "title": "${choice}", "value": "${value}" } ] }, { "type": "Input.ChoiceSet", "id": "SingleSelectVal", "label": "${Survey.questions[1].question}", "style": "expanded", "value": "1", "choices": [ { "$data": "${Survey.questions[1].items}", "title": "${choice}", "value": "${value}" } ] }, { "type": "Input.ChoiceSet", "id": "MultiSelectVal", "label": "${Survey.questions[2].question}", "isMultiSelect": true, "value": "1,3", "choices": [ { "$data": "${Survey.questions[2].items}", "title": "${choice}", "value": "${value}" } ] }, { "type": "TextBlock", "size": "medium", "weight": "bolder", "text": "Input.Toggle", "horizontalAlignment": "center", "wrap": true, "style": "heading" }, { "type": "Input.Toggle", "label": "Please accept the terms and conditions:", "title": "${Survey.questions[3].question}", "valueOn": "true", "valueOff": "false", "id": "AcceptsTerms", "isRequired": true, "errorMessage": "Accepting the terms and conditions is required" }, { "type": "Input.Toggle", "label": "How do you feel about red cars?", "title": "${Survey.questions[4].question}", "valueOn": "RedCars", "valueOff": "NotRedCars", "id": "ColorPreference" } ], "actions": [ { "type": "Action.Submit", "title": "Submit", "data": { "id": "1234567890" } }, { "type": "Action.ShowCard", "title": "Show Card", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Text", "label": "enter comment", "style": "text", "id": "CommentVal" } ], "actions": [ { "type": "Action.Submit", "title": "OK" } ] } } ] }
Restaurant
Data JSON: { "@context": "http://schema.org/", "@type": "LocalBusiness", "name": "Malt \u0026 Vine", "url": "https://www.yelp.com/biz/malt-and-vine-redmond", "address": { "addressLocality": "Redmond", "addressRegion": "WA", "streetAddress": "16851 Redmond Way", "postalCode": "98052", "addressCountry": "US" }, "image": "https://s3-media1.fl.yelpcdn.com/bphoto/HD_NsxwaCTwKRxvOZs2Shw/ls.jpg", "imageAlt": "image of beer growlers on a table", "telephone": "+14258816461", "aggregateRating": { "reviewCount": 176, "@type": "AggregateRating", "ratingValue": 4.5 }, "review": [{ "reviewRating": { "ratingValue": 4 }, "datePublished": "2014-11-28", "description": "Great concept and a wide selection of beers both on tap and bottled! Smaller wine selection than I wanted, but the variety of beers certainly made up for that. Although I didn't order anything, my boyfriend got a beer and he loved it. Their prices are fair too. \n\nThe concept is really awesome. It's a bar/store that you can bring outside food into. The place was pretty packed tonight. I wish we had stayed for more than one drink. I would have loved to sample everything!", "author": "Blaire S." }], "priceRange": "mid-priced" } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "speak": "Tom's Pie is a Pizza restaurant which is rated 9.3 by customers.", "type": "ColumnSet", "columns": [ { "type": "Column", "width": 2, "items": [ { "type": "TextBlock", "text": "${address.addressLocality}, ${address.addressRegion}", "wrap": true }, { "type": "TextBlock", "text": "${name}", "weight": "bolder", "size": "extraLarge", "spacing": "none", "wrap": true }, { "type": "TextBlock", "$when": "${aggregateRating.ratingValue <= 1}", "text": "${aggregateRating.ratingValue} star (${aggregateRating.reviewCount} reviews) · ${priceRange}", "isSubtle": true, "spacing": "none", "wrap": true }, { "type": "TextBlock", "$when": "${aggregateRating.ratingValue >= 2}", "text": "${aggregateRating.ratingValue} stars (${aggregateRating.reviewCount} reviews) · ${priceRange}", "isSubtle": true, "spacing": "none", "wrap": true }, { "type": "TextBlock", "text": "**${review[0].author}** said \"${review[0].description}\"", "size": "small", "wrap": true, "maxLines": 3 } ] }, { "type": "Column", "width": 1, "items": [ { "type": "Image", "url": "${image}", "altText": "${imageAlt}", "size": "auto" } ] } ] } ], "actions": [ { "type": "Action.OpenUrl", "title": "More Info", "url": "${url}" } ] } JSON Scripts and Templates: Microsoft.com
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.
Food Order
Data JSON: { "@context":"http://schema.org", "@type":"Restaurant", "url":"https://www.thisisarestaurant.com", "name":"The Restaurant", "image":"https://www.example.com/image-of-some-restaurant.jpg", "description":"This is an example restaurant that serves American cuisine.", "servesCuisine":[ "American cuisine" ], "hasMenu":{ "@type":"Menu", "name":"Dine-In Menu", "description":"Menu for in-restaurant dining only.", "hasMenuSection":[ { "@type":"MenuSection", "name":"Steak", "description":"How would you like your steak prepared?", "image":"https://contososcubademo.azurewebsites.net/assets/steak.jpg", "offers":{ "@type":"Offer", "availabilityEnds":"T8:22:00", "availabilityStarts":"T8:22:00" }, "hasMenuSection":[ { "@type":"MenuSection", "name":"Chicken", "description":"Do you have any allergies?", "image":"https://contososcubademo.azurewebsites.net/assets/chicken.jpg", "offers":{ "@type":"Offer", "availabilityEnds":"T8:22:00", "availabilityStarts":"T8:22:00" }, "hasMenuItem":{ "@type":"MenuItem", "name":"Potato Skins", "description":"Small serving of stuffed potato skins.", "offers":{ "@type":"Offer", "price":"7.49", "priceCurrency":"USD" }, "suitableForDiet":"http://schema.org/GlutenFreeDiet" } }, { "@type":"MenuSection", "name":"Tofu", "description":"Would you like it prepared vegan?", "image":"https://contososcubademo.azurewebsites.net/assets/tofu.jpg", "offers":{ "@type":"Offer", "availabilityEnds":"T8:22:00", "availabilityStarts":"T8:22:00" }, "hasMenuItem":{ "@type":"MenuItem", "name":"Pea Soup", "description":"Creamy pea soup topped with melted cheese and sourdough croutons.", "offers":{ "@type":"Offer", "price":"3.49", "priceCurrency":"USD" } } } ] } ] } } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Your registration is almost complete", "size": "Medium", "weight": "Bolder", "wrap": true }, { "type": "TextBlock", "text": "What type of food do you prefer?", "wrap": true }, { "type": "ImageSet", "imageSize": "medium", "images": [ { "type": "Image", "url": "${hasMenu.hasMenuSection[0].image}" }, { "type": "Image", "url": "${hasMenu.hasMenuSection[0].hasMenuSection[0].image}" }, { "type": "Image", "url": "${hasMenu.hasMenuSection[0].hasMenuSection[1].image}" } ] } ], "actions": [ { "type": "Action.ShowCard", "title": "${hasMenu.hasMenuSection[0].name}", "card": { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "${hasMenu.hasMenuSection[0].description}", "size": "Medium", "wrap": true }, { "type": "Input.ChoiceSet", "id": "SteakTemp", "style": "expanded", "choices": [ { "title": "Rare", "value": "rare" }, { "title": "Medium-Rare", "value": "medium-rare" }, { "title": "Well-done", "value": "well-done" } ] }, { "type": "Input.Text", "id": "SteakOther", "isMultiline": true, "placeholder": "Any other preparation requests?" } ], "actions": [ { "type": "Action.Submit", "title": "OK", "data": { "FoodChoice": "Steak" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } }, { "type": "Action.ShowCard", "title": "${hasMenu.hasMenuSection[0].hasMenuSection[0].name}", "card": { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "${hasMenu.hasMenuSection[0].hasMenuSection[0].description}", "size": "Medium", "wrap": true }, { "type": "Input.ChoiceSet", "id": "ChickenAllergy", "style": "expanded", "isMultiSelect": true, "choices": [ { "title": "I'm allergic to peanuts", "value": "peanut" } ] }, { "type": "Input.Text", "id": "ChickenOther", "isMultiline": true, "placeholder": "Any other preparation requests?" } ], "actions": [ { "type": "Action.Submit", "title": "OK", "data": { "FoodChoice": "Chicken" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } }, { "type": "Action.ShowCard", "title": "${hasMenu.hasMenuSection[0].hasMenuSection[1].name}", "card": { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "text": "${hasMenu.hasMenuSection[0].hasMenuSection[1].description}", "size": "Medium", "wrap": true }, { "type": "Input.Toggle", "id": "Vegetarian", "title": "Please prepare it vegan", "valueOn": "vegan", "valueOff": "notVegan", "wrap": false }, { "type": "Input.Text", "id": "VegOther", "isMultiline": true, "placeholder": "Any other preparation requests?" } ], "actions": [ { "type": "Action.Submit", "title": "OK", "data": { "FoodChoice": "Vegetarian" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } } ] }
Food Order with Validation
Data JSON: { "@context":"http://schema.org", "@type":"Restaurant", "url":"https://www.thisisarestaurant.com", "name":"The Restaurant", "image":"https://www.example.com/image-of-some-restaurant.jpg", "description":"This is an example restaurant that serves American cuisine.", "servesCuisine":[ "American cuisine" ], "hasMenu":{ "@type":"Menu", "name":"Dine-In Menu", "description":"Menu for in-restaurant dining only.", "hasMenuSection":[ { "@type":"MenuSection", "name":"Steak", "description":"How would you like your steak prepared?", "image":"https://contososcubademo.azurewebsites.net/assets/steak.jpg", "offers":{ "@type":"Offer", "availabilityEnds":"T8:22:00", "availabilityStarts":"T8:22:00" }, "hasMenuSection":[ { "@type":"MenuSection", "name":"Chicken", "description":"Do you have any allergies?", "image":"https://contososcubademo.azurewebsites.net/assets/chicken.jpg", "offers":{ "@type":"Offer", "availabilityEnds":"T8:22:00", "availabilityStarts":"T8:22:00" }, "hasMenuItem":{ "@type":"MenuItem", "name":"Potato Skins", "description":"Small serving of stuffed potato skins.", "offers":{ "@type":"Offer", "price":"7.49", "priceCurrency":"USD" }, "suitableForDiet":"http://schema.org/GlutenFreeDiet" } }, { "@type":"MenuSection", "name":"Tofu", "description":"Would you like it prepared vegan?", "image":"https://contososcubademo.azurewebsites.net/assets/tofu.jpg", "offers":{ "@type":"Offer", "availabilityEnds":"T8:22:00", "availabilityStarts":"T8:22:00" }, "hasMenuItem":{ "@type":"MenuItem", "name":"Pea Soup", "description":"Creamy pea soup topped with melted cheese and sourdough croutons.", "offers":{ "@type":"Offer", "price":"3.49", "priceCurrency":"USD" } } } ] } ] } } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Your registration is almost complete", "size": "Medium", "weight": "Bolder", "wrap": true }, { "type": "TextBlock", "text": "What type of food do you prefer?", "wrap": true }, { "type": "ImageSet", "imageSize": "medium", "images": [ { "type": "Image", "url": "${hasMenu.hasMenuSection[0].image}" }, { "type": "Image", "url": "${hasMenu.hasMenuSection[0].hasMenuSection[0].image}" }, { "type": "Image", "url": "${hasMenu.hasMenuSection[0].hasMenuSection[1].image}" } ] } ], "actions": [ { "type": "Action.ShowCard", "title": "${hasMenu.hasMenuSection[0].name}", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.ChoiceSet", "id": "SteakTemp", "style": "expanded", "label": "${hasMenu.hasMenuSection[0].description}", "isRequired": true, "errorMessage": "Please select one of the above options", "choices": [ { "title": "Rare", "value": "rare" }, { "title": "Medium-Rare", "value": "medium-rare" }, { "title": "Well-done", "value": "well-done" } ] }, { "type": "Input.Text", "id": "SteakOther", "isMultiline": true, "label": "Any other preparation requests?" } ], "actions": [ { "type": "Action.Submit", "title": "OK", "data": { "FoodChoice": "Steak" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } }, { "type": "Action.ShowCard", "title": "${hasMenu.hasMenuSection[0].hasMenuSection[0].name}", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Toggle", "id": "ChickenAllergy", "valueOn": "noPeanuts", "valueOff": "peanuts", "title": "I'm allergic to peanuts", "label": "${hasMenu.hasMenuSection[0].hasMenuSection[0].description}" }, { "type": "Input.Text", "id": "ChickenOther", "isMultiline": true, "label": "Any other preparation requests?" } ], "actions": [ { "type": "Action.Submit", "title": "OK", "data": { "FoodChoice": "Chicken" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } }, { "type": "Action.ShowCard", "title": "${hasMenu.hasMenuSection[0].hasMenuSection[1].name}", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Toggle", "id": "Vegetarian", "title": "Please prepare it vegan", "label": "${hasMenu.hasMenuSection[0].hasMenuSection[1].description}", "valueOn": "vegan", "valueOff": "notVegan" }, { "type": "Input.Text", "id": "VegOther", "isMultiline": true, "label": "Any other preparation requests?" } ], "actions": [ { "type": "Action.Submit", "title": "OK", "data": { "FoodChoice": "Vegetarian" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } } ] }
Input Form
Data JSON: { "title": "Tell us about yourself", "body": "We just need a few more details to get you booked for the trip of a lifetime!", "disclaimer": "Don't worry, we'll never share or sell your information.", "properties": [ { "title" : "Your Name", "placeholder" : "Last, First" }, { "title" : "Your email", "placeholder" : "[email protected]" }, { "title" : "Phone Number", "placeholder" : "xxx.xxx.xxxx" } ], "thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg" } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": 2, "items": [ { "type": "TextBlock", "text": "${title}", "weight": "Bolder", "size": "Medium", "wrap": true, "style": "heading" }, { "type": "TextBlock", "text": "${body}", "isSubtle": true, "wrap": true }, { "type": "TextBlock", "text": "${disclaimer}", "isSubtle": true, "wrap": true, "size": "Small" }, { "type": "Container", "$data": "${properties}", "items": [ { "type": "TextBlock", "text": "${title}", "wrap": true }, { "type": "Input.Text", "id": "${if(title == 'Your Name', 'myName', if(title == 'Your email', 'myEmail', 'myTel'))}", "placeholder": "${placeholder}" } ] } ] }, { "type": "Column", "width": 1, "items": [ { "type": "Image", "url": "${thumbnailUrl}", "size": "auto" } ] } ] } ], "actions": [ { "type": "Action.Submit", "title": "Submit" } ] }
Input Form with Labels
Data JSON: { "title": "Tell us about yourself", "body": "We just need a few more details to get you booked for the trip of a lifetime!", "disclaimer": "Don't worry, we'll never share or sell your information.", "properties": [ { "id": "myName", "label": "Your name (Last, First)", "validation": "^[A-Z][a-z]+, [A-Z][a-z]+$", "error": "Please enter your name in the specified format" }, { "id": "myEmail", "label": "Your email", "validation": "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$", "error": "Please enter a valid email address" }, { "id": "myTel", "label": "Phone Number (xxx-xxx-xxxx)", "validation": "^[0-9]{3}-[0-9]{3}-[0-9]{4}$", "error": "Invalid phone number. Use the specified format: 3 numbers, hyphen, 3 numbers, hyphen and 4 numbers" } ], "thumbnailUrl": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg" } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": 2, "items": [ { "type": "TextBlock", "text": "${title}", "weight": "bolder", "size": "medium", "style": "heading" }, { "type": "TextBlock", "text": "${body}", "isSubtle": true, "wrap": true }, { "type": "TextBlock", "text": "${disclaimer}", "isSubtle": true, "wrap": true, "size": "small" }, { "type": "Container", "$data": "${properties}", "items": [ { "type": "Input.Text", "label": "${label}", "id": "${id}", "regex": "${validation}", "errorMessage": "${error}", "isRequired": true } ] } ] }, { "type": "Column", "width": 1, "items": [ { "type": "Image", "url": "${thumbnailUrl}", "size": "auto" } ] } ] } ], "actions": [ { "type": "Action.Submit", "title": "Submit" } ] }
JSON Scripts and Templates: Microsoft.com
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 limitless scenarios.
Expense Report with Labels
Data JSON: { "code": "ER-13052", "message": "success", "created_by_name" : "Matt Hidinger", "created_date" : "2019-07-15T18:33:12+0800", "submitted_date": "2019-04-14T18:33:12+0800", "creater_email" : "[email protected]", "status" : "Pending", "status_url" : "https://adaptivecards.io/content/pending.png", "approver": "Thomas", "purpose" : "Trip to UAE", "approval_date" : "2019-07-15T22:33:12+0800", "approver" : "Thomas", "approver_email" : "[email protected]", "other_submitter" : "David", "other_submitter_email" : "[email protected]", "expenses": [ { "expense_id": "16367000000083065", "approver" : "Thomas", "date": "2017-02-21", "description": "Air Travel Expense", "created_by": "636965431200000000", "created_by_name": "PATRICIA", "employee_number": "E001", "currency_id": "16367000000000097", "currency_code": "USD", "paid_through_account_id": "16367000000036003", "paid_through_account_name": "Employee Reimbursements", "bcy_total": 13900.79, "bcy_subtotal": 13900.79, "total": 300, "total_without_tax": 300, "is_billable": true, "is_reimbursable": true, "reference_number": "DD145", "due_days": "Due in 15 days", "merchant_id": "16367000000074027", "merchant_name": "ABS Solutions", "status": "approved", "created_time": "2019-06-19T18:33:12+0800", "last_modified_time": "2017-02-21T18:42:46+0530", "receipt_name": "receipt1.jpg", "report_id": "16367000000083075", "mileage_type": "non_mileage", "report_name": "Purchase", "is_receipt_only": false, "distance": 0, "per_diem_rate": 0, "per_diem_days": 0, "per_diem_id": "", "per_diem_name": "", "expense_type": "non_mileage", "location": "Washington", "receipt_type": "jpg", "policy_violated": false, "comments_count": 0, "report_status": "submitted", "price_precision": 2, "mileage_rate": 0, "mileage_unit": "km", "receipt_status": "processed", "is_uncategorized": false, "is_expired": false, "gl_code": "LG001", "exchange_rate": 66.943366, "start_reading": "", "end_reading": "", "payment_mode": "Check", "customer_id": "27927000000075081", "customer_name": "ACME Corp.", "custom_fields": [ { "customfield_id": "16367000000277001", "label": "Other Name", "value": "Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM." }, { "customfield_id": "16367000000277001", "label": "Other Name", "value": "Leg 2 on Tue, Jun 19th, 2019 at 7:15 PM." } ], "project_id": "27927000001243001", "project_name": "Coffee Research", "transaction_description": "", "tax_id": "16367000000086001", "tax_name": "Sales Tax", "tax_percentage": 2, "amount": 207.65, "is_inclusive_tax": false, "vehicle_type": "Bike", "vehicle_id": "17456000000078029", "fuel_type": "lpg", "engine_capacity_range": "between_1401cc_and_1600cc", "is_personal": false, "policy_id": "16367000000092011", "policy_name": "LIC", "documents": [ { "file_name": "receipt1.jpg", "file_size_formatted": "71.8 KB", "attachment_order": 1, "document_id": "16367000000083071" } ], "reimbursement_reference": "", "reimbursement_date": "", "reimbursement_paid_through_account_id": "", "reimbursement_paid_through_account_name": "", "reimbursement_currency_id": "", "reimbursement_currency_code": "" }, { "expense_id": "16367000000083065", "date": "2019-06-19", "description": "Auto Mobile Expense", "created_by": "636965431200000000", "created_by_name": "PATRICIA", "employee_number": "E001", "currency_id": "16367000000000097", "currency_code": "USD", "paid_through_account_id": "16367000000036003", "paid_through_account_name": "Employee Reimbursements", "bcy_total": 13900.79, "bcy_subtotal": 13900.79, "total": 100, "total_without_tax": 100, "is_billable": true, "is_reimbursable": true, "reference_number": "DD145", "due_days": "Due in 15 days", "merchant_id": "16367000000074027", "merchant_name": "ABS Solutions", "status": "submitted", "created_time": "2019-06-19T18:33:12+0800", "last_modified_time": "2017-02-21T18:42:46+0530", "receipt_name": "receipt1.jpg", "report_id": "16367000000083075", "mileage_type": "non_mileage", "report_name": "Purchase", "is_receipt_only": false, "distance": 0, "per_diem_rate": 0, "per_diem_days": 0, "per_diem_id": "", "per_diem_name": "", "expense_type": "non_mileage", "location": "Washington", "receipt_type": "jpg", "policy_violated": false, "comments_count": 0, "report_status": "submitted", "price_precision": 2, "mileage_rate": 0, "mileage_unit": "km", "receipt_status": "processed", "is_uncategorized": false, "is_expired": false, "gl_code": "LG001", "exchange_rate": 66.943366, "start_reading": "", "end_reading": "", "payment_mode": "Check", "customer_id": "27927000000075081", "customer_name": "ACME Corp.", "custom_fields": [ { "customfield_id": "16367000000277001", "label": "Other Name", "value": " Contoso Car Rentrals, Tues 6/19 at 7:00 AM" } ], "project_id": "27927000001243001", "project_name": "Coffee Research", "transaction_description": "", "tax_id": "16367000000086001", "tax_name": "Sales Tax", "tax_percentage": 2, "amount": 207.65, "is_inclusive_tax": false, "vehicle_type": "Bike", "vehicle_id": "17456000000078029", "fuel_type": "lpg", "engine_capacity_range": "between_1401cc_and_1600cc", "is_personal": false, "policy_id": "16367000000092011", "policy_name": "LIC", "documents": [ { "file_name": "receipt1.jpg", "file_size_formatted": "71.8 KB", "attachment_order": 1, "document_id": "16367000000083071" } ], "reimbursement_reference": "", "reimbursement_date": "", "reimbursement_paid_through_account_id": "", "reimbursement_paid_through_account_name": "", "reimbursement_currency_id": "", "reimbursement_currency_code": "" }, { "expense_id": "16367000000083065", "date": "2019-06-21", "description": "Excess Baggage Cost", "created_by": "636967159200000000", "created_by_name": "PATRICIA", "employee_number": "E001", "currency_id": "16367000000000097", "currency_code": "USD", "paid_through_account_id": "16367000000036003", "paid_through_account_name": "Employee Reimbursements", "bcy_total": 13900.79, "bcy_subtotal": 13900.79, "total": 50.38, "total_without_tax": 4.3, "is_billable": true, "is_reimbursable": false, "reference_number": "DD145", "due_days": "Due in 15 days", "merchant_id": "16367000000074027", "merchant_name": "ABS Solutions", "status": "submitted", "created_time": "2019-06-21T18:33:12+0800", "last_modified_time": "2017-02-21T18:42:46+0530", "receipt_name": "receipt1.jpg", "report_id": "16367000000083075", "mileage_type": "non_mileage", "report_name": "Purchase", "is_receipt_only": false, "distance": 0, "per_diem_rate": 0, "per_diem_days": 0, "per_diem_id": "", "per_diem_name": "", "expense_type": "non_mileage", "location": "Washington", "receipt_type": "jpg", "policy_violated": false, "comments_count": 0, "report_status": "submitted", "price_precision": 2, "mileage_rate": 0, "mileage_unit": "km", "receipt_status": "processed", "is_uncategorized": false, "is_expired": false, "gl_code": "LG001", "exchange_rate": 66.943366, "start_reading": "", "end_reading": "", "payment_mode": "Check", "customer_id": "27927000000075081", "customer_name": "ACME Corp.", "custom_fields": [ ], "project_id": "27927000001243001", "project_name": "Coffee Research", "transaction_description": "", "tax_id": "16367000000086001", "tax_name": "Sales Tax", "tax_percentage": 2, "amount": 207.65, "is_inclusive_tax": false, "vehicle_type": "Bike", "vehicle_id": "17456000000078029", "fuel_type": "lpg", "engine_capacity_range": "between_1401cc_and_1600cc", "is_personal": false, "policy_id": "16367000000092011", "policy_name": "LIC", "documents": [ { "file_name": "receipt1.jpg", "file_size_formatted": "71.8 KB", "attachment_order": 1, "document_id": "16367000000083071" } ], "reimbursement_reference": "", "reimbursement_date": "", "reimbursement_paid_through_account_id": "", "reimbursement_paid_through_account_name": "", "reimbursement_currency_id": "", "reimbursement_currency_code": "" } ] } Template JSON: { "type": "AdaptiveCard", "body": [ { "type": "Container", "style": "emphasis", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "size": "large", "weight": "bolder", "text": "**EXPENSE APPROVAL**", "style": "heading" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "Image", "url": "${status_url}", "altText": "${status}", "height": "30px" } ], "width": "auto" } ] } ], "bleed": true }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "size": "ExtraLarge", "text": "${purpose}", "wrap": true, "style": "heading" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.OpenUrl", "title": "EXPORT AS PDF", "url": "https://adaptivecards.io" } ] } ], "width": "auto" } ] }, { "type": "TextBlock", "spacing": "small", "size": "small", "weight": "bolder", "text": "[${code}](https://adaptivecards.io)" }, { "type": "FactSet", "spacing": "large", "facts": [ { "title": "Submitted By", "value": "**${created_by_name}** ${creater_email}" }, { "title": "Duration", "value": "${formatTicks(min(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')} - ${formatTicks(max(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')}" }, { "title": "Submitted On", "value": "${formatDateTime(submitted_date, 'yyyy-MM-dd')}" }, { "title": "Reimbursable Amount", "value": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}" }, { "title": "Awaiting approval from", "value": "**${approver}** ${approver_email}" }, { "title": "Submitted to", "value": "**${other_submitter}** ${other_submitter_email}" } ] } ] }, { "type": "Container", "spacing": "large", "style": "emphasis", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "DATE" } ], "width": "auto" }, { "type": "Column", "spacing": "large", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "CATEGORY" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "AMOUNT" } ], "width": "auto" } ] } ], "bleed": true }, { "$data": "${expenses}", "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "${formatDateTime(created_time, 'MM-dd')}", "wrap": true } ], "width": "auto" }, { "type": "Column", "spacing": "medium", "items": [ { "type": "TextBlock", "text": "${description}", "wrap": true } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "$${formatNumber(total, 2)}", "wrap": true } ], "width": "auto" }, { "type": "Column", "spacing": "small", "selectAction": { "type": "Action.ToggleVisibility", "title": "expand", "targetElements": [ "cardContent${$index}", "chevronDown${$index}", "chevronUp${$index}" ] }, "verticalContentAlignment": "center", "items": [ { "type": "Image", "id": "chevronDown${$index}", "url": "https://adaptivecards.io/content/down.png", "width": "20px", "altText": "Details collapsed" }, { "type": "Image", "id": "chevronUp${$index}", "url": "https://adaptivecards.io/content/up.png", "width": "20px", "altText": "Details expanded", "isVisible": false } ], "width": "auto" } ] }, { "type": "Container", "id": "cardContent${$index}", "isVisible": false, "items": [ { "type": "Container", "items": [ { "$data": "${custom_fields}", "type": "TextBlock", "text": "* ${value}", "isSubtle": true, "wrap": true }, { "type": "Container", "items": [ { "type": "Input.Text", "id": "comment${$index}", "label": "Add your comment here" } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 1 } } ] } ], "width": "auto" } ] } ] } ] } ] }, { "type": "ColumnSet", "spacing": "large", "separator": true, "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "right", "text": "Total Expense Amount \t", "wrap": true }, { "type": "TextBlock", "horizontalAlignment": "right", "text": "Non-reimbursable Amount", "wrap": true }, { "type": "TextBlock", "horizontalAlignment": "right", "text": "Advance Amount", "wrap": true } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "$${formatNumber(sum(select(expenses, x, x.total)), 2)}" }, { "type": "TextBlock", "text": "(-) $${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, 0, x.total))), 2)} \t" }, { "type": "TextBlock", "text": "(-) 0.00 \t" } ], "width": "auto" }, { "type": "Column", "width": "auto" } ] }, { "type": "Container", "style": "emphasis", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "right", "text": "Amount to be Reimbursed", "wrap": true } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}" } ], "width": "auto" }, { "type": "Column", "width": "auto" } ] } ], "bleed": true }, { "type": "ColumnSet", "columns": [ { "type": "Column", "selectAction": { "type": "Action.ToggleVisibility", "targetElements": [ "cardContent4", "showHistory", "hideHistory" ] }, "verticalContentAlignment": "Center", "items": [ { "type": "TextBlock", "id": "showHistory", "horizontalAlignment": "right", "color": "accent", "text": "Show history", "wrap": true }, { "type": "TextBlock", "id": "hideHistory", "horizontalAlignment": "right", "color": "accent", "text": "Hide history", "wrap": true, "isVisible": false } ], "width": 1 } ] }, { "type": "Container", "id": "cardContent4", "isVisible": false, "items": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "* Expense submitted by **${created_by_name}** on {{DATE(${formatDateTime(created_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}", "isSubtle": true, "wrap": true }, { "type": "TextBlock", "text": "* Expense ${expenses[0].status} by **${expenses[0].approver}** on {{DATE(${formatDateTime(approval_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}", "isSubtle": true, "wrap": true } ] } ] }, { "type": "Container", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Approve", "style": "positive", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "approve" } }, { "type": "Action.ShowCard", "title": "Reject", "style": "destructive", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Text", "id": "RejectCommentID", "label": "Please specify an appropriate reason for rejection", "isMultiline": true, "isRequired": true, "errorMessage": "A reason for rejection is necessary" } ], "actions": [ { "type": "Action.Submit", "title": "Send", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "reject" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } } ] } ] } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2", "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly." }
Show Card Wizard
Data JSON: { "formTitle": "Please provide the following information:", "nameCard": { "title": "Name", "idPrefix": "name", "fields": [ { "label": "First Name", "id": "FirstName", "required": true }, { "label": "Middle Name", "id": "MiddleName", "required": false }, { "label": "Last Name", "id": "LastName", "required": true } ] }, "addressCard": { "title": "Address", "idPrefix": "address", "textInputFields": [ { "label": "Address line 1", "id": "addressLine1", "required": true }, { "label": "Address line 2", "id": "addressLine2", "required": false } ], "columnFields": [ { "label": "City", "id": "city", "required": false }, { "label": "State", "id": "state", "required": false }, { "label": "Zip Code", "id": "zip", "required": true } ] }, "contactCard": { "title": "Phone/Email", "idPrefix": "contact", "fields": [ { "label": "Mobile number", "id": "mobileNumber", "required": false }, { "label": "Home number", "id": "homeNumber", "required": false }, { "label": "Email address", "id": "emailAddress", "required": true } ] } } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "${formTitle}", "wrap": true } ], "actions": [ { "type": "Action.ShowCard", "title": "${nameCard.title}", "card": { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "body": [ { "type": "Container", "id": "${nameCard.idPrefix}Properties", "items": [ { "$data": "${nameCard.fields}", "type": "Input.Text", "label": "${label}", "id": "${id}", "isRequired": "${required}", "errorMessage": "'${label}' is required" } ] } ], "actions": [ { "type": "Action.ShowCard", "title": "${addressCard.title}", "card": { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "body": [ { "type": "Container", "id": "${addressCard.idPrefix}Properties", "items": [ { "$data": "${addressCard.textInputFields}", "type": "Input.Text", "label": "${label}", "id": "${id}", "isRequired": "${required}", "errorMessage": "'${label} is required" }, { "type": "ColumnSet", "columns": [ { "$data": "${addressCard.columnFields}", "type": "Column", "width": "stretch", "items": [ { "type": "Input.Text", "label": "${label}", "id": "${id}", "isRequired": "${required}", "errorMessage": "'${label}' is required" } ] } ] } ] } ], "actions": [ { "type": "Action.ShowCard", "title": "${contactCard.title}", "card": { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "body": [ { "$data": "${contactCard.fields}", "type": "Input.Text", "label": "${label}", "id": "${id}", "isRequired": "${required}", "errorMessage": "'${label}' is required" } ], "actions": [ { "type": "Action.Submit", "title": "Submit" } ] } } ] } } ] } } ] }
JSON Scripts and Templates: Microsoft.com
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.
Product Video
Data JSON: { "odata.metadata": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_api/$metadata#SP.ApiData.VideoItems/@Element", "odata.type": "SP.Publishing.VideoItem", "odata.id": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_api/VideoService/Channels(guid'1833f204-bb2a-4e93-b8dd-b236daeccae8')/Videos(guid'6b518eae-b0d9-4951-b6da-1e5f58a43daa')", "odata.editLink": "VideoService/Channels(guid'1833f204-bb2a-4e93-b8dd-b236daeccae8')/Videos(guid'6b518eae-b0d9-4951-b6da-1e5f58a43daa')", "ChannelID": "1833f204-bb2a-4e93-b8dd-b236daeccae8", "CreatedDate": "2015-07-08T05:05:06Z", "Description": "", "DisplayFormUrl": "https://a830edad9050849nda1.sharepoint.com/portals/Red-Channel/pVid/Forms/DispForm.aspx?ID=5", "FileName": "Divers - Future of Productivity.mp4", "OwnerName": "TEST_TEST_SPOProvHeartbeat_E3_15_4911090814_22,#i:0#.f|membership|[email protected],#[email protected],#[email protected],#TEST_TEST_SPOProvHeartbeat_E3_15_4911090814_22,#https://a830edad9050849nda1-my.sharepoint.com:443/User%20Photos/Profile%20Pictures/admin_a830edad9050849nda1_onmicrosoft_com_MThumb.jpg,#,#", "ServerRelativeUrl": "/portals/Red-Channel/pVid/Divers - Future of Productivity.mp4", "ThumbnailUrl": "https://adaptivecards.io/content/poster-video.png", "Title": "Divers - Future of Productivity", "ID": "6b518eae-b0d9-4951-b6da-1e5f58a43daa", "Url": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4", "VideoDurationInSeconds": 388, "VideoProcessingStatus": 2, "ViewCount": -1, "YammerObjectUrl": "https://a830edad9050849nda1.sharepoint.com/portals/hub/_layouts/15/videoplayer.aspx?v=https%3A%2F%2Fa830edad9050849nda1%2Esharepoint%2Ecom%2Fportals%2FRed%2DChannel%2FpVid%2FDivers%20%2D%20Future%20of%20Productivity%2Emp4" } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.1", "fallbackText": "This card requires Media to be viewed. Ask your platform to update to Adaptive Cards v1.1 for this and more!", "body": [ { "type": "Media", "poster": "${ThumbnailUrl}", "sources": [ { "mimeType": "video/mp4", "url": "${Url}" } ] } ], "actions": [ { "type": "Action.OpenUrl", "title": "Learn more", "url": "https://adaptivecards.io" } ] }
Expense Report
Data JSON: { "code": "ER-13052", "message": "success", "created_by_name" : "Matt Hidinger", "created_date" : "2019-07-15T18:33:12+0800", "submitted_date": "2019-04-14T18:33:12+0800", "creater_email" : "[email protected]", "status" : "Pending", "status_url" : "https://adaptivecards.io/content/pending.png", "approver": "Thomas", "purpose" : "Trip to UAE", "approval_date" : "2019-07-15T22:33:12+0800", "approver" : "Thomas", "approver_email" : "[email protected]", "other_submitter" : "David", "other_submitter_email" : "[email protected]", "expenses": [ { "expense_id": "16367000000083065", "approver" : "Thomas", "date": "2017-02-21", "description": "Air Travel Expense", "created_by": "636965431200000000", "created_by_name": "PATRICIA", "employee_number": "E001", "currency_id": "16367000000000097", "currency_code": "USD", "paid_through_account_id": "16367000000036003", "paid_through_account_name": "Employee Reimbursements", "bcy_total": 13900.79, "bcy_subtotal": 13900.79, "total": 300, "total_without_tax": 300, "is_billable": true, "is_reimbursable": true, "reference_number": "DD145", "due_days": "Due in 15 days", "merchant_id": "16367000000074027", "merchant_name": "ABS Solutions", "status": "approved", "created_time": "2019-06-19T18:33:12+0800", "last_modified_time": "2017-02-21T18:42:46+0530", "receipt_name": "receipt1.jpg", "report_id": "16367000000083075", "mileage_type": "non_mileage", "report_name": "Purchase", "is_receipt_only": false, "distance": 0, "per_diem_rate": 0, "per_diem_days": 0, "per_diem_id": "", "per_diem_name": "", "expense_type": "non_mileage", "location": "Washington", "receipt_type": "jpg", "policy_violated": false, "comments_count": 0, "report_status": "submitted", "price_precision": 2, "mileage_rate": 0, "mileage_unit": "km", "receipt_status": "processed", "is_uncategorized": false, "is_expired": false, "gl_code": "LG001", "exchange_rate": 66.943366, "start_reading": "", "end_reading": "", "payment_mode": "Check", "customer_id": "27927000000075081", "customer_name": "ACME Corp.", "custom_fields": [ { "customfield_id": "16367000000277001", "label": "Other Name", "value": "Leg 1 on Tue, Jun 19th, 2019 at 6:00 AM." }, { "customfield_id": "16367000000277001", "label": "Other Name", "value": "Leg 2 on Tue, Jun 19th, 2019 at 7:15 PM." } ], "project_id": "27927000001243001", "project_name": "Coffee Research", "transaction_description": "", "tax_id": "16367000000086001", "tax_name": "Sales Tax", "tax_percentage": 2, "amount": 207.65, "is_inclusive_tax": false, "vehicle_type": "Bike", "vehicle_id": "17456000000078029", "fuel_type": "lpg", "engine_capacity_range": "between_1401cc_and_1600cc", "is_personal": false, "policy_id": "16367000000092011", "policy_name": "LIC", "documents": [ { "file_name": "receipt1.jpg", "file_size_formatted": "71.8 KB", "attachment_order": 1, "document_id": "16367000000083071" } ], "reimbursement_reference": "", "reimbursement_date": "", "reimbursement_paid_through_account_id": "", "reimbursement_paid_through_account_name": "", "reimbursement_currency_id": "", "reimbursement_currency_code": "" }, { "expense_id": "16367000000083065", "date": "2019-06-19", "description": "Auto Mobile Expense", "created_by": "636965431200000000", "created_by_name": "PATRICIA", "employee_number": "E001", "currency_id": "16367000000000097", "currency_code": "USD", "paid_through_account_id": "16367000000036003", "paid_through_account_name": "Employee Reimbursements", "bcy_total": 13900.79, "bcy_subtotal": 13900.79, "total": 100, "total_without_tax": 100, "is_billable": true, "is_reimbursable": true, "reference_number": "DD145", "due_days": "Due in 15 days", "merchant_id": "16367000000074027", "merchant_name": "ABS Solutions", "status": "submitted", "created_time": "2019-06-19T18:33:12+0800", "last_modified_time": "2017-02-21T18:42:46+0530", "receipt_name": "receipt1.jpg", "report_id": "16367000000083075", "mileage_type": "non_mileage", "report_name": "Purchase", "is_receipt_only": false, "distance": 0, "per_diem_rate": 0, "per_diem_days": 0, "per_diem_id": "", "per_diem_name": "", "expense_type": "non_mileage", "location": "Washington", "receipt_type": "jpg", "policy_violated": false, "comments_count": 0, "report_status": "submitted", "price_precision": 2, "mileage_rate": 0, "mileage_unit": "km", "receipt_status": "processed", "is_uncategorized": false, "is_expired": false, "gl_code": "LG001", "exchange_rate": 66.943366, "start_reading": "", "end_reading": "", "payment_mode": "Check", "customer_id": "27927000000075081", "customer_name": "ACME Corp.", "custom_fields": [ { "customfield_id": "16367000000277001", "label": "Other Name", "value": " Contoso Car Rentrals, Tues 6/19 at 7:00 AM" } ], "project_id": "27927000001243001", "project_name": "Coffee Research", "transaction_description": "", "tax_id": "16367000000086001", "tax_name": "Sales Tax", "tax_percentage": 2, "amount": 207.65, "is_inclusive_tax": false, "vehicle_type": "Bike", "vehicle_id": "17456000000078029", "fuel_type": "lpg", "engine_capacity_range": "between_1401cc_and_1600cc", "is_personal": false, "policy_id": "16367000000092011", "policy_name": "LIC", "documents": [ { "file_name": "receipt1.jpg", "file_size_formatted": "71.8 KB", "attachment_order": 1, "document_id": "16367000000083071" } ], "reimbursement_reference": "", "reimbursement_date": "", "reimbursement_paid_through_account_id": "", "reimbursement_paid_through_account_name": "", "reimbursement_currency_id": "", "reimbursement_currency_code": "" }, { "expense_id": "16367000000083065", "date": "2019-06-21", "description": "Excess Baggage Cost", "created_by": "636967159200000000", "created_by_name": "PATRICIA", "employee_number": "E001", "currency_id": "16367000000000097", "currency_code": "USD", "paid_through_account_id": "16367000000036003", "paid_through_account_name": "Employee Reimbursements", "bcy_total": 13900.79, "bcy_subtotal": 13900.79, "total": 50.38, "total_without_tax": 4.3, "is_billable": true, "is_reimbursable": false, "reference_number": "DD145", "due_days": "Due in 15 days", "merchant_id": "16367000000074027", "merchant_name": "ABS Solutions", "status": "submitted", "created_time": "2019-06-21T18:33:12+0800", "last_modified_time": "2017-02-21T18:42:46+0530", "receipt_name": "receipt1.jpg", "report_id": "16367000000083075", "mileage_type": "non_mileage", "report_name": "Purchase", "is_receipt_only": false, "distance": 0, "per_diem_rate": 0, "per_diem_days": 0, "per_diem_id": "", "per_diem_name": "", "expense_type": "non_mileage", "location": "Washington", "receipt_type": "jpg", "policy_violated": false, "comments_count": 0, "report_status": "submitted", "price_precision": 2, "mileage_rate": 0, "mileage_unit": "km", "receipt_status": "processed", "is_uncategorized": false, "is_expired": false, "gl_code": "LG001", "exchange_rate": 66.943366, "start_reading": "", "end_reading": "", "payment_mode": "Check", "customer_id": "27927000000075081", "customer_name": "ACME Corp.", "custom_fields": [ ], "project_id": "27927000001243001", "project_name": "Coffee Research", "transaction_description": "", "tax_id": "16367000000086001", "tax_name": "Sales Tax", "tax_percentage": 2, "amount": 207.65, "is_inclusive_tax": false, "vehicle_type": "Bike", "vehicle_id": "17456000000078029", "fuel_type": "lpg", "engine_capacity_range": "between_1401cc_and_1600cc", "is_personal": false, "policy_id": "16367000000092011", "policy_name": "LIC", "documents": [ { "file_name": "receipt1.jpg", "file_size_formatted": "71.8 KB", "attachment_order": 1, "document_id": "16367000000083071" } ], "reimbursement_reference": "", "reimbursement_date": "", "reimbursement_paid_through_account_id": "", "reimbursement_paid_through_account_name": "", "reimbursement_currency_id": "", "reimbursement_currency_code": "" } ] } Template JSON: { "type": "AdaptiveCard", "body": [ { "type": "Container", "style": "emphasis", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "size": "Large", "weight": "Bolder", "text": "**EXPENSE APPROVAL**", "wrap": true, "style": "heading" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "Image", "url": "${status_url}", "altText": "${status}", "height": "30px" } ], "width": "auto" } ] } ], "bleed": true }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "size": "ExtraLarge", "text": "${purpose}", "wrap": true, "style": "heading" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.OpenUrl", "title": "EXPORT AS PDF", "url": "https://adaptivecards.io" } ] } ], "width": "auto" } ] }, { "type": "TextBlock", "spacing": "Small", "size": "Small", "weight": "Bolder", "text": "[${code}](https://adaptivecards.io)", "wrap": true }, { "type": "FactSet", "spacing": "Large", "facts": [ { "title": "Submitted By", "value": "**${created_by_name}** ${creater_email}" }, { "title": "Duration", "value": "${formatTicks(min(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')} - ${formatTicks(max(select(expenses, x, int(x.created_by))), 'yyyy-MM-dd')}" }, { "title": "Submitted On", "value": "${formatDateTime(submitted_date, 'yyyy-MM-dd')}" }, { "title": "Reimbursable Amount", "value": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}" }, { "title": "Awaiting approval from", "value": "**${approver}** ${approver_email}" }, { "title": "Submitted to", "value": "**${other_submitter}** ${other_submitter_email}" } ] } ] }, { "type": "Container", "spacing": "Large", "style": "emphasis", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "DATE", "wrap": true } ], "width": "auto" }, { "type": "Column", "spacing": "Large", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "CATEGORY", "wrap": true } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "AMOUNT", "wrap": true } ], "width": "auto" } ] } ], "bleed": true }, { "$data": "${expenses}", "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "${formatDateTime(created_time, 'MM-dd')}", "wrap": true } ], "width": "auto" }, { "type": "Column", "spacing": "Medium", "items": [ { "type": "TextBlock", "text": "${description}", "wrap": true } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "$${formatNumber(total, 2)}", "wrap": true } ], "width": "auto" }, { "type": "Column", "spacing": "Small", "selectAction": { "type": "Action.ToggleVisibility", "targetElements": [ "cardContent${$index}", "chevronDown${$index}", "chevronUp${$index}" ] }, "verticalContentAlignment": "Center", "items": [ { "type": "Image", "id": "chevronDown${$index}", "url": "https://adaptivecards.io/content/down.png", "width": "20px", "altText": "${description} $${total} collapsed" }, { "type": "Image", "id": "chevronUp${$index}", "url": "https://adaptivecards.io/content/up.png", "width": "20px", "altText": "${description} $${total} expanded", "isVisible": false } ], "width": "auto" } ] }, { "type": "Container", "id": "cardContent${$index}", "isVisible": false, "items": [ { "type": "Container", "items": [ { "$data": "${custom_fields}", "type": "TextBlock", "text": "* ${value}", "isSubtle": true, "wrap": true }, { "type": "Container", "items": [ { "type": "Input.Text", "id": "comment${$index}", "placeholder": "Add your comment here." } ] } ] }, { "type": "Container", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Send", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "comment", "lineItem": 1 } } ] } ], "width": "auto" } ] } ] } ] } ] }, { "type": "ColumnSet", "spacing": "Large", "separator": true, "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "Right", "text": "Total Expense Amount \t", "wrap": true }, { "type": "TextBlock", "horizontalAlignment": "Right", "text": "Non-reimbursable Amount", "wrap": true }, { "type": "TextBlock", "horizontalAlignment": "Right", "text": "Advance Amount", "wrap": true } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "$${formatNumber(sum(select(expenses, x, x.total)), 2)}", "wrap": true }, { "type": "TextBlock", "text": "(-) $${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, 0, x.total))), 2)} \t", "wrap": true }, { "type": "TextBlock", "text": "(-) 0.00 \t", "wrap": true } ], "width": "auto" }, { "type": "Column", "width": "auto" } ] }, { "type": "Container", "style": "emphasis", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "horizontalAlignment": "Right", "text": "Amount to be Reimbursed", "wrap": true } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "$${formatNumber(sum(select(expenses, x, if(x.is_reimbursable, x.total, 0))), 2)}", "wrap": true } ], "width": "auto" }, { "type": "Column", "width": "auto" } ] } ], "bleed": true }, { "type": "ColumnSet", "columns": [ { "type": "Column", "selectAction": { "type": "Action.ToggleVisibility", "targetElements": [ "cardContent4", "showHistory", "hideHistory" ] }, "verticalContentAlignment": "Center", "items": [ { "type": "TextBlock", "id": "showHistory", "horizontalAlignment": "Right", "color": "Accent", "text": "Show history", "wrap": true }, { "type": "TextBlock", "id": "hideHistory", "horizontalAlignment": "Right", "color": "Accent", "text": "Hide history", "wrap": true, "isVisible": false } ], "width": 1 } ] }, { "type": "Container", "id": "cardContent4", "isVisible": false, "items": [ { "type": "Container", "items": [ { "type": "TextBlock", "text": "* Expense submitted by **${created_by_name}** on {{DATE(${formatDateTime(created_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}", "isSubtle": true, "wrap": true }, { "type": "TextBlock", "text": "* Expense ${expenses[0].status} by **${expenses[0].approver}** on {{DATE(${formatDateTime(approval_date, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}", "isSubtle": true, "wrap": true } ] } ] }, { "type": "Container", "items": [ { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Approve", "style": "positive", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "approve" } }, { "type": "Action.ShowCard", "title": "Reject", "style": "destructive", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Text", "id": "RejectCommentID", "placeholder": "Please specify an appropriate reason for rejection.", "isMultiline": true } ], "actions": [ { "type": "Action.Submit", "title": "Send", "data": { "id": "_qkQW8dJlUeLVi7ZMEzYVw", "action": "reject" } } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } } ] } ] } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.2", "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly." }
JSON Scripts and Templates: Microsoft.com
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 1 of this series includes the templates for Activity Update Sample, Activity Update with Labels, Calendar Reminder, and Calendar Reminder with Labels. This installment of this series will include templates for Image Gallery, Weather Compact, and Weather Large.
Image Gallery
Data JSON: { "_type": "Images", "instrumentation": { "pingUrlBase": "https://www.bingapis.com/api/ping?IG=08FFB177A90A4DF585A703215CEC19AA&CID=070910FF0C0362112C11188E0DD06323&ID=", "pageLoadPingUrl": "https://www.bingapis.com/api/ping/pageload" }, "readLink": "https://www.bing.com/api/V7/images/search?q=cats", "webSearchUrl": "https://www.bing.com/images/search?q=cats&FORM=OIIARP", "webSearchUrlPingSuffix": "DevEx,5042.1", "totalEstimatedMatches": 1000, "value": [ { "name": "Proxecto Gato: cats wallpapers by bighdwallpapers", "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=DF010D14AC241C0AC39B5EAFD85F8B117825C79B&simid=608001210598098509", "webSearchUrlPingSuffix": "DevEx,5043.1", "thumbnailUrl": "https://tse2.mm.bing.net/th?id=OIP.M42428010d527fc1225757ada9d9a8bccH0&pid=Api", "datePublished": "2012-08-23T12:00:00", "contentUrl": "https://4.bp.blogspot.com/-XkviAtJ1s6Q/T3YFb2RUhDI/AAAAAAAAAVQ/EHomLZlFMKo/s1600/small+cat.jpg", "hostPageUrl": "https://proxectogato.blogspot.com/2012/08/cats-wallpapers-by-bighdwallpapers.html", "hostPageUrlPingSuffix": "DevEx,5006.1", "contentSize": "241661 B", "encodingFormat": "jpeg", "hostPageDisplayUrl": "proxectogato.blogspot.com/2012/08/cats-wallpapers-by...", "width": 1600, "height": 1200, "thumbnail": { "width": 480, "height": 360 }, "imageInsightsToken": "ccid_QkKAENUn*mid_DF010D14AC241C0AC39B5EAFD85F8B117825C79B*simid_608001210598098509", "insightsSourcesSummary": { "shoppingSourcesCount": 1, "recipeSourcesCount": 0 }, "imageId": "DF010D14AC241C0AC39B5EAFD85F8B117825C79B", "accentColor": "5A4E46" }, { "name": "Kitten - Cats Wallpaper (18565791) - Fanpop", "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=6119DF9238F0C40EC3C326F41919BAFBF88F5CA4&simid=608041523156487908", "webSearchUrlPingSuffix": "DevEx,5044.1", "thumbnailUrl": "https://tse3.mm.bing.net/th?id=OIP.M7dfb8973bca22c4939102df3ae3de66do0&pid=Api", "datePublished": "2012-06-29T23:55:00", "contentUrl": "https://images4.fanpop.com/image/photos/18500000/Kitten-cats-18565791-1024-768.jpg", "hostPageUrl": "https://www.fanpop.com/clubs/cats/images/18565791/title/kitten-wallpaper", "hostPageUrlPingSuffix": "DevEx,5011.1", "contentSize": "207480 B", "encodingFormat": "jpeg", "hostPageDisplayUrl": "www.fanpop.com/clubs/cats/images/18565791/title/kitten-wallpaper", "width": 1024, "height": 768, "thumbnail": { "width": 300, "height": 225 }, "imageInsightsToken": "ccid_ffuJc7yi*mid_6119DF9238F0C40EC3C326F41919BAFBF88F5CA4*simid_608041523156487908", "insightsSourcesSummary": { "shoppingSourcesCount": 1, "recipeSourcesCount": 0 }, "imageId": "6119DF9238F0C40EC3C326F41919BAFBF88F5CA4", "accentColor": "7D694E" }, { "name": "Wonderous Cats Admiration of the docile feline", "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=cats&id=EDF89351A0ECA99617C859D06F71450FCB5EF2E3&simid=608032623984250213", "webSearchUrlPingSuffix": "DevEx,5045.1", "thumbnailUrl": "https://tse1.mm.bing.net/th?id=OIP.M38d3aa9aa6cc8c444492212efdb3a91dH0&pid=Api", "datePublished": "2014-04-27T22:53:00", "contentUrl": "https://www.andrew.cmu.edu/user/cfperron/cats/images/cat8.jpg", "hostPageUrl": "https://www.andrew.cmu.edu/user/cfperron/cats/", "hostPageUrlPingSuffix": "DevEx,5016.1", "contentSize": "484631 B", "encodingFormat": "jpeg", "hostPageDisplayUrl": "www.andrew.cmu.edu/user/cfperron/cats", "width": 2015, "height": 1511, "thumbnail": { "width": 480, "height": 359 }, "imageInsightsToken": "ccid_ONOqmqbM*mid_EDF89351A0ECA99617C859D06F71450FCB5EF2E3*simid_608032623984250213", "insightsSourcesSummary": { "shoppingSourcesCount": 1, "recipeSourcesCount": 0 }, "imageId": "EDF89351A0ECA99617C859D06F71450FCB5EF2E3", "accentColor": "5F4937" } ], "queryExpansions": [ { "text": "Grumpy Cat", "displayText": "Grumpy", "webSearchUrl": "https://www.bing.com/images/search?q=Grumpy+Cat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Grumpy%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRPATC", "webSearchUrlPingSuffix": "DevEx,5049.1", "searchLink": "https://www.bing.com/api/V7/images/search?q=Grumpy+Cat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Grumpy%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d", "thumbnail": { "thumbnailUrl": "https://tse3.mm.bing.net/th?q=Grumpy+Cat&pid=Api&mkt=en-US&adlt=moderate&t=1" } }, { "text": "Funny Cats", "displayText": "Funny", "webSearchUrl": "https://www.bing.com/images/search?q=Funny+Cats&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Funny%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRPATC", "webSearchUrlPingSuffix": "DevEx,5051.1", "searchLink": "https://www.bing.com/api/V7/images/search?q=Funny+Cats&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Funny%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d", "thumbnail": { "thumbnailUrl": "https://tse2.mm.bing.net/th?q=Funny+Cats&pid=Api&mkt=en-US&adlt=moderate&t=1" } } ], "nextOffsetAddCount": 0, "pivotSuggestions": [ { "pivot": "cats", "suggestions": [ { "text": "Felidae", "displayText": "Felidae", "webSearchUrl": "https://www.bing.com/images/search?q=Felidae&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Felidae%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRQBPS", "webSearchUrlPingSuffix": "DevEx,5134.1", "searchLink": "https://www.bing.com/api/V7/images/search?q=Felidae&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22Felidae%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d", "thumbnail": { "thumbnailUrl": "https://tse3.mm.bing.net/th?q=Felidae&pid=Api&mkt=en-US&adlt=moderate&t=1" } }, { "text": "African Wildcat", "displayText": "African Wildcat", "webSearchUrl": "https://www.bing.com/images/search?q=African+Wildcat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22African+Wildcat%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d&FORM=IRQBPS", "webSearchUrlPingSuffix": "DevEx,5136.1", "searchLink": "https://www.bing.com/api/V7/images/search?q=African+Wildcat&tq=%7b%22pq%22%3a%22cats%22%2c%22qs%22%3a%5b%7b%22cv%22%3a%22cats%22%2c%22pv%22%3a%22cats%22%2c%22hps%22%3atrue%2c%22iqp%22%3afalse%7d%2c%7b%22cv%22%3a%22African+Wildcat%22%2c%22pv%22%3a%22%22%2c%22hps%22%3afalse%2c%22iqp%22%3atrue%7d%5d%7d", "thumbnail": { "thumbnailUrl": "https://tse3.mm.bing.net/th?q=African+Wildcat&pid=Api&mkt=en-US&adlt=moderate&t=1" } } ] } ], "displayShoppingSourcesBadges": false, "displayRecipeSourcesBadges": true } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Here are some cool photos", "size": "Large", "wrap": true }, { "type": "TextBlock", "text": "Sorry some of them are repeats", "size": "Medium", "weight": "Lighter", "wrap": true }, { "type": "ImageSet", "imageSize": "medium", "images": [ { "type": "Image", "url": "${value[0].contentUrl}" }, { "type": "Image", "url": "${value[1].contentUrl}" }, { "type": "Image", "url": "${queryExpansions[0].thumbnail.thumbnailUrl}" }, { "type": "Image", "url": "${queryExpansions[1].thumbnail.thumbnailUrl}" }, { "type": "Image", "url": "${pivotSuggestions[0].suggestions[0].thumbnail.thumbnailUrl}" }, { "type": "Image", "url": "${pivotSuggestions[0].suggestions[1].thumbnail.thumbnailUrl}" }, { "type": "Image", "url": "${value[2].thumbnailUrl}" } ] } ] }
Weather Compact
Data JSON { "coord":{ "lon":-122.12, "lat":47.67 }, "weather":[ { "id":802, "main":"Clouds", "description":"scattered clouds", "icon":"03n" } ], "base":"stations", "main": { "temp":281.05, "pressure":1022, "humidity":81, "temp_min":278.15, "temp_max":283.15 }, "visibility":16093, "wind": { "speed":4.1, "deg":360 }, "rain":{}, "clouds": { "all":40 }, "dt":1572920478, "sys":{ "type":1, "id":5798, "country":"US", "sunrise":1572879421, "sunset":1572914822 }, "timezone":-28800, "id":5808079, "name":"Redmond", "cod":200 } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "speak": "The forecast for Seattle ${formatEpoch(dt, 'MMMM d')} is mostly clear with a High of ${formatNumber((main.temp_max - 273) * 9 / 5 + 32, 0)} degrees and Low of ${formatNumber((main.temp_min - 273) * 9 / 5 + 32, 0)} degrees", "body": [ { "type": "TextBlock", "text": "${name}, WA", "size": "Large", "isSubtle": true, "wrap": true }, { "type": "TextBlock", "text": "{{DATE(${formatEpoch(dt, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}} {{TIME(${formatEpoch(dt, 'yyyy-MM-ddTHH:mm:ssZ')})}}", "spacing": "None", "wrap": true }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png", "size": "Small" } ] }, { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "${formatNumber((main.temp - 273) * 9 / 5 + 32, 0)}", "size": "ExtraLarge", "spacing": "None", "wrap": true } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "°F", "weight": "Bolder", "spacing": "Small", "wrap": true } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Hi ${formatNumber((main.temp_max - 273) * 9 / 5 + 32, 0)}", "horizontalAlignment": "Left", "wrap": true }, { "type": "TextBlock", "text": "Lo ${formatNumber((main.temp_min - 273) * 9 / 5 + 32, 0)}", "horizontalAlignment": "Left", "spacing": "None", "wrap": true } ] } ] } ] }
Weather Large
Data JSON: { "data": [ { "moonrise_ts": 1572993161, "wind_cdir": "SSE", "rh": 90, "pres": 1012.95, "high_temp": 8.6, "sunset_ts": 1573001147, "ozone": 252.181, "moon_phase": 0.768526, "wind_gust_spd": 4.4, "snow_depth": 0, "clouds": 70, "ts": 1572940860, "sunrise_ts": 1572966051, "app_min_temp": 3.7, "wind_spd": 1.33298, "pop": 25, "wind_cdir_full": "south-southeast", "slp": 1021.94, "valid_date": "2019-11-05", "app_max_temp": 10.2, "vis": 22.5692, "dewpt": 6.8, "snow": 0, "uv": 1.74992, "weather": { "icon": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png", "code": 803, "description": "Broken clouds" }, "wind_dir": 162, "max_dhi": null, "clouds_hi": 0, "precip": 0.3125, "low_temp": 7.7, "max_temp": 10.4, "moonset_ts": 1572946958, "datetime": "2019-11-05", "temp": 8.5, "min_temp": 5.7, "clouds_mid": 0, "clouds_low": 70 }, { "moonrise_ts": 1573081007, "wind_cdir": "NNE", "rh": 88, "pres": 1015.48, "high_temp": 12.3, "sunset_ts": 1573087463, "ozone": 263.048, "moon_phase": 0.845631, "wind_gust_spd": 5, "snow_depth": 0, "clouds": 60, "ts": 1573027260, "sunrise_ts": 1573052542, "app_min_temp": 3.3, "wind_spd": 1.50821, "pop": 35, "wind_cdir_full": "north-northeast", "slp": 1024.5, "valid_date": "2019-11-06", "app_max_temp": 12.3, "vis": 23.125, "dewpt": 6.6, "snow": 0, "uv": 2.93193, "weather": { "icon": "https://messagecardplayground.azurewebsites.net/assets/Drizzle-Square.png", "code": 803, "description": "Broken clouds" }, "wind_dir": 18, "max_dhi": null, "clouds_hi": 17, "precip": 0.5, "low_temp": 5, "max_temp": 12.3, "moonset_ts": 1573037127, "datetime": "2019-11-06", "temp": 8.5, "min_temp": 6.6, "clouds_mid": 9, "clouds_low": 46 }, { "moonrise_ts": 1573168702, "wind_cdir": "SE", "rh": 71, "pres": 1006.39, "high_temp": 13.1, "sunset_ts": 1573173781, "ozone": 257.617, "moon_phase": 0.909923, "wind_gust_spd": 1.80495, "snow_depth": 0, "clouds": 94, "ts": 1573113660, "sunrise_ts": 1573139032, "app_min_temp": 0.5, "wind_spd": 0.77653, "pop": 0, "wind_cdir_full": "southeast", "slp": 1022.86, "valid_date": "2019-11-07", "app_max_temp": 13.1, "vis": 24.135, "dewpt": 2.6, "snow": 0, "uv": 1.10983, "weather": { "icon": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png", "code": 804, "description": "Overcast clouds" }, "wind_dir": 136, "max_dhi": null, "clouds_hi": 94, "precip": 0, "low_temp": 4.4, "max_temp": 13.4, "moonset_ts": 1573127315, "datetime": "2019-11-07", "temp": 7.7, "min_temp": 4.2, "clouds_mid": 0, "clouds_low": 0 }, { "moonrise_ts": 1573256318, "wind_cdir": "SSE", "rh": 71, "pres": 1006.02, "high_temp": 15.8, "sunset_ts": 1573260100, "ozone": 258.722, "moon_phase": 0.958606, "wind_gust_spd": 2.11071, "snow_depth": 0, "clouds": 93, "ts": 1573200060, "sunrise_ts": 1573225523, "app_min_temp": 2.7, "wind_spd": 0.802894, "pop": 0, "wind_cdir_full": "south-southeast", "slp": 1022.2, "valid_date": "2019-11-08", "app_max_temp": 15.8, "vis": 24.1349, "dewpt": 4.5, "snow": 0, "uv": 0.989995, "weather": { "icon": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png", "code": 804, "description": "Overcast clouds" }, "wind_dir": 167, "max_dhi": null, "clouds_hi": 93, "precip": 0, "low_temp": 6.1, "max_temp": 15.9, "moonset_ts": 1573217557, "datetime": "2019-11-08", "temp": 9.6, "min_temp": 6, "clouds_mid": 6, "clouds_low": 0 }, { "moonrise_ts": 1573343920, "wind_cdir": "SW", "rh": 78, "pres": 1008.56, "high_temp": 14, "sunset_ts": 1573346422, "ozone": 257.936, "moon_phase": 0.988998, "wind_gust_spd": 3.61965, "snow_depth": 0, "clouds": 88, "ts": 1573286460, "sunrise_ts": 1573312013, "app_min_temp": 2.5, "wind_spd": 1.00688, "pop": 0, "wind_cdir_full": "southwest", "slp": 1024.28, "valid_date": "2019-11-09", "app_max_temp": 14, "vis": 24.135, "dewpt": 5.2, "snow": 0, "uv": 1.06772, "weather": { "icon": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png", "code": 804, "description": "Overcast clouds" }, "wind_dir": 228, "max_dhi": null, "clouds_hi": 88, "precip": 0, "low_temp": 5, "max_temp": 14.1, "moonset_ts": 1573307883, "datetime": "2019-11-09", "temp": 9, "min_temp": 5.9, "clouds_mid": 13, "clouds_low": 0 } ], "city_name": "King", "lon": "-122.1232", "timezone": "America/Los_Angeles", "lat": "47.6718", "country_code": "US", "state_code": "WA" } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "speak": "Weather forecast for ${formatEpoch(data[0].sunrise_ts, 'dddd')} is high of ${formatNumber(data[0].app_max_temp / 5 * 9 + 32, 0)} and low of ${formatNumber(data[0].app_min_temp / 5 * 9 + 32, 0)} degrees with a ${formatNumber(data[0].precip * 100, 0)}% chance of rainWinds will be ${formatNumber(data[0].wind_gust_spd, 0)} mph from the ${data[0].wind_cdir}", "backgroundImage": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Background.jpg", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": 35, "items": [ { "type": "Image", "url": "https://messagecardplayground.azurewebsites.net/assets/Mostly%20Cloudy-Square.png", "size": "Stretch" } ] }, { "type": "Column", "width": 65, "items": [ { "type": "TextBlock", "text": "{{DATE(${formatEpoch(data[0].sunrise_ts, 'yyyy-MM-ddTHH:mm:ssZ')}, SHORT)}}", "weight": "Bolder", "size": "Large", "wrap": true }, { "type": "TextBlock", "text": "${formatNumber(data[0].app_min_temp / 5 * 9 + 32, 0)} / ${formatNumber(data[0].app_max_temp / 5 * 9 + 32, 0)}", "size": "Medium", "spacing": "None", "wrap": true }, { "type": "TextBlock", "text": "${formatNumber(data[0].precip * 100, 0)}% chance of rain", "spacing": "None", "wrap": true }, { "type": "TextBlock", "text": "Winds ${data[0].wind_gust_spd} mph ${data[0].wind_cdir}", "spacing": "None", "wrap": true } ] } ] }, { "type": "ColumnSet", "columns": [ { "$data": "${data}", "$when": "${$index != 0}", "type": "Column", "width": 20, "items": [ { "type": "TextBlock", "horizontalAlignment": "Center", "text": "${formatEpoch(sunrise_ts, 'dddd')}", "wrap": true }, { "type": "Image", "size": "auto", "url": "${weather.icon}" }, { "type": "FactSet", "horizontalAlignment": "Right", "facts": [ { "title": "High", "value": "${formatNumber(app_max_temp / 5 * 9 + 32, 0)}" }, { "title": "Low", "value": "${formatNumber(app_min_temp / 5 * 9 + 32, 0)}" } ] } ], "selectAction": { "type": "Action.OpenUrl", "title": "View ${formatEpoch(sunrise_ts, 'dddd')}", "url": "https://www.microsoft.com" } } ] } ] }
JSON Scripts and Templates: Microsoft.com
In a continuation of my previous article, Adaptive Cards with Microsoft Teams with Examples, we continue with the details of how to create these Adaptive Cards with authored 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.
Part 1 of this series includes templates for Activity Update Sample, Activity Update with Labels, Calendar Reminder, and Calendar Reminder with Labels.
Activity Update Sample
Data JSON: { "title": "Publish Adaptive Card Schema", "description": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.", "creator": { "name": "Matt Hidinger", "profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg" }, "createdUtc": "2017-02-14T06:08:39Z", "viewUrl": "https://adaptivecards.io", "properties": [ { "key": "Board", "value": "Adaptive Cards" }, { "key": "List", "value": "Backlog" }, { "key": "Assigned to", "value": "Matt Hidinger" }, { "key": "Due date", "value": "Not set" } ] } Template JSON: { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "${title}", "wrap": true, "style": "heading" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "Image", "style": "Person", "url": "${creator.profileImage}", "size": "Small" } ], "width": "auto" }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "${creator.name}", "wrap": true }, { "type": "TextBlock", "spacing": "None", "text": "Created {{DATE(${string(createdUtc)}, SHORT)}}", "isSubtle": true, "wrap": true } ], "width": "stretch" } ] }, { "type": "TextBlock", "text": "${description}", "wrap": true }, { "type": "FactSet", "facts": [ { "$data": "${properties}", "title": "${key}:", "value": "${value}" } ] } ], "actions": [ { "type": "Action.ShowCard", "title": "Set due date", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Date", "id": "dueDate" }, { "type": "Input.Text", "id": "comment", "placeholder": "Add a comment", "isMultiline": true } ], "actions": [ { "type": "Action.Submit", "title": "OK" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } }, { "type": "Action.OpenUrl", "title": "View", "url": "${viewUrl}" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0" }
Activity Update with Labels
Data JSON: { "title": "Publish Adaptive Card Schema", "description": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.", "creator": { "name": "Matt Hidinger", "profileImage": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg" }, "createdUtc": "2017-02-14T06:08:39Z", "viewUrl": "https://adaptivecards.io", "properties": [ { "key": "Board", "value": "Adaptive Cards" }, { "key": "List", "value": "Backlog" }, { "key": "Assigned to", "value": "Matt Hidinger" }, { "key": "Due date", "value": "Not set" } ] } Template JSON: { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "size": "medium", "weight": "bolder", "text": "${title}", "style": "heading" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "Image", "style": "person", "url": "${creator.profileImage}", "size": "small" } ], "width": "auto" }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "bolder", "text": "${creator.name}", "wrap": true }, { "type": "TextBlock", "spacing": "none", "text": "Created {{DATE(${string(createdUtc)}, SHORT)}}", "isSubtle": true, "wrap": true } ], "width": "stretch" } ] }, { "type": "TextBlock", "text": "${description}", "wrap": true }, { "type": "FactSet", "facts": [ { "$data": "${properties}", "title": "${key}:", "value": "${value}" } ] } ], "actions": [ { "type": "Action.ShowCard", "title": "Set due date", "card": { "type": "AdaptiveCard", "body": [ { "type": "Input.Date", "label": "Enter the due date", "id": "dueDate" }, { "type": "Input.Text", "id": "comment", "isMultiline": true, "label": "Add a comment" } ], "actions": [ { "type": "Action.Submit", "title": "OK" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json" } }, { "type": "Action.OpenUrl", "title": "View", "url": "${viewUrl}" } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0" }
Calendar Reminder
Data JSON: { "kind": "calendar#event", "etag": "\"3007572097704000\"", "id": "_6sp3gdjcksmab9kc4rgq1aldjelm8chhcgp66phocg_20191105T150000Z", "status": "confirmed", "htmlLink": "https://www.google.com/calendar/event?eid=XzZzcDNnZGoxNjBxamdiYjRja3NtYWI5a2M0cmplYjlwNjhyM2diOXA2Z3FtOGNoaGNncDY2cGhvY2dfMjA2xO1UwMDAuZ0Bt", "created": "2016-12-29T06:35:05.000Z", "updated": "2018-04-24T14:04:50.184Z", "summary": "Adaptive Card design session", "location": "Conf Room 112/3377 (10)", "creator": { "email": "[email protected]", "displayName": "John Doe", "self": true }, "organizer": { "email": "[email protected]", "displayName": "John Doe", "self": true }, "start": { "dateTime": "2019-11-05T12:30:00-08:00", "timeZone": "America/Los_Angeles" }, "end": { "dateTime": "2019-11-05T13:30:00-08:00", "timeZone": "America/Los_Angeles" }, "recurringEventId": "_6sp3gdj160qjgbb4cksmab9kc4rjeb9p68r3gb9p6gqm8chhcgp66phocg", "originalStartTime": { "dateTime": "12:30", "timeZone": "America/Los_Angeles" }, "visibility": "private", "iCalUID": "7286a058-de9e-4a77-9268-945d21d2cf8d", "sequence": 4, "reminders": { "useDefault": false, "overrides": [ { "method": "popup", "minutes": "5" }, { "method": "popup", "minutes": "15" }, { "method": "popup", "minutes": "30" } ] } } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "speak": "Your meeting about \"Adaptive Card design session\" is starting at ${formatDateTime(start.dateTime, 'HH:mm')}pmDo you want to snooze or do you want to send a late notification to the attendees?", "body": [ { "type": "TextBlock", "text": "${summary}", "size": "Large", "weight": "Bolder", "wrap": true, "style": "heading" }, { "type": "TextBlock", "text": " ${location} ", "isSubtle": true, "wrap": true }, { "type": "TextBlock", "text": "${formatDateTime(start.dateTime, 'HH:mm')} - ${formatDateTime(end.dateTime, 'hh:mm')}", "isSubtle": true, "spacing": "None", "wrap": true }, { "type": "TextBlock", "text": "Snooze for", "wrap": true }, { "type": "Input.ChoiceSet", "id": "snooze", "value": "${reminders.overrides[0].minutes}", "choices": [ { "$data": "${reminders.overrides}", "title": "${minutes} minutes", "value": "${minutes}" } ] } ], "actions": [ { "type": "Action.Submit", "title": "Snooze", "data": { "x": "snooze" } }, { "type": "Action.Submit", "title": "I'll be late", "data": { "x": "late" } } ] }
Calendar Reminder with Labels
Data JSON: { "kind": "calendar#event", "etag": "\"3007572097704000\"", "id": "_6sp3gdjcksmab9kc4rgq1aldjelm8chhcgp66phocg_20191105T150000Z", "status": "confirmed", "htmlLink": "https://www.google.com/calendar/event?eid=XzZzcDNnZGoxNjBxamdiYjRja3NtYWI5a2M0cmplYjlwNjhyM2diOXA2Z3FtOGNoaGNncDY2cGhvY2dfMjA2xO1UwMDAuZ0Bt", "created": "2016-12-29T06:35:05.000Z", "updated": "2018-04-24T14:04:50.184Z", "summary": "Adaptive Card design session", "location": "Conf Room 112/3377 (10)", "creator": { "email": "[email protected]", "displayName": "John Doe", "self": true }, "organizer": { "email": "[email protected]", "displayName": "John Doe", "self": true }, "start": { "dateTime": "2019-11-05T12:30:00-08:00", "timeZone": "America/Los_Angeles" }, "end": { "dateTime": "2019-11-05T13:30:00-08:00", "timeZone": "America/Los_Angeles" }, "recurringEventId": "_6sp3gdj160qjgbb4cksmab9kc4rjeb9p68r3gb9p6gqm8chhcgp66phocg", "originalStartTime": { "dateTime": "12:30", "timeZone": "America/Los_Angeles" }, "visibility": "private", "iCalUID": "7286a058-de9e-4a77-9268-945d21d2cf8d", "sequence": 4, "reminders": { "useDefault": false, "overrides": [ { "method": "popup", "minutes": "5" }, { "method": "popup", "minutes": "15" }, { "method": "popup", "minutes": "30" } ] } } Template JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "speak": "Your meeting about \"Adaptive Card design session\" is starting at ${formatDateTime(start.dateTime, 'HH:mm')}pmDo you want to snooze or do you want to send a late notification to the attendees?", "body": [ { "type": "TextBlock", "text": "${summary}", "size": "Large", "weight": "Bolder", "style": "heading" }, { "type": "TextBlock", "text": " ${location} ", "isSubtle": true }, { "type": "TextBlock", "text": "${formatDateTime(start.dateTime, 'HH:mm')} - ${formatDateTime(end.dateTime, 'hh:mm')}", "isSubtle": true, "spacing": "None" }, { "type": "Input.ChoiceSet", "id": "snooze", "label": "Snooze for", "value": "${reminders.overrides[0].minutes}", "choices": [ { "$data": "${reminders.overrides}", "title": "${minutes} minutes", "value": "${minutes}" } ] } ], "actions": [ { "type": "Action.Submit", "title": "Snooze", "data": { "x": "snooze" } }, { "type": "Action.Submit", "title": "I'll be late", "data": { "x": "late" } } ] }
JSON Scripts and Templates: Microsoft.com
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 while leveraging the power of Flow. 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 and Flow for Microsoft Teams
Bringing Flow and Adaptive Cards together for Microsoft Teams these select templates are created and offered 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 addition to the previous Adaptive Cards with Microsoft Teams – JSON Templates Parts 1 – 8, we are adding JSON templates that work seamlessly with Flow for full engagement with users.
In the previous installment, Adaptive Cards and Flow with Microsoft Teams – JSON Templates Part 1, templates included Candidate Feedback, Image Share, Lead Collection, and Poll Generator.
Metadata Update
JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Metadata Update Card", "weight": "bolder", "size": "large", "id": "acTitle" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "Sub Header Tag Line", "weight": "Bolder", "wrap": true, "id": "acSubHeader" } ] } ] }, { "type": "TextBlock", "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum leo lorem, at facilisis augue hendrerit eget. Praesent ut malesuada ipsum. Vivamus semper faucibus felis quis sagittis. Nunc pellentesque metus at nunc gravida, vitae volutpat sapien vehicula. Nulla lorem nibh, porttitor vel semper ut, ornare nec erat.", "wrap": true, "id": "acDescriptionArea" }, { "type": "FactSet", "facts": [ { "title": "Fact 1:", "value": "{acFact1}" }, { "title": "Fact 2:", "value": "{acFact2}" }, { "title": "Fact 3:", "value": "{acFact3}" } ], "id": "acFactSet" }, { "type": "Container", "spacing": "Large", "items": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "HEADER 1" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "HEADER 2" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "HEADER 3" } ], "width": "stretch" } ] } ], "bleed": true }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 1", "wrap": true, "id": "acCol1" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 2", "wrap": true, "id": "acCol2" } ], "width": "stretch" }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "Column 3", "wrap": true, "id": "acCol4" } ], "width": "stretch" } ], "$data": "acDataContext" } ], "bleed": true }
Daily Weather
JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "{acCity}, {acState}", "size": "Large", "isSubtle": true }, { "type": "TextBlock", "text": "{acCurrentDateTime}", "spacing": "None" }, { "type": "TextBlock", "text": "{acDailySummary}", "spacing": "None" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "auto", "items": [ { "type": "Image", "url": "{acUrlConditionsImage}", "size": "Large" } ] }, { "type": "Column", "width": "auto", "items": [ { "type": "TextBlock", "text": "{acCurrentTemperature}", "size": "ExtraLarge", "spacing": "None" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "°F", "weight": "Bolder", "spacing": "Small" } ] }, { "type": "Column", "width": "stretch", "items": [ { "type": "TextBlock", "text": "Hi {actempHi}", "horizontalAlignment": "Left" }, { "type": "TextBlock", "text": "Lo {actempLow}", "horizontalAlignment": "Left", "spacing": "None" } ] } ] } ] }
Acronym Form
Data JSON: { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "Acronym Logger", "id": "Title", "spacing": "Medium", "horizontalAlignment": "Center", "size": "ExtraLarge", "weight": "Bolder", "color": "Accent" }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Acronym", "wrap": true, "spacing": "Medium" }, { "type": "Input.Text", "id": "acAcronym", "placeholder": "Enter the abbreviation for the acronym" }, { "type": "TextBlock", "text": "Definition", "wrap": true }, { "type": "Input.Text", "placeholder": "Enter a definition of the acronym above", "id": "acDefinition", "isMultiline": true } ] } ], "actions": [ { "type": "Action.Submit", "title": "Submit", "id": "btnSubmit" } ] }
JSON scripts and templates: Microsoft.com
With these templates, it is easy to create, share, and reuse existing templates to meet your organization’s needs by engaging your users with Adaptive Cards with Microsoft Teams.