►
From YouTube: Introduction to Adaptive Card Studio VS Code extension
Description
In this 6-minute developer focused demo, Tim Cadenbach takes you through the Visual Code extension that makes it easy to add to and work with Adaptive Cards in your project. The Adaptive Cards button exposes all Adaptive Cards resident in your workspace. Within the extension, you can see and download samples (code, example, snippets, container) from AdaptiveCards.io. Today you can send a card (layout, sample, json) to recipient in Outlook and soon Teams. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on February 17, 2022.
Demo Presenter: Tim Cadenbach (MAXIMAGO) | @TimCadenbach
Supporting materials:
• Community site - MadeWithCards.io | https://www.madewithcards.io/
• Site – MAXIMAGO | https://maximago.de/
• Visual Studio Marketplace - Adaptive Card Studio | https://marketplace.visualstudio.com/items?itemName=madewithcardsio.adaptivecardsstudiobeta
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
My
name
is
tim
khanmah
mvp
for
developer
technologies,
working
on
and
with
a
lot
of
things
related
to
adaptive
cards
since,
probably
two
years
roughly,
I'm
also
the
creator
of
made
with
cards
io,
just
a
community
page
which
has
various
adaptive
card
samples
links
to
blocks
just
have
a
look
at
it.
The
extension
we
are
talking
about
is
also
linked
on
on
the
page.
A
So
without
further
ado,
when
you
install
the
extension
to
vs
code,
you
get
a
few
nice
features
when
you're
working
with
adaptive
cards.
First
of
all,
I'm
just
a
regular
repository.
I'm
working
on
some
ujs
application
doesn't
really
matter
in
there.
I
have
a
couple
of
adaptive
cards.
So
what's
new,
when
you
have
the
extension
installed,
you
have
that
adapted
cut
button.
Here
you
go
there
and
it
shows
you
automatically
all
the
adapter
cards
you
have
in
your
in
the
open
workspace.
A
It
does
that,
but
it's
just
scanning
all
json
files.
You
have
in
your
currently
workspace
and
just
tries
to
identify
if
that
json
file
is
an
adaptive
card
or
not,
and
if
it's
an
adaptive
card
it
gets
listed
here,
it
also
allows
you
to
download
and
directly
use
all
the
samples
we
have
only
made
with
cards
io
website
to
view
it
as
a
starting
point
pretty
much
so
you
can
just
browse
the
samples
we
have.
A
Let's
take
just
this
as
an
example
you
put
in
your
own
name,
whatever
it
is
and
as
you
can
see,
zoomed
it's
pretty.
That
is,
as
you
can
see,
it
just
shows
you
the
adaptive
card
on
the
right
side.
It
shows
you
the
the
the
code
for
the
adaptive
card
and
it
also
gives
you
the
sample
data,
that's
used
and
whatever
you
do,
if
you
change
the
data
around,
for
example,
it
automatically
updates
the
card.
A
If
you
change
the
the
template
itself,
it
also
it
also
automatically
updates
the
card.
So,
while
working
on
on
the
json
code
in
vs
code,
you
can
directly
see
the
adaptive
card,
you
can
see
the
updates
you
can
play
with
the
with
the
card
yeah
and
just
make
it
a
lot
easier
to
work
with
adaptive
cards
from
a
developer
perspective
pretty
much
because
the
json
is
probably
more
towards
developers
than
pure
designers.
A
We
also
added
a
few
nice
convenient
features.
Let's
call
them
that
if
you're
starting
with
a
brand
new
card,
you
can
just
use
the
various
snippets
we
have
in
there,
you
can
start
with
a
snippet
for
a
card
example
or
you
can
say
no.
I
just
want
to
start
with
the
with
a
blank
collective
card,
so
it
gives
you
the
rough
boilerplate
you
need
to
have
for
another
card
or
just
card
elements
as
snippets
to
make
it
easier
text,
text
block
or
like
a
container
whatever,
so
it
really
it.
A
A
A
Oh,
I
have
it
open
somewhere
and
there
you
are,
and
when
you
send
the
card
to
outlook
you
just
get
it
sent
as
it
is
in
outlook,
outlook
renders
the
card,
and
you
also
get
the
json
layout.
You
use
adjacent
templates,
you
use
for
the
card
and
you
get
the
sample
data
you
used,
and
then
you
have
the
card
rendered
in
in
outlook
and
we
are
currently
doing
the
same
for
for
teams.
That's
not
there
yet,
but
it's
coming
pretty
soon.
A
So,
basically,
what
the
extension
does
is
it
allows
you
to
work
with
adaptive
cards
a
lot
faster,
a
lot
easier.
If
you
have
cards
like
in
a
git
repository
or
whatever
you
can
even
work
on
them
properly
together,
that's
pretty
much
it.
I
hope
it
wasn't
too
fast.
If
you
have
any
questions
like,
I
guess
I
have
still
have
like
a
couple
of
minutes.
Left
yeah.
B
Actually,
you
know
what
would
you
would
you
mind
just
bringing
up
a
web
page?
I
put
the
link
in
the
chat,
but
you
may
have
it
handy
there
that
shows
just
the
adaptive
card
studio
in
the
visual
studio
marketplace,
so
we
can
get
it
in
the
picture
and
everybody
kind
of
see
what
they
know.
They're.
Looking
for.
A
So
it's
on
it's
on
the
made
with
cards
page
so
yeah.
If
you
haven't
seen
that
one,
that's
always
worth
a
visit,
we
have
a
ton
of
sample
cards
here.
That's
the
same.
You
have
in
in
visual
studio
code.
We
also
have
that
the
link
here
to
the
to
the
visual
studio
code
itself,
to
the
extension
and
if
you
go
there,
there's
that
the
adaptive
card
studio,
that's
the
name
of
it.
A
It
also
says
it's
made
with
made
with
cards
audio
and
that's
the
official
page
on
the
visual
studio
code,
extensions,
the
one
thing
you
might
see
somewhere,
it's
named
its
name
vita
at
the
end,
that's
like
we
were
not
able
to
change
that.
It
was
initially
in
beta.
We
were
hoping
to
change
that,
so
it
is
the
original
version,
even
if
it
says
beta
here,
it's
a
full
version.
B
B
A
The
one
thing-
maybe
maybe
I
can
get
some
feedback
on
that-
I
don't
I
don't
know
the
one
thing
with
teams
is
right.
Now
we
we
are
working
on
a
bot
because
technically
you
right
now
to
send
a
card.
You
need
a
bot.
We
we're
hoping
to
be
able
to
use
the
the
app
studio
extension
in
in
teams.
We're
still
talking
to
microsoft,
about
that,
or
I'm
still
talking
to
microsoft,
about
that.
A
If
we
can
use
it,
if
I
can
use
it,
but
by
the
looks
of
it
I
would
need
to
have
a
yeah.
A
new
bot
and
people
would
have
to
install
the
bot
to
use
it
and
the
only
question
I
have
if
people
have
any
concerns
with
doing
that,
so
pretty
much.
If
you
want
to
send
it
to
teams,
you
might
need
about
to
use
it.