►
From YouTube: Viva Connections – Adaptive Card Showcase Gallery
Description
In this 19-minute developer-focused demo. The art-of-the-possible is revealed by Derek Cash-Peterson! Layout options on 11 Adaptive Card Extensions (ACE). Layouts - agenda, company news, expense report, flight itinerary, form sample, image rotator, stock ticker, task list, Twitter card, video card and weather. Focusing specifically on video card, it was initially created/tested in Adaptive Cards Designer. Then the JSON was copied into the ACE. Handling dynamic data is discussed in Q&A. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 18, 2021.
Demo Presenter: Derek Cash-Peterson (Sympraxis Consulting) | @spdcp
Supporting materials:
• Repo - ace-cardgallery | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ace-cardgallery
• Adaptive Cards - Samples and Templates | https://adaptivecards.io/samples/
• Adaptive Cards – Designer | https://adaptivecards.io/designer/
• Video Demo - Building a COVID attestation solution for Microsoft Teams and Viva Connections with SPFx | https://www.youtube.com/watch?v=SAITSnFiAg8
• Sample - Covid Self-Attestation Microsoft Teams Personal App | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-teams-covid
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
So
I
have
a
couple
of
things
that
I
want
to
show
on
the
slide
first.
So,
as
david
said,
I'm
going
to
show
an
adaptive
card
showcase
gallery
that
I
created
I'm
derek
cash
peterson.
I
work
at
some
praxis,
consulting
I've,
just
newly
joined
the
pnp
team,
and
I
help
david
curate,
the
the
samples
for
the
for
the
aces
repo,
as
well
as
do
some
of
the
code
maintenance
on
learning
pathways.
A
So
I
wanted
to
talk
a
little
bit
about
what
I
built
and
why
I
did
it
so
first.
I
wanted
to
really
use
this
as
an
opportunity
to
show
the
art
of
the
possible
with
aces
from
a
visual
perspective,
and
so
I
focused
on
the
adaptive
card
layouts
over
functionality.
So
it's
really.
It's
really
focused
on
the
templates
and
being
able
to
quickly
and
easily
show
someone
who's,
maybe
not
so
technical.
A
What
you
can
do
with
aces
and
then
go
on
the
back
end
and
sort
of
build
it
out
later
and
it's
available
in
the
repo
with
an
sppkg
file.
So
you
don't
need
to
build
anything.
You
can
just
download
the
file
and
then
upload
it
to
the
gallery
to
the
to
the
app
catalog.
So
all
the
data
that
you're
going
to
see
in
here
right
now
it
stands
alone
and
they're
all
json
based
data
structures.
A
So
you
know,
there's
no,
there's
no
back-end
connection
to
sharepoint,
there's
no
back-end
connection
to
list,
but
you
can
certainly
add
that
there's
a
there's,
a
services
layer
that
helps
you
do
that
and
finally,
rather
than
reinvent
the
wheel
from
a
ui
perspective,
I
went
ahead
and
I
used
the
adaptive
card
samples
gallery
as
my
starting
spot.
I
took
some
liberties
and
sort
of
made
them
a
little
more
sharepointy
or
added
some
different
navigation
elements,
but
I
really
used
that,
as
my
my
core
nugget
to
to
start
with.
A
A
So
I
created
an
agenda
extension,
a
company
news,
an
expense
report,
flight
itinerary,
a
sample
for
forms,
an
image,
rotator,
a
stock
ticker,
a
list
of
tasks
that
you
can
edit
with
a
twitter
card,
a
video
card
and
a
weather
card
and
sort
of
each
of
these
show
different
elements,
and
I
tried
to
really
focus
and
use
different
components.
So
summer
picture
some
are
text.
Some
are
just
you
know
the
the
basic
card,
so
I
really
wanted
to
show
a
broad
spectrum
of
the
different
ones
that
are
out
there.
Okay.
A
So
what
I'm
going
to
show
you
today
is
I'm
going
to
try
to
focus
on
the
video
card
as
well
as
really
look
at
what
the
different
components
are
and
how
I
got
there
all
right.
So
enough
of
that.
So
so
this
is
my.
This
is
my
dev
tenant,
and
this
is,
if
you
can
see
over
here,
on
the
right
hand,
side.
This
is
the
dashboard
and
I
put
all
11
of
them.
A
You
can
loop
through
different
ones,
and
I
I
took
some
liberties
from
patrick
rogers
code
from
the
demo.
He
did
a
few
weeks
ago
to
like
and
unlike
different
different
news
articles
as
well
as
provide
a
link
to
the
full
article
part
of
the
ability
to
sort
of
view,
different
tasks
and
provide
different
updates
on
that.
So
you
can
come
in
and
you
can
edit
the
task
and
then
reassign
the
data,
the
different
items,
the
exp,
an
expense
report
that
shows
you
sort
of
different
things.
A
The
I
did
want
to
one
of
the
things
that
challenged
me
was
dealing
with
form
elements,
so
I
wanted
to
provide
a
generic
sample
of
how
to
deal
with
different
form
elements.
So
here's
a
sample
for
this
with
a
bunch
of
text
boxes,
a
multi-line
text
box,
some
numbers
a
date,
a
date
picker
a
time
picker
as
well
as
some
input
input
fields,
we've
got
a
drop
down.
A
A
Everybody
loves
stock,
tickers
and
and
weather
web
parts.
So
we've
got
the
microsoft
stock
ticker
as
well
as
the
weather
web
part
or
sorry,
I
keep
saying
the
web
part.
We've
got
the
weather
widget
that
will
show
the
different
weather
in
the
different
cities
that
you
let
you
go
there
and
then.
Finally,
the
one
I'm
going
to
look
at
today
is
the
is
the
videos
I
call
this
one
product
highlights.
A
So
you
can
rotate
through
the
different
videos
in
here
and
then
play
the
video
oops
play
the
video
right
there
in
line
inside
the
ace-
and
you
know
you
could
use
this
for
product
imagery.
You
know
product
videos.
You
could
also
use
this
for
learning.
So
if
you
had
a
video
like
a
training
video,
you
could
do
that
as
well,
but
it
really,
you
know,
provides
sort
of
this
rotating
ability,
but
also
the
ability
to
show
video
right
there
in
the
screen.
A
So
I
wanted
to
spend
a
few
minutes
and
show
that
sort
of
how
I
got
from
point
a
to
point
b.
I
know
we've
talked
a
lot
about
aces
in
the
last
few
weeks
but,
like
I
said,
I
used
the
samples
gallery,
adaptive
cards,
dot,
io
samples,
and
you
can
see
there's
a
huge
number
of
samples
in
here.
So
there's
calendar
reminders
there's
flight
itineraries,
and
some
of
these
are
where
I
got
my
inspiration.
A
So
this
particular
one
was
the
product
video,
and
so,
if
you
haven't
looked
at
this,
it's
definitely
a
great
place
to
start
for
for
aces,
because
it
gives
you
an
opportunity
to
see
it.
Working
and
then
also
see
the
guts
behind
it,
so
they
provide
the
data
structure
here
and
you
can
see
there's
a
lot
of
data
in
there.
I
did
take
some
liberties
with
the
data
and
trimmed
it
down
to
just
what
I
needed
and
then
the
real
nuts
and
bolts
of
it
is
the
template.
A
A
A
A
I
am
setting
the
collection
of
videos
and
the
current
index
into
the
state,
so
I
want
it
to
start
with
the
first
one.
If
you
wanted
it
to
be
random,
you
could
just
get
a
random
number
from
the
index
of
the
videos
and
then
set
it
here
and
then
I
have
to.
I
have
to
register
the
two
cards,
the
first
being
the
card
right
here
and
the
second
being
the
the
quick
view.
A
A
The
other
thing
that
I'm
setting
is
the
what
happens
when
you
click
on
it,
and
that's
here
that's
set
here
and
you
do
that
by
specify.
So
in
this
instance,
I'm
going
to
the
quick
view,
so
we
have
to
use
type
of
quick
view
and
set
the
parameters
of
the
registry
id
that
we're
passing
it
to.
So
I'm
setting
that.
So
when
you
click
on
the
on
the
card
view,
it
opens
the
quick
view.
The
quick
view
which
I'll
move
over
here.
A
So
the
data
object
here
is
just
the
video,
so
it's
the
video
object
that
I
created
in
the
data
model
and
so
we're
passing
that
so
the
first
thing
we
do
when
we
get
the
data
is
get
get
it
out
of
the
array
from
the
state,
so
we're
getting
this.state.video
and
we're
getting
the
current
index
and
then
we're
passing
in
the
entire
video
object,
we're
getting
the
template
and
I'll
show
you
the
template,
and
so
again
I
started
this
the
exact
same
way.
I
just
showed
you.
A
I
worked
all
of
this
out
in
the
adaptive
card
designer
I
added
in
the
the
forward
and
next
buttons
and
so
forth,
and
then
I
pulled
it
all
over
into
my
template
here.
One
thing
I
did
sort
of
run
into
is
that
the
way
the
the
adaptive
card
designer
works,
it
has
different
functions
for
date,
time,
formatting
and
stuff
like
that.
A
Those
didn't
work,
so
I
ended
up
doing
all
my
date
time
formatting,
when
I
did
like
news
and
stuff
like
that
in
in
my
quickview.ts
file
and
then
just
passed
it
as
a
string.
So
you
can
see
here.
I
I
set
up
the
the
arrows,
so
in
this
first
row
I've
got
the
column
set
that
has
three
columns
in
it.
I've
got
the
image
type
with
the
the
svg
for
the
previous
button,
and
then
I
have
to
tell
it
what
to
do
when
you
click
on
it.
A
A
A
So
it's
got
the
thumbnail
url,
but
it
also
needs
the
video
url.
So
we
give
it
the
mime
type.
This
is
using
an
mp4
and
then
we
pass
in
the
url.
It's
all
in
the
video
object
that
gets
passed
into
the
template,
and
then
we
pass
in
the
title
and
the
description
and
then
finally,
another
action
set.
So
this
is
another
button.
A
This
time
we're
going
to
do
open
url,
so
you
can
see
action
open,
url
and
this
will
open
the
link
to
see
more
to
a
different
asset
and
then
finally,
we
want
the
next
button,
and
so
the
next
button
is
over
here.
This
has
an
svg
for
the
right,
the
right
chevron
and
the
action
submit
here
is
next,
and
these
are
important.
These
action
submits
are
important,
because
when
we
go
back
to
our
ts
file,
we
have
to
tell
it
what
to
do
with
them
when,
when
those
are
clicked,
we
have
one
on
action
method.
A
So
we
have
to
get
the
data
from
the
submit
itself
and
that's
our
action
right
here
and
then
we
need
to
figure
out
what
what
type
of
action
it
is,
and
so
it's
a
submit.
There's
open,
url
action
as
well.
So
if
we
wanted
to
do
something
before
we
went
to
a
different
location,
we
could
do
that,
but
I'm
grabbing
the
data
out
of
it
and
then
the
previous
and
the
next
buttons
these
really
get
the
current
state.
A
B
C
Additional
context,
don't
stop
sharing.
I
want
to
ask
few
things.
So
there
was
a
good
question
actually
from
jim
duncan
related
on.
Do
we
have
a
managed
metadata
picker
for
the
controls
in
the
forms
and-
and
the
thing
is
these-
are
not
really
controls
so
just
to
be
clear
on
what
we're
doing
here.
Sharepoint
framework
works
as
an
orchestrator
between,
but
then
the
ux
layer
is
always
rendered
by
the
adaptive
cards.
An
audacity
card
is
just
a
it's,
basically
a
drop
down,
or
it's
a
selection
thing
or
in
the
form.
C
If
you
push
out
the
form
sample
eric,
so
there's
a
certain
set
of
card
controls
and
all
of
that,
but
there
is
no
managed
metadata
control,
because
adaptive
card
does
not
manage
metadata
aware
because
adapter
card
is
more
it's
it's
not
a
service
aware.
It's
it's
basically
a
data
type
aware,
but
of
course
we
would
be
able
to
fill
in,
for
example,
in
a
drop
down
or
in
a
radio
box
or
in
a
check
box.
C
As
part
of
the
spfx
code,
so
just
to
kind
of
clarify
on
that
one,
because
I
think
one
of
the
things
especially
direct
this
is
absolutely
awesome
sample.
But
as
we
as
we
always
show
about
that
after
card,
we
always
like
hey,
here's,
the
design
and
here's
the
design,
template
and
here's
the
content
json,
and
then
they
smash
them
together.
And
then
quite
often,
people
ask
the
question
well,
but
but
my
content
is
dynamic.
How
do
I
make
that
happen?.
A
A
So
the
task
one-
and
I
did
I
I
pulled
this
together
for
this.
For
this
reason,
we
can
actually
manipulate
in
code.
We
can
manipulate
the
template,
so
if
you,
for
instance,
have
dynamic
data,
if
you
have
a
list
of
questions
or
a
list
of
things
that
you're
reading
out
of
sharepoint
or
you're
listing
you
know
getting
from
the
graph,
you
can
actually
get
all
that
data.
A
Let
me
close
this,
so
you
can
read
the
template
in
directly
and
make
it
an
object
in
your
in
your
ts
file,
and
then
you
can
manipulate
the
different
aspects
of
it.
So,
in
this
instance
I've
pulled
together.
I
I
I
imported
the
template
and
then
I
created
an
array
and
inside
the
array,
I'm
pushing
different
objects.
So
a
text
box
a
a
and
a
text
label
an
answer,
a
text
box
field
a
date
picker.
A
So
this
is
a
little
different,
but
if
you
could
imagine
each
one
of
these
objects
right
here,
if
we
go
up
actually
has
the
properties
that
it
would
need
if
it
was
just
if
you
just
wrote
it
out
in
the
json,
so
it's
got
an
id,
it's
got
a
value
and
it's
got
a
type,
and
so,
if
you
want
to
dynamically,
create
your
template,
you
can
absolutely
do
that
in
your
template
method
and
then
in
this
instance.
What
I
did
was
I
just
grabbed.
I
took
the
template.
A
So
if
you
could
sort
of
use
your
imagination
here
and
you
could
go
out
and
you
could
read
a
bunch
of
questions
that
have
text
boxes
or
radio
buttons
or
what
have
you
from
the
graph
or
from
a
sharepoint
list,
you
could
then
stuff
them
in
here.
If
you
want
a
different
if
you're
interested
in
a
different
sort
of
real
working
example,
julie-
and
I
built
the
covid
attestation
app-
which
we
demoed
in
this
call
a
few
months
ago-
and
that's
actually
doing
exactly
that
for
the
ace.
C
Excellent
thanks
directly.
I'm
sorry!
Sorry
if
I
put
you
on
a
spot
together,
because
it's
just
that
we
understand
how
we
built
the
the
content
and
a
template
dynamically
based
on
the
content.
What
we
have
because
that's
the
key
here,
the
sharepoint
framework
is
not
responsible
of
the
ux,
it's
responsible
for
the
so-called
orchestration
between
the
data
and
the
adapted
card
ux,
because
adaptive
cards
they
need
to
be
filled
in
and
coordinated
by
some
object.
C
Is
it
a
bot
or
in
this
case
it's
it's
of
course,
a
sharepoint
framework
component,
which
is
behind
the
scenes
working
here.
So
really
really
good,
really
awesome
stuff,
and
thank
you
thank
you
for
showcasing
how
it's
actually
being
done
so
really
good
stuff,
all
right
cool
thing,
david
doing
sorry
for
mixing
and
jumping
in.
B
No,
no,
this
is
great
we're
ahead
of
schedule
and
it
was
good
clarity
and
everything
so
fantastic
work
and
just
to
emphasize
these
are
all
free,
11,
amazing
aces.
I
mean
enough
to
just
jump
start
you
initially,
so
don't
don't
hesitate
to
take
advantage
of
them
and
again,
if
you
have
any
questions
they
are
in
the
repo.
So
you
can
post
issues
with
questions
and
we
will
be
there
to
assist
you.