►
Description
The Modern React Content Query web part sample was recently updated to SPFx 1.10. One useful feature - as developers select fields in the Property Pane, the web part and handlebars template are built. As well, there is a new capability – Dynamic Data Support (DDS), the focus of this 19-minute developer focused demo delivered by Paolo Pialorsi. DDS allows the Content Query web part (data provider) to be configured to provide data dynamically to an external – your custom SPFx web part (data consumer). This data sharing is accomplished by binding the web parts enabling your web part to get data pulled by the Content Query web part. Available data fields from Content Query web part are exposed in your custom web part's property pane. The binding is accomplished with Dynamic Data functionality of SPFx. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded May 7, 2020.
Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials:
• Sample: React Content Query web part/Online https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-content-query-webpart/Online
All Microsoft 365 & SharePoint Community - PnP demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
A
Hello,
everybody
and
now
we're
going
to
talk
about
the
modern
content
by
query
web
part
that
has
been
updated
in
the
last
few
weeks.
In
fact,
the
modern
content
query,
but
well
part,
is
something
that
we
already
introduced
in
the
s/pdif
FX.
What
part
repository
now
under
the
TMP
organization
I
think
quite
a
while
ago,
something
like
two
years
ago,
but
in
the
last
few
weeks
we
and
when
I
say
we
I
mean
me
David,
Warner
and
who
govern
here
updated
the
web
part
to
SharePoint
framework
1.10.
A
We
decided
to
keep
support
for
SharePoint
on-premises,
which
was
there
at
the
beginning.
But
now
you
have
in
the
solution:
folder
an
on-prem
folder,
where
you
can
find
the
old
version
of
the
web
part
and
in
the
online
one
you
will
find
a
new
one
with
the
short
paper
110
support
and
all
the
new
capabilities
that
we
introduced.
One
of
the
new
capabilities
that
we
introduced
is
the
dynamic
data
support
which
will
be
the
main
topic
of
my
demo
today.
A
So,
first
of
all,
let
me
show
you
in
action,
the
web
parts
so
that
you
can
see
what
are
the
new
capabilities
and
then
I
will
switch
to
the
code
base
and
explain
you
how
we
implemented
those
functionalities.
So
here
I
have
the
workbench
in
SharePoint,
Online
and
first
of
all,
I
will
add
the
content
query
web
part
to
my
workbench.
This
is
the
web
part
that
you
have
in
github
and
the
first
of
all.
A
A
Pane
is
collapsible
instead
of
having
a
multi-step
with
that,
we
just
have
all
of
the
properties
in
a
unique
property
pane
with
a
collapsible
UI
I
can
select
a
source
side
for
my
con
apart
and,
for
example,
every
site
with
some
sample
news
somewhere
here.
Let
me
see
if
I'm
lucky
enough
to
find
it
sample
new
site
here.
It
is
I.
A
Will
target
the
root
of
my
site
and
I
will
target
the
site
pages
of
my
site,
for
example,
on
my
target
site,
then
I
really
don't
care
right
now
to
define
filtering
or
sorting
criterias
I
just
want
to
show
you
the
output
and
how
you
can
leverage
the
dynamic
data
capability.
So
let
me
just
close
this
one
and
let
me
focus
on
the
layout
section
here.
You
can
choose
what
are
the
fields
to
show.
A
So
let
me
choose
again
the
field,
sorry
about
that,
so
they
created
field,
for
example,
and
now
for
news
and
the
title
field.
So,
by
doing
that,
under
the
cover,
the
motor
contem
by
query
web
part
is
building
an
handlebar
template
which
you
can
see
by
clicking
on
the
edit
template
content
right
here
and
you
can
see
this
is
the
handlebar
template
that
has
been
built
out
of
the
box
by
the
web
part
for
you.
A
Of
course
you
can
customize
the
output
and
the
layout
of
the
template,
but
you
can
have
an
out-of-the-box
one
that
you
can
just
customize.
Instead
of
writing
everything
from
scratch.
Now
the
interesting
part
of
the
story
related
to
the
dynamic
data
part
is
that
now
you
can
create
your
own
custom
web
parts
and
you
can
connect
those
custom
web
parts
to
the
content,
query
web
part
and
you
will
be
able
to
make
available
to
your
custom
web
parts.
Any
selected
item
in
the
UI
of
the
content
by
query
web
part.
How
you
can
do
that?
A
In
fact,
this
select
button
if
we
click
again
in
the
Edit
template
content,
is
nothing
more
than
HTML
tag,
with
a
specific
CSS
class
called
select
item
and
with
a
data
attribute,
which
will
be
the
attribute
to
specify
the
item.
Id
of
the
item
that
we
want
to
select.
So
basically,
you
can
create
whatever
HTML
tag
you
like.
A
You
will
be
able
to
leverage
that
HTML
tag
a
button
in
my
example
to
select
an
item
you
can
use,
for
example,
an
image
or
whatever
else
once
you
have
done
that
you
can
add
to
the
page
another
what
part
whatever
web
part
you
like,
and
you
can
build
your
own
web
part,
which
is
what
I
did
in
my
sample.
So
this
content
very
consumer
web
part,
is
another
web
part
completely
different
in
a
different
solution
which
will
be
connected,
which
will
be
bound
to
the
content.
A
Query
web
part
using
the
dynamically
the
functionality
of
SharePoint
framework.
How
can
we
do
that?
Well,
if
the
web
part
that
you
build
is
configured
to
being
able
to
consume
an
external
dynamic
data
source
in
the
property
pane
of
the
web
part,
you
can
connect
the
web
part
to
a
source.
By
doing
that,
you
can
select
to
use
the
content.
A
Query
web
part,
as
the
data
source
of
you
can
select
to
use
the
selected
item
in
the
content
where
you,
apart
as
the
source
for
your
part,
and
you
can
select
the
information
provided
by
the
content.
Query
web
part.
In
fact,
whenever
there
is
a
selected
item,
the
content
web
part
will
provide
to
all
of
these
subscribers.
A
What
part
can
be
something
that
you
build
to
provide
just
to
make
an
example,
an
image
UI
or
a
custom,
detailed
view
of
the
content
selected
in
the
content,
query
web
part
or
whatever
else
you
like
to
do
so.
That's
the
goal.
That's
the
result.
Now,
let's
move
to
the
code
base
and
let's
see
how
we
implement
it,
this
functionality.
So,
first
of
all,
let
me
show
you
the
source
code
of
the
content
by
query
web
part,
the
renewed
one.
A
This
is
a
SharePoint
primal
web
part
and
here
I
implemented
the
I
dynamic
data,
color
balls
interface,
which
is
provided
out
of
the
box
by
SharePoint
framework.
By
implementing
this
interface,
we
provide
all
of
the
infrastructure
all
of
the
plumbing
that
we
need
to
make
this
wood
part
as
a
date
dynamic
data
provider.
A
Once
you
do
that,
you
have
to
register
your
web
partum
as
a
data
provider,
so
in
the
on
init
method
of
my
web
part,
I
initialize,
with
the
dynamic
data
source
manager,
property
of
the
context
of
SharePoint
framework.
This
word
part
is
a
data
source
for
dynamic
data
and
just
for
the
sake
of
having
a
predefined.
The
pre-selected
item
I
define
a
dummy
item
which
will
not
have
any
URL
and
in
list
ID
or
any
item
would
be
a
minute.
One
item
ID
up
to
you
once
you
have
done
that.
A
Well,
you
have
to
implement
the
actual
behavior
of
the
interface.
So
first
of
all,
you
will
have
to
implement
the
get.
Let
me
go
there
because
it's
quite
a
long
source
code
base.
Let
me
go
to
the
end
of
the
source
code.
You
have
to
implement
the
get
property
definitions
which
will
be
a
method
defining
the
interface
that
we
implemented
and
using
this
method
we
declare
what
is
the
dynamic
or
what
are
the
dynamic
properties
that
we
want
to
provide
to
any
external
consumer.
A
How
do
we
set
this
value?
Well,
we
have
an
event
method,
which
is
the
on
selected
item,
which
will
receive
as
an
input
the
selected
item
as
a
dynamic
item,
which
is
a
custom
interface
that
we
defined.
Whenever
we
get
a
new
item
to
select,
we
simply
set
the
value
in
our
internal
field
and
we
notify
all
of
the
consumers
that
the
property
with
ID
selected
item
is
changed,
so
that
any
subscriber
will
get
a
notification
and
will
be
able
to
get
the
new
selected
value
for
our
item.
A
A
So
this
is
the
dynamic
item
interface
that
we
define
and
which
will
simply
provide
a
web
URL,
the
last
ID
and
the
item
ID
that
we
saw
previously
in
the
UI
of
the
dynamic
data
web
part,
and
we
also
define
in
the
properties
of
the
react
component
that
we
have
the
unselected
item
method
that
we
want
to
provide
to
the
react
component
inside
the
react
component.
We
simply
have
the
logic
to
bind
the
handlebars
template
in
the
output
of
the
handlebars
template
to
the
event
listener.
For
the
selected
item
event,
how
do
we
do
that?
A
And
here
oops
we
have
the
bind
item,
selectors
method.
What
do
we
do
with
this
method?
Well,
this
metal
will
be
executed
whenever
we
process
the
handlebar
template.
So
whenever
we
create
the
output,
the
rendering
of
the
output
of
the
handlebars
template,
then
we
will
invoke
this
method.
This
method,
we
will
simply
look
for
all
of
the
HTML
elements
with
the
Select
item.
Css
class
applied
to
them
as
I
told
you
and
if
any
will
connect
the
click
event
to
our
custom
function,
called
item,
selector
click
in
the
item
select
or
click.
We
prepare.
A
We
create
a
high
dynamic
item,
object
instance
and
we
provide
it
to
the
on
selected
item
of
our
web
part
so
that
the
web
part
will
be
able
to
notify
all
of
the
subscribers
with
the
new
selected
item
and,
of
course,
to
get
the
item
ID,
we
simply
read
the
data
item
ID
attribute
so
from
a
data
provider.
Point
of
view.
That's
the
story,
data
consumer
point
of
view.
Let
me
switch
to
the
other
solution,
which
is
a
completely
different,
sharpen
frame
or
solution,
because
you
will
be
able
to
create
your
own
consumer.
A
What
path
here
we
simply
have
a
client-side
web
part
built
with
the
SharePoint
framework
still
in
the
properties
of
the
web.
Part
I
declared
a
bunch
of
dynamic
property
of
tea
members
and
the
dynamic
property
is
at
I,
provided
out
of
the
box
by
sharpen
framework,
as
you
can
see
here,
when
I
have
one
or
more
dynamic
properties
in
the
properties
of
a
web
part
I
can
then
bind
them
to
a
data
source
here
in
the
render
method
of
the
consumer
part
whenever
I
want
to
access
the
value
of
the
properties.
A
I
need
to
try
to
get
the
source
to
see
if
the
property
is
connected
to
a
data
source
and
if
it
is
connected.
Okay,
if
not
I
will
have
to
configure
my
web
part
and
once
I
have
the
properties
connected.
I
will
simply
provide
those
dynamic
properties
to
the
react
component,
rendering
my
web
part
and
in
there
I
will
say,
try
get
value
to
try
to
get
the
value
from
my
data
source,
and
if
any,
this
is
a
very
simple
consumer
web
part
I
simply
show
the
values
in
the
output.
A
The
interesting
part
of
the
story
in
the
consumer
web
part
is
how
we
implement
the
binding
UI.
So
what
we
need
to
do
in
order
to
connect
the
data
consumer
with
the
data
provider-
and
here
is
how
we
do
that.
Well,
first
of
all,
in
the
properties,
metadata
method
of
the
web
part
with
declare.
What
is
the
data
type
that
we
expect
for
all
of
the
dynamic
dynamic
properties
that
we
have
in
our
client-side
web
part?
A
Moreover,
in
the
get
property
pane
configuration
method,
we
declare
a
group
of
settings
configurable
through
the
property
pane
and
in
there
we
declare
two
possible
options.
One
option
is
to
manually
provide
the
value
for
those
properties
using
the
classic
property
pan
controls.
So
we
can
configure
the
web
URL
the
list
ID
and
the
item
ID
through
a
property
paint
text
field,
but
we
also
configure
an
alternative
solution
which
is
based
on
a
property
pane,
dynamic
field
set,
which
is
another
control
provided
by
sharpen
framework
and
inside
this
property
pane
dynamic
field
set
control.
A
We
define
a
set
of
property,
pane,
dynamic
field
objects,
those
property
pane,
dinamic
field
objects.
Allow
us
to
have
in
the
property,
pane
UI
the
correct
behavior,
to
bind
my
dynamic
properties
to
the
properties
provided
by
the
data
source,
and
that's
why
here
I'm
binding
me.
While
you
are
elderly,
steady
and
the
item,
ID
dynamic
properties
to
the
target
source
whenever
I
do
that,
I
also
declare
that
I
want
to
show
the
secondary
group
so
the
one
based
on
the
dynamic,
binding
UI.
A
If
and
only
if,
I
have
the
properties
connected
and
configured
so
I
will
show
the
binding
UI.
If
that
is
the
case
or
I
will
show
the.
Let
me
say,
out-of-the-box
text
boxes
if
I'm
not
connected
to
any
external
data
source.
So
by
doing
that,
I
will
be
able
to
get
in
the
property
pane.
The
dynamic
connection
to
the
data
source
for
my
web
part
and
in
render
method
I
will
be
able
to
verify
if
I'm
connected
and
if
I'm
connected
I
will
be
able
to
get
the
value
inside
the
consumer.
A
Web
part
and
I
will
be
able
to
render
my
actual
content
based
on
the
selected
item
in
the
content.
Query
web
part
right
now
in
github
we
have
the
whole
source
code
of
the
content
by
critical
part,
most
likely
after
some
makeup
and
code
improvements
it.
It
would
be
worth
sharing
also
the
reference
code
for
the
consumer.
What
part?
Maybe
just
in
a
subfolder
here
called
the
consumer
web
part,
or
something
like
that,
so
that
you
will
be
able
to
start
from
there
to
build
your
own
consumer
web
pack.
A
But
the
overall
idea
is
that
you
can
use
it
SPF,
X
1.10,
the
new
modern
content.
Will
you
a
part
and
if
you
need
you
can
also
dynamically
select
the
items
in
the
content,
query
web
part
and
consequently
update
the
UI
of
your
own,
a
custom,
developed,
client-side
web
parts
and
I.
Think
that's
it
for
me
as
well.
Vism
now.
B
I
have
two
questions:
don't
stop
sharing
it
and
there
was
a
good
question
from
a
chat
window
related
on.
So
this
is
a
live
query
of
the
data.
It's
not
search
based,
query
right!
Yeah
we
need
a.
It
is
actually
doing
a
live
query
against
the
rest
API.
So
it's
not
a
search
based
yoson
tation,
yeah
yeah.
That
was
one
of
the
differences
between
the
search
reports
to
be
in
be
search.
B
Reports
were
just
this
one,
so
this
is
a
really
making
the
classic
content
by
query
report
from
technical
implementation
perspective
yeah,
the
the
other
thing,
which
is
just
a
a
nuance
again
on
this
one,
so
I
think
there
was
a
picture
of
this
one
also
in
mice
of
teams.
So
you
could
easily
then
surveys
your
let's
say:
teams.
Sorry
Microsoft,
Azure
portal,
news
into
teams
by
using
this
kind
of
a
web
part
as
well.