►
Description
In this 10-minute developer-focused demo, Paolo Pialorsi show viewers 2 simple, quick and powerful examples of how to get and render a list of items from a Microsoft List/SharePoint list either using native SharePoint support in SPFx or using PnPjs into an ACE QuickView card. Uses Type arrays and SP object in PnPjs to get items. Key points to remember – ACEs are built on top of SPFx, also can use PnPjs, and data binding works as usual with Adaptive Card syntax. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 10, 2022.
Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials:
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions – Paolo Pialorsi (PiaSys) | @PaoloPia | https://youtu.be/WkFVkFKPDMc?t=1297
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
Whenever
we
want
to
consume
sharepoint
data
and
then
once
we
have
the
data
retrieved
from
sharepoint,
we
can
easily
do
data
binding
using
the
data
binding
techniques
that
we
have
in
adaptive
card
extensions
and
in
the
adaptive
card
syntax,
as
we
already
saw
a
couple
of
weeks
ago
in
the
sig
call
of
the
27th
on
january.
If
you
want
there
as
well
to
have
a
look
at
how
we
can
do
data
binding
in
acc.
So
let
me
switch
to
my
demo
environment.
Let
me
show
you
what
we
can
do
here.
A
We
have
a
list
just
for
the
sake
of
making
an
example.
It
is
a
list
in
microsoft
lists,
but
it
is
actually
also
a
sharepoint
list,
as
we
know,
because
behind
the
scenes
of
microsoft
list,
there
is
still
microsoft
sharepoint
online,
and
what
I
want
to
show
you
now
is
how
we
can
consume
the
list
of
items
that
we
have
in
this
issue:
tracker
list
from
an
adaptive
card
extension,
either
using
native
sharepoint
support
in
spfx
or
using
a
pmpjs.
A
A
I
have
a
target
list
property,
which
is
a
string
well
inside
my
component
inside
my
adaptive
card
extension
in
the
on
init
method,
I
can
easily
rely
on
a
load
spo
data
function
that
I
defined
and
just
to
avoid
blocking
the
ui
and
the
rendering
of
my
component.
I
will
simply
slightly
delay
by
half
a
second,
the
execution
of
this
method,
so
that
I
can
keep
on
loading
and
rendering
the
whole
component
before
doing
the
actual
data
retrieval
from
sharepoint
online
and
then
in
the
load
spo
data
method.
A
I
simply
use
the
context
of
spfx
because
again,
an
adaptive
cad
extension
is
nothing
more
than
x
component,
so
this
dot
context
is
available,
like
always
in
spf,
x
and
dot
sp
http
client.
I
can
use
this
object
to
make
an
actual
get
requested
to
get.
For
example,
the
list
of
items
in
a
target
list
configured
as
the
target
list
title
in
my
ace.
In
fact,
if
I
go
to
edit
this
item-
and
I
click
on
the
pencil-
we
can
see
that
here
we
have
the
target
list
title,
which
is
just
issue
tracker.
A
And
then
I
can,
in
the
quick
view,
provide
as
the
content
of
the
my
quick
view,
data
the
array
of
list
items
which
is
exported
by
the
other
class
so
that
by
the
other
ts
file.
Sorry-
and
I
can
provide
the
items
that
I
have
in
this
data
object
of
my
component
as
the
data
source
for
my
data
binding
and
as
such,
as
we
already
saw.
A
Also
in
the
previous
sequel,
we
can
do
the
binding
and
we
can
go
through
all
of
the
items
in
the
data
source
of
my
adaptive
card
and
we
can
simply
get
the
id
and
the
title
of
every
single
item.
So
this
is
a
very
simple
example
to
explain
you
what
you
can
do,
starting
from
the
basics
in
order
to
consume
sharepoint
online
data.
A
But,
as
we
just
saw
here,
we
have
to
do
quite
some
work
to
build
the
url
of
the
api
request
to
do
the
actual
these
realization
of
the
json
and
to
map
the
json
response
into
the
actual
array
of
items.
So
let
me
stop
this
solution.
Let
me
switch
to
another
one
that
I
want
to
share
with
you.
So,
first
of
all,
I
will
do
gulp
serve
no
browser
here
so
that
I
can
show
you
the
this
adaptive
card
in
action
and
then
I'm
going
to
show
you
the
actual
implementation.
A
A
We
set
up
with
pmpjs
the
context
so
using
the
hp
object
that
we
have
in
pmpjs,
which
is
a
packages
you
will
have
to
import
in
your
solution.
We
simply
set
up
pmpjs
to
work
with
the
context
of
sharepoint
framework
in
our
component
and
then
again
with
a
set
timeout
of
a
half.
Second,
we
will
load
all
of
the
issues
in
order
to
load
the
issues.
We
rely
on
a
service
that
I
defined.
A
The
service
is
called
issue
service,
and
here
you
can
see
we
have
an
instance
of
pre-created
inside
this
ts
file
and
the
issue
service
will
simply
provide
get
issues
and
get
issues
by
status
methods.
The
first
one
will
simply
give
me
back
the
list.
Actually,
an
array
of
issues
based
on
the
name
of
the
list
and
the
other
one
will
also
filter
the
issues
by
status.
A
So
here
you
can
see
the
implementation
of
the
methods
and
I
can
use
the
fluent
api
of
pmpjs,
so
I
can
say
sp.web.lists
I
will
get
my
list
by
title
and
pmpjs
will
build
the
actual
rest
query.
For
me.
I
want
to
select
these
properties
of
every
single
item
and
I
want
to
get
all
of
the
items.
Of
course
here
I
have
just
a
small
amount
of
items,
so
I
can
do
that.
A
Otherwise
you
could
do
paging
and
stuff
like
that,
and
once
I've
got
my
list
of
spo
issue
items
which
is
defined
as
an
interface
right
here
I
can
map
them
to
the
actual
output
that
I
want
as
the
data
binding
source
for
my
solution.
The
same
applies
for
the
get
issues
by
status,
but
here
I'm
going
to
use
a
camel
query
to
filter
the
items.
So
here
you
can
see
again
sp.web.list
so
through
pmpjs,
I'm
getting
the
target
list
reference
and
then
I
make
a
query
with
the
camel
here.
A
You
can
see
that
the
actual
camel-
and
this
is
the
readable
version
of
the
camel
that
I'm
running
so
I'm
retrieving
these
fields
and
I'm
making
a
query
based
on
the
status
filtering
based
on
the
status
value
that
I
get
as
an
input
argument
and
then
again
I
do
the
filtering
cool.
So
now,
in
my
load
issues
I
can
get
through
my
service.
The
two
sets
of
issues,
the
whole
issues
and
the
new
issues,
and
I
can
again
do
the
binding
setting
them
into
the
state.
A
Moreover,
I
can
also
keep
an
eye
on
the
on
property,
paying
field
change
method.
So
that
in
case
the
title
list
will
change,
I
will
be
able
to
update
the
list
of
items.
So
now
it
is
running.
Let
me
go
to
edit
and
let
me
remove
this
item
and
I
will
briefly
add
the
new
one
just
to
show
you
the
output.