►
Description
In this 19-minute developer focused demo, Loki Meyburg delivers a brilliant overview on a unified developer experience - power everything in Teams with a Bot back-end and an Adaptive Cards front-end with chat bots, messaging extensions, task modules and tabs! Step through setting up a Bot in Azure, building a tab with Adaptive Cards, adding a new card - creating card in Designer and copying JSON into VS Code, and finally rendering new card in Tab. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 16, 2021.
Demo Presenter: Loki Meyburg (Microsoft) | @LokiMeyburg
Supporting materials:
• Documentation - Build tabs with Adaptive Cards | https://docs.microsoft.com/microsoftteams/platform/tabs/how-to/build-adaptive-card-tabs
• Designer - adaptivecards.io/designer | https://adaptivecards.io/designer
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
A
A
Therefore
they
don't
work
easily.
On
mobile.
We
also
frequently
hear
about
slow
load
times.
Sometimes
this
is
because
of
the
fact
that
it's
embedded
in
an
iframe,
but
that
could
also
open
up
a
host
of
other
constraints
depending
on
how
the
web
app
is
built.
Finally,
there
are
usually
a
host
of
other
hidden
maintenance
costs.
This
is
because
some
developers
actually
have
a
fork
of
their
primary
web
app
running
in
teams,
but
other
issues
tend
to
crop
up
too,
such
as
making
accessibility
work
or
just
trying
to
figure
out
azure
active
directory
single
sign-on.
A
Another
benefit
of
using
adaptive
cards
is
that
teams
and
the
adaptive
card
team
are
investing
heavily
in
their
future,
so
take,
for
example,
some
of
these
new
or
coming
soon
ui
features.
This
past
year
we've
launched
support
for
form,
validation
and
the
ability
to
use
a
people
picker
coming
soon,
we'll
also
be
releasing
an
overflow
menu
which
will
make
it
easier
for
you
to
create
drop-down
actions
and
adaptive
cards.
There
have
been
many
improvements
made
over
the
last
year
too,.
B
A
A
You'll
see
what
it
looks
like
on
mobile
and
overall
you'll
notice
that
it
just
looks
a
lot
more
native.
This
is
because
adaptive
cards
are
styled
to
look
right
at
home
in
teams
so
before
we
jump
into
the
demo.
I
just
want
to
spend
a
few
minutes
talking
about
some
of
the
architectural
decisions
we
made
along
the
way
and
the
developer
experience.
A
So
this
is
how
most
teams
apps
start.
The
developer
builds
a
bot
because
that's
the
easiest
way
to
get
started
and
with
that
bot,
they're
able
to
power
a
number
of
teams,
capabilities
such
as
chat,
bots,
messaging
extensions
or
even
show
dialogues
called
task
modules.
This
is
all
powered
by
a
bot
back
end
and
an
adaptive
card
front
end
a
few
months
later,
along
comes
their
manager
and
they
they
ask
them
to
build
a
tab
because
they've
heard
the
tabs
get
better
engagement
and
they
like
how
they
look
okay.
A
So
let's
look
at
what
that
looks
like
now.
The
app's
architecture
is
fractured.
The
developer
had
to
spin
up
a
separate
web
server
to
host
their
tab
app
and
they
had
to
build
the
front
end
using
you
know
the
usual
set
of
web
tools.
Perhaps
they
wrote
some
glue
codes
so
that
their
back-ends
can
talk
to
one
another
at
the
end
of
the
day.
Not
only
could
you
not
reuse
your
previous
investments
but
you're
now
on
the
hook
for
maintaining
two
different
stacks?
A
So
wouldn't
it
be
easier?
If
you
could
do
something
like
this,
I
think
that
looks
much
better.
So
what
if
you
could
power
everything
in
teams
with
a
single
bot
back
end
and
an
adaptive
card
front
end?
So
this
is
the
unified
developer
experience
that
adaptive
card
based
tabs
aims
to
solve.
Now
you
can
reuse
your
previous
investments
and
enable
everything
from
a
chat
box
to
a
teams
tab.
Let's
talk
quickly
about
just
some
of
the
developer
paradigms
that
you
can
expect
so
adaptive
card
based
tabs
should
be
a
welcome
new
capability
for
bot
developers.
A
When
we
were
thinking
about
how
we
wanted
to
structure
the
developer
experience,
we
looked
at
task
task
modules
for
inspiration,
and
we
did
this
for
two
reasons.
First,
task
modules:
they're
going
to
be
used
quite
heavily
from
your
tab,
so
this
will
just
make
the
development
experience
more
familiar
and
then,
secondly,
task
modules
rely
on
something
called
invoke.
Events,
an
example
invoke
event
is
task
fetch,
so
you
can
extrapolate
task
fetch
to
other
events
like
tab
fetch.
A
A
A
So,
let's
take
a
look
at
the
flow
diagram
in
the
first
section,
the
user
clicks
on
the
app
and
and
teams
sends
a
tab,
fetch
event
to
the
bot.
The
event
basically
says:
hey
bot,
I'm
the
home
tab
and
the
user
is
john
smith.
Can
you
please
return
the
cards
you
want
me
to
show
to
them.
The
bot
back-end
then
does
some
work
and
returns
an
array
of
adaptive
cards.
These
cards
are
then
rendered
to
the
screen,
one
after
the
other
in
the
tab
itself.
A
A
Let's
see
before
I
jump
in
to
the
actual
code,
just
some
housekeeping.
How
did
I
get
here
so,
to
start
with,
I
set
up
a
bot
in
azure,
and
I
just
want
to
spend
a
few
seconds
talking
about
the
configuration
panel
over
here,
you'll
notice,
I'm
running
this
on
ngrok,
just
for
local
development
and
I'll
get
back
to
this
microsoft,
app
id.
I
want
to
jump
into
the
oauth
section,
real
quick.
I
had
to
set
up
oauth
here.
You
see
the
same
microsoft,
app
id.
A
A
Okay,
so
into
the
code
itself,
the
first
change
you're
going
to
notice
is
we
now
allow
you
to
have
a
property
called
content
bot
id
under
your
static
tabs
property.
We
used
to
have
a
well,
we
used
it.
We
still
have
a
property
called
content
url
that
renders
a
url
to
the
tab.
But
now
we
allow
you
to
put
a
content
bot
id.
That's
that
microsoft.
A
You
know
app
id
or
client
id
that
I
was
just
showing
you
in
azure
earlier
and
basically,
what
this
says
is
when
I
go
to
this
home
tab
instead
of
rendering
a
url
send
a
message
to
this
this
little
bot
over
here.
So
I'm
going
to
jump
into
that
real
quick.
I
have
the
the
app
running.
This
is
just
what
the
sample
looks
like
out
of
the
box
when
you
get
it
up
and
running,
not
pretty,
but
it's
really
here
for
illustration
and
for
instruction
purposes.
A
So
next
thing
I
want
to
do
is
I'm
going
to
go
back
into
my
project.
Let
me
just
stop
my
little
server
here.
I'm
going
to
go
over
to
the
file
called
adaptive
cards.
You'll
notice,
it's
under
the
server
models.
Folder
in
here
is
a
bunch
of
bunch
of
methods
you
can
find,
but
I'm
really
going
to
be
looking
at
the
create
fetch
response.
This
basically
returns
a
response
to
the
bot
over
here.
You'll
see
two
cards.
A
A
So
if
you
recall
that's
this
one
up
here,
we
want
to
return
this
little
adaptive
card
over
here.
So
what
I
did
before
this
call
is,
I
went
into
the
adaptive
cards
designer
and
I
went-
and
I
created
this
little
card
over
here
down
over
here-
is
the
json
for
that
card.
I'm
just
going
to
copy
this
and
go
back
into
bs
code,
and
I'm
just
going
to
throw
this
in
here.
A
And
voila
there
you
go.
This
is
my
little
adaptive
card
that
I'm
returning
so
in
this
in
this
case,
what
what
what
I
went
and
did
was,
I
went-
and
I
said
I
wanted
to
add
a
a
new
adaptive
card
on
the
top
of
this
vertically
stacked
list,
so
just
want
to
dig
into
it
a
little
bit
more
into
this
demo.
There's
already
some
descriptive
text
over
here
to
let
you
know
how
you
can
do
some
things
inside
of
the
demo.
I
want
to
just
go
through
task
modules.
A
Task
modules
are
a
great
way
to
complete,
as
the
name
says,
little
tasks
so,
for
example,
this
little
demo
doesn't
do
anything,
but
one
of
the
things
that
it
allows
me
to
do
is
after
I'm
I've
completed
a
task
I
can
redraw
what's
behind
here
now
in
this
demo,
it's
pretty
contrived.
It's
just
going
to
return
one
adaptive.
B
A
One
little
card
just
with
a
little
bit
of
some
information
about
what
happened
behind
the
scenes,
but
if
I
wanted
to
you
know
in
this
example,
I
have
favorites,
I
could
have
a
button
that
says:
add
favorite
open
up
a
little
dialogue.
Choose
who
my
new
favorite
person
is.
Click
click
done
and
then
have
this
little
section
be
updated
here
with
my
fourth
and
favorite
contact.
A
So
moving
on
from
that,
I
want
to
jump
back
in
here.
I
want
to
just
talk
about
some
of
the
nuances
with
respect
to
how
you
handle
task
module
dialogues
from
your
tab.
So
the
good
news
is:
is
that
there's
no
change
to
invoking
a
task
module,
but
something
to
keep
in
mind
is
that
when
the
task
module
completes
or
task
submit,
you
will
be
returning
a
set
of
adaptive
cards
to
re-render
to
the
screen.
So
in
order
to
do
this,
you
will
be
nesting.
Your
tab
object
inside
a
task
object.
A
This
is
kind
of
done
for
syntactical
reasons,
because
the
original
request
was
a
task
fetch.
The
bot
framework
expects
a
response.
Parent
object
to
be
of
type
task,
just
something
to
keep
in
mind.
Alternatively,
you
could
just
return
200,
okay,
close
a
dialog
and
not
redraw
anything
to
the
tab.
Finally,
there
are
some
drawbacks
or
shortcomings.
If
you
will
that
I
want
to
point
out,
you
may
have
noticed
that
I
only
showed
personal
app
tabs.
That's
because
we
don't
yet
support
the
adaptive
card
based
tabs
in
group
settings
such
as
chats
channels
or
meetings.
A
A
Finally,
the
developer
experience
can,
I
don't
feel
a
little
reminiscent
of
the
request
response
flow
of
web
apps,
circa
2005,
there's
basically
no
way
to
asynchronously
update
the
contents
of
the
tab.
Don't
worry
we're
thinking
through
all
of
these
think
of
these
perhaps
less
like
drawbacks
and
more
like
a
road
map
of
what's
to
come
thanks.
Everyone
for
sticking
with
me
until
the
end
here
is
a
short
link
to
the
documentation
and
where
you
can
find
the
sample
app.
I
showed
you
during
the
demo,
just
visit
aka
dot,
ms
slash
adaptive
card
tabs.
B
C
A
No
not
that
I'm
aware
of
no
okay.
Well,
I
mean
you
know
the
usual
ones
like
your.
Your
admin
might
need
you
to
be
able
to.
You
know,
side
load,
applications
for
development
purposes,
but
if
you
spin
up
one
of
the
m365
developer
tenants
and
set
that
up
for
teams
development,
you
should
be
able
to
get
going
out
of
the
box.
There's
no
special
restrictions
that
I'm
aware
of.
C
A
C
A
A
B
Yeah,
it's
it's
a
bit
of
compliment.
This
is
not
by
the
way
sharepoint
audience.
This
is
microsoft,
trace
it's
about
platform,
community
called
a
sharepoint
audience
for
sure,
but
now
there
are
ways
of
showing
adaptive
cards
in
in
the
and
using
out
of
the
cards
in
the
weaver
connections,
which
is
a
bit
of
a
kind
of
a
well
behind
of
the
sense
that
sharepoint
still
so
there's
a
there's
ways
of
doing
this,
but
it's
not
natively
as
such.
In
a
web
part
experience
in
sharepoint
online
okay
got
it.
C
C
A
With
some
work,
I
have
seen
some
wizardry
from
the
adaptive
cards
team
themselves.
They
have
been
able
to
create
some
really
awesome
components.
I'm
sure
if
you
want
snooping
on
github
or
you
found
some
of
the
github
projects
from
some
of
the
adaptive
cards
teams,
you
will
most
certainly
find
the
ability
for
there
to
be
tabs.
I've
seen
it.
A
I
just
know
that
it's
not
something.
That's
like
natively
supported
out
of
the
box.
You
have
to
do
some
adaptive
card
wizardry
to
make
that
work.
However,
I
will
say
that
I
have
seen
demos
or
I'd
rather
say
prototypes,
that
some
of
our
other
partners
have
built,
as
they
were
kicking
the
tires
and
they
built
tab
like
interfaces.
A
So,
for
example,
we
had
one
actually
one
of
our
spfx
partners
build
a
prototype
where
they
had
a
a
list
up
at
the
top
of
there
were
buttons,
but
they
kind
of
behaved
more
like
tabs,
where
you
could
switch
between
different
catalogs.
They
built
like
a
little
shopping
app,
so
you
could
flip
between
shoes
and
tennis
rackets
and
go
go
to
your
shopping
cart
and
they
they
did.
They
were
able
to
facilitate
that
kind
of
tab
like
interface
with
these
adaptive
card
base,
tabs.