►
Description
Community call demo is taken from the SharePoint Framework Special Interest Group recording at 31st of January 2019. In this video, Yannick Plenevaux (PVX Solutions) shows how to utilize Office UI Fabric Panel in your SharePoint Framework solution.
Sample solution has a list view command set extension, which then activates the panel when the button is being clicked.
Presenter - Yannick Plenevaux (PVX Solutions) - @yp_code
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
Thank
you,
so
just
a
little
bit
of
introduction
before
so
my
name
is
Cindy
Pinto
I'm,
a
shy
find
enough.
This
v65
architect,
I
recently
founded
my
own
company,
so
I'm
doing
more
and
more
Sherpa
in
love,
physics,
5,
but
I
really
like
to
do
so.
It's
good.
The
my
demo
today
is
about
using
official
fabric
panel
within
the
SharePoint
framework
solution
and,
more
especially,
within
this
view,
comments
and
extensions.
So
a
panel
in
official
fabric
is
a
component
that
you
can
use.
A
It
is
a
reactive
pen,
and
so
you
have
to
react,
set
up
in
your
solution
and
you
can
use
it
and
to
display
this
kind
of
thing
like
here.
You
can
see
on
the
official
forum
Rick
site,
so
first
of
all,
I
will
show
you
how
it
is
down
in
web
part.
So
in
a
regular
web
part
solution,
it's
really
really
easy
to
do
so,
yeah
what
part
in
the
workbench
and
when
I
click
the
open
panel
open
button
opens
a
new
button.
I
have
a
panel
showing
it
so
in
the
code.
A
It
looks
like
this,
so
that's
good,
my
what
part
so
I
have
a
react.
Component
here
in
the
render
method,
I
have
the
things
that
displays
in
the
word
path
and
I.
If
the
panel
here,
okay
and
the
is
open
property
of
the
panel
actually
tells
the
pound
was,
it
should
show
or
hide
so
when
I
click
the
button
and
it
calls
the
open
parameters,
update
the
states
of
the
of
the
react
component
and
the
shop
on
a
property.
A
So
we
execute
the
render
the
method
and
displayed
banner,
because
the
show
panel
poverty
is
so
true.
It
is
the
react
component
in
the
the
class
of
the
work
part
itself.
It
is
I'll
just
render
the
the
the
react
component,
so
it
it's
Senshi
eight
component
and
then
called
the
reactive
render
method
with
the
element
instance
and
the
Tama
element,
the
element
in
the
Dom,
the
the
react
component
will
be
inserted
in
so.
A
V,
for
example,
like
this
I,
have
a
list
here
simple
and
then,
when
I
select
an
item,
I
have
a
comment:
I
command
a
comment
in
the
ribbon
here
in
the
in
the
command
bar
really
appearing.
So
if
I
click
the
button,
it
opens
up
the
panel
on
the
side
with
this
full
custom
UI
and
for
custom
business
logic
that
I
would
like
to
implement.
So
here
nothing
really
fancy
just
to
update
the
title
of
the
list
item
when
I
click
the
apply
it
curves
using
the
P&V
ejs.
A
A
That
is,
if
you
come
in
said
cars
and
when
you
the
listview,
come
and
said
extension.
Actually
you
don't
have
anything
related
to
reacts
because
you
are
not
you,
maybe
don't
want
to
ever
UI
at
all.
So
you
you
don't
have
anything
with
react
or
any
other
framework.
So
the
first
thing
you
have
to
do
is
actually
to
add
the
dependencies
to
the
react
and
also
the
official
fabric
package.
So
in
the
package
that
Jason
here
you
see
that
the
dependencies
I
have
added.
Actually
in
that
case,
I
scaffolded
the
project
pic
with
a
webpart.
A
B
A
A
Item
receiver
and
call
the
show
me
in
show
panel
middle
and
the
show
panel
method
is
actually
just
calling
the
method
to
render
the
panel
component
and
you
see
the
show
panel
and
dismissed
method
are
those
rendering
the
panel
one
was
supposed
to
render
that
the
fact
that
it
is
a
panel
okay-
and
this
render
panel
component
method
is
actually
just
doing
exactly
the
same
thing
as
you
would
have
in
the
web.
Part
pathless
here
in
the
render
method,
so
incident
sheet
the
react
component
and
called
the
render
method
from
the
react
them.
A
A
Actually
it
in
the
render
method
of
the
react
component
has
the
root
component.
I
render
a
panel
with
all
the
contents
in
it.
Okay,
and
also
the
is
open
value
that
comes
from
the
component
property.
This
is
property
I
pass
it
in
here
in
this
case,
so
here
or
here
and
the
single
bit
I
would
see
each
sheet.
You
know
it
is
that
in
the
context
of
a
list
view
command
set,
you
don't
have
actually
any
reference
to
a
dominant
in
the
in
the
web
part.
A
You
would
have
F
here
at
this
dominant,
but
here
you
see
that
we
don't
have
it
okay
and
we
don't
have
either
place
over
provider
like
we
would
have
in
the
application
customizer
context.
So
we
are
really
a
in
that
we
have
to
pass
it
in
nature
element
that
we
creates
it.
We
create
to
ask
the
the
react
component.
So
how
could
we
do
that?
Simply
because
we
are
in
JavaScript?
We
can
do
we
can
create
an
event
that
we
can
actually
do
some
kind
of
dummy
injection.
It
is
some
kind
of
simple
validation.
A
Actually
we
are
creating
creating
a
development
and
we
append
it
to
the
body
of
the
Dom.
We
keep
the
riff
the
the
reference
to
this
element
and
we
use
it
when
when
we
need
it
in
the
render
method
of
the
react
them.
So
it
is
that
simple,
but
we
have
to
know
it
to
be
able
to
use
an
official
fabric
react
panel
in
list
view
command
set
in
Japan
framework,
and
that's
it
it's
really
nothing
more,
but
it's
a
way
that
we
can.
C
Great
stuff,
very
cool
and
very
great
usage
of
the
office,
you
have
fabric
components
so
really
good
to
see
that,
hopefully,
a
lot
of
folks
can
take
that
example
and
roll
with
it.
A
lot
of
the
components
work
very
similar,
so
it's
a
great
way
to
get
started
with
any
and
all
of
them.
So
with
that
oke
make
andrew
a
presenter
and
now
I
think
we're
ready
to
switch
over
to
Andrew
Thank
You
yog.
Very
much
appreciate
the
demo
you're.