Adaptive cards 101
Download as PPTX, PDF1 like539 views
Adaptive Cards provide a flexible way to display payloads in different hosting environments while maintaining host control over style and security. They can cover 80% of common needs and be used in Microsoft Outlook, Teams, and on web pages. The Adaptive Card designer and templating services help simplify development and allow reuse of common card templates.
Adaptive cards 101
- 2. Fixed templates Complete control No flexibility Update Treadmill HTML Canvas No consistency No control Security issues (iframe overlay?/xss style attacks?) Slow Adaptive Cards Flexible enough payload to cover 80% of needs Host maintains strong control over style and security
- 3. Yes No Maybe For Example: Adaptive Cards in Microsoft experiences your content and actions inside a host experience
- 5. demo Adaptive Card designer and samples Adaptive Cards In Microsoft Outlook In Microsoft Teams On a web page with form submit https://bit.ly/ACSubmit
- 6. Rich Designer integration Simplified development workflows SDKs for .NET and JavaScript available Other platforms on release Discover and contribute templates using the template service
- 7. demo Weather card http://bit.ly/ACTemplates1 Azure AD user profile using Template Service http://bit.ly/ACTemplates2 Graph explorer integration
- 8. Get Started: https://adaptivecards.io/ GitHub: https://github.com/Microsoft/AdaptiveCards Card Designer SDK: https://npmjs.com/adaptivecards-designer Feature Portal: http://aka.ms/ACFeatures Templating Get Started: https://docs.microsoft.com/en- us/adaptive-cards/templating Templating service: https://docs.microsoft.com/en-us/adaptive- cards/templating/service Template service GitHub: https://github.com/Microosft/adaptivecards- templates Outlook Actionable Messages Documentation: https://docs.microsoft.com/en- us/outlook/actionable-messages Card Playground: https://messagecardplayground.azurewebsites.net
Editor's Notes
- #2: PREP: - Run an approval workflow and have the message waiting in Outlook - Open 3 plunks in tabs: Adaptive Card Submit, Adaptive Card Template, Adaptive Card Template Service - Open Adaptivecard.io and Graph explorer in tabs
- #3: HTML5 based Card frameworks – Google AMP For eg, if we
- #4: 3
- #6: VIDEO
- #8: VIDEO