►
Description
SharePoint Framework Community call on February 25. Demos delivered: 1) Building a list view command set to demote previously promoted news articles from pages library, 2) Add Folder Command Extension for easy doc library structure management, and 3) Using reusable chart controls to present business data in a web part. Register now for March trainings on Sharing-is-caring. Released CLI for Microsoft 365 New beta v3.6 and PnPjs v2.3.0 release scheduled for March 12. Eleven PnP SPFx web part samples were delivered last week. The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A throughout the call.
Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
A
So,
if
you're
looking
to
participate
in
this
call
or
wondering
how
you
can
demo
on
this
call,
we
would
love
to
host
your
demo.
Please
do
reach
out
to
myself
or
vasa,
we'll
get
you
scheduled
for
a
demo
on
an
upcoming
call
and
that
can
be
anything
client-side
related
sharepoint
development
related
using
any
of
the
at
pnp
controls,
libraries,
cli
or
any
other
client-side
technology,
of
course,
as
well.
Welcome
your
demos.
It's
always
fantastic
to
see
what
all
of
you
out
there
in
the
community
are
building.
A
You
can
always
contribute
on
github
that
can
take
the
form
of
reporting
issues.
We
do
always
appreciate
the
feedback
and
hearing
about
things
that
aren't
working.
We
don't
love
that
things
aren't
working,
but
we
love
to
hear
about
it,
so
we
can
get
it
fixed.
So
if
you
have
issues
or
questions,
please
do
let
us
know
and
you
can
always
submit
pull
requests
as
well.
A
So
if
you
have
ideas
for
fixing
an
issue
perhaps
or
adding
new
functionality
to
any
of
the
many
libraries,
we
offer
absolutely
welcome
those
pull
requests
as
well-
and
I
know
you
always
help
with
issues
and
questions
that
other
folks
might
have.
If
you
happen
to
know
an
answer
to
something
you
can
jump
in
and
answer
that
question
gets
folks
and
answer
a
little
bit
faster
and
then
finally,
we
always
appreciate
feedback
on
the
things
we're
doing.
How
are
these
calls?
How
are
our
documentation,
I've
gotten
some
great
feedback
on
documentation
recently?
A
Where
else
can
we
help
and
positive
feedback
is
okay
too?
So
if
you
enjoy
something
we're
doing
or
like
something
you're
doing,
let
us
know
perhaps
we
can
do
a
little
bit
more
of
that
and
now
our
page,
oh
links,
so
we've
got
our
developer.
Videos
m365
dev
youtube,
which
are
all
our
developer,
focused
videos.
Those
are
little
series
of
videos
about
things
or
just
maybe
specific,
topical
videos
about
auth
or
calling
graph
or
doing
other
things
in
your
solutions
so
definitely
check
those
out.
We
have
our
m365
pnp
dash
videos.
A
That's
actually
all
our
community
calls.
So
this
call
recording
our
other
sig
call
recording,
as
well
as
our
monthly
community
calls
and
other
community
events
and
calls
are
all
included
there
in
those
videos.
So
if
you
happen
to
miss
a
week,
you
can
always
catch
up
later
on
youtube
as
well.
We
have
many
open
source
organizations
in
the
microsoft
365,
open
source,
family
sharepoint,
pnp
office,
dev
and
microsoft.
A
Graph
orgs
all
have
a
a
whole
host
of
different
resources
and
libraries
and
opportunities
to
participate
and
contribute
underneath
them
and
encourage
you
to
check
all
of
those
out.
All
of
them
are
very
welcoming
and
looking
for
folks
to
jump
in
and
participate
as
well.
We
have
a
ton
of
different
sample
galleries,
web
parts,
extensions
list,
formatting
and
teams
samples
all
great
ways
to
get
ideas
and
get
started
on
projects.
A
It's
one
of
my
first
stops
when
I
get
questions
from
customers
or
questions
or
trying
to
figure
out
how
to
do
something
always
check
out
the
samples
to
see
if
somebody
else
has
figured
it
out.
First,
certainly
a
great
way
to
get
started.
And,
finally,
you
don't
have
to
remember
all
these
links.
Just
remember:
ak
dot,
ms
slash
m365,
pnp
and
that'll
get
you
descriptions
of
all
the
patterns
and
practices,
programs
and
links
out
to
all
of
the
rest
of
this
content.
B
Warner,
thank
you,
patrick
hello,
friends.
Welcome
to
the
patterns,
practices
call
and
sharing
is
caring.
If
you
don't
already
know,
we
are
very
inclusive
and
open
source
community
and
we
welcome
everyone
in
terms
of
contributing
and
consuming
the
resources
that
are
available
to
you
within
our
community.
But
we
also
understand
that
there
are
sometimes
some
hurdles
that
you
may
encounter
that
prevent
you
from
getting
the
most
use
out
of
those
resources
or
being
able
to
contribute
back
in
so
sharing
is
caring.
B
Is
an
initiative
that's
been
set
up
to
provide
you
hands-on
guidance
on
how
to
take
advantage
of
a
variety
of
these
resources
and
then
contribute
them
back
to
the
community
to
make
it
a
better
place
for
us
all.
There's
a
variety
of
upcoming
sessions
for
march
and
continuing
into
this
year.
We've
got
new
sessions
coming
up
with
more
than
code
with
vs
code.
First
time
presenter
and
ask
me
anything:
is
the
new
monthly
installment,
as
well
as
our
typical
popular
sessions,
first
time
contributor,
community
docs
and
the
other
spfx
sessions,
we
also
started
office
hours.
B
So
if
you
need
some
one-on-one
time
that
you'd
like
to
just
have
some
very
pointed
questions
answered,
we
invite
you
to
go
check
it
out,
aka
dot.
Ms
forward
slash
sharing,
is
caring,
we'd
love
to
see
you
at
a
session?
Please
don't
hesitate
to
reach
out.
So
thank
you
and
we
look
forward
to
seeing
you.
A
Awesome
thanks
for
that
update
david
and
really
excited
to
see
the
sharing
is
caring
initiative
continue
to
grow
and
that's
a
real
testament
to
the
work
that
david,
hugo
and
luisa
are
doing
with
that.
So
thank
you
to
them
and
thank
you
to
all
of
you
for
participating
in
those
sharing
is
caring
initiatives
and
calls
and
meetups.
So
thank
you.
C
Just
a
reminder
on
the
on
the
spf
x,
so
viva
connections,
and
as
which
is
part
of
the
microsoft
diva
viva
connections
is
one
of
the
products
as
part
of
the
viva
offering
will
be
extensible
using
the
sharepoint
framework.
We
will
provide
more
details
on
the
viva
connection,
extensibility
model
and
throughout
the
spring,
but
it's
the
way
of
actually
extending
microsoft
teams
yeah
with
a
sharepoint
and
then
putting
the
portal
there.
You
can
do
modification,
you
can
do
integrations
and
all
of
that
stuff.
C
So
super
exciting
things,
and
this
will
be
extensible
with
spfx
and
craft
and
all
of
that
stuff
we're
right
now.
Actually
this
week
executing
a
dev
kitchen,
which
was
a
the
only
invite
only
for
certain
really
small
subset
of
customers
and
partners,
but
we'll
get
more
information
definitely
available
soon.
C
We
are
slightly
behind
of
the
schedule,
so
the
initial
idea
for
1.12
was
actually
released
it
two
weeks
ago.
But
then
there
was
a
really
unfortunate
regression.
Regression
found
out
related
on
one
of
the
new
capabilities
and
we
wanted
to
delay
the
release.
So
we
get
that
one
fixed
and
because
that
regression
or
a
bug
was
actually
on
the
server
side
code.
C
It
actually
cost
us
a
two
to
three
weeks
delay
on
getting
stuff
out,
so
we
are
still
in
a
matter
of
days
getting
1.12
out,
but
we
still
need
to
wait
a
while
one.
Other
point
in
here
is
that,
unfortunately,
the
1.12
will
not
support.
Note
14
note.
14
support
is
now
delayed
for
1.13,
which,
however,
is
scheduled
to
get
released
within
a
month
or
two.
So
we're
gonna
have
quite
a
few
versions
coming
up
this
spring
and
that
relates
on
the
viva
connections
as
well.
A
Vesa
for
those
updates,
so
quick
updates
across
the
patterns
and
practices,
programs,
pmpjs,
very
quick
updates,
2.3.0
scheduled
for
march
12th
release.
We
already
have
a
bunch
of
fixes
and
enhancements
all
of
that
driven
by
feedback
from
all
of
you,
so
keep
that
feedback
coming
we'll
do
our
best
to
get
everything
we
can
into
the
230
release
by
march
12th
we're
working
on
the
v3
plan
and
discussion
issues.
I
am
a
little
behind
on
getting
those
posted
for
discussion
and
so
we'll
have
those
posted
hopefully
this
week.
A
So
we
can
start
getting
everybody's
feedback
and
everybody
else
sharing
their
ideas
as
well,
because
we
have
some
ideas
and
we
want
to
kind
of
get
those
out
there
as
a
framework
to
start
the
conversation,
but
then
absolutely
hear
from
all
of
you
as
well
to
help
guide
the
direction
we're
going
to
take
for
v3
and
then,
as
always,
please
direct
all
feedback
to
the
issues
list.
So
we
can
ensure
we
track
it
correctly:
pnp,
github,
dot,
io,
pnp
js
for
all
your
documentation,
needs
and
hi
julie.
A
Who
is
on
vacation
this
week?
Cli
update
it's
for
microsoft,
365.
new
beta
3.6
is
available
with
a
browser-based.
Login
add
supports
for
conditional
access
accounts,
improved
managing
sharepoint
pages.
Ensuring
sharepoint
sites
exist
as
well
as
a
lot
of
other
great
stuff.
You
can
always
try
out
the
betas
with
npm
install
dash
g
at
pnp,
cli,
microsoft,
365
at
latest.
A
So
at
cli,
microsoft,
365
on
twitter,
ak
dot,
ms
slash
cli
dash
m365,
we'll
get
you
all
the
docs
and
information
on
the
cli
for
the
reusable
controls.
Our
react.
Controls
have
been
updated
to
240
with
an
accessible
accordion,
a
placeholder,
a
people
picker
a
taxonomy
pick
or
a
list
picker
as
well
as
various
fixes
there.
Those
of
course
the
controls
designed
to
be
used
in
the
body
of
your
web
part
or
application
customizer.
A
Property
controls
are
at
two
three
zero
and
these
are
a
set
of
controls
designed
to
be
used
within
the
edit
panel
of
your
sharepoint
framework
web
parts,
so
excited
to
see
those
continue
to
get
enhancements
and
to
grow,
and
so
you've
got
a
field
icon
picker,
which
you
can
sort
of
see
in
the
screenshot
there,
which
is
really
cool
very
similar
to
chris
kent's,
flycon,
dot,
io
and
the
field
turnpicker
and
the
field
list.
Picker
are
really
neat
controls
as
well,
so
encourage
folks
to
check
out
those
react.
A
Property
controls
to
get
a
great
out
of
the
box.
Looking
edit
experience
for
your
web
parts,
more
information
at
those
links
down
below
sp
dash,
dev
dash,
fx
dash
property
dash
controls
and
sp
dash
fx
dash
controls
dash
react,
gets
you
the
documentation
for
those
respective
libraries
and
with
that
modern
search.
D
E
Thank
you.
Have
we
got
some
samples
for
you,
so
the
the
spfx
sample
repositories
are
two
repositories
where
you
can
see
extensions
and
web
parts
that
have
been
built
by
the
community,
and
you
know.
The
one
thing
I
want
to
point
out
is
not
only
those
are
samples
that
people
are
creating
to
share
with
people
but
also
they're
being
maintained
by
people
across
the
multiple
versions
of
spfx
and
their
their
people
are
fixing
bugs,
and
things
like
that.
So
thank
you.
E
Everyone
for
doing
this
we've
got
two
new
extensions
by
mikhail
svensen,
one
which
converts
documents
to
pdf
and
it's
an
addition
to
another
pdf
conversion.
Extension
that's
available
already
in
the
library
this
one
here
doesn't
use
any
third-party
library.
So
it's
a
great
version
of
how
to
do
this.
There's
also
the
ability
to
demote
news
pages.
E
I'm
not
going
to
talk
too
much
about
it
because
we'll
be
seeing
it
right
after
this
on
the
webart
site,
joao
mendez,
updated
his
staff
directory
web
part
also
updated
his
list
menu
webpart,
which
now
adds
support
for
metadata,
columns,
multi-value
columns
and
so
on
and
so
forth.
We
have
a
brand
new
web
part
from
chandani
prajapati
which
allows
you
to
or
shows
you
how
to
use
data
tables
inside
of
web
parts,
and
it's
got
all
the
features
that
convert
to
csv
and
convert
to
pdf
and
all
sorts
of
stuff.
E
Frederick.
The
world
has
actually
updated
the
list
form.
Actually
a
few
people
updated
the
list
form
this
this
month,
but
this
one
actually
fixes
a
bug
with
taxonomy
values
and
ravichandra
actually
updated
the
list
menu
web
part
where
we
had
some
issues
where
it
didn't
build.
Russell
gove,
updated
his
cool
security
grid
web
part
and
now
he's
added
the
ability
to
support
80
groups,
and
we
have
a
brand
new
web
part
from
frederictorial
who
that
shows.
E
It
shows
you,
basically
all
the
the
sites
that
have
apps
that
are
connected
to
which
site.
So
it's
a
great
way
to
actually
administer
that
I've
updated
the
chart,
control
but
I'll
be
demoing
that,
right
after
this,
so
we'll
talk
about
it
after
and
then
cayman
1131
again
mean
parents
updated
the
list
farm
component
where
he
fixed
the
drag
and
drop
behavior
everyone.
We
are
always
welcome
to
contribute
to
samples
where
we
love
the
samples
you
create
and
please
go
visit.
A
Awesome
stuff
and
I'll,
just
echo,
seeing
all
the
samples
get
updated
and
added
is
really
amazing,
work
from
everybody
out
there
in
the
community
and
absolutely
welcome
your
samples
as
well.
So
if
you've
got
something
that
is
appropriate
to
share,
of
course,
you
know
if
you've
written
something
from
a
customer
or
your
company
do
check
before
publishing
that.
A
But
I
absolutely
welcome
your
samples
as
well
and
of
course
it
is
now
optional
picture
time,
so
we'll
let
vaso
take
over
the
sharing
and
if
you
are
interested,
go
ahead
and
turn
on
your
camera
and
be
part
of
our
optional
picture
time.
Waiting
for
vasa
to
take
over
the
sharing
case
is
currently
working
on
a
powerpoint
slide
about
how
we
do
sharing
and
he'll
get
that.
A
What's
wrong,
you
need
you
want
me
to
try
it
keep
talking,
keep
talking.
Gonna
keep
talking
still
talking
we're
talking
about
all
kinds
of
stuff.
Here
we
go
so
one
day,
we'll
think
the
horses
have
invaded
the
rabbits
and
the
rabbits
are
really
fighting
back,
which
is
what
we
like
to
see
and
I
think
the
rabbits
can
take
them.
But
you
know:
oh
there
we
go.
F
A
D
So
so
I
created
this
example
earlier
in
the
week
as
I
was
talking
to
some
old
consultant
friends
of
mine
who
had
an
issue
where
well,
people
are
promoting
their
pages
as
news,
but
there's
no
easy
way
to
demote
them.
So
you
used
to
be
able
to
do
quick,
edit
mode
and
add
the
column,
but
that's
not
possible
anymore,
because
the
promoted
state
field
which
is
used
to
set
if
a
page
is
news
or
not,
is
now
in
read-only
mode.
D
So
so
here's
my
regular
page,
I
mean
you,
have
this
promote
option
right
now
and
then
you
can
do
post
as
news
on
the
site,
and
now
this
is
news,
but
there's
no
way
to
get
back.
So
if
I
go
to
pages
library
right
so
here's
my
page-
and
I
now
have
this
button
called
demo
and
I
will
click.
This
page
is
no
longer
promote
as
this
but
remember
to
republish
your
page,
so
I
didn't
add
republishing
to
the
page.
So
that
means,
if
I
go
back
to
the
page,
I
have
to
republish
it.
D
D
So
what
you
have
to
do
is
the
easiest
way
so
so
for
the
image
I'm
using
an
svg
file
in
in
xml
format.
So
there's
multiple
ways
of
doing
this,
so
I'm
not
going
into
how
you
can
convert
and
get
your
icons
into
the
svg
files.
But
that's
that's
possible,
but
if
you
also
want
to
get
these
as
get
the
theming-
oh,
let's
do
like
this.
D
So
if
we
so
on
the
list
view
updated
commands.
So
this
is
this
triggers
when
you
when
you,
when
you
pick
an
item,
so
I
have
this
helper
method
here
to
get
the
theme
color,
which
is
very
short.
So
basically
what
it
does
is
it's
using
the
global
theme
state
object,
so
there's
there's
tons
of
issues
getting
the
current
theme
in
and
in.
D
But
since
since,
since
the
theme
is
in
a
global
state,
object,
well
just
let's
pull
it
from
there
and
then
that
allows
you
to
get
to
different
slots.
If,
for
some
reason,
this
object
will
despair,
we
fall
back
to
using
the
ui
fabricate
theme
and
hopefully
that
will
sometime
in
the
future,
give
you
the
right
theme
and
not
just
the
default
blue
theme.
D
So
so
that's
just
to
get
the
color.
So
what
happens
here
is
I
have
the
same
svg
code
and
then
I
do
a
and
then
we
sort
of
set
for
fill.
So
I
just
slot
the
color
in
here
right.
So
that
means
it
just
picking
up
the
theme
color
and
then
putting
that
in
as
in
and
svg,
and
that
means,
when
you
deploy
this
different
sites,
I
can
will
be
in
in
the
right
color.
D
So,
thanks
to
hugo
for
alerting
me
that
I
can
url,
you
know
arcane
image.
Url
is
actually
exposed
on
the
command
object
and
then
I'm
checking
also,
if
you
have
permissions
to
edit
the
item
so
at
the
top
here.
Just
you
know
using
the
page
context,
to
see.
Well,
okay,
you
have
add
list
items,
because
if
you
can't
add
list
items
you
can't
really
edit
it.
D
So
that's
the
checking
on
the
permission
if
the
option
should
show
or
not
and
then
the
real
work
right
so
fetching
the
fetching,
the
fetching
the
page
and
checking
well,
if
it
is
it
already
promoted
or
not.
So
that
means,
if
I
take
this
so
if
I
demo
this
right
now
well,
this
is
not
demoted.
So
we
can't
really
do
it.
You
know
two
times
in
a
row
and
then
I'm
checking
is:
is
it
checked
out
to
some
other
user?
If
it's
checked
out
to
some
other
user?
D
Well,
you
need
to
take
ownership
of
it
first
and
then,
if
everything
is
in
order,
you
can
then
set
the
promoted
state
field
to
back
to
zero
from
two.
That's
that's
what
happened
here,
but
but
the
crux
of
it
all
is
that
you
can't
use
the
normal
update
command
on
the
list
item.
This
is
a
read-only
field.
D
You
have
to
use
a
validate
update
list
item
which
sort
of
skips
past
that
read-only
option
and
you
can
set
the
value
so
that
so
that's
sort
of
what's
blocking
you
for
using
a
normal
update
and
that's
basically
so
I'll
show
one
more
thing.
So
if
you
look
at
the
elements
xml,
so
if
you
deploy
this
to
a
site,
so
119
that's
a
side,
page
library
to
ensure
that
it
only
appears
inside
pages.
I've
also
added
the
rights
here.
C
Here
we
go
sorry,
yes,
I
I
just
let's,
let's
read
on
a
few
things.
Sorry
patrick
also
jump
in
here,
because
this
is
actually
really
cool.
What
you're
showing
right
now
in
here
just
for
people
to
understand,
because
I
don't
think
everybody
understands
that
when
you're
creating
an
extension,
you
can
automatically
make
it
available
across
the
tenant
in
a
document,
library
or
a
list
or
a
specific
document
library
type
and
since
the
site
pages
library
has
a
unique
id
which
happens
to
be
119,
I'm
not
sure.
C
If
this
new
ideas,
I
think
they're
documented
somewhere,
if
they're,
not
yes,
these
are
all
going
back
to
sharepoint
yeah,
exactly
shape
one
stone
age.
Yes,
we're
dinosaurs,
I
get
it
and
now,
but
that
basically
means
that
whenever
we
are
then
deploying
this
solution
to
the
tenant
as
one
of
the
deployment
as
part
of
the
package,
we
actually
add
an
entry
to
this
app
catalog.
There
is
a
specific
list.
I
don't
know
have
you
tested?
Have
you
do
you
have
an
app
catalog
here?
Can
we
actually
show
how
it
works?
C
Oh
yeah,
if
you
upload
that,
so
what
happens
is
that
when
we're
uploading,
the
sbb
kg
file
sharepoint
basically
checks
the
inside
of
it
and
then
realizes
that?
Oh,
you
want
this
button
to
be
activated
across
all
of
the
site
pages
across
the
whole
tenant
automatically
and
and
that's
actually
really
cool
this
super
powerful
capability
and
how
do
we
control
that
is
using
a
tenant-wide
deployment
list
from
the
epic
app
catalog?
So
now,
if
we
go
to
the
after
deployment
first
of
all,
it
clearly
says
that
we're
doing
that
and
there's
the
permissions.
C
And
now,
if
you
go
to
the
site
content,
we
can
actually
see
that
there
is
a
list,
a
tenant,
wide
extension
list,
the
last
one
on
the
list.
This
one
is
the
one
where
we
control
the
one
or
two
extensions
which
will
be
exposed
across
the
antenna.
So
now
we
can
actually
see
here.
One
of
these
entries
is
the
one
which
you
pushed
in
yes.
C
The
item
is
in
this
list,
it
will
be
then
activated
across
all
of
the
sites
within
antenna,
and
so
we
don't
actually
deploy
anything
on
a
site
level
on
runtime
when
we're
rendering
in
the
site
site
site
site,
and
we
actually
check
the
content
of
this
list.
And
then,
if
the
entry
is
in
here,
then
we
render
the
button
and
but
it's
really
really
powerful
way
of
pushing
extensibility
on
a
list
and
libraries
buttons
and
extensions
and
list
your
command.
Let's
and
executing
your
code,
then
as
part
of
the
libraries
as
well.
C
C
Here
and
that's
unfortunately,
currently
not
possible,
so
please
use
the
user
voice.
Let's
get
this
fixed
and
the
the
people
responsible
of
the
pages,
which
is
unfortunately
not
me.
It's
a
different
set
of
people
and
and
our
team
are
we're
on
the
platform
team.
They
haven't
really
prioritized
that
thing,
but
it
would
be
really
cool
if
you
would
be
able
to
add
extensions
and
patterns
on
this
view,
not
just
when
you
are
in
the
side
pages.
D
C
Yeah
exactly
exactly
there
should
be
a
native
yeah,
a
native
way
of
doing
that,
and
then,
if
not,
we
would
be
able
to
add
additional
buttons
actually
on
that.
Even
on
that
level,
it
would
be
cool
to
have
a
additional
way
or
support
having
extensions
on
this
panel
as
well,
because
that
would
be
a
superpower,
okay,
but
anyway.
So
thank
you
mikhail
on
this
one,
sorry
for
taking
humanist
extra,
but
I
think
it's
it's
good
to.
G
C
A
G
Yes
check
my
screen
thanks
to
the
pnp
team,
for
giving
me
this
opportunity
to
show
my
first
sample.
My
name
is
michael:
I'm,
a
mg65
solution
developer.
At
one
point
I
based
in
north
france,
and
I
originally
contributed
on
pnp
projects
such
as
cli
for
microsoft,
365..
You
can
reach
me
out
on
twitter
and
github,
or
check
on
my
personal
website
when
I
share
some
cool
stuff.
G
So
why
did
I
make
this
sample
for
those
who
are
confronted
to
to
customers
who
that
use
libraries
and
lists
with
folders
in
a
daily
basis?
You
can
face
a
common
issue
like
oh.
I
want
to
structure
my
folders
like
on
my
computer
or
oh,
it's
a
lane
to
create
folders
after
folders.
Can
we
just
display
the
library
in
windows
like
we
used
to
on
sharepoint
server
server,
and
thinking
about
that
I
wanted
to
provide
an
extension
that
would
make
that
common
task
easier
for
you
or
your
customers.
G
However,
in
my
opinion,
and
unless
you
have
thousands
of
files
to
handle,
I
think
that
the
best
is
to
use
metadata
to
organize
your
data
rather
than
folders.
Here
are
some
key
features
of
this
extension.
You
can
quickly
add
multiple
folders
at
once,
using
keyboard
with
tab
or
enter
keys,
you
can
select
the
way
you
want
to
add
folders
at
the
root
of
the
same
path
or
one
after
another,
and
it
works
on
both
lists
and
libraries
based
on
the
permissions
of
the
current
user
and
the
availability
of
the
add
new
folder
option.
G
G
You
can
see
here
and
here
that
this
is
something
unusual
and
that's
because
of
the
tool
made
by
mvp,
sergey
segrev
called
spfx
faster
that
I
highly
recommend
every
sp
fx
developer
to
use,
because
it's
a
huge
time
saver
when
constantly
developing
updating,
saving
and
retraining
your
developments.
So
if
you
want
to
do
details
about
how
does
it
work,
how
to
use
it
by
you
can
go
on
his
repo
and
just
try
it?
G
G
The
thing
is
that
if
you
want
to
check
asynchronously,
if
the
extension
should
be
displayed
or
not,
you
have
to
declare
a
class
property,
make
the
sync
check
on
the
init
method
and
update
the
property
and
finally
check
it.
In
the
only
view
updating
method,
the
fact
is
that
actually
the
unlist
view
updated
is
not
a
promise,
return
method
and
there's
no
way
actually
to
make
a
sync
check
to
set
up
the
visibility
afterwards.
G
There
are
some
open
issues
about
this
problem
that
you
can
find
on
the
s
on
the
sharpen
github,
slash,
sp,
dash,
dev
docs
issues.
The
first
thing
I
wanted
to
point
out
is
the
use
of
hooks
for
those
who
don't
know.
What's
this,
it's
a
pattern
available
from
react,
16.8
that
allows
you
to
manipulate
states
and
simplify
your
code
by
improving
your
components,
lifecycle
for
this
sample.
I
wanted
to
experiment
the
the
user
folks.
C
G
I
use
some
of
provided
by
react
like
the
use
states
and
the
use
reducer
dispatch,
but
I
also
use
the
ones
provided
by
microsoft
through
the
npa
package
called
at
ui
fabric
react
dash
hooks
like,
for
example,
the
use
boolean.
The
combo
use.
Reducer
dispatch
was
for
me
appropriate
because
I
was
playing
with
an
error
of
objects
that
I
wanted
to
easily
update,
even
if
I
just
could
use
the
use
state.
If
I
wanted
to
the
use.
G
Boolean
is
cool
when
using
some
toggle
and
checkbox
actions
when
display
or
hide
something
without
mentioning
the
true
force
property
and
using
an
appropriate
method
for
clarity.
Next
comes
the
use
effect.
It's
another
approach
to
manage
the
components
life
cycle
that
you
used
to
know
through
component
in
mount
and
component
did
update.
For
example.
G
G
The
second
is
for
managing
the
folders
when
interacting
with
them,
through
the
actions
like
adding
and
deleting
folders
on
during
the
folder
creation
process
in
sharepoint.
That
will
show
the
progression
to
the
user
when
the
folder
state
is
being
updated,
and
the
third
use
effect
is
for
displaying
warnings
that
occur
when
working
with
folders
to
add
when
the
photo
state
or
the
creation
method,
toggle
states
are
updated,
now
show
you
a
demo.
So
from
this
tenant
example,
I
deployed
the
extend
the
sample
extension.
G
If
I
go
to
a
library,
for
example,
you
can
see
here
that
there
is
the
extension
which
is
displayed
like
this,
so
the
first
time
you're,
you
arrive
on
your
your
display,
the
the
model
extension
you
have,
this
coach
mark
that
show
you
some
guidance
about
how
to
use
it.
So
at
any
time
you
can
close
it
and
when
the
page,
refreshes
you'll
see
the
couch
mark
again
or
you
can
click
on
on
the
guided
button,
and
it
will
be
there's
a
parameter
that
would
save
in
the
local
storage
that
checks.
G
And
once
you're
ready,
just
click
on
create
folders,
you
have
the
correlation
one
after
another
and
once
it's
created
you
can
choose
to
go
to
any
folder.
Where
you
want
here,
you
can
see
that
the
menu
folder
has
been
created.
So
if
I
go
there,
you
can
see
that
I'm
in
my
folder
so
from
there
I
can
go
for
example
here
and
I
can
choose
to
add
new
folders.
G
G
G
Again
last
thing
I
wanted
to
show
before
going
to
the
code:
it's
the
what
I
call
the
bandwords,
for
example.
If
I
type
this
word,
oh,
if
I
I
can,
I
can
click
on
the
button.
I
can,
if
I
type
tab
or
enter,
keep
nothing
happens,
and
if
I
go
here,
I
got
some
info
that
indicate
me:
what
are
the
characters
that
aren't
allowed
and
the
words
that
are
banned?
G
G
There
another
folder
I
can-
I
can
type
this
I
can
all
I
can.
I
can
create
folders,
but
I
can't
add
this
one
here:
it's
just
plugging
the
addition
of
the
of
the
folder
to
the
list
so
now
to
code
here,
some
as
you
can
see,
we
are
back
and
in
in
in
the
components
that
I
showed
you
in
the
in
the
department
before
I
would
like
just
to
show
two
last
things.
The
first
is
the
add,
folder
method
that
is
down
here.
G
This
is
the
core
of
the
component,
which
is
the
method
that
adds
the
folders.
You
can
see
that
if
we
choose
to
add
the
folders
on
the
same
level,
we'll
use
the
pnp-js
batching
method.
So
here
the
first
step
is
to
emit
the
the
batch,
and,
if
we
go
here
in
this
part,
when
we
are
adding
the
folders
on
the
same
path,
we
just
mentioned
the
in
batch
to
to
to
you
to
to
the
execute
for
executing
the
method.
G
So
I'm
using
the
attribute,
add
subfolder
using
pass
and
last
when
everything's
ready
you
just
have
to
execute
whatever
the
way
we
choose
to
add
folders
it
will.
It
will
be
with
the
help
of
alias
parameters
that
you
can
find
here,
and
here
it's
used
for
getting
the
getting
first,
the
current
location
before
adding
a
folder
to
it.
G
This
is
because,
as
you
can
choose
to
add
a
folder
from
anywhere
in
a
list
or
a
library,
you
can
face
some
use
cases
when
a
customer
wants
to
add
multiple
folders
in
a
deep
nested
pass.
So
if
you
don't
want
to
be
blocked
during
the
addition
of
the
13th
nested
folder,
for
example,
you
have
to
use
alias
parameter
if
you
don't
want
to
face
the
500
error
issue.
G
The
other
thing
I
wanted
to
talk
about
is
it's
the
rendering
of
the
of
the
breadcrumb
that
you
can
see
if
you
choose
to
to
add
photos
after
after
photos,
the
chosen
display
is
broken
like
and
at
first
I
used
the
fluent
ui
component
once,
but
then
I
realized
that
it
was
difficult
to
fit
it
to
my
need,
as
I
didn't
want
it,
to
be,
overflowed
and
stacked
to
the
dialogue.
So
I
decided
to
make
my
own
behavior
easier
to
manipulate
and
to
update
during
the
progression
of
the
process.
G
G
There
are
now
some
issues
that
I
wanted
to
mention
here
to
let
folks
know
about
if
we
want
to
develop
their
own
extensions.
The
first
is
the
navigation
problem.
If
you
use
the
quick
launch,
the
fact
is
that,
if
you
go
to,
for
example,
you
go
to
to
a
list
that
doesn't
have
the
extension
enabled
for
for
development
reasons,
and
you
go
back
to
the
library
that
is
supposed
to
display
the
the
extension
it
won't
work.
There
is
an
issue
about
that.
G
I
know
that
tony
paul
also
mentioned
it
and
it's
in
investigation
actually,
and
the
second
issue
is
to
display
the
extension
in
the
native
teams
files
tab.
If
you
want
to
see
your
extension
in
teams,
you
have
to
add
another
tab
that
points
to
your
library,
because
by
the
default
files,
tab
doesn't
display
the
spfx
extensions-
and
I
know
there
is
a
user
voice
about
this-
about
the
future
improvement
to
allow
to
to
display
the
the
specific
extensions
to
the
files
tab
and,
finally,
some
improvements
that
I
thought
about.
G
After
deploying
the
extension,
the
first
would
be
to
drag
and
drop
the
folders
to
when
you
want
to
add
it,
add
the
folders
and
and
one
after
another,
and
you
want
to
change
the
order
of
the
folders
instead
of
deleting
and
adding
again
and
another
improvement
would
be
to
display
error
messages
in
the
other
in
the
message
bar
using
the
message
bar
component
in
fluent
way.
Instead
of
the
browser
console
log,
maybe
maybe
you
guys
would
have
some
more
ideas
to
submit.
Why
not
thanks
everyone
and
back
to
you,
patrick.
A
E
Yes,
hi
everyone,
my
name
is
hugo
bernier,
and
but
today
you
can
call
me
mike
and
I'm
going
to
be
talking
to
you
about
a
whole
bunch
of
web
parts.
I'm
not
just
demoing
one
web
part
today,
I'm
demoing
20
web
parts
and
it's
a
web
part
sample
that
uses
the
pnp
reusable
controls
to
add
charts
to
your
web
parts.
E
There's
tons
of
great
libraries
out
there
to
create
charts
one
of
the
most
flexible
ones
out.
There
is
chart.js,
but
it
can
be
difficult
to
add,
chart
js
to
a
web
part
and
have
all
the
cool,
responsive,
behavior
theme
awareness,
you
know
fluent
ui
integration
and
all
the
other
cool
features
that
we've
learned
to
love
in
sharepoint
web
parts.
E
Fortunately,
there's
the
pmp
reusable
controls,
library,
which
makes
it
easy
for
you
to
integrate
the
chart.js
in
your
spfx
solutions.
If
you
haven't
used
the
pmp,
reusable
controls,
it's
a
nod,
node
module
that
you
can
add
to
your
spfx
solutions
and
add
tons
of
cool
controls,
not
just
a
chart,
control,
there's
a
web
part
title
control
and
a
placeholder
control
and
a
folder
picker
lots
of
really
cool
stuff.
E
So
I
created
the
the
chart
control
component.
It
seems
like
a
couple
years
ago
now,
but
when
I
did
create
the
chart
control
component
for
the
pnp
reusable
controls,
I
also
made
sure
to
create
samples
to
show
how
to
use
pretty
much
every
single
feature
of
the
pmp
chart
control,
so
the
chart
control-
and
this
is
actually
the
list
of
web
parts
in
the
chart-
control
solution.
E
It's
got
about
20
web
parts.
In
fact,
I
think
it's
exactly
20
web
parts
to
show
you
how
to
use
all
the
features
so
the
chart
webpart,
that's
obviously
got
some
cool
gratuitous
animations
by
default.
The
chart
control
will
actually
try
to
render
an
accessible
version
of
every
chart
and
there's
a
sample
called
accessible
bar
chart
that
actually
shows
you
what
the
web
part
renders
behind
the
scenes.
So
the
table
that's
created.
E
E
E
E
E
There's
a
scatter
chart
and
the
chart
control
also
uses
or
supports
using
things
like
patterns
and
gradients.
So
this
is
a
sample
of
using
a
donut
charts
with
or
without
patterns.
I
would
never
use
so
many
patterns
on
a
web
part.
But
again
this
was
just
to
demonstrate
all
the
patterns
that
are
available
and
the
control
itself.
E
You
can
also
use
combo
charts,
so
there's
a
combo
chart
sample.
That
shows
you
how
to
combine
multiple
charts
into
into
one
and
the
chart
control
even
supports
custom
plugins,
so
you
can
completely
override
the
rendering
behavior
of
your
chart.
So
this
is
an
example
of
custom,
rendering
here
using
a
plug-in,
I
saw
this
really
cool
chart
somewhere
and
I
I
decided
to
emulate
it
using
the
chart
control.
E
Another
example
of
a
plug-in
here
is
an
example
of
showing
real-time
data
in
a
continuous
feed,
so
that
updates
all
the
time
and
just
for
good
measure,
I
even
added
a
dynamic
property
web
part
or
web
parts
that
connect
two
web
parts
together.
So
you
can
create
clickable,
chart
areas
and
update
the
chart,
data
based
on
a
selection
from
another
web
part,
and
that's
also
a
great
way
to
to
learn
how
to
handle
events
in
a
web
part.
E
E
E
As
a
few
more
options,
you
have
pretty
much
every
single
chart
possible,
so
line
charts,
bar
charts,
horizontal
charts
and
so
on
and
so
forth.
I'm
not
going
to
go
through
every
one
of
them.
You
can
still
enter
data
manually
or
you
can
get
data
from
a
list,
but
you
know
there's
more
so
you
can
actually
create
palettes
or
use
the
palettes
and
those
are
the
office
palettes.
E
So
again,
if
I
change,
let's
say:
donut
charts
you'll
see
that
the
options
here
are
donut
settings
versus
the
bar
except
settings,
so
every
web
part
has,
or
every
chart
type
has
different
options.
Things
like
layout,
whether
you
want
the
legend
to
show
up
or
not
whether
you
want
tool
tips
and
even
a
cool
animation
selector,
so
it'll
actually
allow
you
to
control
how
the
web
parts
going
to
animate.
E
Now,
of
course,
because
I'm
trying
to
do
this-
it's
not
oh
it's
just
not
it's
not
displaying
very
well
on
on
the
screen
capture,
I
think,
but
lots
of
options
out
there.
It
was
really
fun
to
use
and
again,
I'm
always
looking
for
for
opportunities
here
to
improve,
but
let's
switch
back
to
the
code
all
right.
E
So
this
is
the
varchar
static
and
it
actually
in
order
to
use
the
chart
control.
Of
course,
you
need
to
add
the
pmp
reusable
control
to
your
project
library
and
then,
when
you
create
the
bar
chart,
you
can
specify
what
kind
of
chart
you
want.
So
in
this
case,
I,
instead
of
using
a
string
that
says
pi
bar
whatever
I
use
a
chart
type
enumeration,
so
I
can
do
chart
type
dot,
pi,
for
example,
and
then
all
you
need
to
do
after
you
import
the
reference.
E
Is
you
create
a
chart,
control
and
inside
the
chart,
control?
You
have
the
data
element
and
you
can
pass
data
in
this
case.
I'm
passing
labels
and
data
sets.
Of
course
I
could
have
retrieved
that
data
from
somewhere
else
and
passed
it
in
here,
but
for
the
purpose
of
the
demo,
I
just
hard
coded
the
data
and
then
at
the
bottom
here,
like
I
said
you
just
have
to
specify
what
type
of
chart
it
is
and
because
there's
a
chart
type
enumeration,
you
can
just
go
chart
type
dot
and
it'll.
E
E
All
you
need
to
do
is
pass
a
data
promise,
so
here's
the
bar
chart
demo,
which
actually
renders
dynamic
data,
and
I
do
the
same
thing-
I
include
a
chart
control,
but
instead
of
passing
a
data
prop,
I
pass
a
data
promise
and
hopefully,
you've
played
with
promises
in
in
javascript
or
typescript.
It's
a
great
way
to
to
do
things
asynchronously.
E
So
in
this
case
I'm
calling
a
function
that
returns
a
data
promise,
while
I'm
at
it,
I'm
also
displaying
a
loading
template.
So
you
can
actually
there's
a
deep
loading
template
that
gets
created
automatically
for
you,
but
you
can
override
the
template
in
this
case,
I'm
doing
a
gratuitous
spinner
when
the
the
data
is
loaded
and
then
my
load
of
sync
data
is
actually
just
again
calling,
in
this
case
a
mock
service
in
the
in
the
demo.
I
wanted
to
use
only
mock
services,
but
you
could
call
any
apis
graph
sharepoint.
E
So
I
know
I'm
going
really
quickly
here,
but
we're
running
out
of
time.
I
barely
scratched
the
surface
about
how
you
can
use
the
pmp
chart
control,
but
I
do
hope
that
I've
convinced
you
to
use
the
shark
control
on
your
own
solutions
and
that
you'll
go
take
a
look
at
the
sample
web
parts
to
implement
whatever
charts
your
solutions
need.
If
you
need
any
help,
please
don't
hesitate
to
reach
out
to
me
on
twitter,
I'm
bernie
h
and
if
you
ever
have
a
cool
looking
chart
that
you'd
like
to
implement.
E
A
Awesome
stuff,
as
always,
thank
you
hugo
for
running
through
that.
I
hope
that's
opened
up
some
possibilities
for
folks
to
see
ways
to
incorporate
the
chart
controls
into
their
projects.
So
really
great
work
they're
excited
to
see
that
and
check
out
that
sample
everybody
and
check
out,
of
course,
the
great
work
from
michael,
michael
and
hugo
fantastic
demos.
All
three
today,
as
always.
Thank
you
very
much
folks
for
doing
the
demos
and
the
great
content
and
great
samples
there.
I
want
to
thank
all
of
you
for
joining
our
recording.
Today.
A
The
recording
will
be
up
in
about
24
hours
give
or
take
on
our
youtube
channel.
You
can
follow
us
on
twitter,
at
the
at
microsoft,
365
dev
or
at
m365
pnp.
Our
next
spfx
call
will
be
march
11th
at
the
same
time,
and
our
next
general
dev
call
will
be
next
thursday
march
4th.
Can
you
believe
it
is
march?
Already?
All
community
calls
are
available
to
aka
dot
ms
m365
pnp.
A
As
always,
here's
a
list
of
a
ton
of
other
microsoft,
365
developer
community
calls.
We
are
doing
some
work
behind
the
scenes
to
sort
of
rationalize
these
down
a
little
bit.
Make
it
a
little
bit
simpler
to
attend
community
calls
we'll
have
more
details
on
that
coming,
just
as
we
figure
it
out.
So
thank
you
all
very
much
have
a
great
weekend
and
look
forward
to
talking
soon
bye.