►
Description
PnP Webcast around building cascading property pane dropdowns with SharePoint Framework. Demonstration on how to build custom property pane capabilities with client-side web parts. More details from blog post at http://dev.office.com/blogs
A
Welcome
everybody:
this
is
chef
on
Spanish
and
practices
of
wet
cast,
and
this
time
we
actually
gonna
have
a
use
case
scenario
which
we're
gonna
explain
how
to
make
that
happen
within
your
client-side
web
board
development.
So
we're
talking
about
cascading
property,
main
drop
downs
implemented
as
a
property
bein
within
your
client-side
web
part.
My
name
is
Vernon
I'm,
a
Senior
Program
Manager
from
ship
and
engineering
and
weekly
today,
responsible
of
the
demo
is,
will
be
wall
deck
master
cards
while
they
only
do
the
entrance.
Yes,.
B
A
Cool
before
we
go
to
the
actual
contents
and
the
actual
use
case,
what
are
we
gonna
go
through?
Our
world
is
gonna
show
within
the
demo,
using
a
react
based
sample,
which
is
available
for
you
for
download
just
to
quickly
explain
ship
on
panels
and
practices
is
a
community
human
initiative
coordinated
by
the
SharePoint
engineering,
but
we
work
together
with
MVPs
like
while
they
can
Paul
on
Irving
and
and
many
many
other
in
the
Peace
Plus
community
people
to
provide
coats
and
postcards
augmentations.
We
have
monthly
community
calls
case
studies
and
so
on.
A
We
concentrate
on
a
SharePoint
development,
mainly
so
the
area
starship
on
framework
SharePoint
add-ins
for
SharePoint,
Online
and
on-premises
max
of
craft
is
a
important
piece
as
well
and
in
general
office.
365
ap
is
a
game
as
SharePoint
BMP
is
the
one
address
to
remember
now,
let's
move
into
the
today's
actual
today's
topic,
which
was
the
cascading
dropdowns
in
the
property
pain.
This
is
more
economist
scenario
or
a
a
case.
What
we
want
to
show
in
practice
how
to
make
this
happen
from
a
coding
perspective.
A
So
essentially,
what
we're
going
to
show
is
that
you
have
a
cascading
dropdowns
with
the
dependency
in
the
property
Bay,
so
you
have
a
one
truck
down
you
click
and
select
something
from
there
and
that
will
then
download
a
synchronously,
the
other
set
of
data
in
the
second
drop-down.
In
the
example
case
in
the
demo,
where
this
is
going
to
be
demonstrated
with
a
selection
first
lists,
and
then
you
can
select
an
item
to
be
shown
in
quotes
or
item
data
to
be
shown
in
the
client-side
web
or
the
web.
Part
itself
is
not
really.
A
The
key
point
to
key
point
is
more
around.
How
do
we
implement
this?
A
synchronous
dependency
across
these
chopped
downs
in
the
property
pane
and
that's
a
good.
The
third
point
on
the
slide
is,
is
really
around
a
synchronous,
queries
based
on
the
user
selection,
so
we're
kind
of
updating
the
situation
and
we
are
actually
updating
the
description.
What
are
we
loading
when,
based
on
the
selection
of
the
end
user
as
well?
A
In
this
case
it
would
be
the
shared
documents
and
then
we
start
loading
the
items
from
that
particular
list
and
then
you're
able
to
select
an
particular
item,
for
example
to
be
shown
or
whatever
we
want
to
do
with
that
particular
item.
In
our
example
scenario,
the
the
selection
doesn't
really
do
that
much
additional
thing
we're
just
using
a
essentially
the
basic
web
part
output,
which
is
available
right
after
scaffolding,
because
we
want
to
concentrate
more
on
the
scenario.
How
do
we
make
this
happen
in
the
real
world?
A
Maybe
you
would
be
able
to,
for
example,
use
this
kind
of
a
selection
if
you
wanna
so
a1
information
around
one
document
in
the
front
page
of
the
or
well
in
your
web
part
or
if
you
have
other
dependencies
and
data
stored
in
a
SharePoint
list.
You
would
select
the
one
item
and
to
be
then
reflected
on
the
on
the
client-side
web
part
itself.
A
Cool
I
think
that's
actually
enough
for
the
for
the
scenario,
clarification
and
I
think
the
easiest
way
to
understand
and
or
see
this.
In
practice,
it's
not
actually
concentrate
on
slides,
let's
actually
jump
on
a
demo
and
while
the
COS
gonna
do
the
demo-
and
this
is
a
react-
based
implementation
and
how
to
make
this
happen.
Obviously
you
can
do
the
similar
kind
of
stuff
using
whatever
framework,
but
our
selection
for
this
particular
sample
was
reactive.
But
let's
have
a
look
on
that
one
in
practice.
B
All
right,
so,
the
web
part
that
we
have
built
and
we
want
to
show
show
show
you
allows
you
to
select
a
list
and
then
from
that
list,
an
item.
So
when
you
add
the
web
part
first
time
to
the
page
it
visit
right,
it
doesn't
show
anything
because
we
still
didn't
pick
and
the
list
an
item.
So
when
we
open
the
the
problem
already
played
well
was
what
to
see.
First
is
that
we
load
lists
right
and
initially,
let
me
do
it
again,
because
it
takes
only
a
moment.
B
So
when
you
add
the
web
part
to
the
page,
we'll
see
that
to
the
selection
box
on
the
right
hand,
side
for
the
list,
an
item
are
turned
off
and
then
we
loved
list
and
when,
when
when
the
lists
are
available,
we
actually
enable
drop-down
to
select
a
list
and
then
then
users
can
pick
a
list
right.
So
we
add
the
weapon
to
the
page.
We
open
operative
aim.
We
load
lists
this
one
is
disabled,
and
now
it's
on
all
right.
B
So
now
that
we
have
lists
of
lists
available
in
this
site,
we
can
pick
a
list
and
taken
out
that
currently
we
we
cannot
pick
an
item
because
we
didn't
pick
list
yet
right.
So
you
first
have
to
pick
a
list
and
then,
from
that
list
we
will
get
a
list
of
items
available
inside
this
list
for
us
to
pick.
B
So
we
choose
a
list
and
we
have
two
of
them
and
then
we
load
the
list
of
available
items
in
this
list
and
now
we
can
choose
an
item
and
then,
if
you
pick
another
list
then
then
we
will
again
load
items
from
that
list
and
we
will
be
able
to
pick
an
item
from
that
list.
Right
and
and
whatever
we
choose.
B
We
show
here
your
in
web
part
to
actually
confirm
that
whatever
we
we
pick
in
our
property
pain
that
we
store
that
inside
the
web
part
and
from
there
we
can
use
that
to
show
show
a
additional
info.
So
with
that,
let's
have
a
look
at
how
didn't
didn't
just
works
in
code.
So
let
me
move
that
to
the
right-hand
side,
and
here
is
our
code.
So
initially,
when
we
add
the
web
part
to
the
page,
we
don't
do
anything
right.
B
B
So
initially,
when
we
add
the
paper
to
the
page,
we
don't
do
anything
right
because
we
don't
want
to
load
the
list
of
Lists
that
we
want
to
have
available
when
we
set
the
web
part
up.
We
don't
want
to
load
that
when
we
only
show
the
web
part
on
a
page,
we
only
want
to
have
the
list
of
lists
available
when
we
actually
open
hope,
property
pane,
and
we
want
to
be
able
to
pick
a
list
right
so
now.
So
this
event
we
do
that
by
implementing
the
on
property.
Pane
configuration
start
Matins
acid.
B
An
item
should
only
be
enabled
if
we
have
the
list
of
items
and
we
selected
a
list
right,
because
even
if
we
in
the
past
would
load
the
list
of
items,
it
might
be
that
we
didn't
pick
a
list
yet
that
we
change
a
list
right.
So
in
that
we
don't
want
to
be
able
to
select
an
item
right.
So
here
we
say
that
if
we,
if
we
have
lists,
we
don't
need
to
load
list
anymore
right.
So
we
break
it
off,
but
if
we
don't
have
a
list.
B
B
You
see
it
now,
so
you
see
so
we
communicate
user
that
we
actually
load
options
and
that
that
might
take
a
while
right,
because
in
production
we
would
load
that
from
the
current
side
here
we
actually
use
a
mock.
So
if
we
go
to
the
this
load
list
here
we
use
mock
and
we
set
some
time
to
actually
illustrate
how
it
would
look
like
when
you
will
wait
to
load
the
data
right.
So
here
we
go
back
to
the
code,
so.
A
First,
we
quickly
on
that
one
before
we
get
there,
just
the
pinpoint
the
fact
that
the
display
loading
indicator,
it's
a
really
easy,
fellow
to
actually
use,
as
you
can
see,
it's
just
a
a
method,
essentially
on
the
on
there
or
you're
able
to
test
command.
What's
gonna
happen,
what's
the
text
and
all
of
that
so
really
really
simplistic
thing
to
it.
Yes,.
B
B
If
we
have,
then
we
have
to
load
the
list
of
items
for
that
debt
in
that
list
right
and
for
that
we
also
need
to
refresh
the
the
pane,
which
we
do
and
do
do
here,
because
initially
this
one
is
turned
off
and
after
we
have
enabled
or
loaded
the
list
of
lists
we
actually
have
to
enable
it.
So
we
say,
let's
drop
down
to
say
bolt
is
false,
and
then
we
actually
just
refresh
the
pain
that
actually
refresh
the
current
state
right.
B
So
that
and
as
we
are
done,
we
actually
cleared
the
indicator,
and
the
thing
is
when
you
do
this,
what
it
does
is
its
removes
all
of
the
dumb
inside
the
web
part
right.
So
it
clears
the
whole
body,
and
this
is
exactly
why
we
have
to
call
render
to
have
the
web
part
repaint
it's
in
it
itself
right,
because
otherwise,
without
this
it
will
be
just
an
empty
block.
I.
A
A
A
B
Less
and
also
another
thing
that
we
don't
have
here,
is
that
imagine
that
you'd
have
an
error,
so
you
might
want
to
be
able
to
show
that
as
well
that
there
was
an
error.
Try
again,
yeah
right
tend
to
be
able
to
re
redo
the
whole
step,
all
right.
So
imagine
now
that
we
change
that
we
select
a
list
so
when
we
pick
a
list
well,
what
we
do,
then,
is
that,
based
on
that
list,
we
load
the
list
of
items
available
in
that
list
and
once
then
that's
done.
We
enabled
this
box
here.
B
So
we
pick
a
list,
we
load
the
items
and
then
once
we
have
the
items
that
that
list
is
enabled
and
from
that
we
can
pick
an
item.
So
the
way
this
works
is
that
we
subscribe
to
another
event,
which
is
the
on
property,
pane,
feel
changed,
and
in
that
we
get
the
name
of
property
that
we
change,
which
in
our
case
is
list.
So
this
is
here
and
we
get
the
value.
So
we
can
say
that,
yes,
we
changed,
we
change
the
list
and
we
actually
have
a
list
right.
B
So
we
didn't
set
that
to
empty
so,
first
of
all,
and
there
are
actually
a
quite
a
few
things
that
we
have
to
do
here
right
because
we
override
the
matter
that
we
get
out
of
the
box.
So,
first
of
all,
what
we
have
to
do
is
we
have
to
actually
store
the
new
value
inside
the
web
part,
because
without
that,
if
you
would
reload
to
pay,
you
would
be
back
to
empty
what
whatever
right.
B
So
really
so
you
you
want
to
start
the
value
that
that
that
user
picked
inside
the
web
part
then
because
we
selected
a
list.
We
reset
the
item
that
we
might
have
selected
previously,
because
if
you
change
the
list,
the
item
that
you
that
you
had
previously
does
not
exist
in
the
new
list
right.
So
we
have
to
reset
that
and
also
start
that
inside
the
web
part.
B
Then
we
have
to
turn
off
the
selection
for
item
because,
based
on
the
new
list,
we
have
to
load
new
items
available
in
that
list,
and
then
we
refresh
the
the
pain
so
that
it
actually
turns
off
the
selection
for
item.
We
show
that
we're
loading
items
to
user
and
then
we
load
the
items
we
read
them.
We
re-enable
the
item,
a
box,
then
we
clear
indicator.
We
re
render
the
web
part
and
we
refresh
property
pane
right.
B
So
we
do
that
whenever
we
select
a
list
we
have
to
get
through
all
of
that
to
have
that
work
correctly
in
web
part
and
then
otherwise.
If
we
select,
for
example,
an
item,
we
don't
have
to
do
anything
to
the
list
and
we
don't
have
to
load
anything.
So
the
only
thing
that
we
have
to
do
is
to
call
actually
the
base
hazard
which
will
store
the
value
that
that
that
that
that
that
user
picked
in
web
part
makes
oh,
yes,
so
that's
the
whole
step
and
then
for
for
the
running
part,
that's
simple.
B
We
don't
do
anything
here,
because
we
just
show
the
value
that
the
user
picked
in
web
part.
So
we
don't
do
anything
here
and
from
the
property
pane
settings
point
of
view.
The
only
thing
thing
that
we
do
here
extra
is
that
we
bind
the
controls
that
we
have
to
our
arrays
to
our
array
of
less
an
array
of
items,
and
we
also
track
the
state
where
whether
they
are
enabled
or
not.
B
A
Yep
and
even
if
you
wouldn't
have
a
cascading
dependency
on
those
text
boxes,
this
actually
shows
how
to
just
load
the
basic
list
of
basic
lists
of
lists
as
an
example
or
options.
And
how
do
you
do
the
the
progress
indicator
status
indicator
as
well?
So
there's
a
quite
a
lot
of
actually
interesting
simplistic
processes
and
scenarios
demonstrated
with
this
one
yep.
B
A
Cool
so
really
kind
of
a
simple
scenario:
simple
use
case,
a
simple
thing
for
me,
let's
say
case
perspective,
but
the
whole
point
is
to
show
how
to
implement
these
kind
of
things
within
your
property
pane
Ober.
So
you
would
be
able
to
implement
a
similar
kind
of
dependency,
also
in
the
client-side
web
part.
If
you
want
to
have
a
functional
concert.
Web
part
with
the
cascading
property
be
proper
and
not
probably
been
cascading,
dropdowns
and
anything
else.
What
you
want
to
do
do
as
a
summary
wall
deck
on
the
under
scenario.
Yes,.
B
So
encourage
everyone
to
check
out
the
code
that
we
share,
because
although
the
sample
is
simplistic,
it's
a
scenario
that
you
you
encounter
so
often
right.
You
really
also
want
to
be
able
to
pick
an
item
from
a
list
and
then
based
on
that
offer
some
some
another
choice
and
based
on
that
show
items
or
show
something
in
web
part
right
so
like
like,
like
2-step
choice
or
three-step
choice.
B
That's
that
that's
a
thing
that
that
you
see
in
web
parts
really
a
lot,
and
that
case
illustrates
that
really
easily
without
any
burden
around
it
right.
So
you
can
just
just
really
easily
see
how
you
implement
that
with
everything
that
you
get
available
out
of
the
box
and
framework
right.
So
we
didn't
build
any
component
controls
by
ourselves.
We
only
use
building
blocks
that
you
get
out
of
the
box,
so.
A
A
Cool
thank
you
about
like
for
that
one,
and,
and
we
will
absolutely
if
you
have
a
look
on
the
video
details
on
the
on
the
underneath,
the
video
I
will
have
references
and
links
to
the
sample
itself,
so
you're
able
to
find
it
you're
able
to
download
it
and
and
have
a
close
look
on
on
how
stuff
has
been
implemented.
But
thank
you,
everybody
for
watching
and
we'll
come
up
with
a
new
webcast
sooner
or
later.
Thank
you.