Adaptive Cards in Teams, Windows, Outlook and your own applications

2. Adaptive Cards in Teams, Windows, Outlook and your own applications Matt HidingerAndrew Leader BRK2118

3. First, let’s talk about Cards

5. In short… “Cards” are used to display your content inside ahost experience

6. Cards trace their roots to social media Articles Videos

7. And then… Reminders Reservations Weather

8. And then… Airline Flight Update Restaurants Receipts Airline Itinerary Airline Check-in Reminder

9. And then… ? ? ? 👍 🙅‍♀️ 🤗 ? ? 😁 🤷‍♀️ ? 🤦‍♂️ ? 🙍‍♀️

10. Twitter Cards <metaname="twitter:card" content="summary_large_image"/> <metaname="twitter:site" content="www.nationalgeographic.com"/> <metaname="twitter:creator" content="@NatGeo"/> <metaname="twitter:title" content="Your Shot: Nepal Trekking Pictures"/> <metaname="twitter:description" content="See Nepal Trekking Adventure Photos from Adventurers Like You"/> <metaname="twitter:image" content="http://something.com/image.jpg"/>

11. Open Graph (Facebook) <metaproperty="og:type"content="article" /> <metaproperty="og:url"content="some-story.html" /> <metaproperty="og:title" content="When Great Minds Don’t Think Alike" /> <metaproperty="og:description" content="How much does culture influence creative thinking?" /> <metaproperty="og:image" content="http://nyt.com/summary-image.jpg" />

12. Messenger Templates { "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. Is there another way?

14. It seems like we could solve all of this with HTML… <HTML/>

15. Filling the middle ground HTML Canvas No consistency No control Security issues Fixed templates Complete control No flexibility Update Treadmill Adaptive Cards Flexible enough payload to cover 80% of needs Host maintains strong control over style and security

16. Demo Adaptive Cards for Users

17. Demo • Bot Framework WebChat • Windows Notifications (Preview) • Windows Timeline • Outlook Actionable Messages • Microsoft Teams • Cortana Skills Adaptive Cards for Users

18. Filling the middle ground HTML Canvas No consistency No control Security issues Fixed templates Complete control No flexibility Update Treadmill Adaptive Cards Flexible enough payload to cover 80% of needs Host maintains strong control over style and security

19. Adaptive Cards in Microsoft experiences Bot Framework Yes No Maybe Outlook Teams WebChat Timeline Cortana Your applications

20. Adaptive Cards Native rendering on any platform Automatically adaptto the Host UX Low cost, targeted at the long tail Purelydeclarative, no code

21. Demo Adaptive Cards for Card Authors

22. Adaptive Cards Extensible schema to describe your content Inputto gather information from users Actionsto open URLs, show other cards, etc Speechenabled from day-one

23. Tooling Interactive Visualizer Schema Explorer VS Code Previewer Card Designer

24. So how does it work?

25. Card Creator Adaptive Card Adaptive Host Config

26. Released v1.0 in March Windows Web Android iOS

27. Announcing v1.1 today – SDKs available next week! Vertical Alignment Media Action Icons And more...

28. Demo Adaptive Cards for Host Apps

29. sms

30. sms Outlook Actionable Messageshttps://aka.ms/actionable-messages

31. sms Outlook Actionable Messageshttps://aka.ms/actionable-messages

32. Partners

33. Help define this new problem space You adaptivecards.io #adaptivecards

34. One more thing…

35. (PREVIEW) Adaptive Cards 2.0

36. Addressing pain points “It’s not easy to take my card from the Visualizer into my actual code.” “I have data already, can’t you give me a great looking card for it?​”

37. Proof of Concept: Templates for Azure APIs Card Template Service + Data Template Metadata Ex: { type: “azure.deployment” } Adaptive Card =

38. Demo GitHub Proof of Concept

39. Demo GitHub Proof of Concept Card templates Template repository Console Renderer

40. Resources Adaptive Cards: Documentation: https://adaptivecards.io/ GitHub: https://github.com/Microsoft/AdaptiveCards Host App Status/Docs: https://docs.microsoft.com/en-us/adaptive-cards/resources/partners Outlook Actionable Messages: Documentation: https://docs.microsoft.com/en-us/outlook/actionable-messages Card Playground: https://messagecardplayground.azurewebsites.net Bot framework: Documentation: http://dev.botframework.com Scuba Bot source: https://github.com/matthidinger/ContosoScubaBot Developer tools: Adaptive Card Designer: https://aka.ms/adaptivedesigner JSX for Adaptive Cards: https://github.com/justinwilaby/babel-plugin-jsx-adaptive-cards Razorback template engine: https://github.com/tomlm/Razorback

41. Please evaluate this sessionYour feedback is important to us! Please evaluate this session through MyEvaluations on the mobile appor website. Download the app:https://aka.ms/ignite.mobileApp Go to the website: https://myignite.techcommunity.microsoft.com/evaluations

42. Thank you! @MattHidingerAndrew Leader #AdaptiveCards