►
Description
In this 22-minute developer-focused demo, Joel Rodrigues heartily recommends you use PnP controls for web parts and web part property panes. Step through where to find and how to install controls in your project. As easy as copy code from library, paste in web part, and tweak default control configuration as needed. Fork the Repo to get started. Controls shown PropertyFieldEnterpriseTermPicker, PropertyFieldInconPicker, PropertyFieldRoleDefinitionPicker, PropertyFieldCollectioonData, MyTeams and WebPartTitle. Test controls using the Controls Test web part. All controls well documented. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on October 6, 2022.
Demo Presenter
• Joel Rodrigues (Storm Technology) | @JoelFMRodrigues
Supporting materials
• Tools - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• Tools - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
B
So
the
idea
of
this
session
is
to
again
create
awareness
of
the
controls.
We
have
the
PNP,
reusable
controls
and
property,
pin
controls
and
there's
still
a
lot
of
people
that
don't
know
a
lot
about
them
or
don't
use
them
very
often
or
not
aware
of
they
have,
and
the
idea
was
to
just
keep
showcasing
them.
So
a
great
awareness
and
basically
just
transmit
how
simple
and
Powerful
these
things
are.
So
let
me
part
the
new
ones
if
you
just
search
for
PNP
controls
or
property
controls
or
reasonable
controls,
will
easily
find
two
websites.
B
B
So
what
I
did
on
this
project
was
simply
install
the
dependencies
and
then
I
also
came
here
and
I'm
passing
the
context
of
the
web
part
into
a
component.
You
can
see
here,
I
added
a
property
and
I'm.
Just
passing,
do
I
part
contact,
so
I
can
use
it
on
the
controls,
nothing
else
on
the
project.
So
let's
go
to
one
of
the
controls
that
I
just
randomly
picked
Enterprise
term
picker,
and
just
so
you
have
an
idea
how
powerful
and
super
easy
it
is.
Things
are
to
add.
B
B
And
we
grab
the
control
so
because
it's
a
property
control,
we
just
go
down
to
the
area
where
the
controls
copy
and
paste
check.
If
we
need
to
update
anything,
save
I,
know,
I
have
metadata
a
term
group
and
the
term
set
that
have
those
names.
So
if
we
now
go
back
here-
and
this
is
our
sample
web
part
and
all
I
did-
was
just
copy
the
control
and
we
have
a
term
picker-
we
didn't
even
have
to
figure
out
anything.
B
All
you
need
to
do
now
is
just
refine
any
properties
you
may
need
make
it
multi-select
or
I.
Think
it's
already
true,
but
change
the
term
group
term
ID
whatever
play
with
the
configurations.
If
the
default
is
not
what
you
need.
So
next
I
can
pick
a
control,
so
that
gives
us
a
bigger
for
icons
from
flowing
UI
that
you
can
pick.
B
An
icon
bigger
by
default,
sorry
on
the
properties,
you
might
think
there
you
go
and
you
can
either
configurable
why
to
speak
Nikon
on
a
web
part
or
something
like
that
copy
and
paste
the
code.
It
takes
a
few
minutes.
Another
one
I
will
probably
just
skip
this
one
for
the
sake
of
time,
but
it's
the
property,
fill
the
role,
picker
role,
definition
picker,
where
which
allows
you
to
select
brawls
in
the
site,
so
you
can
select,
for
example,
on
a
given
web
part.
B
If
it's,
if
you
have
something
to
do
with
viewers
or
editors
or
something
like
that,
if
you
behave
differently
depending
on
the
role
of
the
user,
you
can
configure
that
through
the
web
part,
for
example,
this
one
I
will
show
you
just
because
this
is
extremely
powerful
control.
One
of
my
favorites
and
I
use
it
very
often,
which
is
the
collection
data,
and
you
can.
B
Area
where
you
can
Define
this
data
structure
that
you
want
to
copy
so
on
the
properties
of
the
control
I'm,
just
using
the
default
1000
documentation,
but
I
think
you
can
figure
out
from
here
that
the
fields
are
defined
here
in
a
very
simple
way.
You
can
have
the
field
types
we
have
string,
number
and
drop
down
for
this
example.
You
select
the
options
when
you
put
this
on
the
page,
all
this
data,
he
saves
us
a
collection
in
the
web
part
properties.
B
So
if
you
do
in,
for
example,
something
like
rendering
links,
this
is
insanely
fast
compared
to
starting
links
on
webparts,
for
example,
because
you
don't
need
to
go
and
retrieve
them
and
the
page
loads
they're
there.
So
you
basically
get
a
collection
of
items.
You
can
Define
with
the
properties
that
you
specify
and
then
you
can
save
that
and
then,
when
the
page
loads
it
all.
The
data
that
you
define
data
is
pretty
default
on
the
page.
B
B
B
B
So,
for
example,
you
can
show
some
anything
inside
this
control
when
the
user
has
specific
permissions
on
the
site,
for
example,
your
pages,
you
can
look
at
specific
list
or
a
remote
site
if
you
provide
the
URL
or
a
remote
list,
so
this
is
extremely
powerful
to
create
experiences
that
depend
on
the
permissions
on
the
user
and
it's
extremely
simple
to
use.
I've
done
it
a
few
times.
It
doesn't
has
any
complexity
to
the
project.
All
you
do
is
just
go
to
your
project
and
start
in.
B
And
everything
you
want
to
render
is
there
inside
this
control.
So,
basically
anything
is
clear:
here
will
automatically
have
been
permission,
permission
controlled,
but
not
permission
controlled,
more
or
less
security
controls.
So
if
we
save
that
this
does
not
render
any
content,
it
will
just
show
our
hype
what
you
had
inside.
So
we
can
quickly
show
on
the
page.
B
One
it's
at
the
end,
it's
very
small.
So
let
me
just
now
mention
something
else
for
people
that
are
new
to
this.
Please
please
go
to
the
both
websites
and
check
the
control
section
at
the
top.
There
is
a
lot
of
controls
there
for
testing
this
locally
Fork.
The
repository
the
repository
is
actually
an
spfx
web
art
project.
It's
very
simple
and
it's
the
same
structure
that
you
will
be
used
to
work
with.
B
B
There
is
a
controls
test
where
part
of
which
is
a
huge
playground.
Project
is
very,
very
large.
The
first
time
you
look
at
it,
you
might
find
a
little
bit
lost,
but
this
structure
is
not
actually
that
complex.
So
we
have
a
Services
folder
where
some
most
of
the
services
are
located.
Some
controls
have
Services
inside
the
root
folder.
B
So
when
you
look
at
source
and
then
controls
and
each
control
has
its
own
folder
and
the
services
May
or
maybe
without
that
folder
may
or
may
not
be
inside
the
control
folder,
there
may
be
under
the
shared
services
folder.
There
are
also
books,
and
then
we
have
extensions
and
web
parts
to
test
some
of
these
controls.
If
you
want
to
contribute,
don't
be
afraid
to
about
things
like
coding,
Styles
try
to
maybe
have
a
look
first
and
see
how
things
are
done,
but
each
control
is
basically
unique.
It
was
done.
B
There
are
people
who
contributed
with
lots
of
controls
and
even
from
the
same
people
we
see
you
can
tell
the
evolution
of
clothing
over
time,
they're
just
getting
better
and
better,
but
there
is
no
restrictions
on
specific
code
styles
that
you
need
to
follow.
This
is
supposed
to
be
open.
You
contribute
the
way
you
can
do
things
and
you
know
if
there
are
things
we
think
you
should
be
shown
just
to
align
with
some
broad
things
on
the
project.
B
B
B
Most
of
the
controls
will
be
here.
You
will
notice
that
some
of
them
may
not
work
very
well
by
default.
So,
for
example,
the
term
picker
may
be
using
a
term
ID,
that
is
from
someone
who
did
the
test
and
left
the
term
ID
that
he
was
using.
You
can
just
change
it
locally
whenever,
whenever
you
need
to
test
the
control
that
not
doesn't
work
for
you,
for
example,
my
teams
is
working
for
me
because
it
doesn't
have
any
properties.
B
B
In
part-
and
you
know
just
copy
paste-
there
are
a
few
additional
things
you
can
configure,
but
most
of
them
there
are
examples
here
in
the
documentation
that
you
copy
paste
and
they
work
straight
away.
And
then
you
can
look
at
what
properties
at
the
bottom
of
the
documentation.
They
they're
generally
a
table
with
all
the
properties
that
are
supported
if
they
are.
B
If
they
are
required
or
not
in
the
description
and
so
on
so
on
this
once
you
have
under
controls-
sorry
underwear,
Parts-
there
is
a
controls
test
component
that
is
on
the
web,
part
that
the
project
contains,
and
then
here
you
can
do
anything
you
want
just
be
mindful
to
not
maybe
checking
changes
here
that
are
only
specific
to
you.
If,
if
it's
something
new
by
all
means,
no
one
cares.
B
Whoever
is
going
to
change
it
next,
we'll
have
to
adjust
it
to
their
configurations
or
even
if
you
want
to
make
this
more
easy
to
test
Feel
Free
at
the
moment,
it's
just
a
massive
playground
where
people
that
dump
things
just
try
not
to
duplicate
things
too
much.
Otherwise
the
performance
here
will
be
very,
very
slow.
B
So
you
have
all
these
huge
amount
of
controls
you
can
play
with
initialization
for
some
of
the
controls,
like
the
term
picker
or
the
preview,
which
requires
that
three
hierarchy
it's
defined
here,
you
can
find
the
control
look
at
import,
look
for
the
control
and
see
what
you
need
to
configure.
Then.
C
If
you
don't
mind,
I'm,
gonna,
I'm,
gonna,
shuffle
your
demo
a
bit
and
you
have
the
clean,
wet
part
there
waiting
and
one
of
the
most
used
controls
in
this
react.
Controls
by
far
is
the
web
part
title
control,
because
that
should
be
basically
provided
by
us
as
a
Microsoft,
but
it
isn't.
But
the
code
which
we
have
as
a
webpart
control
in
here
by
for
sure
is
the
the
most
widely
used
one
it
by
the
community
and
customers
and
partners.
Can
you
show
how
do
you?
C
B
B
C
B
B
C
B
C
B
B
B
C
But
all
of
the
how
what
is
needed
all
of
this
is
basically
always
in
the
documentation
in
the
docs.
So
in
this
case,
as
as
Charles
mentioned
in
this
bit
of
a
larger
set
of
changes,
because
we
need
to
have
a
property
where
the
web
Port
title
is
being
stored
and
that's
stored
by
within
the
web
part
data
and
blob.
So
there's
a
bit
of
a
additional
set
of
configurations
to
be
done
here.
C
A
A
B
Just
again,
this
is
more
complex
because
we
have
the
title
on
the
web
part
properties
and
we
need
to
pass
the
title
to
the
con.
The
component.
Then
we
show
it
here.
If
we
add
it,
we
then
need
to
send
it
back
for
saving
on
the
web
part
properties,
so
it
needs
to
go
back
and
forth.
That's
why
we
need
to
go,
although
through
all
those
loops,
that's
not
the
case
for
99
of
the
controls,
yeah
yeah.