►
Description
In this 20-minute developer-focused demo – Paolo Pialorsi cites the fundamentals – data is stored in properties and state, CardView renders a limited set of information, and QuickView renders as much data as you like (many formatting options including conditional and JSON parsing). Step through various samples showing the many functions, keywords, properties in the Adaptive Card syntax used for dynamically formatting and rendering data. Last sample shows rendering user data from Graph into a QuickView card. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 27, 2022.
Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials:
• Documentation/Tools - A whole new way to deliver UI | https://adaptivecards.io/
• Documentation - Adaptive Cards Template Language | https://docs.microsoft.com/adaptive-cards/templating/language
• Samples - Conferences-Samples | https://github.com/PiaSys/Conferences-Samples/tree/master/ACEs
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
Hello,
everyone
and
yesterday
in
this
week
we
keep
on
talking
about
how
to
develop
adaptive
cars
for
microsoft,
viva
connections
and
specifically
today.
I
want
to
explain
you
how
you
can
leverage
the
data
binding
capabilities
that
we
have
in
adaptive
current
extensions,
so
a
few
words
on
this
slide
and
then
we
will
move
to
the
actual
demo.
A
So
whenever
we
work
with
adaptive
card
extensions,
we
can
store
content
inside
the
properties
or
the
state
of
the
adaptive
card
extension
and
once
we
do
that,
we
can
then
easily
do
data
binding
either
in
the
car
views.
But,
as
you
know,
based
on
the
previous
episode
we
saw
in
a
card
view,
you
have
a
limited
set
of
information
that
you
can
show
due
to
the
design
and
the
form
factor
of
those
card
views
which
are
just
three
options
available.
A
A
So
let
me
move
to
this
example,
and
here
we
have
an
adaptive
card
extension
built
with
spfx,
which
is
defined
with
the
orders
property
of
type
array
of
order,
just
for
the
sake
of
having
some
kind
of
data
for
data
binding
purposes
in
this
state
of
the
adaptive
card
extension
as
well
as
eventually
some
other
properties
in
the
properties
interface
of
the
adaptive
card.
Now
every
single
order
is
made
of
these
properties.
A
I
decided
in
the
uninit
method
of
these
adaptive
card
extensions
to
pre-load
a
set
of
orders,
because
I
don't
really
care
about
how
we
will
retrieve
data
for
data
binding
right
now,
eventually,
in
one
of
the
upcoming
episodes,
we
will
see
how
we
can
consume
graph
or
sharepoint
rest
or
any
other
api,
but
right
now
I
just
want
to
focus
on
how
we
can
do
data
binding.
So
here
I
have
a
list
of
fake
orders
that
I'm
just
loading
in
memory
in
order
to
do
data
binding.
A
So
once
I've
done
that,
I
have-
and
let
me
show
you-
I
have,
for
example
here
in
the
workbench,
my
adapter
card
extension
running,
and
we
can
see
a
quick
view
with
the
recap
of
the
orders
as
well
as
we
can
see
a
quick
view
with
the
list
of
orders.
So
let
me
dig
into
those
quick
views
a
little
bit
more.
A
The
first
one
is
just
a
quick
view
in
which
we
provide,
through
the
data
interface
of
the
quickview,
a
set
of
content,
like
the
orders
count
and
the
orders
total
amount,
which
are
simply
based
on
the
orders
array
that
we
have
in
the
state
of
the
adaptive
card
extension
and
we
can
easily
inside
the
adaptive
card
that
json
syntax.
We
can
easily
rely
on
those
properties.
A
But
what
is
more
interesting
is
that
in
the
second
quick
view
that
I'm
going
to
show
you,
we
can
provide
the
whole
array
of
orders
as
the
data
source
for
our
quick
view,
rendering
and
as
such,
by
providing
this
orders
property,
which
is
an
array
of
order
objects
in
the
adaptive
card
definition
we
can
play
with
the
dollar
data
property
inside
the
definition
of
our
adaptive
card.
So
let
me
try
to
explain
you
what
we
have
right
here.
A
So
yet
another
function
that
you
can
use
when
you
do
data
binding
in
adaptive
cards
with
the
format
date
time
of
the
date
property
of
the
current
order,
providing
the
format
string
for
the
date,
which
is
quite
cool.
We
can
also
render
the
customer.
This
is
just
a
string
value,
so
I
just
output
the
same
value.
A
We
can
work
with
the
amount
of
the
order
and
again
we
can
rely
on
the
format.
Number,
but
we
can
also
play,
for
example,
with
a
function
like
the
if
one
where
we
can
evaluate
the
status
of
the
order
of
the
current
order
item,
and
we
can
say:
okay.
If
this
status
is
zero,
it
will
be
inserted
the
value
of
the
status
of
the
order
if
it
is
one
it
will
be
processed
and
so
on
so
forth,
and
that's
how
we
render
this
column
with
the
status
of
every
single
order
item.
A
Okay,
now
we
can
even
do
more.
For
example,
we
can
play
with
the
color
that
we
use
to
render
these
data,
so
we
can
add
an
additional
property
to
the
text
block,
rendering
the
status
of
the
order
and
the
property
could
be
the
color
one
from
an
adapted
card.
Syntax
point
of
view.
The
caller
can
assume
some
predefined
values
like
warning
or
accent
or
good,
which
will
define
the
actual
color
for
rendering
the
text.
A
So,
for
example,
here
again
we
can
play
with
data
binding,
so
dollar
cooling
brackets,
and
then
we
evaluate
the
status
and
we
can
render
the
insert
with
the
default
value
with
the
default
color.
Sorry
or
we
can
render
the
processed
with
a
warning
which
will
be
a
kind
of
an
orange
color,
we
can
use
the
accent
for
the
delivered
and
the
green,
which
is
good
as
the
color
name
in
adapted
cards
for
the
completed
order.
A
A
Another
interesting
property
that
you
can
use
when
you
work
with
data
binding
in
adaptive
card
extensions,
is
the
dollar
index
keyword
which
will
provide
you
the
index
of
the
item
that
you
are
rendering
right
now.
Whenever
you
render
an
array
of
items.
So
just
for
the
sake
of
making
an
example,
we
can
say
something
like
okay
render
the
dollar
index
of
the
current
item,
followed
by
the
date
and
time.
A
A
Let's
keep
on
talking
about
what
we
can
do.
There
is
another
interesting
property
that
we
can
play
with,
which
is
the
dollar
route.
In
fact,
we
have
dollar
index
to
refer
to
the
current
index
of
the
current
item.
But
what?
If
right
now
here,
we
are
rendering
every
single
order
item
in
the
array
of
orders,
and
we
want,
for
example,
to
refer
to
a
property
which
is
not
related
to
the
current
order,
but
it
is
related
to
the
to
the
whole
data
source
of
data
binding.
A
Just
as
a
reminder,
our
data
source
is
made
of
a
subtitle
of
a
title
of
the
array
of
orders
and
now
the
status
filter.
So
if
we
want
to
access,
for
example,
the
status
filter,
which
is
a
property
defined
at
the
root
level
of
the
data
source
and
not
inside
every
single
order,
we
can
use
the
following
syntax.
A
So
let
me
try
to
show
you
a
useful
and
real
example
of
this
capability
and
let's
play
with
the
visibility
of
the
rows
in
my
output.
So
let's
assume
that
we
want
to
use
the
is
visible
property
that
we
have
in
the
adaptive
syntax,
which
can
assume
a
boolean
value.
Of
course,
if
I
will
say
is
visible
false
for
every
single
row
and
I
will
save
if
I
go
back
to
my
adaptive
card
in
action
preview
and
I
click
on
the
order
list.
A
Of
course,
I
will
not
have
any
line
of
orders
because
we
don't
have
any
of
them
visible,
based
on
the
instruction
that
I
gave
to
the
electric
car
definition.
But
what
if
we
want
to
create
something
smart
like
having,
in
the
electric
car
definition,
a
property
called
status,
filter
of
type
number
and
in
the
property
pane?
We
define
a
set
of
values
which
will
allow
us
to
configure
the
adapter
card
so
that
we
can
say:
okay,
let's
do
that.
Let's
show
just
the
delivered
orders
in
this
card
or
just
the
completed
orders.
Why
not?
A
Okay,
if
we
do
that,
we
can
also
say
in
the
json
that
instead
of
is
visible,
equal
and
explicit
value,
we
can
actually
define
a
rule
based
on
data
binding.
So
here
we
can
say
is
visible,
will
be
equal
to
if
status
is
equal
to
dollar
root
status,
filter
or
status
filter
is
minus
1,
meaning
show
me
everything,
then
I
will
provide
true
as
the
value
4
is
visible.
Otherwise
I
will
provide
false.
A
So
let
me
save
this
one
one
more
time
and
let
me
go
back
to
the
rendering
refresh
preview,
and
here
we
are
now
we
simply
have
the
completed
orders.
This
is
yet
a
really
cool
feature,
in
my
opinion
that
you
can
leverage
and
to
be
completely
fair
with
you.
If
you
just
want
to
play
with
the
visibility
of
an
item,
you
can
even
leverage
an
out
of
the
box
capability
that
we
have
instead
of
the
is
visible,
which
is
an
example
that
I
showed
you
just
to
give.
A
The
idea
that
you
can
dynamically
change
the
value
of
any
of
the
properties
of
the
adaptive
card,
json
definition,
including
some
kind
of
complex
logic
based
on
properties
that
you
have
in
the
root
object
of
the
data
binding.
But
we
can
even
do
more
the
adaptive
card,
json
syntax.
We
have
the
dollar
when
property,
which
is
defined
just
for
the
sake
of
making
it
possible
for
us
to
show
or
to
not
show
an
item
based
on
a
condition.
A
So
when
we
use
the
dollar
when
like
when
we
use
the
dollar
data,
we
provided
a
source
for
data
binding
when
we
use
dollar
one.
This
means
it
will
be
visible
when
the
condition
provided
as
the
value
will
be
true.
So
I
can
say
if
referring
to
the
data
binding
the
status
of
the
order,
the
current
order
is
equal
to
this
little
filter
or
again.
This
tool
filter
is
not
defined.
A
Let's
show
the
item:
if
not,
let's
hide
the
item,
so
I
will
save
it
one
more
time
and
I
will
go
back
to
show
you
the
output,
which
will
be
exactly
the
same
as
before,
but
but
with
the
more
correct
syntax.
Let
me
say,
because
if
you
want
to
play
with
visibility,
dollar
one
should
be
the
right
option
for
you.
A
Now
we
can
do
more.
For
example,
when
we
build
the
ui
of
an
adaptive
card,
and
I
will
show
you
any
other
example
that
I
already
shared
with
you
in
a
previous
call-
the
contoso
orders
adaptive
card
sample.
Here
we
have
the
contoso
manage
orders
adaptive
card
in
this
one
we
can
play
with
these
functionality.
We
can
click
on
the
chevron
button
and
we
can
expand
or
collapse
a
single
order
item
here
and
show
you
this
one.
A
This
should
be
the
right
one
exactly
here.
We
can
rely
on
a
really
interesting
option
that
we
have
in
the
adaptive
cart
syntax,
which
is
the
action
dot,
toggle
visibility.
With
this
one.
We
can
say
that
whenever
the
user
will
click
on
this
item,
we
will
target
the
visibility
of
one
or
more
items
and,
as
you
can
see
here,
we
are
using
both
the
binding
capability
with
the
dollar
and
the
dollar
index
to
identify
a
specific
item
in
the
list
of
orders
that
we
have
in
the
ui.
A
So
I'm
basically
saying
when
the
user
will
click
on
this
toggle
visibility
item,
let's
target
the
visibility
of
the
items
with
the
index
of
the
currently
clicked
item.
So
that's
why,
when
I
click
on
the
chevron
button,
I
can
expand
or
collapse
this
specific
item
I'm
clicking
on
and
in
the
definition
of
my
adapter
card.
I
can
say:
okay,
for
example,
the
chevron
down
and
the
chevron
app
buttons
ids
will
be
based
on
data
binding
using
the
dollar
index
of
the
current
item.
A
So
here
I'm
referring
to
this
item
and
this
item
and
I
will
play
with
their
visibility
as
well
as
with
the
visibility
of
the
order
content
container,
which
will
render
the
actual
form
to
edit
the
order.
So
again,
I
think
this
is
really
really
cool
and
powerful
last
sample
that
I
want
to
show
you
still
just
relying
on
the
syntax
out
of
the
box,
syntax
of
the
adaptive
card.
A
A
A
So
right
here
in
the
state,
I
define
the
string
cool
now
when
I
get
the
json
stringify
of
the
user
inside
this
string,
I
can
then
use
it
as
the
content
of
the
data
source
of
my
quick
view,
so
that,
in
the
rendering
of
my
quick
view
in
the
json,
I
can
say
that
I
want
to
do
dollar
json,
which
is
a
function
provided
by
the
adaptive
card.
Syntax.
A
I
provide
the
json
string
and
this
function
will
do
the
parsing
of
the
json
and
then
I
can
access
any
of
the
properties
of
the
json
object
that
I'm
providing,
which
is
again,
I
think,
really
really
powerful.
Let
me
show
you
the
output
and
then
it
will
be
back
to
you
julie.
So
let
me
edit
this
page.
Let
me
remove
this
card
and
refresh.
A
This
second
link
is
with
the
definition
of
all
of
the
function
that
I
use
the
functions
and
keywords
that
I
used
in
data
binding
and
the
last
link
is
the
one
where
you
can
find
all
of
these
samples
that
I'm
sharing
with
you
through
these
ac's
short
demos,
and
that's
all
for
me
back
to
you
julian.
Thank
you.