My presentation that I was showing during SPS Cologne 202 online conference this September.

1. Boost UX in your business
processes with Adaptive Cards
Tomasz Poszytek, MVP

2. Sponsors
We are happy to announce our virtual sponsors:
Gesellschaft für Digitalisierung und digitalen
Fortschritt e.V.
www.gdf-verein.de
Microsoft 365 Community Germany
www.office365hero.de

3. Tomasz Poszytek
Specialist in enabling organizations to work more effectively
through optimizing their business processes.
Experienced expert who works for over 10 years with
SharePoint and over 4 with Office 365 and Power Platform.
Continuously learning to stay up-to-date with latest changes.
Loves sharing knowledge with customers and community
members.
#PowerAddict for life! 
https://poszytek.eu
tomasz@poszytek.eu
@TomaszPoszytek

4. 3rd October 2020, online! Dedicated to Dynamics 365!
Register: https://bit.ly/30vzqoR
Event details: https://bit.ly/3fCH4SY

5. Agenda
The story behind
Message Cards
Adaptive Cards
The future!

7. What are cards?
„Cards” are used to
display your content
inside a host experience

8. The history
2018
Adaptive Cards 1.0
2017
Message Cards created
2017
Matt and David set up a team
2016
Microsoft has multiple teams researching similar Solutions

9. Matt and David

10. Cards built by Microsoft
Native
rendering
on any
platform
Automatically
adapt to the
Host UX
Low cost,
targeted at
the long tail
Purely
declarative,
no code

11. Cards built by Microsoft
Extensible
schema to
describe your
content
Actions to
open URLs,
show other
cards, etc
Input to
gather
information
from users
Speech
enabled from
day-one

12. Message Cards
Born as Actionable
Messages for Outlook
Today a technology
of a past
Allows to be posted to
Teams using Webhooks
(huge advantage!)
Less options for
configuration and
composition

13. Adaptive Cards
Successor of Message Cards
More Advance JSON schema;
more controls, more options
SDK already present in
Microsoft solutions: Bot
Framework, Cortana, Windows
Timeline, Outlook, Teams
SDK available for many
platforms, such as JavaScript,
Flutter Android, iOS, Windows,
.NET

14. Yes No Maybe
Microsoft 365

15. Yes No
May
be

16. Android iOS JavaScript WPF
ASP.NET
UWP
ReactNativeFlutter

20. Adaptive Cards demo

21. Rich
Designer
integration
Simplified
development
workflows
SDKs for .NET
and JavaScript
available
Other platforms
on release
Discover and
contribute
templates using
the template
service
Adaptive Cards templating

22. =
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "**Microsoft (MSFT)**",
"size": "large"
},
{
"type": "ColumnSet",
"columns": [
{
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "105.51",
"size": "extraLarge",
"color": "good"
}
]
},
{
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{ "title": "Open:", "value": "103.24" },
{ "title": "High:", "value": "106.98" },
{ "title": "Low:", "value": "101.21" }
]
}
]
}
]
}
]
}

23. {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "**${name} (${symbol})**",
"size": "large"
},
{
"type": "ColumnSet",
"columns": [
{
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "${quote}",
"size": "extraLarge",
"color": "good"
}
]
},
{
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{ "title": "Open:", "value": "${open}" },
{ "title": "High:", "value": "${high}" },
{ "title": "Low:", "value": "${low}" }
]
}
]
}
]
}
]
}
{
"name": "Microsoft Corp.",
"symbol": "MSFT",
"quote": "105.51",
"open": "103.24",
"high": "106.98",
"low": "101.21"
}
+ =
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "**Microsoft (MSFT)**",
"size": "large"
},
{
"type": "ColumnSet",
"columns": [
{
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "105.51",
"size": "extraLarge",
"color": "good"
}
]
},
{
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{ "title": "Open:", "value": "103.24" },
{ "title": "High:", "value": "106.98" },
{ "title": "Low:", "value": "101.21" }
]
}
]
}
]
}
]
}

24. {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "**${name} (${symbol})**",
"size": "large"
},
{
"type": "ColumnSet",
"columns": [
{
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "${quote}",
"size": "extraLarge",
"color": "good"
}
]
},
{
"width": "stretch",
"items": [
{
"type": "FactSet",
"facts": [
{ "title": "Open:", "value": "${open}" },
{ "title": "High:", "value": "${high}" },
{ "title": "Low:", "value": "${low}" }
]
}
]
}
]
}
]
}
{
"name": "Microsoft Corp.",
"symbol": "MSFT",
"quote": "105.51",
"open": "103.24",
"high": "106.98",
"low": "101.21"
}
+ =

25. Introducing “Adaptive Expressions”
{
"symbol": "MSFT",
"companyName": "Microsoft Corporation",
"primaryExchange": "Nasdaq Global Select",
"openTime": 1556890200966,
"closeTime": 1556913600447,
"close": 128.9,
"high": 129.43,
"low": 127.25,
"change": 2.69,
"changePercent": 0.02131,
}
{
"type": "TextBlock",
"text": "${companyName}",
"size": "Medium"
},
{
"type": "TextBlock",
"text": "${if(change >= 0, '▲', '▼')} ${formatNumber(change, 2)} USD (${changePercent * 100}%)",
"color": "${if(change >= 0, 'good', 'attention’)}"
}

26. Next versions of Adaptive Cards
Currently released version 1.3, working on next!
Version 1.1/1.2: Media support, Base64 image support, Inline actions
Version 1.3: Themable icons, Advanced input validation, Submit button changes
Productive release of Microsoft Teams actions
Version 2.0 (vNext): templating language (separate library). Data bindings, Binding scopes, ForEach,
Functions, Conditions and much more
Extensibility/ Adaptive Cards Fabric: library allowing cards to use icons from UI Fabric.

27. 1.x
2020
2.x
2021
3.x
2021+
Rendering
Accessibility, Input Validation,
Glyphs, Platform
Inconsistencies Rendering + Universal Actions
unified SDKs on all platforms
Rendering + Universal Actions +
Live Data binding
“Live, interactive, actionable
content that can be presented to
any user inside any experience.”
Actions
Templating
Templating SDKs for .NET and
JavaScript
Templating SDKs for Mobile
platforms
Card Designer
Accessibility, Version Selector
and Templating support
… …
Card Author Services Card Author Services
• Action.Execute allows returning
refreshed Adaptive Card payloads
• Auto Complete made possible
with Universal Actions
• Server-side validation with UA
• Advanced Host Configuration
with AEL (e.g., Input labels)
• Template evolves into “live data
binding”
• Same template language, but
changes to data are reflected
automatically
https://aka.ms/ACRoadmap

28. THANK
YOU!
@TomaszPoszytek
https://www.youtube.com/TomaszPoszytek
https://poszytek.eu
tomasz@poszytek.eu
https://www.linkedin.com/in/tomaszposzytek

29. Please submit your Feedback
feedback.spscgn.com

30. See you next year at
SPSCGN
Saturday 29. May 2021