►
Description
PnP Webcast around community driven and open source reusable controls, which you can take advantage on your own SharePoint Framework solutions. By utilizing these controls, you can concentrate on the actual business logic and simply take advantage of work provided by community and SharePoint engineering.
There are two kinds of controls: web part property controls and React based content controls. More detailed information and additional links to available resources from http://dev.office.com/blogs.
A
Welcome
to
the
SharePoint
Patterson
practices
webcast
and
tonight
we're
going
to
talk
about
the
reusable
controls
which
are
available
for
you
to
take
advantage
from
the
BMP
initiative
and
this
our
chocolate
for
SharePoint
framework
solutions.
So
this
is
an
open-source
community
treatment
effort
where
we
are
providing
reusable
controls
for
developers
and
developers
who
are
building
this
ship
on
framework
solutions.
A
My
name
is
so
you
wanna
I'm
a
Senior
Program
Manager
from
ship
on
the
engineering
and
with
me
today,
as
the
the
let's
say,
the
man
behind
off
the
initial
version
of
these
controls
and
also
the
person
who's,
helping
us
to
coordinate
all
of
this
efforts,
Elia
strewth.
So
Ilya.
Will
you
do
the
quick
intro
as
well?
I.
B
A
You
should
change
their
name,
no
just
kidding
now,
let's
actually
talk
about
and
what
these
controls
are
and
how
they
benefit
the
SharePoint
framework
developers
and
why
would
people
actually
care?
So
let's
talk
about
first,
more,
what's
available.
So,
first
of
all
and
there's
quite
a
lot
of
controls.
Well,
there's
not
a
massive
amount
of
controls
available,
but
there
are
controls,
there's
two
kinds
of
controls:
there's
controls
which
are
for
content,
controls
and
there's
controls
which
are
for
property
back
property
panel.
A
So
when
you
are
configuring,
your
web
part,
you
are
able
to
use
this
controls.
Let's
have
a
look
on
of
some
of
these
controls
in
practice,
so
we
do
have
a
date
picker
control,
which
is
rendering
quite
nicely
at
the
riad
office.
Ui
react
based,
uise,
and
so
it's
actually
a
rendering
and
that
controls
quite
nicely
in
the
property
pane.
We
do
have
a
list,
picker
control,
which
can
be
configured
to
support
one
or
multiple
lists.
So
it's
it's
again
a
property
setting
in
the
control.
How
to
make
that
happen.
A
This
is
a
good
example
of
a
a
awesome
control
which
is
encapsulating
the
all
complexity
behind
of
accessing
good
taxonomy
terms
in
the
web
part,
and
because
you
only
control
the
behavior,
we
will
take
care
of
all
of
the
HTTP
calls
and
REST
API
s
and
season
made
the
ice
or
the
communication
between
the
server
and
controller
itself.
One
highly
requested
control,
which
many
of
the
first
party
webparts
are
using,
is
to
be
poor
title
control.
A
Somebody
might
actually
think
that
this
is
navy,
blue
it
in
the
wet
part
by
default,
but
that's
not
actually
true.
It's
just
that
first
party
web
part
pretty
much.
All
of
them
actually
have
this
webpart
title
control
and
now
that's
provided
true,
be
and
be
reusable
controls
as
well.
This
is
no
longer
a
property
pane
or
an
editor
of
property
ban
control.
This
is
now
the
content
controls
which
you
can
use
in
the
web
part
behavior.
We
also
have
a
placeholder
control
before
we
actually
went
to
GA
in
SharePoint
framework.
A
B
Not
completely
replacing
it,
they
are
giving
you
the
benefit
of
not
writing
the
code
for
yourself
and
everything
is
already
in
place,
like
you
said,
with
the
taxonomy
taker
or
a
term
taker,
they
already
made.
These
HTTP
calls
for
you.
So
if
you
start
using
that
control
everything
is
in
place
for
you,
you
don't
have
to
do
anything
anymore.
You
just
play
that
property
picker
on
your
back
part
and
everything
is
configured
for
you.
You
can
build
it
yourself,
of
course,
but
then
you
need
to
reinvent
the
wheel
again.
A
Yes,
yes,
so
so
these
are
kind
of
an
adding
additional
abstraction
layer
on
top
of
the
office
to
your
fabric,
create
controls,
because,
obviously
our
fabric
controls
are
not
aware
of
shape
or
these
they
are
very
dumb.
Yes,
yes,
fabric
control,
officer,
eye
fabric
is
around
the
styling
and
the
behavior,
but
it's
not
aware
of
where
they're
being
used
and
these
the
controls
are
then
adding
that
sharepoint
layer
and
awareness
of
the
sharepoint
on
top
of
those
controls.
A
So
these
will
again
further
increase
the
productivity
of
the
developers
because
they
don't
have
to
worry
about
it's
a
DP
course
as
an
example
like
alienation
so
and
on
that
one.
So
if
we
talk
about
the
benefits,
why
would
we
actually
use
them?
So
obviously,
our
intention
in
the
sharepoint
engineering
is
to
provide
reusable
controls
for
the
community
for
time
being
we're
not
actually
providing
or
we're
not
open
sourcing,
the
out-of-the-box
controls
and
there's
multiple
reasons
on
that,
one
which
we
don't
want
to
actually
deep
time
on
this
webcast.
A
But
what
we
want
to
do
is
to
use
the
B&B
and
sharepoint
B&B
as
the
channels
and
this,
for
example,
this
controls
packages
as
the
channel
to
provide
some
of
the
experiences
which
are
in
the
first
party
export
controls
or
forced
first
bodyweight
pods.
So
as
an
example,
the
web
part
title
is
an
awesome
example.
We
want
to
provide
that
for
third-party
developers,
meaning
customers
and
ISVs
building
shape
and
framework
solutions.
A
But
since
we're
not
open
sourcing,
the
out-of-the-box
first
party,
the
webpart
title-
we
used
BMB
controls
to
actually
provide
the
capability
and
you
will
see
more
and
more
us
releasing
out-of-the-box
controls
using
this
open-source
channel
as
well
in
the
future.
So
we
are
harvesting
a
lot
of
the
box
web
parts
and
out-of-the-box
behavior
and
taking
some
of
the
controls
from
there
and
pushing
them
out
as
a
reusable
control
using
the
PMPA
channel.
And
obviously
you
should
not
reinvent
the
wheel.
A
There's
no
point
for
you
to
again
implement
the
web
part
title
again
and
again
and
again-
and
this
is
something
which
we
want
to
provide
for
you.
So
you
can
actually
concentrate
on
a
business
logic,
and
you
will
see
more
and
more
controls
here,
like
mention,
which
will
hopefully
then
mean
that
in
the
future
you
don't
have
to
worry
about
the
UI
layer
of
the
or
rendering
of
your
web
part.
You
can
just
concentrate
on
the
business
logic.
A
That
would
be
a
significant
investment,
but
now
you
can
take
advantage
of
that
control
just
by
adding
a
reference
to
the
web
part
for
the
control
and
just
reuse
them,
and
these
are
community
treatment.
So
ideas
and
questions
are
always
welcome
and
contributions
absolutely
are
welcome
as
well,
and
so
this
is
open
source
community
driven
a
set
of
controls.
It
does
those
mean-
and
let's
be
super
clear
on
that-
one,
because
it's
open
source-
it's
not
like
you,
can
call
a
Microsoft
premier,
support
and
say:
hey
this
control
has
a
bug.
Can
you
fix
that?
A
That's
not
how
open
source
actually
works,
but
we
in
the
ship
on
the
engineering.
We
are
reviewing
this
controls
and
we
are
providing
some
of
the
capabilities
within
the
controls
as
well.
So
we
kind
of
take
the
learnings
from
the
sharepoint
engineering
and
provide
them
for
the
community
to
reuse,
and
we
also
make
sure
that
the
controls
are
following
up
on
the
best,
today's
on
the
SharePoint
favored
site
and
the
implementation.
Sir,
anything.
What
what
you
want
to
add
here,
alia
on
around
this
one
I.
B
B
A
Absolutely
issues
getting
reported
sure
pull
requests
are
fine.
We
do
understand
that
before
many
of
the
people
need
to
concentrate
on
the
day
to
day
life
and
they
can't
actually
contribute
an
open-source
and
that's
fine
as
well,
but
give
us
ideas.
What
do
you
need?
What
do
you
need
to
be
successful
in
SharePoint
framework
development?
A
If
you
have
a
something
which
you
tend
to
enhance
in
every
single
web
part,
you
should
tell
us
and
we'll
actually
provide
that
for
you
as
a
reusable
control,
so
we
can
actually,
then
divide
and
conquer
will
provide
the
reusable
things
for
you
to
take
advantage
and
you'll
be
more.
So
you'll
have
more
time
on
the
concentrating
on
the
business
logic,
which
means
that
everybody
will
win.
A
Now
we
talked
about
already
that
there's
kind
of
a
two
side,
so
two
kind
of
controls,
so
there's
the
property
bank
controls
and
these
are
for
configuring,
the
web
part.
So
whenever
you
put
the
wet
part
in
edit
mode,
this
is
the
panel
on
the
right
side,
which
is
invisible
and
we
do
have
a
set
of
controls.
There.
You've
used
that
by
running
the
NPM
install
command
within
your
SharePoint
framework
solution
and
in
here
we'll
do
just
a
save
which
will
add
and
that
package
to
do
that
is
to
chase
on
file.
A
So
whenever
another
developer
pulls
down
the
source
code,
it
will
actually
have
the
reference
to
those
controls
and
react.
Controls
is
then
slightly
different
name,
so
the
rear
controls
are
essentially
the
content,
controls
and
right
now
and
that's
a
in
the
PMP
scope
and
SPF
X
controls
react
few
things.
Maybe
you
noticed
here,
first
of
all,
we're
using
the
PMPA
scope,
and
this
is
a
relatively
new
thing,
so
for
open
source
stuff
which
we're
releasing
from
the
sharepoint
engineering
and
together
with
community
community.
A
We
will
continue
using
in
the
future
that
the
NPA
scope
in
the
NPM,
because
this
will
then
differentiate
that
hey.
This
is
an
open
source
community
of
an
initiative,
rather
at
Microsoft.
That
Microsoft
means
that
it's
actually
part
of
the
product
deliverables
like
the
at
Microsoft
generator
SharePoint,
which
is
the
yeoman
generator
for
SPF
X.
The
second
thing,
maybe
to
notice
here,
because
people
tend
to
have
a
tendency
on
on.
Let's
say
concentrating
on
the
exact
technologies
and
different
frameworks.
So
now
we
have
a
property,
Bank
controls
and
react
controls.
Why
react?
A
Why
is
it
react
controls
so,
first
of
all
the
property
Bank
controls
they,
you
can
use
them.
Regardless,
on
what
framework
you
use
to
actually
implement
your
webpart,
so
they
will
be
actually
probit.
Bank
controls
are
based
on
react
because
that's
the
property
pane
infrastructure
in
sharepoint
framework
is
based
on
rare.
So
even
though
your
actual
business
logic
is
implemented
using
angular
or
whatever
you'll
be
using
these
controls
as
such
in
your
in
your
paper.
Now
the
content
controls
like
that
webpart
title
and
the
list
view
web
part
or
list
view
or
the
placeholder.
A
They
are
right
now
in
react
and
the
reason
for
that
one
is
that
we
have
office.
Ui
fabric
react
controls
available
from
Microsoft,
so
we're
using
them
on
top
of
the
as
a
as
a
baseline,
and
then
we
increase
the
abstraction
on
that
now
in
the
future
you
might
see
and
we
we
haven't.
Actually
we
can't
commit
on
yet
on
all
of
these
things,
but
you
probably
will
see
then
also
angular
controls.
A
If
there's
demand
and
please
let
us
know
and
a
few
other
controls
as
well,
but
for
now
we
started
with
react
and
then
maybe
in
the
future,
developing
angular
there's
interesting
JavaScript
development
happening
in
many
many
many
frameworks
I'd.
It
might
be
that
we'll
move
to
the
direction
will
be
an
completely
framework
independent
with
this
controls,
we'll
see,
we'll
see
how
the
tree
actually
goes
and
I'm
rambling.
On
my
mind,
sorry
Ilya
and
it
isn't
one
hand
on
that
one.
Why
is
it
react
and
why
is
it
not?
Reacting
was
angular.
B
Yes,
we
already
had
that
today,
I
think
you
know
where
there
was
a
question.
Why
did
we
splitting-
and
you
mentioned
it
already-
because
everything
is
built
with
react
so
first
of
all,
they
are
in
everything.
Everything
from
of
his
UI
fabric,
which
is
built
on
react
by
default
properties
and
controls
will
be
always
rendered
in
a
react
context:
the
react
controls
or
the
Compton's
zones
yeah
at
the
moment
we
choose
to
use
react
because
we
can
benefit
from
office
UI
fabric.
B
A
That's
that's
the
ultimate
vision
at
some
point,
but
we
need
to
wait
a
few
things
to
come
from
the
framework
side
and
the
implementation
side
now,
and
on
that
one
and
like
lily
estimation,
just
to
reiterate
the
reason
why
we
chose
react
is
just
command
to
see
if
there's
demand
for
these
reusable
controls
and
it's
good
that
somebody
is
already
commenting
in
nation
list
and
asking
why
why
isn't
there
angular?
Why
isn't
there
something
else
and
please
let
us
know,
please
show
the
demand.
A
So
we
know
where
we
are
investing
our
time
in
the
future,
as
well,
now
probably
you're
interested
on
seeing
this
in
practice.
So
obviously,
let's
actually
have
a
live
demo
and
let's
sleep
or
flip
to
Ilyas
desktop
and
have
a
live
demo
on
these
controls
in
the
converse
of
shape
and
framework.
So
Ilya
take
it
away.
B
So,
thank
you
so
right
now
we
are
going
to
do
the
demo.
The
demo
is
built
with
a
couple
of
controls,
so
at
the
left
side
you
see
the
place
all
the
control
and
on
the
right
side
you
see
my
codes
so
right
now,
I
already
use
the
place
all
the
control,
but
let's
first
go
to
the
documentation,
part
of
our
trolls
and
let's
go
to
the
home
page,
it's
on
the
home
page
and
we
see
all
the
controls.
B
So,
as
that's
already
mentioned,
we
have
two
controls
or
two
types:
the
property
penguins
and
the
reactions
rows
ones.
So,
first
of
all
the
property
pane
wants.
These
contain
all
controls
for
the
property
pane.
So
for
configuring,
yoga
Park
like,
for
instance,
the
property.
This
picker.
Let
allows
you
to
select
the
list.
A
single
list
or
multi
list
occurs,
so
you
can
choose
that
and
we
give
in
the
documentation
all
the
guidance
on
how
you
need
to
configure
this.
B
A
B
B
Variable,
which
is
a
string
or
a
multi
string
array
of
strings,
and
we
have
our
list
picker,
and
this
is
what
I'm
actually
going
to
copy
and
place
into
my
control.
So
that's
right
now,
if
I
go
to
my
apart,
I'm
going
to
add
it
and
then
I
can
configure
my
web
part
I,
don't
see
anything
over
here
yet
so,
if
I
paste
this
one
over
here,
let's
call
this
list.
I
can
now
use
lists
in
my
property
controls.
So
if
I'm
going
to
refresh
probably
a
little
bit
too
fast.
B
And
I'm
not
doing
this
on
the
burgh
bench,
because
I
want
to
show
you
a
really
cool
control
lab
our
title
and
that
needs
to
be
inside
a
page.
Otherwise,
I
cannot
show
you
the
editing
experience.
So
here
the
part
is
reloaded
and
we
see
the
new
property
paint-filled
lifts
bigger.
So
in
here
we
see
a
couple
of
lists.
We
have
other
options
available
in
this
list.
B
They
come
figure
and
now
everything
is
filtered
out
to
only
retrieve
document
libraries.
So,
right
now
what
I
did
is
I
selected,
my
document
library
documents
and
I
retrieve
some
information.
You
see
that
everything
switched
so
no
more
placeholder
there.
Now
we
have
a
list
ship.
This
list
view
is
actually
coming
from
another
control
part
section,
but
what
we
can
do
more
is
we
can
add
multiple
things
in
here.
So
we
can
add
multiple
controls
like,
for
instance,
we
in
dentists,
we
can
add
a
field,
talked
a
little
bit
call-out,
which
is
quite
nice
one.
A
Really
key
point
they're
tested
when
we
are
refreshing,
the
bates
and
pinpoint
the
developer
doesn't
need
to
understand
where
the
lists
are
coming
or,
what's
the
rest,
api
call
against
the
lists
or
the
term
sets
or
whatever
you
don't
have
to
worry
about
that.
All
of
that
is
open
care.
That's
really
cool.
Indeed,
in.
B
It,
the
only
thing
you
have
to
do
is
do
some
configuration
that
all
explained
inside
the
documentation
part
like,
for
instance,
limiting
by
group
name.
This
is
a
new
feature
or
limiting
by
term
set.
This
is
up
to
you.
This
is
what
you
can
configure.
If
we
don't
specify
these
things,
we
will
show
everything,
but
you
can
also
limit
these
things
and
that's
the
only
thing
you
have
to
give
to
the
web
part
to
tell,
but
you
want
to
show
so.
My
comment
is
out
now
with
refresh
everything
again.
B
I'm,
going
to
edit
now
I
see
my
two
new
controls
in
here.
I
see
the
toggle
one
with
columns,
and
this
is
going
to
give
me
some
information
about
what
is
this
talk
I'm
going
to
do
so
it's
going
to
allow
grouping
if
I'm
going
to
apply
this
in
the
future.
Allow
grouping
it's
not
yet
to
configure
something
for
later,
and
we
can
also
select
terms
and
in
here
right
now.
B
I
only
want
to
show
departments,
so
if
people
want
to
show
something
inside
your
by
part,
you
as
a
developer,
you
can
also
limit
them
to
a
particular
scope
that
they
cannot
choose
everything,
though
only
the
departments
term
set.
So
in
this
case,
I
can
now
say:
I
only
want
to
retrieve
documents
from
IT
I
apply
it
and
right
now
everything
is
scoped
to
IT
team.
If
I
going
to
unset
this,
it
is
done
so,
let's
publish
it
and
let's
move
Alberti
PMP
controls
component.
This
PNP
control
component
is
partly
configured.
B
You
see
some
few
fields,
you
see
a
group
field
and
if
we
go
to
the
bottom
in
here,
we
see
what
that
part
is
actually
doing.
So
we
can
here
you
see
the
plays
older.
What
at
the
show
when
the
page
was
in
View
mode
and
when
the
page
was
in
edit
mode,
and
here
at
the
bottom
here
is
where
the
magic
happens,
with
the
list
view.
So
in
the
list
view
we
can
say
these
are
the
items
we
want
to
add.
B
These
are
my
view
field
the
view
fields
define
or
keep
on
the
shelves
of
the
icon.
The
ID,
the
name
and
the
created
date,
and
we
can
also
add
other
things
like,
for
instance,
we
want
to
drew
by
fields
and
we
want
to
only
go
by
the
fields.
If
particular
property
grouping
is
turned
on
and
if
it's
turned
on,
then
we
want
to
group
by
fields,
and
this
is
going
to
specify
that
we
want
a
group
by
that
term
fields
by
the
department's.
B
B
There's
one
more
control,
which
are
really
one
show
at
one
more
control.
This
is
the
documentation
part
for
the
reacts,
controls
that
agencies
idea
and
there's
one
really
cool
one
which
is
the
web.
Our
title,
which
has
just
been
added
this
repository
again,
go
to
the
documentation.
The
only
thing
I
need
is
this
one,
but
this
is
the
depart
title
control
which
I
can
add.
B
Pin
my
control
over
here
I
define
description
because
I
don't
know
the
title,
and
this
should
be
it.
When
I'm
going
to
reload
everything
again,
there
should
be
a
title,
then
I
mean
edit
mode.
Yes
right
now,
there
shouldn't
be
any
description.
Yes,
you
don't
see
anything
changed
over
here,
but
when
I'm
going
to
edit
I
see
above
our
title
and
this
vApp,
our
title
is
changeable
without
actually
going
to
open
the
property
thing
of
this
apart.
So
I
can
now
change
this
to.
B
A
And
this
is
how
the
the
first
one
meaning
of
the
first
body
wet
part,
actually
has
this
capability,
but
it
is
actually
implement
that
in
the
first
body,
webparts
it's
not
by
default
in
the
web
part
framework
of
sharepoint
famer,
a
sharepoint
framework
which
is
slightly
weird,
but
that's
fine.
So
now
there's
this
reusable
controls
for
a
property
to
take
advantage
extremely
easily,
which
is
super
great.
B
For
the
demo
part,
oh
I,
hope
you
see
the
real
advantage
of
using
these
controls
in
your
solutions,
so
you
don't
actually
have
to
write
a
whole
lot
of
code
anymore.
You
just
be
used,
but
we
already
build.
If
there
are
some
questions,
if
there
are
some
new
IDs
go
to
our
issue,
lists
which
are,
if
you
go
to
the
documentation,
part
easy
to
get
up
to
link
in
here
and
there
go
to
issues,
problem,
questions,
IDs
or
requests.
Everything
is
we
allow
everything
so
go
and
contribute.
A
Absolutely
absolutely,
and
unlike
mentioned
in
the
intro
of
the
presentation,
we're
looking
into
potentially
having
additional
framework
supported
in
the
future
does
this
over.
So
that
requires
resources
that
requires
a
contribution
from
a
community.
So
we
need
to
think
through
how
that
we're
going
to
happen.
A
We
start
a
quick
to
react,
and
but
we
will
keep
on
evolving
this
in
the
future
as
well,
but
let's
actually
flip
back
on
the
presentation
and
close
up
the
webcast
to
attack
you
earlier
cool,
so
Thank
You
Ilya
for
that
demo
and
I
think
it's
time
to
wrap
up
so
like
mentioned.
These
are
reusable
controls,
open
source
community
human
controls,
which
we
provide
from
shipment
engineering
together
with
community
and
with
what
we
want
to
do
in
the
future
mention
quite
a
few
times
as
well.
A
We
want
to
harvest
our
first
body
wet
parts
and
we
are
harvesting
our
first
body
wet
parts
to
provide
you
additional
controls.
But
the
key
point
of
everything
is
to
you
to.
Let
us
know
what
you
need.
So
please
please,
please
give
us
feedback
go
to
the
our
key
top
issue,
lists
of
these
controls
and
we'll
have
the
links
in
the
video
notes
and
give
us
feedback
what
you
need.
A
If
you
have
challenges
some
things
or
if
you
have
ideas
or
maybe,
if
you
want
to
contribute,
let's
start
the
discussion
in
the
key
top
and
on
and
in
the
other
social
media
channels,
and
then,
if
you
go
out
together,
where
you
can
contribute
and
help
and
provide
feedback,
anything
else
what
we
want
to
say
on
the
summary
side,
sorry
Ilya!
It's
me
talking
again
a
lot
themself.
B
Or
if
you
want
to
contribute
just
go
to
the
issue
of
this
first
right,
the
issue
and
we
can
see
if
there
is
an
interest,
if
somebody's
already
working
on
that
part.
Otherwise
you
may
be
building
something
which
is
somebody
else
is
also
also
working
on,
and
then
there
are
two
of
the
same
full
requests.
So
then
you
wait
at
your
time
in
creating
or
updating
and
control
you.
B
A
So
that
way,
if
there
is
a
lot
of
people
also
contributing
will
we
can
control
who's
doing
what
more
efficiently,
but
in
general,
please
please,
please
also,
let
us
know
what
you
need
mention
quite
a
few
times,
but
it's
super
super
important
for
us
and
so
that
we
know
where
we
are
aligning
our
resources.
Next,
and
that's
that's
really
the
key
here,
but
thank
you,
Ilya
for
a
great
demo,
Thank
You
Ilya
for
quite
work
on
setting
up
the
initial
set
up
on
the
controls
together
with
community.
A
We
already
have
had
excellent
contributions
on
this
reusable
controls
from
open
community
sign
as
well,
and
we
keep
on
adding
these
controls
more
and
more
in
the
future.
Please
test
them.
Let
us
know,
give
us
feedback,
what
worked?
What
doesn't
and
let's
be,
let's
stay
active
in
the
social
media.
Thank
you,
Elia,
and
thanks
for
watching
bye,
bye.
Thank
you.
Bye.