Send data to Outlook, Teams and Bots with Adaptive Cards (SPC19, BRK088)

Adaptive Cards are a new way for developers to exchange rich content in a common and consistent way. They are a great way to send structured content into various channels, such as in Microsoft Outlook, Groups, Teams, Bots or into the Windows Timeline. This can be done from a script or from custom applications. Adaptive Cards let you describe your content as you see fit and deliver it beautifully, wherever your customers are. Learn how to benefit from using Adaptive Cards in this session.

Transcript

1. Toni Pohl MVP Azure and Office Dev, atwork @atwork | tp@atwork.at
2. “Adaptive Cards are a new way for developers to exchange content in a common and consistent way.” In short: “Cards” are used to display your content inside a host experience.
4. Demo Send an Approval email with a Flow or Logic App
7. +96% faster
8. Twitter
9. Articles Videos
10. Reservations Weather Reminders More!
11. Airline Itinerary Airline Flight Update Airline Check-in Reminder Receipts Restaurants
12. { "type": "template", "payload": { "template_type": "airline_itinerary", "passenger_info": [ { "name": "Sarah Hum" } ], "flight_info": [ { "flight_number": "KL9123", "departure_airport": { "airport_code": "SFO" }, "arrival_airport": { "airport_code": "AMS" } } ], "base_price": "12206", "tax": "200", "total_price": "4032.45" } }
13. Fixed templates Complete control No flexibility Update Treadmill HTML Canvas No consistency No control Security issues Adaptive Cards Flexible enough payload to cover 80% of needs Host maintains strong control over style and security
14. Where can I use Adaptive Cards?
15. Yes No Maybe
16. Native rendering on any platform Automatically adapt to the Host UX Low cost, targeted at the long tail Purely declarative, no code
17. Schema Explorer VS Code Previewer Card Designer
18. { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0", "body": [ { … } ] }
19. Card Creator Adaptive Card Adaptive Host Config
20. Demo Adaptive Cards Designer & message card playground
21. v1.0 March 2018 • Windows • Web • Android • iOS v1.1 Sept. 2018 • Media • Action Items • Vertical Alignment v1.2 May 2019 • Fallback • Validation • „Colors & Fonts“ • Toggle • Base64 encoded images • Place actions anywhere in the card • Stretch images (e.g. Flight dur.) v2.0 (Early) Preview • portable card and data formats • Template binding language • Skype • Windows Notifications
22. Demo Send a card from PowerShell
24. Demo Actionable Messages
26. https://outlook.office.com/connectors/oam/publish
27. https://store.office.com/app.aspx?assetid=WA104381686&productgroup=Outlook
30. Demo AC posting to Azure Function
31. Demo AC in Teams with Flow and an Azure Function
32. Demo AC in Teams with a Bot
34. Demo AC in Windows Timeline
36. Demo HTML Card Renderer (SDK)
37. Demo Data Binding
38. "text": "Card for {firstName}", "$when": "{age <= 40}"
39. Summary
40. Yes No Maybe
41. • Documentation https://adaptivecards.io/ • Samples on GitHub https://github.com/Microsoft/AdaptiveCards • Adaptive Cards Designer https://adaptivecards.io/designer/ • Next version of the Adaptive Cards Designer https://vnext.adaptivecards.io/designer/ • Wiki & versions https://github.com/Microsoft/AdaptiveCards/wiki • Schema Explorer https://adaptivecards.io/explorer/AdaptiveCard.html • Host App Status/Docs https://docs.microsoft.com/en-us/adaptive-cards/resources/partners
42. • Designing Outlook Actionable Message cards with the Adaptive Card format https://docs.microsoft.com/en-us/outlook/actionable-messages https://docs.microsoft.com/en-us/outlook/actionable-messages/adaptive-card • Message Card playground (send AC via email to Outlook) https://messagecardplayground.azurewebsites.net • Adaptive Cards in Teams Windows Outlook and your own applications, Build 2018, BRK2118D https://www.youtube.com/watch?v=0BZvNdUF2uc • Adaptive cards in Teams https://www.youtube.com/watch?v=C-ERi1yhxmw • Adaptive cards for Microsoft Teams, Microsoft Flow US Government now available (March 2019) https://flow.microsoft.com/en-us/blog/adaptive-cards-for-microsoft-teams-microsoft-flow-us- government-now-available/
43. • Documentation http://dev.botframework.com • Start here https://docs.microsoft.com/en-us/azure/bot-service/dotnet/bot-builder-dotnet-sdk- quickstart?view=azure-bot-service-4.0 • Bot Framework V4 BotBuilder .NET Core - Adaptive cards https://www.youtube.com/watch?v=1P6FKT5kGi4 • BotBuilder Samples https://github.com/Microsoft/BotBuilder-Samples • Bot Framework v4 Chatdown Tutorial #8: Using Adaptive Cards https://www.youtube.com/watch?v=TZQtNZ08LpQ • Scuba Bot source https://github.com/matthidinger/ContosoScubaBot
44. • A Babel plugin to transpile JSX to Adaptive Cards https://github.com/justinwilaby/babel-plugin-jsx-adaptive-cards • Razorback template engine https://github.com/tomlm/Razorback • Session samples https://github.com/tonipohl https://github.com/tonipohl/AdaptiveCardsDemo
45. Toni Pohl Linkedin.com/in/ToniPohl tp@atwork.at @atwork