►
Description
In this 15-minute developer-focused demo, Derek Cash-Peterson’s solution delivers 12 beautiful and very usable Adaptive Card Extensions (ACEs) and a personal app that shows the ACEs and how related deep links surface in Teams. Each ACE (Event scheduling, café menu, Calendar…) showcases functionality like collapsing menus, scrolling through articles, conditional formatting, UI design, etc. From the Teams app click to see ACE in Adaptive Cards Schema Explorer and alter card as desired. Step through code for Event Scheduler ACE. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 21, 2022.
Demo Presenter
• Derek Cash-Peterson (Sympraxis Consulting) | @spdcp
Supporting materials
• Samples - ace-designtemplate-gallery - https://symp.info/ACEDesignGallery
• App Store: From App Catalog - SharePoint Store - https://appsource.microsoft.com/en-US/product/office/WA200003929
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp
A
Okay,
so
I'm
presenting
today
a
project
that
I
worked
on,
the
in
conjunction
with
microsoft,
to
create
an
adaptive
card,
extensions
design
gallery
and
so
a
little
bit
about
me.
I'm
derek
cash
peterson,
I'm
a
principal
architect
at
some
practice,
consulting
we're,
a
small
consulting
company
based
out
of
boston,
but
with
offices
all
over,
I'm
also
on
the
pnp
team
and
I'm
one
of
the
co-maintainers
of
learning
pathways
and
the
spfx
aces
repo,
and
I
promise
I'll
get
to
fill
processing
those
pr's
really
soon.
A
Okay.
So
what
are
some
of
the
goals
of
the
projects
before
I
dive
in
and
start
showing
it?
The
first
thing
we
wanted
to
do
was
make
sure
that
we
provided
examples
to
show
visually
appealing
designs
in
the
quick
view.
You
know
a
lot
of
them,
especially
when,
when
aces
were
first
available,
were
very
very
stark.
They
were
black
text
white
background,
a
few
icons,
so
we
really
wanted
to
up
the
design
level
game
and
provide
some
more.
You
know
references
for
you
to
use
in
your
designs.
A
And
finally,
we
wanted
to
also
provide
an
example
of
how
to
do
localizations
for
strings
and
pull
that
data
into
the
adaptive
cards
in
the
quickview.
So
not
all
the
text
is
hard-coded
into
the
json
file
and
finally,
we
wanted
to
provide
an
example
of
how
to
do
deep,
linking
from
an
adaptive
card
extension
into
teams.
So
all
of
those
things
are
sort
of
wrapped
up
in
the
work
that
I've
been
doing
here
and
so
there's
a
couple
of
different
components
to
to
the
design
gallery.
A
The
first
is
that
it's,
it
consists
of
12
different
aces
in
one
solution.
So
when
you
download-
or
you
install
it,
you
have
the
ability
to
get
all
12
of
them
they're
all
in
there
and
you
can
sort
of
pick
and
choose
which
ones
you
want
to
put
on
your
dashboard
there's
also
a
personal
app
and
the
personal
app
is
really
there
to
serve
two
main
goals.
The
first
and
foremost
is
to
serve
as
that
spot.
A
For
that
deep
linking
to
go
to
so
you
get
to
see
when
you
click
through
from
the
aces
into
teams.
You
get
to
see
some
sort
of
identifying
information
to
indicate
the
content
that
got
pushed
through,
and
the
other
is
about
making
sure
that
it
serves
as
a
gallery
for
you
to
show
folks
whether
or
not
you're
using
the
dashboard.
A
A
But
if
that's
not
enough,
if
you
want
to
tinker-
and
you
want
to
see
what
how
we
did
stuff,
you
can
absolutely
do
that.
The
source
code
is
available
for
you
to
get
out
of
the
reference
repo,
and
so
you
can
download
it
see
what
functions
I
used
and
see
how
I
built
the
service
layer
and
all
those
kinds
of
things.
So
you
can
take
all
of
that
and
use
it
all
on
your
own
all
right.
So,
let's
see
what
this
looks
like
so
the
first.
A
The
first
thing
that
I
wanted
to
show
is
the
cards.
So
here's
the
dashboard,
it's
all
set
up.
I
sort
of
pre-filled
it
and
put
all
of
the
all
12
cards
on
at
once.
We've
got
an
event
schedule:
we've
got
sort
of
benefits,
information,
cafe,
menus
sort
of
a
covid
booster
thing,
faq's
team
calendar,
which
is
kind
of
fun
holiday
timelines,
all
12
just
sort
of
sitting
out
there.
So
here's
the
event
schedule.
You
can
see
we
here
for
this
one.
A
We
did
sort
of
a
a
tabbed
interface,
so
we've
got
sort
of
the
the
the
line
underneath
and
you
can
see
that
sort
of
tab
thing.
Along
with
the
calendar,
we've
got
the
benefits
information
which
is
more
news
based
and
and
provides
clicking
through
to
additional
or
deeper
articles.
We've
got
the
cafe
menu.
This
is
showing
sort
of
data
manipulation,
as
well
as
again
that
tabbed
interface.
A
A
A
A
A
A
So
there's
a
lot
of
these
in
here,
I'm
going
to
pick
one
to
just
sort
of
go
through
and
show
a
little
bit
more
detail
and
that's
going
to
be
the
event
schedule
so
for
this
one
you
can
click
on
it
and,
like
I
showed
before
it
has
the
the
different
calendar
events
for
each
day.
But
it's
also
going
to
register
button
at
the
bottom,
and
here
you
can
have
your
users
type
their
content
in,
so
they
can
register
for
this
particular
conference.
A
A
There's
also
information
specifically
about
adaptive
cards,
how
to
get
more
information
design
guidelines
access
to
the
sample
code.
For
this
there's
also
a
link
to
the
adaptive
card
designer,
and
what
this
does
is.
This
is
kind
of
cool.
If
you
want
to
play
with
this
on
your
own,
if
you
click
that
link,
it
actually
pre-loads
the
adaptive
card
designer
with
our
content,
and
so
you
can
sort
of
play
with
it.
A
This
is
what
it
looks
like
if
you
don't
click
in
and
connect
to
it,
to
the
personal
app
from
an
ace,
it's
a
listing
of
all
of
them,
and
so
you
can
use
this.
You
know
with
your
key
stakeholders
to
show
them.
What's
there
give
them
a
little
link
for
more
information
and
then
let
them
explore
for
themselves.
This
is
also
great
if
you
need
to
do
a
demo
for
somebody,
whether
it's
a
key
stakeholder
or
whether
it's
a
client
or
whatnot,
I'm
going
to
jump
in
and
show
the
code
in
a
minute.
A
So
I
got
a
couple
more
minutes,
I'm
going
to
show
a
little
bit
of
code,
so
the
one
thing
I
want
to
I
want
to
say
is
because
this
is
demo
and
meant
to
be
sort
of
evergreen.
For
you
to
do
your
demos,
we
we
loaded
all
the
data
into
json
files,
and
this
is
an
example
of
the
data
that
I
created.
So
you
know,
there's
an
array
of
cafeterias
and
each
cafeteria
has
their
own
type
of
cuisine.
A
Each
one
of
those
cuisines
has
an
id
a
name,
a
description,
a
food
type,
which
is
just
a
different
value
for
me
to
help
separate
it
out
in
the
layout
and
then
a
link
to
the
image
that
we're
going
to
use
in
that
that
data
is
pulled
in
using
the
service
layer,
and
so
you
can
see.
I
have
a
get
cafeteria's
function
here
in
my
service
layer
and
it's
pulling
in
the
data
that
the
data.json
file.
A
A
You
can
customize
that
for
yourself
in
order
to
generate
the
link
to
get
into
teams,
we
have
to
sort
of
do
some
massaging
of
the
data
and
I'm
creating
a
custom
object
that
I'm
passing
in,
which
is
what
we're
doing
right
here
on
this
line,
and
I
have
a
custom
object
that
I've
created
I'm
passing
in
the
name
of
the
app
so
that
all
12
of
them
can
have
a
different.
You
know
I
know
which
one's
getting
clicked
on
and
then
the
link
type
not
super
relevant
to
this
particular
example.
A
But
you
get
the
picture
that
you
can
sort
of
take
this
and
push
as
much
as
you
want
through
there.
Okay.
So
then,
if
we
move
over
to
the
adaptive
card
extension,
you
can
see
on
the
init
method,
I'm
making
a
call
to
that,
get
cafeterias
function
and
then
I'm
assigning
it
into
the
state
so
that
it's
going
to
be
available
inside
my
quick
view.
A
So
inside
the
quick
view-
and
I've
only
got
a
couple
more
minutes-
there's
a
couple
of
things
I
want
to
share
and
specifically
here
and
the
first
is
that
localization
piece.
So
what
we
ended
up
doing
here
is
in
the
data
interface
I
created.
I
created
something
called
you
know:
a
property
called
strings
and
I
assigned
a
property
of
the
adaptive
card
extension
strings,
which
is
exactly
what
you
would
use.
A
I
just
started
sort
of
prefixing
all
the
stuff
that
was
at
the
root
with
dollar
sign
root,
because,
if
you're
in
a
loop
that
can
get
sort
of
confusing,
so
I
just
wanted
from
a
from
a
consistency
standpoint,
and
I
want
to
make
sure
that
it
was
easy
to
you
know,
identify
what
was
what,
but
this
is
going
to
pull
the
value
from
the
localized
string
in
called
open
status
all
right.
The
other
thing
that
I
wanted
to
show
is
that
sort
of
toggle
menu
with
the
with
the
the
tabbed
interface.
A
So
you
can
see
here
we're
using
we're
setting
up
the
menu
header
and
then
we've
got
the
info
header.
So
one's
on
one's
off
one's
got
the
little
divider
line,
the
gray
line
underneath
it
and
one
doesn't
we're
using
the
select
action,
we're
using
action.toggle
visibility
and
so
we're
showing
and
hiding
different
elements
of
the
card
when
that
element
is
clicked,
and
so
that
way,
there's
no!
You
know
you
don't
really
need
to
go
back
and
do
any
work
there.
A
A
If
you
need
to
pass
data
to
your
adaptive
card
extension
to
a
loop
like
if
you're
going
to
loop
through
something
you
can
do,
use
the
dollar
sign
data
property,
and
then
you
can
put
in
your
array
and
in
this
instance
I
had
one
array
of
cuisines,
but
I
wanted
to
split
it
out
into
two
different
categories,
and
so
I'm
using
the
built-in
function
called
where
right
here
and
passing
in
the
array
of
cuisines.
Now
there's
10
things
in
there.
A
All
of
them
have
a
different
food
type,
and
so
we're
going
to
go
in
and
this
particular
column
set,
is
going
to
use
a
subset
of
the
cuisine
items
where
the
food
type
is
equal
to
special.
So
you
don't
need
to
do
all
of
this
processing
on
the
back
end,
you
may
decide
you
want
to
you
know
in
your
ts
file,
but
you
can
also
do
it
as
well
inside
your
quickview,
and
I
think
that's
about
it.