►
From YouTube: Teams Development: Introduction to Adaptive Cards
Description
This 14-minute video introduces the idea of Adaptive Cards - lightweight nuggets of interactive content that you can embed in Teams and many other applications. It's intended for developers and low-code developers who will use adaptive cards in Microsoft Teams or other applications.
Live JavaScript samples are provided which show how to use adaptive card templating and the adaptive card template service.
Presenter: Bob German (Microsoft) | @Bob1German
Supporting materials:
• Adaptive Cards: https://adaptivecards.io
• Sample 1: https://bit.ly/ACTemplates1
• Sample 2: https://bit.ly/ACTemplates2
PnP videos for Teams developers: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWG3R399jMSrt1eFa5KErvc
PnP videos for Teams low-code developers: https://www.youtube.com/playlist?list=PLR9nK3mnD-OUEuwES5Zn66qUdUdD60PCZ
A
Hello,
this
video
is
introduction
to
adaptive
cards
and
it's
part
of
the
Microsoft
365
patterns
and
practices
teams,
development
series,
adaptive
cards
are
used
in
teams,
bots
and
messaging
extensions,
and
can
even
be
incorporated
into
tabs
if
you
wish
so
they're
useful
throughout
team's
development
and
by
watching
this
video
you'll
learn
what
adaptive
cards
are,
how
to
make
and
use
them
how
to
use
adaptive
card
templates
and
how
to
find
a
template
using
the
adaptive
card
service.
So,
let's
dig
in
so
let
me
ask:
have
you
ever
used
an
adaptive
card?
A
Maybe
you've
used
one
and
didn't
even
know
it.
For
example,
this
actionable
message
in
Outlook
is
actually
an
adaptive
card.
You
can
even
capture
information
from
the
user
no
way
I'm
improving
this
one
here
in
Windows
10.
The
history
of
programs
that
you've
run
recently
is
called
the
timeline.
Those
are
adaptive
cards
too.
A
A
The
problem
addressed
by
adaptive
cards
is
an
old
one.
One
application
wants
to
display
some
data
and
maybe
some
functionality
inside
of
another
application.
The
traditional
approach
to
this
was
fairly
heavyweight.
Both
applications
run
in
their
entirety
and
the
embedded
application
gets
to
display
its
user
interface
inside
of
the
hosting
application.
A
One
example
of
this
is
traditional
Microsoft
Office
object
linking
and
embedding,
although
these
days,
it's
more
often
done
using
web
technology
with
a
hosted
browser
or
iframe
displaying
the
embedded
application.
That's
how
teams
tabs
work
a
lighter-weight
alternative
is
to
embed
code
and
HTML
from
the
embedded
application
into
the
hosting
application.
A
Adaptive
cards
are
open-source.
They
blend
natively
into
any
experience.
The
adaptive
card
SDK
works
in
Android,
iOS,
JavaScript,
WPF
and
Universal
Windows
applications,
and
it
renders
the
adaptive
cards
natively
so
that
they
blend
right
in
with
the
application.
Adaptive
cards
also
provide
reusable
templates
and
a
template
service,
which
I'll
show
you
in
just
a
moment.
A
A
So,
as
you
can
see,
I
can
pick
any
one
of
these
examples
and
it
will
display
the
adaptive
card
over
here
on
the
far
right
in
the
middle.
You
can
see
the
JSON
that
makes
up
the
adaptive
card,
so
this
is
just
JSON.
Javascript
object
model
code
explaining
the
exact
structure
of
the
card
you'll
find
that
the
card
contains
the
structure
and
the
data,
but
not
the
way
of
displaying
it.
A
The
style
of
rendering
the
card
is
actually
controlled
by
the
host
and
I'll
show
that
more
clearly
in
a
minute,
something
that's
new
and
I
would
encourage
you
to
use,
even
though
it's
in
preview
is
adaptive
card
templating.
So
the
challenge
here
is
that
the
data
is
embedded
right
into
the
JSON
for
the
adaptive
card
by
using
template.
A
Another
thing
to
check
out
is
the
adaptive
card
designer,
and
this
really
shows
how
adaptive
cards
are
adaptive.
For
instance,
let
me
open
a
sample
and
what
I'll
do
is
just
show
you
the
different
host
applications
that
can
be
simulated
inside
the
designer,
so,
for
example,
this
is
what
the
adaptive
card
looks
like
inside
the
bot
framework
web
chat
client.
This
is
what
it
looks
like
inside
of
Microsoft
teams.
If
the
dark
theme
is
on
here's
teams
with
a
light
theme,
this
is
what
it
would
look
like
in
an
Outlook
actionable
message,
etc,
etc.
A
So
you
can
see
that
the
adaptive
card
does
not
get
to
decide
on
the
colors
and
the
fonts
and
the
styles
that's
actually
controlled
by
the
hosting
application,
and
that's
why
the
adaptive
cards
blend
in
so
perfectly
with
the
hosting
application
itself.
I
can
also
come
in
here
and
edit
the
card
of
course,
and
put
some
new
data
on
the
card.
If
I
wish.
A
So
ultimately,
I
want
to
show
you
how
to
use
adaptive
cards
inside
of
Microsoft
teams,
but
it's
a
little
bit
more
of
a
complex
topic
because
it's
going
to
involve
BOTS
and
messaging
extensions
and
other
things.
So,
let's
just
focus
on
just
the
adaptive
cards
part
by
looking
at
an
example
in
an
ordinary
web
browser
and
if
you
want
to
follow
along
just
go
to
bitly
/
AC
templates,
one
it'll
bring
you
to
the
same
example
inside
a
plonker.
A
So
it's
pretty
simple.
If
I
run
it
it'll,
ask
me
for
my
zip
code,
if
I
type
in
a
location
I'll
get
back
the
weather
inside
of
that
location.
So
let's
see
how
it
works
here.
Inside
of
my
script,
I
can
let
me
make
a
little
more
room
here
here
inside
of
my
script,
when
I
click,
the
button,
I
call
lookup
and
it's
going
to
go
and
get
the
zip
code
out
of
that
text
box
and
build
the
URL
to
call
open
weather
map.
And
then
it's
gonna
get
the
card
using
template.
A
Json,
which
is
here
in
my
project,
and
so
that's
actually
a
very
short
URL
actually
and
the
data
URL
up
here
of
my
open
weather
map.
It's
gonna
pull
both
of
those
pieces
of
data
in
and
then
it's
going
to
render
a
card
and
give
me
back
a
car,
an
adaptive
card
that
I
can
render
and
put
inside
of
the
host
element
on
my
web
page.
A
So,
let's
see
how
render
card
works?
It's
going
to
do
a
lot
of
fetching
right.
First,
it's
going
to
get
the
template,
which
is
here
and
turn
that
into
an
object
into
a
JSON
object
and
then
I'm
gonna
pull
in
my
data
and
then
I
will
do
a
little
bit
of
conversion
of
the
data
from
open
weather
map.
I
have
to
change
the
time
format
and
now
I've
got
the
template
and
the
data
both
in
JSON
objects.
A
40
I
can
actually
create
the
adaptive
card
and
load
the
expanded
template,
which
is
the
finished
JSON
right
into
there
and
return
that
to
the
lookup
function
for
rendering.
So,
let's
look
at
the
data?
Here's
some
sample
data,
it's
not
the
current
weather,
but
it
was
the
weather
at
one
point
and
you
can
see
this
is
just
what
comes
back
from
open
weather
map
so,
for
instance,
notice
that
there's
a
name
here
which
is
the
name
of
the
city.
A
A
Okay,
it's
gonna,
be
a
large
text,
block
I,
don't
get
to
say
the
font
or
anything
like
that,
but
I
do
get
to
say
a
little
bit
about
it
and
then
see
here,
I'm
binding
to
the
name
from
that
from
the
data
that
I
just
showed
you
and
everything
else,
just
kind
of
binds
in
from
there
here,
I'm
putting
in
kind
of
creating
the
icon
URL
out
of
the
some
data
that
was
inside
of
the
payload
that
came
back
from
open
weather
maps
and
that's
that's
it.
So
it's
fairly
simple!
A
A
So
you
can
use
these
in
your
solutions
by
referencing
them
from
the
service
or
you
can
even
look
up
the
template,
based
on
the
shape
of
the
data
that
you
have.
So
here
are
all
the
templates.
The
idea
here
is
this
is
not
yet
completely
open-source,
but
the
idea
here
is
that,
eventually
everything
this
whole
thing
will
be
open-source
and
you'll,
be
able
to
put
your
own
data
structures
inside
of
here
and
have
the
rendering
for
your
objects
from
any
application.
A
So,
let's
look
for
an
example:
here's
the
user
profile
from
the
Microsoft
graph
and
so
there's
the
template
for
that
up
in
the
service.
So
what
I'm
going
to
do
is
actually
go
into
the
graph
and
let
me
use
postman
to
grab
my
own
user
profile,
so
I'll
grab
that
put
it
on
the
clipboard
and
I'm
going
to
go
to
another
plunker.
A
So
this
is
bitly
/
AC
templates,
and
this
is
going
to
show
how
to
call
the
template
service
and
just
based
on
the
shape
of
this
kind
of
this
h2
of
this
json
excuse
me:
it's
going
to
go
and
find
a
template
that
can
render
it
and
then
actually
apply
the
template
just
like
I
did
before
so
there
it
works.
It's
pretty
amazing.
So
if
you
look
at
this,
it's
not
that
different
than
before,
except
I,
don't
have
a
template
JSON
right.
A
Instead,
what
I'm
doing
is
I'm
calling
the
find
service
the
adaptive
cards
find
service
and
I'm
posting
the
data
in
there
that
I
want
to
find
a
template
for
now
in
real
life.
I
would
strip
all
of
the
personal
information
all
of
the
data
out
of
here
and
just
send
in
an
empty
shell
of
the
data
to
get
the
template
and
then
I
would
have
the
date.
A
So
in
summary,
adaptive
cards
are
snippets
of
interactive
content
from
one
application
that
appear
in
a
hosting
application.
Microsoft
teams
and
outlook
are
both
examples
of
hosting
applications,
and
really
it
could
be
any
webpage
running
JavaScript
or
any
native
application.
Using
the
adaptive
cards,
SDK
for
Android,
iOS,
WPF
or
uwp
adaptive
cards
are
JSON
structures
and
there's
a
templating
library
that
allows
data
binding.
You
wish
and
an
adaptive
card
service
that
allows
finding
and
using
card
templates.
A
You
can
find
all
the
information
on
adaptive
cards
up
at
the
adaptive
card
site,
HTTP,
:
adaptive
cards
io,
the
the
bots
code
that
was
shown
in
the
demonstration
is
at
a
kms,
slash,
Consulting
button.
If
you
liked
this
video,
please
follow
this
youtube
channel
at
akms,
slash,
SP,
PNP
videos.
You
can
also
follow
me
at
the
links
shown.