►
Description
In this video Elio Struyf (Valo Intranet) is showing how to get started with using reusable PnP SharePoint Framework controls in your SharePoint Framework solution.
There are two types of controls: Web part property controls and react content controls.
Presenter - Elio Struyf (Valo Intranet) – @eliostruyf
Property controls can be used with any web part implementation to provide polished Office UI Fabric styled experience. They are automatically connecting to the data sources, so developers don't need to worry about where the data is coming.
React content controls are for React based solutions. They provide reusable experiences for SharePoint Framework implementation and are also using Office UI Fabric for the consistent look and feel.
More details on the reusable property controls from https://sharepoint.github.io/sp-dev-fx-property-controls/
More details on the reusable react controls from https://sharepoint.github.io/sp-dev-fx-controls-react/
More details on the SharePoint developer community from http://aka.ms/sppnp.
A
Hello,
everyone,
I'm
Melea,
Roth
and
I'm
working
as
a
solution
architect
at
the
value
of
Internet
in
this
video
I,
will
show
you
how
you
can
use
the
SharePoint
framework.
Pmp
controls
in
your
project,
the
SharePoint
framework,
PMP
controls
exist
of
two
types.
First
of
all,
we
have
the
property
bank
controls,
which
can
only
be
leveraged
in
the
property
pain
of
your
webparts.
So
that's
during
the
configuration
part
of
yoga
part.
On
the
other
hand,
we
have
the
controls
that
can
be
used
inside
the
body
of
yoga
parts,
and
these
are
react
based.
A
They
can
also
be
leveraged
inside
an
application
customize
it,
for
instance,
it
doesn't
need
to
necessarily
be
a
part
in
order
to
use
these
controls.
We
first
have
to
install
them
to
our
projects
and
to
lets
you
can
just
use
the
commands
which
you
will
find
on
the
home
page
of
our
controls
projects.
A
Once
you
have
to
install
these
libraries
into
your
project,
it's
time
to
leverage
them.
First
of
all,
what
I
want
to
do
is
spin
up
my
local
Oh
server
and
then
I'm
going
to
remove
this
paragraph
and
we'll
replace
it
with
an
actual
placeholder.
The
placeholder
control
can
be
found
in
the
controls
reacts
projects
and
there
you
will
find
documentation
page,
which
is
going
to
show
the
webparts
configuration
placeholder
that
tells
the
end
user.
That
webparts
still
needs
to
be
configured.
There
are
two
steps
that
need
to
be
done.
A
First
of
all,
we
need
to
import
the
placeholder
inside
our
projects
and
the
second
one
would
be
to
actually
use
the
control.
So
that's
what
we
do
over
here
now
in
here.
We
still
see
that
we
have
an
issue
and
for
that
I'm
going
to
use
a
property
which
I
specified
all
my
components,
which
is
methods
call
over
to
my
actual
webparts,
and
you
can
see
this
over
here
in
my
property
I
specified
that
I
also
need
to
have
this
method
being
passed
from
my
actual
web
part.
A
So
on
my
records,
which
we
can
find
over
here,
I
have
my
tiles,
which
is
actually
the
component
that
I'm
going
to
show.
I
still
need
to
pass
in
some
information
over
here,
and
this
will
be
the
at
property
pane,
open
methods
that
I
need
to
specify,
and
where
is
this?
Data
coming
from
this
data
comes
from
my
context
of
my
webparts
that
we
will
find
the
property
page
and
on
the
property
page,
you
haven't
open
methods
once
you
have
done
this
it's
going
to
or
it
should
allows
to
open
the
property
page.
A
A
So
now
that
we
have
the
web
parts
with
a
place
over,
that
actually
opens
the
property
pain,
it's
time
to
add
some
more
logic
to
the
property
pain,
for
we
can
leverage
the
property
pain
controls
and
in
here
in
this
documentation,
you
will
find
all
the
property
and
controls
that
we
have.
The
one
that
we
are
going
to
use
is
collection
data
control
which
allows
you
to
create
a
set
of
data
that
you
want
to
leverage
within
your
web
parts
and
it's
going
to
be
stored
as
a
JSON
representation.
A
A
You
need
to
specify
the
property
to
be
used
as
a
property
inside
your
control
and
then
you
add
the
control
itself
over
to
the
groups
field,
section
of
your
webparts,
that's
what
you
can
find
over
here
so
in
here
in
the
report
file,
we
have
groups
fields
and
in
here
normally
you
specify
all
the
controls
that
you
want
to
use.
So,
first
of
all,
we
need
to
import
what
we
want
to
use,
so
we
are
going
to
use
the
property
field
number
and
the
collection
data
control
in
there.
A
So
once
you
have
that
in
place,
it's
time
to
include
the
group
fields,
so
we
are
going
to
overwrite
this
with
two
controls:
the
property
field
number
and
also
the
field
collection,
data
control.
As
mentioned
the
field
collection,
data
control,
allows
you
to
fully
customize
the
experience
and
it's
allowing
you
to
tell
to
control
which
pills
that
you
need
light.
For
instance,
title
description,
the
URL
that
you
want
to
show
you,
the
icon
and
the
target,
as
the
web
part,
is
going
to
show
tiles.
A
A
Another
thing
what
we
need
to
do
is
we
have
these
properties
that
we
are
not
storing
with
collection
data
and
the
number
we
have
to
pass
them
over
to
our
components
in
order
to
render
them
as
my
web
part
and
my
component
are
both
leveraging.
The
same
kind
of
properties.
I
can
just
spread
these
like
this
over,
so
that
I
don't
have
to
write
each
and
every
single
property
in
order
to
be
used.
A
Once
this
is
done,
we
go
back
to
our
component,
we
refresh
it
now
we
can
click
on
configure
and
we
can
just
stop
in
work
bench,
for
instance,
and
then
the
work
bench
we
specify
a
URL
which
is
this
URL
and
that
we
need
to
give
an
icon,
and
once
we
store
and
say
this,
we
can
actually
see
the
time
that
is
being
rendered
in
our
component.
The
last
component
that
we
can
add
to
the
project
will
be
a
title
that
we
can
use
in
our
controls
project.
A
We
have
a
webpart
title,
which
is
very
similar
to
the
first
party
title
control
that
they
are
using
in
the
out-of-the-box
SharePoint
web
parts.
So
we
can
leverage
the
same
thing
and
in
here
you
will
find
the
same
kind
of
documentation.
So
all
the
things
that
you
need
to
do
like
you
have
to
pass
in
a
method
in
order
to
store
the
property
and
that's
what
we
are
going
to
do.
A
What
do
I
need
more
I
need
to
have
the
display
mode.
The
display
mode
is
telling
my
component
if
it's
going
to
be
rendered
inside
the
View
mode
of
the
page
or
inside
the
edit
mode
of
the
page.
So
this
is
all
what
we
need
for
the
webparts.
Then
we
can
go
to
tiles
and
on
the
tile
section,
what
we
want
to
add
is
first
of
all
the
to
import
the
Bihar
title.
A
Once
we
have
the
Vepr
title
imported
and
then
the
next
thing
would
be,
or
the
last
step
would
be
to
add
a
control
over
to
our
project
and
that's
what
we
do
over
here.
So
in
here
we
leverage
the
display
mode
that
we
passed
over
from
the
properties
we
using
the
title
and
been
using
the
update
property
which
we
specified
over
here
in
order
to
update
our
title.
So
once
the
report
again
is
reloaded,
we
can
go
back
to
our
SharePoint
page.
We
can
refresh
it
and
now
we
should
see
a
weber
title.