►
Description
In this 12-minute developer-focused demo – Paolo Pialorsi demystifies working with State and Properties in ACEs that includes managing interfaces for Properties (Property pane or code) and State (code) used by CardView and QuickViews. The basic property pane is generated by the SPFx scaffolding tool. Learn about building functions into ACE component and exposing the functions to your ACEs cards. See how State is updated only for the active component, if 2 components displayed. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 13, 2021.
Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia
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
Today
we
keep
on
talking
about
how
to
develop
adaptive
card
extensions
with
the
sharepoint
framework,
and
specifically
today
we
will
cover
how
we
can
manage
state
and
properties
while
developing
aces
with
spfx.
So,
like
always
few
words
about
the
topic
by
itself,
with
the
help
of
use
live
and
then
I
will
move
to
some
demos.
A
Whenever
we
define
an
adaptive
card
extension,
we
can
declare
the
interfaces
defining
the
layout
of
both
the
properties
interface
and
of
the
state
interface,
which
will
be
managed
inside
the
adaptive
card
extension,
but
which
will
also
become
available
in
all
of
the
card
views
and
quick
views
related
to
the
adaptive
card
extension
in
which
we
are
just
as
a
reminder.
Whenever
you
create
an
adaptive
card
extension,
the
ui
is
based
on
two
different
flavors
of
cards.
There
are
the
card
views
and
the
quick
views.
A
So,
for
example,
whenever
we
generate
an
adaptive
card
extension,
we
know
that
we
have
the
adaptive
card
extension
type
and
in
the
declaration,
in
the
definition
of
the
type
we
extend
the
based
optical
extension,
including
an
interface
definition
for
the
properties
and
one
for
the
state.
As
you
can
notice
here,
those
two
interfaces
are
defined
with
the
export
keyword
and
inside
these
interfaces.
We
simply
define
the
properties
that
we
want
to
have
to
configure
the
adapter
card
extension
and
the
state
that
we
want
to
use
to
manage
the
current
state
of
the
component.
A
Talking
about
the
properties,
it
is
interesting
to
notice
that
the
properties
are
manageable
through
the
property
pane,
but
in
the
design
of
the
adapter
card
extensions.
The
auto
generated
code
relies
on
the
load,
property
pane
resources
meter
in
order
to
get
the
property
pane
structure
from
an
external
typescript
file
like
this
one,
for
example,
in
which
we
can
see,
we
have
the,
I
would
say,
well-known
structure
that
we
use
whenever
we
create
a
sharepoint
framework
web
part.
A
Even
if
right
here
in
the
auto
generated
code,
we
have
an
isolated
file
for
the
definition
of
the
get
property
pain,
configuration
method.
But
here
we
can
simply
recognize
all
of
the
code
that
we
are
used
to
using
whenever
we
create
a
sharepoint
framework
web
part
in
order
to
manage
the
fields
to
aid
it
to
let
the
users
edit.
The
values
of
the
properties
like,
for
example,
here,
title
icon,
property
and
description
are
the
three
pre-generated
properties
by
generated
by
disk
folding
tool
and
those
mapped
to
the
properties
that
we
have
in
this
state.
A
Then,
when
we
move
to
the
card
views
and
quick
views
either
generated
by
the
scaffolding
tool
or
created
manually
created
by
ourselves,
we
can
see
that,
for
example,
in
the
card
view,
we
get
the
the
definition
of
the
import
of
those
interfaces
from
the
file
defining
from
the
type
defining
the
adapter
current
extension
component,
and
that's
why
the
state
and
properties
are
defined
as
exportable,
and
here
we
simply
inherit
from
the
base
type,
and
we
refer
to
the
properties
and
state
interfaces
that
we
define
in
the
extension
file.
As
such.
A
We
can
then
use
those
interfaces
as
the
type
of
the
properties
property
of
this
object,
referring
to
the
card
view,
as
well
as
we
can
access
with
the
same
technique.
Also
this
data,
for
example.
If
we
go
to
the
quick
view
auto
generated
for
this
project,
we
can
see
that
we
can,
of
course,
still
use
the
same
logic.
A
So
we
have
the
interface
for
the
properties
and
for
the
state
imported
in
this
file
and
used
in
the
definition
of
our
quick
view,
and
we
can
always
say
these
dot
properties
or
this
dot
state
and
we
can
access
the
properties
in
state
of
the
adaptive
card
extension,
and
this
is
really
useful,
because
when
we
do
that,
then
we
can
use
the
properties
state
as
the
content
or
to
create
the
content
that
we
want
to
data
bind
in
the
ui
of
our
adapter
card
extensions.
Now
I'm
already
running
this
project.
A
A
Here
we
have
the
really
simple
adaptive
extension
just
generated
with
the
holding
tool,
and
we
can
see
that
we
have
the
property
pane.
I
was
talking
about
just
few
seconds
ago,
which
has
been
generated
based
on
the
fields
that
we've
defined
and,
of
course
you
can
create
your
own
property
pane
and
make
your
properties
configurable
now
talking
about
something
a
bit
more
deep
or
interesting
about
properties
and
state.
I
have
another
example
that
I
want
to
share
with
you.
A
I
simply
rely
on
the
set
interval
of
javascript
to
invoke
every
second,
a
function
which
will
get
the
current
time
and
will
show
the
current
time
so,
as
you
can
imply
from
the
name-
and
let
me
in
the
meantime
start
this
project
so
that
you
can
save
some
time.
Gulp
serve
no
browser,
okay,
but
this
will
be
an
adaptive
extension
to
show
the
current
time
so
really
simple.
Just
for
the
sake
of
explaining
you
something
now.
A
A
Warning
or
information
here,
but
let
me
try
still
to
refresh
the
page
and
see
if
we
can
already
add
it
to
the
workbench.
Let's
see
if
I'm
lucky
come
on
still
working,
but
I
want
to
show
you
is
that,
based
on
the
architecture
of
the
adaptive
card,
extensions
and
thinking
about
the
fact
that
now
we
are
ready,
we
should
be
ready
and
thinking
about
the
scope
and
the
idea
behind
the
scene
of
building
electric
extensions.
A
When
you
create
an
adaptive
card
extension,
the
card
view
and
the
quick
view
of
the
electric
cab
extension
will
be
shown
to
the
ui
and
three
user
just
once
per
time.
So
if
I
go
here-
and
I
add
my
clock
ace-
we
can
see
if
I
go
to
preview-
that
we
have
the
current
time
in
my
time
zone.
Right
now
and
if
I
click
on
the
quick
view,
I
will
see
the
current
time
in
the
quick
view.
A
But
as
you
can
notice,
the
time
will
not
be
updated
in
the
backing
card
view,
because
the
logic
behind
the
scene
of
the
adapter
card
extension
is
keeping
track
of,
which
is
the
component
in
foreground.
Right
now
and
we'll
keep
the
properties
and
the
state
up
to
date,
just
for
that
one
just
to
save
resources,
which
is
a
a
reasonable
behavior,
if
you
think
about
that,
but
you
need
to
be
aware
of
this
behavior
when
you
work
with
this
kind
of
properties
and
state
in
your
adaptive,
cart.
A
Extension,
one
last
thing
that
I
want
to
share
with
you
and
then
I
can
give
the
screen
back
to
visa
or
to
hugo.
Actually
is
that
when
you
do
that,
when
you
define
properties
and
state
and
specifically
now
properties
in
your
adaptive
card
extension,
you
can
also,
for
example,
think
about
using
the
properties
in
order
to
hold
a
reference
to
useful
functions
that
you
want
to
make
available
to
the
cart
that
you
have
in
your
adaptive
card
extension
solutions.
A
A
B
Paulo
thank
you
really
really
great
stuff
and
great
demo
on
the
on
the
concepts
and
to
understand
how
acs
can
be
implemented.
This
is
just
a
kind
of
a
recap,
I
think
paulo
said
it
many
many
times,
but
just
the
recap
for
those
who
are
still
wondering
what
are
those
but
their
intention
on
the
adaptive
card.
Extensions
for
viva
connection
is
that
you
are
able
to
build
your
own
company
mobile
portal,
so
you
can
design
your
mobile
experience,
which
can
be
then
extended.