►
Description
In this 7-minute developer-focused demo, Paolo Pialorsi shews viewers how to use Quick View in an ACE to collect data. Using the Adaptive Cards JSON syntax/schema, you can request data, define rules to validate collected data, and define actions to submit data. In the Quick View class, you handle the onAction method with custom actions, i.e., view, edit, save, submit, close. Systematically create complex forms in Quick View with the Adaptive Card syntax. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 7, 2022.
Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials
• Tools - Schema Explorer | https://adaptivecards.io/explorer/
• Documentation - Adaptive Cards Template Language | https://docs.microsoft.com/adaptive-cards/templating/language
• Sample - aces-submit-data | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-submit-data
• Sample - aces-actions | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs/aces-actions
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
Then
you
can
also
configure
actions
which
can
be
buttons
to
submit
your
data
or
other
actions
which
will
make
your
cards
more
interactive
from
an
end
user
point
of
view.
Whenever
there
will
be
an
action
triggered
inside
the
card,
you
can
easily,
in
the
code
base
of
your
electric
current
extension,
create
an
on
action
method
which
will
intercept
the
action
submitted
by
the
user
and
in
there
you
will
be
able
to
use
your
code
and
to
work
with
your
state,
your
properties
and
invoke
the
backend
api
and
stuff
like
that.
So
let's
say
that.
A
Let
me
show
you
a
couple
of
really
simple
examples
which
I
defined
that
just
for
the
sake
of
explaining
you
the
topic.
So
these
are
not
real
components,
but
these
are
just
components
that
I
created
for
the
sake
of
explaining
you
how
it
works.
So
this
is
a
very
first
and
simple
one
where
I
can
create
and
show
you
a
quick
view
in
an
adaptive
card
extension
through
which
I
can
collect,
for
example,
the
selection
of
a
menu
in
a
company
food
court.
A
Just
to
make
an
example-
and
let
me
just
pick
the
meat
and
an
apple
pie-
and
I
don't
know
a
beer,
because
I
like
drinking
beers
and
when
you
book
your
lunch,
you
can
get
the
action
of
booking
the
lunch
and
you
can
collect
the
information
provided
by
the
user.
How
can
you
create
such
a
solution
with
adaptive
card
extensions?
Of
course
you
will
have
to
create
an
ace
with
spfx.
A
We
have
already
seen
in
these
bi-weekly
calls
multiple
times
how
you
can
do
that,
so
you
use
the
human
generator
for
sharpening
framework
and
you
inherit
from
base
adaptive
card
extension,
and
in
this
case
I
defined
a
couple
of
quick
views.
The
very
first
one
is
the
choose
menu,
quick
view
which
will
rely
on
the
fact
that
in
my
adapter
account
extension
in
this
state,
I
define
the
main
course
the
dessert
and
the
beverages
that
I
want
to
select
and
in
the
choose
menu
quick
view.
A
I
will
simply
rely
on
the
json
of
the
adaptive
card,
so
I
defined
a
column
set
in
my
json
definition,
where
I
have
a
column
where
I
provide
the
title
of
the
card,
then
I
have
a
description
and
then
I
start
collecting
all
of
the
choices
from
my
user,
so
I
can
rely
on
the
input
dot,
something
components
that
we
have
in
the
adaptive
card
syntax
and
here
I'm
using
the
choice
set.
I
will
call
main
course
this
specific
choice.
A
It
will
be
with
a
specific
rendering
style,
a
single
selection
and
so
on
and
so
forth,
and
then
I
can
provide
the
choices
which
will
be
the
actual
options
that
I
will
provide
to
my
user.
I
did
the
same
for
all
of
the
other
choices,
keep
an
eye
on
the
id
of
this
item.
So
I
have
a
choice
set
for
the
desert
and
I
have
a
choice
set
for
the
beverages.
A
Once
I've
done
that
in
a
dedicated
section
called
actions,
I
can
create
and
define
an
action.submit
kind
of
control,
which
will
have
a
title
which
will
be
the
text
shown
in
the
ui,
and
I
can
then
collect
on
the
submission
of
this
button.
The
data
from
the
ui,
mainly
I'm,
creating
a
json
object
here
and
I'm
collecting
the
value
of
all
of
the
fields
that
I've
showed
you
before
inside.
A
The
structure
of
my
data
object,
so
that
when
I
will
click
on
the
submit
button,
the
on
action
event
for
the
submit
action
will
set
the
state
of
my
adapted
card
extension
component
to
the
choices
made
by
the
user,
and
then
I
can
move
it
to
another
quick
view
which
will
simply
recap
the
options.
Just
one
more
thing,
because
I
want
to
show
you
what
you
can
do
using
adaptive
card
extensions
here.
There
is
a
much
more
complex
scenario
of
the
form
which
can
show
items
in
read-only
or
by
clicking
on
an
icon.
A
You
can
enable
the
edit
form
you
can
play
with
it.
You
can
collect
input
data
and
do
whatever
you
like,
using
a
really
nice
ui
based
on
the
adaptive
card
syntax,
and
in
order
to
do
that
with
asus.
It
is
really
easy
and
simple
again
using
the
json
syntax
of
the
adaptive
cad
extension.
We
have
plenty
of
options
and
let
me
very
briefly
show
you
what
I
mean.
First
of
all,
if
you
think
about
the
ui,
we
have
the
button
to
edit
or
to
save
or
cancel
the
editing.
A
Well,
here
we
have
an
image
which
is
the
edit
button,
and
here
I
say
that
the
action
for
this
button
is
toggle
visibility
by
clicking
on
this
button.
All
of
these
components
with
these
ids
will
change
their
visibility
status.
So
if
they
are
visible,
they
will
they
will
become
hidden
and
the
other
way
around.
So,
for
example,
I
play
with
the
edit
button
and
I
hide
myself
and
I
will
show
the
save
and
the
cancel
button,
and
when
I
will
click
on
save,
I
will
submit
you
see.
A
I
have
another
action
here
and
the
same
happens
for
the
cancel,
which
will
simply
reverb
the
status
of
the
form.
Then
I
have
a
column
set.
I
have
one
column
through
which
I
define
the
read-only
version
of
my
data,
which
is
not
really
interesting.
I
simply
have
the
data
binding
right
here
and
then
I
have
another
obs,
sorry,
another
column
right
here,
which
is
the
edit
form
and
which
is
the
one
I'm
showing
or
hiding
being
based
on
the
toggle
visibility,
selection
control,
and
here
I
have
all
of
the
input
fields.
A
A
I
can
collect
numbers
dates
and
times
as
well
as
I
can
provide
a
toggle
button
or
a
choice
set
as
we
saw
before,
and
then,
whenever
the
user
will
click
on
the
action
to
submit
data
again
as
like
as
before,
in
the
on
action
event,
we
can
collect
data
and
store
the
result
in
our
state
and
then
eventually
in
a
backend
service.
This
is
just
to
give
you
an
idea
of
what
you
can
do
and
how
powerful
is
the
adaptive
card
extension
syntax.