►
Description
In this 11-minute developer focused demo – Patrick Rodgers builds on his previous 2 ACE demos by combining the principles of State and Lightweight/Immediate/Personal to make dynamic (live tile-like) experiences in cards. Three ACE's highlight capabilities - text updates, dynamically created SVG images, and rotating content as simple ways to liven up the appearance of your ACE's. Observe code similarities across cards (set a state, use a timer, update state, render result). By design each ACE maintains its own state, autonomous cards. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 8, 2022.
Demo Presenter: Patrick Rodgers (Microsoft) | @mediocrebowler
Supporting materials:
• Sample - ace-dynamic-card | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-dynamic-card
• Documentation - Overview of Viva Connections Extensibility | https://docs.microsoft.com/sharepoint/dev/spfx/viva/overview-viva-connections
• Samples - Viva Connection Adaptive Card Extensions (ACEs) sample repository | https://github.com/pnp/sp-dev-fx-aces
Previous demos from Patrick Rodgers | @mediocrebowler - Adaptive Card Extensions series
• When to build Viva Connections Adaptive Card Extensions – 25th of January | https://youtu.be/F5JcbIlxSpo?t=1562
• Deep dive on Viva Connections Adaptive Card Extension development – State management – 30th of January | https://youtu.be/YG16snk1fJU?t=1718
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
This
is
the
third
and
maybe
final
question
mark
in
my
series
on
adaptive
card
extension
development.
So
so
far,
we've
talked
about
state
and
then
last
time
I
was
here.
We
talked
about
making
your
adaptive
card
extensions,
lightweight,
immediate
and
personal,
and
this
time
I
wanted
to
kind
of
bring
those
two
concepts
together
and
look
at
how
we
combine
them
to
make
dynamic
experiences
in
our
cards
instead
of
rendering
just
a
static
card
for
folks
to
look
at.
How
do
we
bring
a
little
bit
of
dynamism
into
those
cards?
A
Make
them
a
little
bit
more
like
live
tiles
for
those
of
you
who
talked
about
who's
old
with
computers.
If
you
remember
the
windows
phone
had
the
fantastic
live
tiles
experience,
so
I
want
to
talk
through
three
examples
today
here
the
first
one
is
actually
called
dynamic
card.
Two
in
the
sample.
I'm
gonna
paste
a
link
to
all
those
samples
in
the
chat
right
now,
and
you
can
view
all
that
code
that
I'm
gonna
show
you
there.
It's
ready
today,
so
checking
this
one
out.
A
This
is
a
simple
text
update
and
it's
a
nice
simulation
of
what
it's
like
to
have
an
email
inbox,
and
you
can
see,
we've
just
got
our
text
changing
and
now
I've
got
23
update
messages,
it'll
be
24.,
and
so
something
that
you
know
think
about
here
is
this
could
be
any
kind
of
information
around
unread
messages.
You
know
unread
tasks
newly
assigned
tasks.
A
It's
really
these
samples
aren't
as
much
about
the
exact
scenario
as
they
are
about
just
showing
some
techniques
and
patterns.
So
let's
look
at
the
code
for
this
first
sample
here.
These
are
just
scaffolded
ace
solutions,
adaptive
card
extension
solutions,
not
a
lot
of
stuff,
has
been
changed.
The
boilerplate
stuff,
a
couple
of
quick
things
to
highlight,
we
did
add
a
property
in
the
state
to
track
that
item
count
on
the
init,
we're
setting.
That
item
count
to
zero,
and
then
this
is
the
general
pattern
I
wanted
to
sort
of
show
here
today.
A
Is
you
just
sort
of
to
get?
These
updates
need
to
have
sort
of
a
reoccurring
thing,
a
polling
thing?
This
isn't
sort
of
a
new
technology,
but
I
wanted
to
boil
it
down
to
something
very
simple
for
this
first
example,
where
we
create
a
function
here
that
does
something
to
manipulate
the
state.
Now
this,
of
course,
could
be
represented
by
web
service.
Calls
by
graph
calls
database
lookups
through
some
external
service.
A
You
know
whatever
you
might
imagine
here,
but
we're
just
updating
the
state
and
then
we're
setting
the
timeout
to
essentially
call
our
function
again.
This
is
an
arbitrary
number.
I
picked
three
seconds
just
for
the
demo,
but
this
could
come
from
properties.
This
could
come
from
other
values,
other
you
know
understanding
of
the
the
situation
in
the
scenario,
but
we're
just
incrementing
the
state
each
time,
and
this
then
brings
that
concept
of
state
into
play,
or
if
we
look
now,
this
is
our
card
view
what
you
were
seeing
on
the
screen.
A
The
only
thing
we
do
in
our
card
view
in
the
data
property
here
is
we
get
the
item
count
from
the
state
and
then
we
just
output
it
onto
the
screen.
So
there's
no
other
logic
happening
in
the
web
part
other
than
setting
the
state
based
on
an
expiring
timer,
and
so
that's
sort
of
a
very
simple
and
basic
way
to
bring
some
information.
A
Bring
some
dynamic
content
into
your
cards
is
by
simply
updating
the
state
and
allowing
the
card
to
reflow
re-render,
as
it
would
naturally,
as
you
would
expect
it
to
do,
and
so,
if
we
look
just
real
quick
back
at
that
again,
you
see
I've
now
got
58
now
59
messages,
I'm
never
going
to
get
caught
up.
So
let's
go
ahead
and
delete
this
one
and
I'm
going
to
add
in
weirdly
enough
I'm
going
to
jump
to
number
three.
A
It
will
be
our
next
one
here,
and
so
this
is
an
example
of
sort
of
rotating
news
items,
and
so
you
can
see
here
as
we
go
through.
This
is
another
very
common
scenario
of
I've
gone
and
fetched
some
news
articles.
I
want
to
show
those
to
folks
here,
and
so
this
is
a
nice
rotator.
So
let's
look
at
the
code
for
that.
A
I'm
going
to
close
those
we're
going
to
open
dynamic
card
three
and
we'll
get
the
extension
and
we'll
get
the
card
view,
and
so,
if
you
look
at
the
extension
again,
what
we've
done
here
is
in
the
state.
We've
added
an
image
and
an
index
value
to
what
was
here
from
the
scaffolded
project
and
as
well.
I've
created
this
sort
of
static
array
of
tuples
here
which
contain
the
headline
and
a
a
string
version
string
version
of
an
svg
graphic,
and
that
is
all
the
data
we
need
now
again.
A
This
data
here
is
static
for
this
demo,
because
I
wanted
this
demo
to
focus
on
the
dynamic
patterns
versus
a
lot
of
web
calls
and
having
to
to
parse
data
and
understand
things
like
that.
But
this,
of
course,
would
represent
news
articles
from
sharepoint
you
list
of
users
from
graph.
You
know,
however,
you
might,
you
know,
want
to
display
data
or
scroll
through
data
stock
prices
from
yahoo,
wherever
you
might
be
getting
your
data,
but
the
general
pattern
again
remains
the
same.
A
We
set
up
our
initial
state
here,
I'm
you
know
taking
our
description
and
so
we're
accessing.
The
first
item
in
our
info-
that's
going
to
be
this
one
and
then
the
first
piece
of
that
which
is
going
to
be
this
string.
That's
the
the
title
or
the
headline
and
then
the
image
we're
accessing
the
first
item
in
that
array
and
its
second
piece
of
information,
which
is
that
svg.
A
So
we've
got
our
image
there
and
again.
I
wanted
to
keep
these
patterns
consistent
and
simple
for
all
these
demos.
You're
going
to
see
this
in
all
three
we've
got
our
fixture
function,
the
same
kind
of
set
timeout
pattern
here
for
no
reason
at
all.
I
chose
four
seconds
over
three
seconds,
just
to
show
you
something
a
little
bit
different
and
then
again
we're
just
pulling
our
index
out
of
the
state
we're
doing
a
little
math
on
our
index.
This
is
sort
of
a
very
simple
basic
version
of
previous
next
paging
right.
A
So
we
can
calculate
things
next
time
and
then
in
the
card
view
here
we're
doing
the
exact
same
thing
in
our
data,
we
pull
out
a
state,
our
description,
our
image,
and
then
we
set
our
primary
text
and
our
image
there
and
that's
all.
We
need
to
do
to
have
some
dynamic
content
in
our
card
and
we
allow
the
the
ace
logic
that's
contained
in
the
sharepoint
framework
code
to
reflow
re-render,
and
we
get
our
updated
things.
So
we
got
some
headlines
here,
peter
rabbit,
remembered,
of
course,
the
rabbit
economy
is
doing
excellent.
A
Thanks
to
all
our
advances
against
the
horses
and
the
horses
have
suffered
another
humiliating
defeat.
So
just
really
relevant
news.
I
think
you
know
for
today
and
then
the
last
one
I
want
to
show
you
is
one
that
staphon
bauer.
Actually
put
together
and
shared
with
me
and
that
I'm
gonna
share
with
all
of
you,
but
this
is
a
very
cool
demo
of
actually
editing
live
in
svg
graphics.
A
This
is
a
dynamically
generated,
svg
graphic
that
you
know,
as
we
can
see
again,
it's
kind
of
a
simple
counter,
but
simple
sort
of
hides
a
bit
of
the
complexity
and
showing
a
dynamic
svg.
So,
let's
bounce
over
it
we're
going
to
look
at
the
code
to
that
real,
quick,
we'll
close
those
and
we're
actually
going
to
open
the
first
one
here,
we'll
again
go
to
the
extension,
go
to
the
card
view.
A
So
in
the
state
here,
we've
added
a
little
timer
counter
in
in
our
state.
We
set
that
to
zero
to
start
things
off
and
then
again
the
exact
same
pattern
again
of
creating
a
function
calling
it
and
having
a
timeout
that
calls
it
five
thousand
five
seconds
again.
Just
no
reason
at
all
just
happened
to
choose
that
and
we're
using
that
same
pattern
of
setting
our
state
updating,
in
this
case
the
description
and
updating
the
timer
counter.
So
this
is
very
similar
to
what
you
saw.
You
know
in
some
of
the
other
examples
again.
A
A
So
you
can
see
it's
showing
up
in
this
text,
block
that's
aligned
and
if
we
bounce
back
to
our
screen,
you'll
see
that's
what's
happening
here.
So
our
counter
is
going
and
we've
got
some
nice
dynamic,
svg
stuff.
Here
I
did
a
little
research
there's
tons
and
tons
of
libraries
out
there
for
creating
sort
of
dynamic
svgs
and
a
lot
of
different
things.
You
can
do
with
that.
So
that'd
be
great
ways
to
create
moving
graphs.
A
Potentially
you
could
have
stock
charts
that
are
dynamically
updating
all
sorts
of
different
things,
so
just
want
to
introduce
some
some
great
ideas
to
you.
Hopefully
give
you
some
ideas
as
well
as
some
patterns
here
that
you
can
use.
You
know
again,
the
patterns
themselves
aren't
complex.
You
know
it
might
be
complex
to
get
the
web
data.
There
might
be
some
complexity
around
processing
that
web
data,
but
the
actual
pattern
of
introducing
dynamic
stuff
into
your
adaptive
card
extensions
is
pretty
simple
here.
I've
just
used.
A
Let
me
bounce
over
the
code
just
one
final
time
here:
I've
pretty
much
just
used
a
timer
and
set
the
state,
and
then
you
allow
the
functionality
of
these
adaptive
card
extensions,
very
similar
to
react
to
just
reflow
that
content,
for
you
update
the
display
for
you
and
based
on
using
the
state
here
in
that
data
property
of
your
different
cards.
This
one,
of
course
I
did
these
just
card
views
again.
These
were
meant
to
be
very
simple
demos.
The
same
stuff
applies
to
quick
views.
A
Each
ace
is
a
closure,
so
it
maintains
its
own
state,
and
so
none
of
these
things
interfere
with
each
other,
and
this
gives
you
a
much
more
dynamic
dashboard
with
stuff
happening
and
updating
live,
and
that
again
brings
in
a
little
bit
of
immediacy
and
a
little
bit
of
personality
to
these
cards
and
linking
them
to
the
people,
drawing
them
into
the
functionality
that
you've
built,
and
so
with
that
I'll
see.
If
there's
any
questions
in
the
chat,
live
tiles
are
back.
That's
exactly
right.