Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Adaptive Cards in Teams, Windows, Outlook and your own applications PowerPoint Presentation
Download Presentation
Adaptive Cards in Teams, Windows, Outlook and your own applications

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

211 Vues Download Presentation
Télécharger la présentation

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  2. First, let’s talk about Cards

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

  4. Cards trace their roots to social media Articles Videos

  5. And then… Reminders Reservations Weather

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

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

  8. 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"/>

  9. 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" />

  10. 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" } }

  11. Is there another way?

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

  13. 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

  14. Demo Adaptive Cards for Users

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

  16. 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

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

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

  19. Demo Adaptive Cards for Card Authors

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

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

  22. So how does it work?

  23. Card Creator Adaptive Card Adaptive Host Config

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

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

  26. Demo Adaptive Cards for Host Apps

  27. sms

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

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

  30. Partners

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

  32. One more thing…

  33. (PREVIEW) Adaptive Cards 2.0

  34. 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?​”

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

  36. Demo GitHub Proof of Concept

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

  38. 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

  39. 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

  40. Thank you! @MattHidingerAndrew Leader #AdaptiveCards