►
Description
This module will introduce you to leveraging the property pane for client-side web parts. You can use the property pane to configure and change the web part behavior in SharePoint or in Microsoft Team.
This module includes topics like different out-of-the-box property types supported in the property pane, custom property pane controls and introduction to reusable SharePoint PnP property pane controls, which helps to reduce your development costs by providing reusable open-source controls, which you can easily take advantage.
The module is presented by Andrew Connell (Voitanos). Associated training materials are available from GitHub for easy reuse as needed: https://github.com/SharePoint/sp-dev-training-spfx-webpart-proppane.
More details on the complete SharePoint Framework training package can be found from http://aka.ms/spfx-training.
You can use these training materials any way you want in new training deliveries or in other presentations. Sharing is caring!
A
In
this
module,
we're
gonna
look
at
working
with
the
property
pane
of
a
web
part
in
a
SharePoint
framework
client-side
web
part.
This
first
section
is
just
gonna,
introduce
you
to
the
property
pane,
we're
gonna
start
with
an
overview
of
the
web
part
property
pane
and
then
how
we
can
go
about
implementing
custom
properties
for
the
property
pane.
A
The
property
pane
has
three
key
elements:
we
have
pages
headers
and
groups.
A
page
is
a
whole
panel
that
you
can
see
there
on
the
tasks
pane
on
the
right.
A
header
is
the
section
at
the
top
where
in
this
screen
that
you
see
on
the
far
right-hand
side
of
the
slide,
it's
where
it
says
description
up
at
the
top
and
then
there's
groups.
We
can
have
different
groups
that
contain
different
fields
and
that
allows
us
to
group
things
within
a
specific
page.
A
Property
panes
must
contain
a
page,
and
at
least
one
group
that
we
can
have
additional
things
that
are
optional,
like
additional
groups
and
as
many
things
as
we
want
inside
of
those
groups.
The
property
pane
supports
the
following
field:
controls
or
field
types.
We
can
have
labels
text
boxes,
multi-line
text
boxes,
checkboxes,
dropdowns
links,
sliders
toggles,
and
we
can
even
build
custom
ones
as
well
and
implement
the
header
group
in
the
fields
the
way
you're
going
to
do.
This
is
inside
of
a
web
part.
A
There
is
a
method
called
get
property,
pane
configuration
and
that's
gonna
return
back
a
single
object
or
it's
a
single
property
actually,
but
you
use
the
get
keyword
in
JavaScript
to
return
the
value
of
it
and
that's
gonna
return
back
an
object
of
type
I
property,
pane
configuration.
This
is
gonna,
have
a
say,
a
single
property
of
pages
that
has
an
array
of
multiple
pages,
and
then
each
page
can
have
a
header
and
groups
section,
and
you
can
see
there
within
the
header.
We
can
have
a
description
property.
A
We
can
also
inside
the
group's
each
group,
can
have
a
name
and
can
also
have
fields
that
have
been
assigned
to
it
as
well
now
to
define
what
you're
going
to
do.
The
way
you're
gonna
implement
your
public
properties
on
your
web
part,
and
these
aren't
directly
related
to
the
property
pane
but
they're
the
custom
properties
on
your
property.
A
Pane
you're
going
to
import
a
the
corresponding
field
types
on
your
webpart
class
when
you
want
to
have
different
field
controls
that
are
going
to
be
showing
up
inside
of
the
property
pane
to
expose
data
from
the
property
pane
or
from
the
public
properties
on
your
webpart
field.
Types
are
available
as
modules
in
the
at
Microsoft,
slash,
SP
web
part
base
NPM
package
you're
going
to
modify
the
default,
get
property,
pane
configuration
method
and
add
in
properties
to
the
group
fields
array.
A
Now,
how
do
you
handle
property?
Pane
field
changes?
The
property
pane
has
two
different
modes
that
it
runs
in
by
default.
The
first
mode
is
reactive
and
it's
reactive
in
the
sense
that,
as
I
make
changes
inside
of
the
different
fields,
those
changes
are
going
to
be
applied,
live
to
the
corresponding
properties.
That
they're
attached
to
the
other
option
is
non
reactive.
So
in
reactive
mode
again,
every
change
is
going
to
trigger
a
change
of
it.
A
A
So
how
do
we
end
configuration
properties
to
webparts?
What
you're
gonna
do
is
you're
gonna,
modify
the
property,
pane
settings
method
and
you're
gonna,
add
the
property
to
the
group
fields
array.
So
here
you
can
see
wherever
group
fields,
array
and
I
have
a
single
property
called
the
property
pane
text
field.
That's
mapped
to
the
description,
public
property
and
then
the
label
is
just
to
be
a
descriptive
label.
A
So
here
you
can
see
where
I'm
creating
a
reference
to
my
react
component
or
I'm,
creating
an
instance
of
it
by
saying
react,
dot,
create
element
and
then
I'm
attaching
the
to
the
description
property
on
my
web
part
to
the
public
description
property
on
the
react
web
part
itself,
and
so
when
these
changes
happen,
this
is
it's
gonna
cause
the
rear.
Ending
of
my
react
based
web
part.
A
A
What
that's
gonna
do
is
that's
going
to
pass
in
the
description
property
that,
when
that's
been
set
on
the
component
itself,
then
when
the
component
has
been
updated,
I
can
check
the
see,
did
the
description,
property
change
and
if
it
did,
that,
I
can
call
my
do
something
method
again
to
do
whatever
I
want
with
it.
This
is
useful
like
say
if
I
have
a
weather
web
part
or
stock
ticker
web
part.
If
the
stock
symbol
there
was
change
that
was
passed
in
then
I
could
trigger.
A
Okay,
so
in
this
demo
we're
gonna
take
a
look
at
with
the
property
pane
and
how
we
can
do
some
simple
configurations
with
the
property
pane
in
custom.
Webparts
now
I've
already
got
a
webpart,
that's
created
here
and
I've
already
gone
ahead
and
extended
the
property
pane
as
well.
So
this
is
currently
running
in
my
local
environment
and
so
I'm
going
to
switch
this
over
into
edit
mode.
And
what
we'll
see
here
are
a
couple
new
things.
We
see
the
description
here.
A
This
is
what
we
get
out
of
the
box
in
a
SharePoint
framework,
client-side
web
part
and
as
you'll
see
here
we
can
see
the
changes
happen
live
as
I
make
my
changes,
so
you
can
see
as
I
had
spaces
to
this.
You
can
see
those
changes
happen
right
away,
but
one
of
the
things
I've
done
here
is
I
added
in
a
text
box
control
and
a
slider
control
too
out
of
the
box
controls.
A
Let's
look
at
the
slider
first,
so
you
can
see
here
that
it's
got
a
number
here,
that's
showing
here
on
the
side,
both
in
the
web
part
and
the
slider.
Now,
if
I
slide
it
back
and
forth
up
and
down,
you
can
see
the
values
are
changing
on
the
fly.
So
we'll
take
a
look
at
the
code,
see
how
that's
being
done
in
just
a
moment.
A
The
other
thing
I
want
to
show
you
here
is
how
we
can
change
the
value
of
our
text
box,
and
while
this
doesn't
look
all
that
interesting
and
go
within
plugin
South,
you
can
see
it's
showing
north
beforehand.
What
you
might
have
noticed
is
that
I
have
a
little
bit
of
data
validation,
so
we
know
that
one
of
the
continents
in
the
world
is
not
just
it's
just
known
as
a
South.
A
So
if
I
just
have
South
here,
you'll
see
I'm
getting
this
valid
data
validation,
little
error
messages
showing
up
and
saying
that
only
one
of
these
five
options
is
available,
and
so
it's
checking
to
see
the
value
that's
being
put
in
in
the
text
box
is
being
checked
against
some
other
values
and
when
it's
not
a
valid
thing,
you
notice
the
data
wasn't
being
changed
in
the
web
part.
But
if
I
change
in
went
put
the
real
value
here,
like
North
America,
you
can
see
that
value
did
change.
A
A
So,
if
I
jump
over
here
to
my
standard
web
part
project
and
I
opened
my
web
part,
what
we'll
see
is
I've
added
in
two
new
properties
to
my
public
properties
on
my
web
parts,
public
interface,
so
my
continent,
I,
have
num
continents,
visited
numbers
that
are
here
in
this
switch
over
to
fullscreen
and
you'll,
see
down
here
in
the
web,
part
I'm
just
rendering,
but
those
values
out
into
the
body
of
the
web
part
here.
So
cotton
wear
side
and
number
of
continents
were
visited
now.
A
The
code
for
this
is
gonna,
be
inside
of
the
get
property
pane
configuration.
So
what
I've
done?
First
is
I've
added
in
my
text
field,
my
property
pane
text
field
and
what
I've
done
I've
added
in
the
text
field,
control
for
the
continent
for
my
continent,
I
gave
it
a
label
to
show
where
it's
good
showing
up,
and
it's
mapped
here
to
the
my
continent,
custom
property
that
I
created
for
my
web
part
in
the
interface.
So
you
can
see
up
here.
This
is
one
this
we
just
saw
the
second
ago.
A
So
in
my
interface
as
that
value
changes
in
the
property
pane,
that's
how
the
property
is
getting
changed
and
then
the
render
method
is
being
recalled.
It's
called
again
to
re
render
the
content
out
on
the
page.
Now
what
I
think
is
interesting
about
this
is
we're
doing
beta
validation
and
the
way
we
do
this
is
by
implementing
a
function
for
the
on
get
error.
Message.
Event.
A
A
But
it's
gonna
treat
that
as
the
error
message,
and
it
will
say
that
this
value
is
invalid
and
display
that,
but
that
that
error
message
when
it's
invalid,
it
won't
update
the
actual
property
on
the
public
part
of
the
web
pipe
either.
It'll
just
leave
it
blank.
So
if
you
take
a
look
at
the
what
the
function
does
here,
you
see
the
validate
continents.
A
It's
how
the
text
box
values
being
passed
in,
or
a
string
values
being
passed
in
and
it's
returning
back
a
string,
so
I'm
doing
is
I've
got
a
constant
of
just
a
bunt,
an
array
of
strings
which
is
just
continents
and
I'm,
converting
the
one
that
was
passed
in
validate
against
converted
to
lowercase,
so
we're
doing
an
exact
match
or
exact
comparison,
and
then
we
check
to
see
the
index
of
it
in
the
array.
So,
if
it
comes
back
is
negative
one,
then
it
knows
that
it
didn't
find
a
value
in
there.
A
So
I
know
it's
not
a
valid
value,
because
it's
not
one
of
the
ones
I'm
expecting
so
I'm
gonna
write
back
an
error
message.
Otherwise,
if
it
comes
back
with
something
other
than
negative
one,
that's
the
index
of
word
is
in
the
array,
which
means
that
it
found
it.
So
it's
a
valid
value,
so
I'll
return
back
the
empty
string.
Now
the
other
control
we
have
was
the
slider,
and
so
with
the
slider.
That's
mapped
to
the
numb
Cotton's
visit.
A
How
many
places
I
visited
I've
got
the
label
set
and
you
see
additional
property
values
that
I've
set.
This
is
a
min
value
and
the
max
value
and
the
show
value.
So
some
of
these
are
required,
and
some
of
these
are
not
required.
Some
of
them
are
default.
The
show
value
is
how
you're,
seeing
that
number
five
showing
up
to
the
right
of
the
slider.
So
how
did
I
get
that
property
pain
slider
into
my
into
my
project?
A
Well,
if
I
scroll
back
up
to
the
top
here
and
I,
look
at
where
the
SP
webpart
base
that's
being
imported
by
default,
I
get
the
text
field
and
a
property
pane
configuration
interface
and
the
base
webpart
as
I
said.
Well,
I,
wonder
what
other
controls
are
available
to
me.
So
the
way
I
did
this
is
I
just
put
a
comma
on
the
end
of
it
and
I
started
typing
in
property
pane,
and
you
can
see
here.
A
A
You
may
have
additional
properties
for
each
one
of
these
different
controls,
and
so
that's
what
the
second
value
is
that's
being
passed
in
to
these
different
controls
here,
so
the
first
one
is
for
the
property
that's
going
to
bind
to
and
the
second
one
is
the
actual
object
of
the
properties
you
can
pass
in
and
see
the
properties
for
this
one
that
I
just
hover
over
it.
You
can
see
the
property
type
is
a
I
property
pain,
slider
props.
A
So
if
I
want
to
see
what's
available
there,
if
I
right-click
on
the
actual
control
and
go
to
the
definition,
that's
going
to
take
me
to
the
the
type
declaration.
For
this
thing
you
can
find
the
properties
to
do
that
same
thing
with
a
part,
pain
definition,
and
you
can
see
here
that
I
can
look
at
all
the
same
properties
or
all
the
properties
that
are
available
to
me
on
the
property
pain,
slider.
The
ones
have
a
question
mark
on
them.
That's
the
typescript
notation
as
optional,
but
other
ones
like
min
and
Max.
A
Those
were
carved.
So
that's
why
I
had
to
put
those
in
but
show
value
was
not
required,
I
just
added
in
just
for
the
heck
of
it,
but
you
just
wanted
to
show
you
how
we
could
do
both
of
those.
So
this
is
how
we
could
do
very
simple
configurations
and
customizations
using
the
out-of-the-box
controls
that
we
get
in
the
SharePoint
framework
for
our
party,
specifically
we're
gonna,
look
at
adding
a
custom
property
pain-filled
and
then
also
creating
custom
property.
Pane
controls
inside
of
this
section.
A
The
property
pane
supports
the
following
types
of
field
types
out-of-the-box,
all
the
ones
that
you
can
see
here,
but
it's
always
possible
to
create
your
own
custom
field
types
as
well,
for
your
own
projects
then
implement
a
custom
property
pane
field.
It's
gonna
require
you
to
define
an
interface
within
your
web
part
that
includes
one
or
more
target
properties.
You're
then
going
to
import
the
property,
paying
custom
field
field
type
into
your
web
part
class,
and
then
that
field
type
is
also
going
to
be
available
to
you
as
a
module
within
the
at
Microsoft.
A
Slash
SP
web
part
base
NPM
package
the
way
you're
gonna
implement.
This
is
you're
inside
the
web.
Part
you're
gonna
create
a
render
method
for
the
custom
field,
so
here
I've
got
a
custom
field
rendered.
That's
gonna
have
an
HTML
element
passed
in
and
you
can
see
here
where
I'm
rendering
it
now
it's
just
a
standard,
div
and
then
I'm
also
gonna
have
a
custom
field
definition
that
I'm
gonna
define
then
in
the
group
fields
array.
A
So
here
I've
got
my
custom
pane
custom
for
my
property,
paying
custom
field
and
then
I'm
mapping
his
own
render
method
to
the
custom,
render
custom
field
renderer
method
that
I
defined
inside
of
my
web
part
now
creating
custom
property,
pane
controls.
Let's
talk
a
little
bit
about
this
when
the
out-of-the-box
property
pane
controls
don't
meet
the
needs,
then
I
can
always
create
my
own
custom
controls
and
creating
custom
controls
is
going
to
promote
code
reusability
inside
of
my
projects
here.
A
So,
for
example,
you
can
see
that
I
have
like
my
nested
list,
drop-down,
where
I
can
select
a
list
and
then
it's
going
to
show
me
a
list
of
all
the
available
options
in
side
of
it.
So
it's
a
very
short
little
section
to
talk
about,
because
the
code
for
this
is
quite
significant.
So
let's
take
a
look
at
the
demo
and
let's
see
this
in
action
is
a
little
bit
easier
to
understand
what
we
can
see
a
working
example.
A
A
So
I've
got
my
same
web
part
from
the
previous
demo,
but
the
difference
here
is
that
I
want
to
be
able
to
instead
of
typing
in
the
name
of
the
continent
where
I
reside
I'd
like
to
instead
select
it
from
a
drop-down
list
and
so
I'd
like
to
create
like
a
continent
selector.
So
if
I
go
over
here
to
my
edit,
my
web
part
you'll,
see
here
that
I
now
have
this
drop-down,
where
I
can
choose
from
different
options
that
are
available
to
me.
A
So
again,
it
would
be
nice
to
be
able
to
have
a
reusable
component.
So
let's
go
over
to
our
web
part
and
let's
take
a
look
at
the
web
part
and
let's
see
what
we've
actually
created
here.
So
here
I've
got
a
property
paying
continent
selector,
and
what
this
continent
selector
does.
Is
I
have
a
continent
property
that
I've
defined
so
I
have
this
string?
A
Allow
me
to
handle
any
updates
to
tell
the
web
part
to
rerender
itself
if
the
value
of
the
selected
value,
if
that
value
changed
from
the
previous
value
that
was
currently
selected
all
right,
so
you
can
see
I've,
also
disabled
or
commented
out
my
my
error
code,
my
error
checking
or
my
validation
code,
because
we
don't
need
that
anymore,
we're
having
a
selector
and
so
I
only
have
an
exact
number
of
references
or
options.
I
can
choose
from.
A
So
how
does
this
work
so,
if
I
scroll
up
here
to
the
top,
what
you'll
see
is
I
have
a
new
import
statement
and
this
import
statement
is
importing
the
property,
paying
content,
selector
and
an
interface
for
the
public
properties.
You
can
see
that's
coming
from
this
subfolder
called
controls.
So
let's
take
a
look
at
that.
So
here
inside
of
controls,
let
me
give
you
a
high
level
of
how
this
thing
is
built.
This
thing
is
built
as
a
react
control,
and
so
the
web
part
is
not
a
react.
A
It's
something
that
can
easily
use
inside
of
my
web
part,
and
so
what
I
did
if
I
come
back
down
here
to
my
my
selector,
so
you
can
see
I've
defined
this
thing
called
a
property
pane
continent
selector,
and
then
it
implements
the
I
property
pane
field.
So
this
is
my
custom
control.
This
is
the
route
of
my
custom
control.
Now
we
have
a
bunch
of
references
up
here
at
the
top
I'm
gonna
just
highlight
the
important
stuff
here
that
we
need
to
see.
A
A
So
if
I
scroll
down
a
little
bit
here
right
here
on
the
on
render
here,
what
on
render
is
doing
when
my
component
or
my
control
is
being
rendered,
the
on
render
method
is
gonna
trigger,
and
so
here,
in
this
case,
I'm
saying
looking
at
the
this
element,
so
I'm
checking
to
see
do
I
have
a
reference
to
the
current
element
on
the
page,
and
this
element
right
here
this
right,
this
piece
of
this
element.
This
is
looking
for
the
div
of
where
my
control
is
gonna
be
rendered
out.
A
So
in
this
case
here
I'm
creating
a
new
instance
of
a
react
control.
So
we
hide
the
tool
pane
here,
I'm
creating
my
content,
selector,
and
it's
got
some
public
properties
that
are
being
assigned
to
it
and
so
I'm
setting
the
the
label,
the
unchanged
event,
the
selected
key
disabled
state
and
a
state
key,
which
is
a
little
hack
once
I've
created
this.
This
element
here,
I'm,
then
going
to
add
them
to
the
page,
but
just
calling
a
react.
A
You
can
see
here
I'm
doing
this
on
this
unchanged
event
and
basically
doing
the
same
thing
that
we
did
earlier,
which
is
whenever
the
property
changes
I
can
specify
what
property
changed
and
I
do
that
by
calling
the
this
dot
target
property.
That
is
what
was
referenced
inside
of
my
web
part.
I
jump
back
over
here,
my
web
part
that
is
what's
referenced
inside
my
web
part
right
here,
where
I'm
saying
that
I'm
tying
this
to
that
property
of
my
continent.
A
Now,
let's
talk
about
some,
so
it's
gonna
be
a
little
interesting
here
for
a
second.
So
what
I've
got?
If
we
look
at
some
of
these
properties,
we
can
see
that
here's,
the
element
that's
being
passed
in
that
I'm,
getting
a
reference
to,
or
it's
not
being
passed
in,
oh
when
it
renders
I'm
saying
on
the
on
render
method
so
renders
checking
to
see.
A
Now,
what
I've
done
here
is
I've
got
an
interesting
kind
of
situation
here.
What
I
have
is
I'm
gonna
have
public
properties
that
I
want
to
be
able
to
set
on
my
react
component,
so
things
like.
Maybe
if
I
was,
if
I
let
them
choose
a
default
value
or
if
I,
let
them
specify
the
values
that
we
wanted
to
show.
A
So
if,
let's
say,
if
it
wasn't
countenance,
instead
I
wanted
to
pass
in
a
bunch
of
colors,
then
maybe
I
only
wanted
them
to
choose
from
four
colors,
and
so
maybe
I
had
a
property
which
is
an
array
of
strings
of
what
properties
we
wanted
to
use.
My
react
component
that
we're
trying
to
say
is
that
my
react
component.
A
Maybe
it
had
some
public
properties
that
I
wanted
to
be
able
to
set,
but
then
there
are
also
special
properties
that
a
property
that
a
property
pain
control
needs
to
have
as
well
things
like
a
key
and
a
label.
If
it's
disabled
or
not
stuff
like
that,
so
I've
got
two
different
sets
of
properties.
The
ones
are
used
for
my
react
control
and
then
the
ones
that
are
by
default
gonna
be
on
every
single
property
pain
control.
Now
the
way
I'm
handling
this
is
I'm,
creating
this
property,
this
public
property
here
of
this
selector
props.
A
So
these
are
the
properties,
the
public
properties
that
I
can
set
on
the
on
the
property
pain
control.
Then,
if
I
come
over
here
and
I,
look
at
this
other
class
called
the
internal
props,
which
is
the
same
name
just
internal
props.
The
only
thing
that
you'll
see
that's
different
with
this
is
that
he's,
inheriting
from
not
only
the
ones
that
I
just
showed
you
a
second
ago,
but
also
the
ones
from
my
I'm.
A
A
Now
the
next
piece
here
if
I
come
over
here
to
the
components.
This
is
then
react.
The
react
component-
and
you
can
see
here
that
my
react
component
is
just
it's
a
standard
react
component.
There's
absolutely
nothing
special
about
this.
He's
got
a
render
method,
he's
using
the
drop
down
control
from
the
office
UI
fabric
and
then
his
on
changed
event.
He's
just
gonna
walk
through
this
unchanged
event
and
publish
when
a
property
actually
changed.
If
it
did
change,
he
has
a
state
set
to
him.
A
So
we
have
a
state
a
set
of
options,
and
we
also
have
the
properties
themselves
of
the
control
of
the
the
react
component
itself
and
a
lot
of
these
look
the
same
as
the
one
that
we
had
a
second
ago
with
the
selector.
There
are
the
selectors
properties
like
label
and
select
a
key
and
disabled,
because
the
public
properties
that
are
going
to
be
set
on
my
react.
Control
are
also
the
same
ones
that
I
want
the
developer
to
be
able
to
set
from
the
property
pane
itself.
A
We
have
our
control
like
this,
then
to
use
it
we're
simply
going
to
as
I
showed
you
a
moment
ago
will
just
reference
it
on
the
page
with
his
public
properties
and
then
I
can
just
use
it
by
creating
a
new
instance
of
it.
Just
like
this,
and
that's
how
we
can
work
with
custom
controls
for
the
property
pane
in
a
SharePoint
framework.
Client-Side
web
part.
A
So
the
property
pane
controls
that
we
get
out
of
the
box
and
the
SharePoint
framework
API
are
pretty
basic
controls.
Things
like
text
boxes,
drop-down
sliders,
we've
seen
these,
but
they
don't
contain
any
logic
or
any
detail
about
the
current
SharePoint
site.
So
simple
controls
that
developers
would
want
to
be
able
to
use
in
their
webparts.
That's
really
how
these
controls
kind
of
are
categorized
developers
can
add
logic
to
initialize
them
like,
for
example,
I
could
create
a
drop-down
list
or
use
a
drop-down
list,
and
then
I
could
then
initialize
it.
A
When
my
web
part
property
pane
opens
to
get
a
list
of
all
the
current
lists
from
the
current
SharePoint
site
and
then
a
developer
myself
like
myself,
can
then
create
a
custom
property
pane
feel
with
these
controls
and
add
additional
business
logic
to
them,
to
create
my
own
custom,
smart
controls,
so
that
it
would
be
then
much
more
reusable
to
drop
a
SharePoint
lists
control
into
my
web
part.
Instead
of
having
to
initial
that
every
single
time
I
could
reuse
this
control
over
and
over.
In
my
in
all
my
different
webparts.
A
Now
what
what
some
people
have
done?
Specifically
the
patterns
and
practices
group,
the
sharepoint
patterns
and
practices
group.
What
they
have
done
is
they've
created
a
suite
of
controls
as
an
open-source
community
library,
and
this
is
called
the
the
property
pane
controls
for
the
sharepoint
framework.
A
The
it's
a
what
these
are
are
reusable
controls
that
have
some
smart
logic
that
are
tied
to
the
existing
SharePoint
site,
so
they're
gonna
allow
us
to
do
things
like
just
drop
a
single
control,
and
that
knows
how
to
get
a
list
of
all
the
current
lists
in
the
current
SharePoint
site.
We've
also
got
things
like
a
color
picker.
We
have
a
date
picker.
A
So
the
way
you're
gonna
add
them
to
your
project
is
pretty
straightforward.
The
it's
really
well
documented
on
the
site
that
I
referenced
earlier
in
the
slides.
The
first
thing
you're
gonna
have
to
do.
Is
you
have
to
install
the
package
in
your
project?
You're
gonna.
Do
that
by
running
NPM,
install
and
then
download
and
install
the
package
called
at
P
and
P
slash,
SPF,
X
property
controls,
make
sure
you
add
that
save
and
that
ensures
that
it
gets
recorded
in
the
package
JSON
file,
then
you're
going
to
import
a
reference
for
the
controls.
A
A
It's
just
a
string
of
an
array
of
strings,
and
in
this
case
here
I'm
giving
it
a
label
I'm
telling
the
selected
list
so
which
list
is
the
one
that's
gonna
be
do
I
want
to
have
show
up,
should
I
show
hidden
lists
inside
of
this
drop-down
list?
How
should
they
be
sorted?
And
then
you
can
just
see
all
the
other
options
that
I
have
there
as
well,
that
are
all
referenced.
There
I
even
have
a
I'm
using
the
on
property
change
to
notify
SharePoint
when
the
property
Windus
control
changes.
A
A
In
this
last
demo,
we're
gonna
take
a
look
at
using
the
popular
PMP,
reusable
property,
pane
controls
in
a
SharePoint
framework
web
part.
Now
one
of
the
challenges
that
we
have
in
working
with
some
of
the
controls
that
are
available
to
us
is
they're,
absolutely
fantastic
in
the
sense
that
we
can
do
all
kinds
of
things
with
them.
A
Now
this
is
a
hard
court,
a
hard-coded
list.
That's
for
being
returned
back
to
me,
but
here
I
can
just
choose
a
user
here.
I
picked
Sarah
Davis!
You
can
see
that
it's
got.
Sarah's
name
shows
up
here:
I,
go
to
a
search
for
John
Doe
and
pick
John
Doe,
and
you
can
see
John
Doe
showing
up.
So
this
is
a
cool
little
people
picker
option
another.
A
So
you
can
see
different
ways
of
hide
use
this.
These
are
two
of
the
PMP
reusable
property,
paying
controls.
So
how
did
I
get
these
into
the
project?
Well,
if
I
come
over
here
to
my
project
and
I,
look
at
the
package.json
one
of
the
only
thing
I
did
was
I
installed.
This
package
called
at
PMP,
slash,
SPF,
X
property
controls,
so
I've
added
a
reference
to
this.
A
A
So
the
way
this
is
being
used
if
I
scroll
down
here
in
the
property
pane
you
can
see
in
this
case,
where
I
have
created
an
instance
of
my
property
pane,
my
property
pain
control
for
the
people.
Picker
using
the
PMP
SharePoint
framework
controls,
so
this
is
tied
to
the
public
property
of
people
and
then
I've
just
got
a
bunch
of
other
stuff
that
I've
got
listed
here
so
I've
got.
You
know
some
initial
data
I
want
to
display.
That
would
be
the
people
who
are
currently
selected.
A
A
Setting
a
comment
for
it
as
well,
and
so
this
is
just
showing
you
how
you
can
use
some
of
the
more
popular
controls.
Oh
and
I
guess
the
last
thing
to
show
you
here
is
just
here's:
how
I
was
rendering
those
out
where
I
just
had
these
two
divs
and
I
was
just
gonna
enumerate
through
anything
that
was
selected
and
write
them
all
out
and
then
same
thing
down
here
at
this
expansion
option.
So
this
is
just
code
of
you
know.
How
do
I
render
that
stuff
out?
It's
not
as
important
to
it.
A
In
this
module,
this
is
a
fairly
quick
module
and
what
we
looked
at
here
is
working
with
the
web
part
property
pane.
We
saw
how
to
configure
and
customize
the
property
pane
with
the
out-of-the-box
controls
that
are
included
in
the
SharePoint
framework.
We
saw
how
to
create
our
own
controls
when
we
needed
to
create
something
custom,
and
then
we
also
saw
how
to
use
the
reusable
controls
that
were
available
to
us
as
part
of
a
PNP
open-source
community
library
and
how
we
can
leverage
them.
I've
included
a
couple
additional
links
inside
of
this.
A
This
module,
where
you
can
learn
more
about
working
with
the
property
pane
on
SharePoint
framework,
client-side
web
parts
and
how
you
can
create
reusable
property
panel
controls
as
well
for
your
SPF,
x
solutions.
I,
hope
you
got
a
lot
out
of
this
module
and
learning
how
to
work
with
the
property
vein
for
client-side
web
parts
in
the
SharePoint
framework.
Thank
you
very
much.