►
Description
SharePoint PnP Community - SPFx & JS SIG call on November 5. Demos delivered: 1) PnP Field File Type field customizer reusable control, 2) Implementing a World Clocks web part, and 3) Outlook add-in with SPFx to save attachments to SharePoint using Microsoft Graph. Latest project releases include CLI for Microsoft 365 v3.2 and Reusable SPFx React Property Controls – v2.1.1. Additionally, there are updates on 10 PnP SPFx Samples – 1 extension and 9 web parts. More contributor training dates have been added on the Sharing-is-caring site. The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.
Demos:
• PnP Field File Type field customizer reusable control – Alex Terentiev (Sharepointalist) | @alexaterentiev
• Implementing a World Clocks web part – Jerry Yasir (DCX Technology) | @jerryyasir
• Outlook add-in with SPFx to save attachments to SharePoint using Microsoft Graph – Aakash Bhardwaj (HCL Technologies) | @aakash_316
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
Hello
and
welcome
to
the
sharepoint
framework
and
javascript
special
interest
group
bi-weekly
sync:
it
is
november
5th,
I'm
your
host
patrick
rodgers.
We
have
another
great
call
for
you
today.
So
quick,
look
at
our
agenda.
We've
got
latest
updates
on
sharepoint
framework.
We
just
got
two
patterns
and
practices
updates
for
you
today,
updates
from
the
cli
and
the
reusable
controls,
as
well
as
our
normal
updates
around
community
samples.
A
That's
going
to
be
a
cool
solution
there
for
some
localization
internationalization
stuff
and
an
outlook
add-in
with
spfx
to
save
attachments
to
sharepoint,
so
another
very
cool
use
of
spfx
in
kind
of
a
place.
We
don't
see
it
a
lot
in
outlook,
so
excited
to
see
that
demo
later
in
the
call,
as
well
always
learning
something
cool
from
everybody's
demos.
A
So
a
lot
of
folks
are
always
curious
about.
How
do
you
get
more
involved?
How
do
you
participate
a
little
bit
more
in
the
past
practices
program,
or
this
call
more
specifically?
So
if
you
would
like
to
demo
on
this
call,
whoever
you
are
wherever
you
are,
please
just
reach
out
to
myself
or
vasa,
and
those
demos
can
really
be
anything.
Client-Side
development
related
web
parts,
application
customizers
stuff
around
provisioning,
anything
you
really
create
for
your
company
or
for
your
customers.
A
A
Those
demos
can
include,
of
course,
anything
from
the
app
pnp
family
of
solutions,
so
pnpjs
the
cli,
reusable
controls,
the
yeoman
generator
or
any
combination
of
those
things
so
always
excited
to
see
that
and
excited
to
see
what
folks
are
coming
up
with
as
well
contributing
to
github.
I
really
encourage
everybody
to
to
contribute
if
you
can
or
if
you
have
some
time
great
ways
to
contribute,
are
reporting
issues.
A
We
don't,
as
I
say,
love
getting
issues,
but
we
love
hearing
about
them,
so
we
can
get
them
fixed
and
resolved
for
future
releases.
So
it's
important
that
we
do
hear
about
any
trouble
or
problems
you
might
be
having
across
any
of
our
solution
offerings.
You
can
always
pull
requests
all
of
our
pull
requests
open
to
your
contributions
and
then,
of
course,
as
well.
If
you
happen
to
have
a
little
bit
of
time
or
happen
to
see
a
question,
you
maybe
know
the
answer
to
maybe
you've
already
dealt
with
that
issue.
A
Jump
in
and
help
out,
there's
no
reason
not
to
jump
in
and
help
out.
Your
fellow
community
members
with
questions-
and
you
know
just
speeds
along
everybody's
path
to
resolution,
so
appreciate
everybody.
That's
doing
that
and
of
course,
if
you
haven't
welcome
you
all
of
you
to
start
doing
that,
encourage
anybody
to
participate
and
we'll
talk
about
it
in
a
sec.
If
you
are
unsure
on
pull
requests,
and
things
like
that,
we
do
have.
The
sharing
is
caring
initiative,
which
david
will
talk
to
in
just
a
little
bit.
A
Of
course,
we
also
welcome
feedback
across
everything,
we're
doing
so.
Providing
feedback
around
these
calls
around
the
documentation,
needs
and
positive
feedback
is,
of
course,
okay
too,
because
that
will
make
us
maybe
do
a
little
bit
more
focus
a
little
bit
more
on
those
things
that
you
do
like
or
enjoy
in
the
calls
and
so
forth,
and
this
is
arpeggio
links.
A
So
like
web
parts
in
the
web
parts
gallery
extensions
in
the
web,
extensions
gallery
and
so
forth-
and
those
can
be
really-
you
know
almost
anything
so
just
whether
you're
using
microsoft
graph,
whether
you're
using
some
pnp
stuff,
whether
you've
just
written
a
really
neat
spfx
solution.
Those
are
all
great
samples.
I
know
when
I've
got
work
to
do
or
I'm
doing
research
on
something
I
check
out.
A
B
All
right,
thank
you,
patrick,
so,
for
those
who
are
new
and
even
those
who
are
long-standing
veterans
with
us,
the
patterns
and
practices
community
is
completely
open
source
and
that's
from
a
using
the
resources
consuming
the
resources,
as
well
as
the
contributing
to
the
resources.
But
we
understand
that
sometimes
that
can
come
with
some
hurdles.
Some
education
and
guidance
that
that's
needed
and
useful.
So
the
sharing
is
caring.
Initiative
is
here
to
provide
you
hands-on
guidance
in
not
only
consuming,
but
also
contributing
to
the
different
projects
and
initiatives
within
the
pnp
in
the
community.
B
They
build
upon
one
another,
they're
all
completely
free
to
join.
They
are
hands-on,
so
we're
going
to
work
together
and
they
do
count
as
contributions
and
you're
going
to
actually
be
able
to
see
exactly
how
to
do
it.
We
create
resources
for
you
in
advance
of
the
sessions,
so
it
is
very
interactive.
It's
not
just
a
watch
and
and
learn.
We
are
working
together.
B
The
sessions
build
upon
one
another
and,
as
you
can
see,
they
start
in
a
first
time
contributor
session
and
build
from
there
into
variety
of
topics,
including
community
docs,
spf
examples
and
more.
The
end
of
this
month
is
going
to
have
our
first
multi-day
multi-session
event.
Now
it's
not
all
day
it's
going
to
be
about
an
hour
hour
and
a
half
spread
across
three
days
for
how
to
set
up
your
set
up.
B
Your
workstation
get
involved,
learn
how
to
use
nvm,
learn
how
to
submit
your
samples
back
use
cli
to
upgrade
it's
going
to
be
a
lot
of
fun
very
interactive,
very
much
like
a
workshop
like
a
little
boot
camp.
We
want
to
also
thank
all
of
our
october
attendees.
As
you
can
see
on
the
screen,
it's
been
a
fantastic
month.
A
Great
sessions,
they're
free,
definitely
check
them
out
and
excited
for
those
workshops.
I
think
we're
gonna
see
some
awesome
stuff
come
out
of
those
we've
had
some
great
samples
come
right
out
of
the
sharing
is
carrying
workshops
themselves.
So
now,
sharepoint
framework
updates,
vasa
I'll
hand,
things
off
to
you.
C
C
I
can't
promise
that
yet,
but
it's
mainly
there
to
provide
additional
properties
and
context
for
the
web
parts
which
are
being
hosted
in
sharepoint
and
the
primary
purpose
of
that
one
is
to
reduce
the
requirements
of
having
dom
dependency
or
dom
injections
within
the
spfx
web
parts.
Because
pretty
recently
we
did
do
optimizations
into
modern
pages
and
then
people
freaked
out
because
they
had
done
dom
level
injections
and
style
injections
and
dependent
on
the
html
structure
of
the
page
which,
by
the
way
we
do
not
support.
And
then
people
got
broken.
C
And
then
there
will
say
we
roll
back
the
chains.
Now.
What
we
want
to
do
is
to
understand
those
scenarios
so
that
we
can
actually
give
you
a
supported
way
of
doing
the
same
functionality
which
you
were
forced
to
use
dom
injection,
because
you
should
not
have
a
dependency
on
a
html
structure
of
the
page.
That's
not
something!
What
we
support
so
and
that's
basically,
the
main
reason
for
the
1.12
and
then
potentially,
we
are
able
to
get
the
complex
theme
solutions
included
in
that
one
as
well.
C
A
released
a
new
version
3.2
with
retrieving
personal
teams;
apps,
retrieving
teams,
tabs
knowledge
hub
site,
urls,
deleting
modern
sharepoint
sites,
simplifying
updating,
to-do
lists
and
updated
the
cli
architecture.
So
some
internal
changes
cli.
There
really
excited
to
see
this
continue
to
grow
tons
of
great
contributors
involved
in
this.
As
with
all
our
projects,
but
npm
install
dash
g
at
pmp,
slash,
cli,
microsoft,
365.,
you
can
find
more
information
there
at
ak
dot.
Ms
slash
cli
dash,
m365
and
that'll.
Get
you
all
the
documentation
updates
for
the
cli
for
microsoft,
365.
A
D
So
not
too
many
updates.
We
released
the
new
version
for
react,
property
controls
2.1.1,
then.
Basically,
there
is
only
one
fixed
fixed
of
auto
generated
localization.
So
in
2.1.0
we
added
these
localizations,
but
I
messed
them
up.
So
we
quickly
fixed
that,
and
now
we
have
like
about
20
localizations,
I
believe
for
react,
property
controls
and
also
follow
us
on
twitter,
at
m365,
pnp
controls
and
more
information
as
usual
in
our
documentation.
E
Thank
you,
so
the
pmp
spfx
samples
are
repositories
that
are
here
to
help
get
your
project
started
by
providing
sample
code,
that's
built
by
an
inclusive
community.
We
absolutely
welcome
everyone
and
we
encourage
a
positive
attitude
in
helping
each
other.
These
repositories
should
absolutely
be
the
first
step
that
every
developer
takes
when
they
need
to
start
a
solution.
Like
patrick
said,
the
updates
for
the
last
two
weeks
on
the
spfx
extension
side
aka.ms
slash,
spfx
extensions.
E
We
have
an
update
of
the
file
type
renderer
extension,
where
alex
trent
have
added
a
code
tour
and
on
the
webparts
side,
we've
added
we've
upgraded
the
explorer
by
fixing
some
button
layout
by
abdurahman
mujahid,
and
then
the
security
grid
by
russell
gove
has
been
updated
using
the
office,
ui
fabric,
7
114
and
fixed
some
icons
issues,
and
then
again
with
up
there.
Duraman
updated
the
content.
Query
web
part
where
he
fixed
issues
with
special
characters.
E
We
also
have
abduraman
again
updated
the
graph
calendar,
the
faq
app
and
then
sebastian
leves
updated
the
graph
calendar
for
us.
The
workbench
customizer
by
joel
rodriguez
has
been
updated
where
he
fixed
a
package
solution
error
that
we
were
getting
and
don
kirkham,
who
is
actually
a
sharing,
his
caring
graduate,
updated
the
carousel
web
part
and
the
word
game
web
part
to
spf
x-111.
E
A
Awesome,
thank
you,
hugo
yeah,
the
samples,
as
I
said
before,
really
amazing
work
by
everybody
and
it's
my
first
stop
for
trying
to
learn
and
get
ideas
when
I've
got
a
new
project
or
I'm
doing
research
around
something,
and
so
now
we
are
up
to
optional
picture
time.
So
if
you
are
interested
turn
on
your
camera
completely
optional,
but
certainly
encourage
everybody
to
do
so,
and
vase
is
gonna,
get
a
together
mode
going
on
here.
Yep.
A
C
C
A
A
C
D
D
If
you
develop
some
custom
lists,
you
can
use
them
there
as
well,
but
basically
these
types
of
components
allow
you
to
render
your
data
in
the
way,
similarly
to
how
sharepoint
renders
their
list
fields
in
out
of
the
box,
ui
and
field
file
type
render,
renders
the
values,
similarly
to
what
you
have
in
a
document
library.
When
you
see
on
the
type
of
your
document
or
folder
and
from
implementation
perspective,
it's
pretty
easy.
D
As
always,
you
should
import
your
control
from
from
the
library
and
then
you
have
only
four
properties
in
this
control
and
only
one
of
them
is
required.
So
this
is
the
path
to
your
file
or
to
your
folder
is
folder
flag
allows
you
to
show
if
you
want
to
display
the
icon
as
a
folder
and
css
props
and
class
name.
Allow
you
to
provide
additional
styling
to
this
column.
D
If
you
want
to
so,
let
me
show
you
the
example
of
what
we
have
so
basically,
this
is
the
document
library
we
have
a
column
here
and
instead
of
modified
date,
I'm
displaying
the
icons
using
field
file
type
renderer.
So,
as
you
can
see,
we
have
a
similar
experience
in
type
column
and
in
modify
column,
and
some
of
the
icons
are
even
better.
So,
for
example,
for
ms
app,
which
is
for
power,
apps
default
ui
is
just
a
blank
page,
but
in
our
field
file
type
renderer.
D
So
now,
let's
go
to
the
and
yeah
by
the
way,
as
you
can
see,
the
folder,
for
example,
here
is
black
and
all
the
file
types
are
kind
of
blue.
So
let
me
go
to
the
code
and
show
you
how
it's
basically
done
so
file
type.
Renderer
6
is
our
field
customizer
component
that
we
use
to
render
our
cells
cells
values
and
in
the
properties
of
this
control.
I
have
two
props
defined
the
path.
D
This
is
basically
the
url
to
the
file
and
flag.
If
this,
if
the
current
list
item
is
a
folder
or
it's
a
file
and
the
rendering
method
is
pretty
simple,
so
we
have
our
field
file
type
render.
We
are
providing
path,
we
are
providing
is
folder
flag
in
css
probes.
We
are
checking
if
we
have
folder
or
file
and
based
on
that
we
are
using
different
colors.
So
that's
how
we
define
if
our
icon
will
be
black
or
blue
and
additional
class
name.
Here
we
are
providing
additional
class
for
folders.
D
You
can
use
fs,
opt
type
field
of
the
list
item
and
you
can
compare
it
to
one.
So,
basically,
if
the
value
is
one,
it
means
it's
folder.
If
it's
zero.
It's
a
file,
so
we
are
getting
these
two
parameters
and
we
are
just
rendering
our
field
type
renderer
as
usual,
as
done
usually
in
react
and
basically,
as
you
can
see,
it's
like
10
lines
of
code
to
use
field
file,
type
renderer
and
basically
I
believe
it's
one
of
the
easiest
components
that
we
have
in
the
in
the
library.
A
F
F
First
thing:
I
want
to
acknowledge
that
I've
been
mvp
for
a
few
years,
and
this
is
my
first
demo
at
pmp
and
something
that's
not
part
of
my
main
job.
So
you
know
it's
something
that
I
want
to
admit
before
anybody
actually
catch
something
in
my
code.
So
I
am
an
office
365
architect.
I
don't
do
development
as
full-time
or
something
like
that.
It's
all
learning
that
I
did
through
a
pnp
stuff
and,
and
some
other
you
know
all
the
training
that's
available
on
the
pnp
github
sites.
F
So
it
will
be
quick.
I
would
not
be
taking
a
lot
of
time,
so
the
behind
the
scenes
for
storage
of
the
the
clocks,
the
we
use
the
sharepoint
list
and
the
sharepoint
list
is
very
basic
list
with
the
title
of
the
location
and
the
gmt
value,
which
is
in
the
positive
or
negative
gmt
or
utc
time.
You
can
enter
that
time.
F
Additionally,
you
can
also
your
your
web
part
or
your
clocks,
usually
setting
the
order
of
the
value
very
traditional,
the
once
you
do
that
you
can
also
set
those
clocks
to
active
or
inactive.
So
when
you
display
those
web
parts
on
the
page,
only
the
active
one
will
appear
on
the
page.
Additionally,
the
the
web
part
is
responsive.
F
So
if
you
put
it
in
a
smaller
zone
or
a
smaller
section,
it
will
automatically
resize
itself
to
the
appropriate
size
for
the
for
the
formula
for
the
date
time,
calculation
is
done
using
a
custom
formula.
We
are
not
using
I'm
not
using
any
of
the
dst
time
zone
calculation
fee
values.
At
this
moment
it
was
my
first
though
there
were
some
examples
that
you
can
use
to
to
check.
If
the
current
time
zone
has
a
dst
and
then
it
will
apply
the
updates
automatically.
F
This
version
does
not
have
that
for
reading
sharepoint
data.
We
are
using
pnps.
It
was
simple
at
that
time.
First
learning,
so
I
thought
that's
a
best
option
to
have
the
the
two
types
of
clocks
that
the
web
part
uses.
Are
the
analog
clock
or
live
clock
both
are
available
on
github?
They
are
free
to
use.
So
I
I
picked
them
instead
of
creating
everything
from
scratch,
and
I
think
I
will
not
be
able
to
create
them
anyway.
F
So,
let's
quickly
jump
into
the
demo
switch
to
my
sharepoint
site,
so
you
can
see
that
I
have
the
web
parts
added
to
the
home
page.
I
was
playing
with
it,
so
let
me
add
it
to
screen,
and
you
can
see
that
I
have
the
web
part
is
right
here
you
can
edit
the
properties
of
the
web
part
you
can
enter
the
title
of
the
web
part.
Then
you
have
to
select
the
list.
So
I'm
using
the
list
selection.
F
You
know
property
pane
from
spfx,
so
to
select
the
list
and
you
can
set
up
three
different
type
of
properties.
You
can
allow
the
web
part
to
have
time
so
right
now
you
can
see
that
the
time
is
set
to
off
and
if
you
turn
on
the
time
it
will
actually
show
you
the
time
in
the
digital
format,
which
is
the
live
clock
time
and
you
can
also
show
active
or
inactive
clocks.
So
if
I
turn
it
off
right
now,
I
have
only
all
of
them
active.
F
Maybe
one
of
them
not
so
show
title
is
also
a
section.
I
can
actually
turn
it
off
if
I
like
to
actually
not
show
any
title.
So
that's
the
simple
web
part
more.
If
you,
if
I
go
and
customize
the
section
you
can
see
that
will
automatically
expand
and
take
the
full
space.
If
I
publish
the
page,
you
can
see
that
the
the
web
part
will
move
on
on
the
full
space.
Additionally,
if
you
see
that
the
web
part
also
has
each
clock
has
a
different,
you
can
say
theme.
F
The
theme
is
predefined
in
the
webpart
code,
so
that,
based
on
the
time
of
the
the
of
the
day,
the
web
part
will
show
a
different
color.
You
can
see
that
the
white
is
new
york,
so
it's
a
morning
time,
so
it
will
show
a
small
tooltip
and
it's
having
a
great
day
if
it's
the
evening
so
you'll
see
that
the
the
gray
or
light
gray
color
will
be
used
and
it's
in
the
night
it
will
use
a
light,
a
dark
black
color.
F
So
this
is
the
the
basic
web
art
theme,
the
web
part
analog
clock
will
automatically
update
the
at
this
moment.
I'm
not
showing
ticks
on
it,
so
that
you
know
it's
basically
very
annoying
when
all
the
ticks
are
moving
at
the
same
time.
So
seconds
is
not
visible
on
the
screen.
That's
why
I've
hidden
it,
but
if
you
want
to
take
a
look
at
the
the
the
list
behind
the
scene,
you
can
see
that
this
is
the
list
you
can
see.
F
So
before
we
move
on
to
the
next
one,
let's
typically
take
a
look
at
the
code,
so
I
must
admit
this
will
be
a
very
basic
code
for
many
of
you
have
been
developing
react
based
applications.
It
was
my
first
so
excuse
me
for
anything
that
you
feel
funny
in
it.
So
the
the
web
part
uses
a
few
properties.
F
The
web
part
is
very
simple:
query.
Using
get
list
items
command,
you
can
also
have
the
show
active,
only
or
show
title
properties
in
to
display
those
properties.
I'm
using
the
property
field
list
picker
a
it's
straightforward,
just
configure
some
of
the
basic
values
or
maybe
in
in
reality.
I
went
to
the
samples
I
looked
at
some
of
the
samples
and
I
was
able
to
understand
how
easily
easy
it
was
to
actually
implement
that
for
the
show
time
I'm
using
the
the
property
pane
toggle
simple
again.
F
F
The
clocks
are
actually
a
clocks
collection,
sorry,
the
so,
when
I
get
all
the
items
from
the
locations
I
loop
on
each
and
every
one
of
them,
and
I
mentioned
that
this
is
using
a
custom
formula
to
calculate
the
date
time.
So
this
is
where
this
happens.
This
is
where
we
are
getting
the
the
time
it's
actually
a
custom
formula
available
on
the
internet.
F
So
you,
based
on
those
values
of
the
gmt,
you
calculate
the
the
date
of
the
time
value
and
I'm
using
moment.js
to
actually
making
sure
that
I
have
the
correct
time
and
once
I
have
the
time
I
calculate
the
the
basic
time
of
the
day
value
and
add
that
string
logic.
This
could
have
been
done
a
little
bit
better,
but
I
I
felt
just
for
fun.
It
will
look
nicer
to
have
this
kind
of
a
message,
so
it
checks.
If
the
time
is
you
know
from
four
to
like
six
p.m.
F
It's
a
day
and
then,
if
it's
a,
you
know
a
little
bit
later
it's
evening
and
then
late
rest
is
night
once
it's
done.
Basically,
I'm
pushing
all
those
the
string
values
that
I'm
still
collecting,
including
the
clock.
So
you
can
see
that
I
have
analog
clock
and
analog.
Log
is
basically
that
the
whole
clock
visible
on
the
screen
and
if
the
user
choose
to
show
time,
then
I'm
using
the
simple
clock
which
is
actually
the
react
live
clock
that
you
can
use
I'll.
F
Show
you
the
demo
of
those
blocks
pretty
pretty
very
quickly.
So
once
you
you,
the
loop
is
finished
in
the
end,
I'm
adding
those
blocks
in
the
clock,
selection
and
you
can
see
I'm
adding
them
to
the
state
and
then
below
in
the
in
the
render
component
run
method,
I'm
actually
just
displaying
them
in
the
container
div.
So
for
me
this
was
the
very
first
web
part,
so
I
used
as
much
as
knowledge
as
I
can
from
the
existing
samples
and
from
my
learning
and
eventually
it
worked,
but
then
more
I
studied.
F
I
found
that
this
may
not
be
the
right
way
of
doing
it,
but
I'll
talk
about
it
in
in
a
second.
But
before
I
move
on
to
the
next
one,
I
want
to
go
back
to
the
browser
and
show
you
the
both
the
clocks
that
I'm
using
so
you
can
see.
This
is
the
analog
clock
and
it's
actually
pretty
cool.
You
can
see
that
the
theme
is
done
using
json,
so
you
can
actually
design
different
themes
and
then
implement
them
in
the
web
part.
Whatever
you
like,
it's
all
customizable.
F
F
Now
before
I
close,
let
me
jump
back
to
the
slides,
so
the
as
I
said
that
the
initial
implementation
of
the
web
part
was
not
that
great,
it's
all,
looping
and
and
defining
the
component,
so
I'm
working
on
the
second
release
of
the
web
part
the
the
first
update
I'm
doing
there
is
that
I'm
not
allowing
the
user
to
enter
the
time
or
gmt
values,
as
is
like,
plus
five
or
minus
five.
Rather,
the
list
will
have
all
the
predefined
globally
identified
time
zones.
So
you
will
be
selecting
a
gmt
plus
five.
F
F
Then
this
will
also
allow
you
to
add
the
same
web
part
as
a
tab
in
microsoft
teams
which
will
make
it
a
lot
more
reusable
than
it
is
right
now.
The
final
is
the.
There
is
one
minor
issue
that
I
you
know
because
I
was
not
showing
the
the
time
on
the
web
part,
but
if,
if
you,
if
you
notice
that
the
time
does
not
tick,
so
I
think
that's
something
that
you
can
consider
as
not
having
enough
skill
set
in
react.
F
So
I
was
trying
to
fix
it
so
that
when,
when
the
time
is
added
on
the
page,
the
the
web
part
moves
or
the
time
moves
to
the
with
the
second.
So
you
can
see
that
right
now
the
show
time
come
back,
but
it
doesn't
move
it
just
sticks
to,
as
is
so
that's
part
of
the
next
release,
I'm
working
on
it
based
on
the
available
time,
but
hopefully
you
know
very
soon.
I
will
be
able
to
push
it
back
to
the
samples
and
last
you
know,
teams
is
everywhere.
F
C
Patrick
and
cherry,
don't
don't
stop
yet
because
we
do
have
some
time.
I
just
wanted
to,
let's
reiterate
some
of
the
things
so,
first
of
all,
cherry
awesome
jobs,
and
this
is
really
really
great
learning
exercise
on
using
individual
packages
here
and
there
and
then
combining
them,
and
and
it's
good
that
you
have
that
kind
of
a
hey,
the
next
steps.
I
will
learn
these
things
and
that's
a
great
way
of
absolutely
learning
things
so
don't
and
don't
feel
too
bad
about
hey.
C
C
These
two
controls
are
both
coming
from
the
react
controls,
so
the
bmp
spfx
react
controls.
So
if
you
go
all
the
way
up,
can
you
show
the
package
just
making
sure
that
everybody
is
aware
of
this,
because
you
don't
have
to
implement
these
things?
These
are
super
widely
used
across
the
world
by
third-party
developers
directly
from
the
bmp
spfx
controls.
So
those
are
really
really
great.
Reusable
controls
for
everybody
and
same
applies
actually
for
the
property.
Pane
controls
right.
C
F
C
Yeah
absolutely
just
sort
of
curiosity:
where
do
you
actually
get
the
list
of
lists
from
the
site?
So
that
means
that
you
have
the
code
piece
for
that
one
in
here
right,
I'm
sorry,
the
list
of
lists
list
of
lists.
You
had
a
list
in
the
drop-down.
Oh
yes,
it's
right
here
and
that's
the
get
locations
yeah
so.
C
C
C
So
it
is
a
pmp
spf,
x
control,
so
again,
open
source
community
contributed
control
for
people
to
take
advantage.
That's
what
I
was
looking
for
so
now,
just
out
of
curiosity,
how
hard
was
it
for
you
to
actually
make
all
of
those
things
happen,
just
if
there's
new
people
in
the
game
in
this
call,
who
are
being
told
that
you
need
to
implement
stuff
in
spfx?
How
hard
was
it
and
and
what
any
any
other
learnings
just
to
recap
your
learnings
on
this
journey.
C
F
Think
the
the
the
the
overall
design
I
have
been,
I
had
developed
applications
for
sharepoint
for
a
long
time,
but
mostly
the
web
parts
old
style
web
parts.
This
was
different
because
I
had
to
make
sure
that
I
learned
the
react
pieces
of
it
nicely.
You
know
it
was
not
simple
as
just
dragging
the
button
and
clicking
on
it
and
getting
it
done.
I
I
think
I
struggled
in
the
mostly
in
the
properties
implementation
first,
but
once
I
get
away
from
that,
I
you
know
I
was
mostly
thinking
the
classic
development.
F
F
If
I
bring
I,
if
I
configure
my
properties
nicely
and
then
I
know
that,
for
me,
the
most
important
method
is
the
selected
list
where
I
have
or
the
selected
list
where
I
know
that
when
the
user
is
selecting
the
properties
from
the
from
the
property
pane
they're
actually
selected
in
the
in
the
in
the
in
the
property.
Now
I
can
play
with
that
property
when
the
property
change,
I
don't
have
to
worry
about
implementing
that
on
property
chain
method.
F
So
when
that
challenge
was
away,
the
next
was,
of
course,
what
is
the
best
way
to
render
the
components
and-
and
it
was
not
about
the
heart-
you
know
if
spfx
part
was
pretty
okay.
You
know
I
was
able
to
understand
how,
to
you
know,
write
in
the
code
nicely
and
make
it
run,
but
once
that
part
was
done
the
pieces
were
you
know
what
is
the
best
way
of
rendering
should
I
render
it
as
component?
Should
I
render
as
a
code?
C
Okay,
and
that's
obviously,
this
that
part
is,
is
always
debatable.
So
of
course,
if
you
are
a
academically,
you
want
to
do
academically
correct
react,
then
you
create
components
and
not
inline
code,
but
again
it's
it's
the
in
the
end,
the
react
components
are
being
rendered
as
an
html
to
the
browser,
as
well
so
they're
being
transformed
to
html.
So
it's
not
a
really
a
I
wouldn't
charge
anybody
for
doing
both
so
but
again
depends
on
the
coding
standards
and
approach
and
and
and
all
of
that
so
but
really
cool.
Thank
you.
Cherry
for
this.
F
One
just
one
comment
I
want
to
have
that
I
didn't
find:
maybe
we
can
work
on
it,
so
you
know
I
should
work
on
it,
but
I
didn't
find
a
place
where
I
can
have
this
like
a
full,
step-by-step
process
to
actually
develop
something.
I
I
know
everything
is
there
lots
of
stuff
is
there,
but
I
I
couldn't
find
one
way
of
implementing.
F
Let's
say
how
to
read
the
the
the
list
collection
and
then
from
the
list
collection.
How
to
make.
You
know,
select
the
list
and
get
the
items
and
then
show
them
in
the
web
part.
There
are
lots
of
samples
out
there,
but
the
problem
is
every
sample
is
using
its
own
technique.
There's
no
one
way
of
doing
it.
C
Yeah
yeah
absolutely
makes
sense
and-
and
I
think
even
on
our
samples
and
tutorials,
I
think
we
should
slightly
more
focused
on
the
react
and
and
really
do
an
end-to-end
story
with
react
and
office
ui
fabric
or
fluent
controls,
because
that
that's
anyway,
the
direction
where
we're
heading
and
and
for
those
who
are
like
wondering
why
react
well.
Microsoft
has
chosen
react
as
the
framework.
Technically
you
can
use
angular,
but
most
of
the
reusable
controls
are
available
in
the
react.
So
that's
what,
if
you
can
choose
react
for
spfx
so
awesome.
C
G
Okay,
so
hello,
everyone,
my
name,
is
akash
bhardwaj.
I
work
as
a
microsoft,
365
developer
with
expertise
in
developing
custom
solutions
using
the
sharepoint
framework
bar
platform
and
microsoft
azure.
So
after
this
session,
if
you
would
like
to
connect
with
me,
you
can
reach
out
to
me
using
any
of
these
channels
and
today
I'll
be
showcasing
the
sample
spfx
webpart,
that
I
contributed
a
while
back
to
the
pnp
repository.
G
So
some
of
the
features
for
this
web
part
is
first
of
all.
I
would
like
to
actually
share
that.
I
actually
got
the
inspiration
to
create
this
from
another
sample
in
the
repository
that
was
submitted
by
marcus
mueller.
I
guess
so
what
that
web
part
used
to
do
so
that
used
to
actually
copy
your
email.
From
from
your,
I
mean
it
used
to
copy
your
email
to
any
teams
or
onedrive
folder,
so
I
just
extended
it
a
bit
to
allow
the
users
to
copy
email
attachments
instead
of
the
emails.
G
So
what
you
can
do
is
so
you
can
select
any
there
that
is
present
in
your
onedrive
and
then
you
can
select
any
attachments
like
either
all
attachments
or
you
can
select
a
few
attachments
that
are
present
in
an
email
and
then
you
can
just
save
your
attachments
right
from
within
the
outlook
web
app.
So
this
has
been
built
using
the
preview
feature
of
spfx.
That
allows
you
to
create
the
outlook
add-ins
and
in
the
hood,
all
the
all
these
operations
to
get
the
onedrive
folders
and
get
the
email
attachment
content
and
then
copy.
G
I
mean
save
that
save
that
attachment
to
the
onedrive
folder.
So
all
these
operations
have
been
done
using
microsoft
graph.
So
if
you
want
to
use
this
sample
in
your
in
your
tenants,
this
would
require
permission
for
the
mail.read
and
the
files.traderight
on
microsoft
graph,
because
the
mail.read
permission
actually
allows
you
to
read
the
read
the
attachment
content
and
then
the
files
dot
read.
Write
permissions.
Allow
you
to
read
to
fetch
all
the
folders
present
in
the
onedrive
and
then
and
then
save
that
email
attachment
to
file
to
that
particular
onedrive
folder.
G
So
this
is
one
of
the
emails
that
I
have
so
this
email
has
a
couple
of
attachments.
So
if
I
just
click
over
here
more
actions,
so
I
see
this
save
attachments.
Option
is
available
to
me,
so
this
is
actually
the
web
part
that
I
have
built
in.
So
when
I
open
this
so
first
of
all,
it
allows
me
to
select
the
folder.
G
So
these
are
all
the
folders
that
are
present
in
my
onedrive,
so
I
can
select
any
of
these
or
I
can
also
move
back
and
forth
between
a
parent,
folder
and
a
child
folder.
So
let's
say
I
select
this
one
for
m365
developer,
boot
camp
and
then
google
and
now
I
can
select
any
of
these
email
attachments
so
either
I
can
see
I
can
select
all
of
them
or
a
couple
of
them
and
then
the
save
button
would
would
get
enabled
for
me.
G
So
once
it
says
uploading
so
and
after
it
has
completed
successfully,
so
you
will
get
this
small
message
that
the
attachments
have
been
saved
so
now,
if
I
move
over
to
my
one
drive,
so
this
was
the
folder
that
I
selected
and
inside
this.
So
here
you
can
see
this
has
modified
a
few
seconds
ago.
So
this
was
one
of
the
images
that
I
had
copied
for
the
pnp
parker.
G
So
that's
how
the
web
part
works.
So
that's
about
it
for
most
of
the
web
part
functionality.
It's
it's
a
simple
web
part
that
just
allows
you
to
select
a
folder
and
save
your
attachments
to
that
folder.
Now
let
me
jump
over
to
the
code,
so
this
is
my
web
part
file,
so
in
the
render
method.
First
of
all,
I
am
checking
whether
this
web
part
is
getting
executed
in
the
outlook
web
app.
G
So
I
do
that
using
this.context.sdks.office,
so
if
it
is,
if
it
is
being
executed
within
the
context
of
outlook,
so
then
I
get
the
item.
So
that's.
That
is
the
email
that
I
have
selected
and
then
I
get
that
item
id
in
the
rest
rest,
api
format,
and
after
that
I
just
create
this
object
off
that
I
created
it
so,
like
I
said
so,
this
was
actually
inspired
by
that
other
sample,
so
most
of
the
typings
or
these
service
methods
that
you
find
in
this
webpack.
G
So
those
would
be
actually
quite
similar
to
the
one
that
we
already
have
so
here
I
just
construct
this
object
that
this
contains
the
item
id.
That's
the
unique
id
of
the
email,
as
well
as
a
list
of
all
the
attachments
that
we
have
selected
and
if
not
if
it
is
not
being
executed
within
the
office
context.
So
then
I'm
just
populating
this
with
some
sample
data,
because
while
I
was
developing,
I
I
needed
to
actually
check
the
ui.
G
So
once
I
have
constructed
this
object
so
then
I
have
this
save
attachments
react
component
and
I
am
just
passing
the
this
mail
object,
along
with
the
description
and
the
graph
helper
object,
so
this
graph
helper
object
that
you
see.
So
I
am
initiating
this
initializing
this
within
the
on
init
method.
So
I
have
a
separate
class
called
the
graph
helper.
So
I'll
also
go
over
to
this
in
a
couple
of
seconds.
G
G
So
if
I
go
to
my
react
component,
so
here
I
have
used
react
hooks,
so
I
have
created
a
couple
of
these
variables
that
I
am
using
to
store
and
update
these
state
values
so
inside
the
render
method.
So
this
is
pretty
much
it
about
the
ui,
so
nothing
special
here,
I'm
just
using
a
couple
of
fluent
ui
controls
and
the
most
important
methods
I
would
say
in
this
component-
are
these
two.
So
first
one
is
the
update
attachments.
G
G
Those
have
been
selected
or
just
deleting
them
once
that,
once
any
checkbox
is
unchecked,
so
this
method
would
be
called
whenever
that
checkbox
is
updated
and
then,
when
the
save
button
is
clicked,
so
at
that
time
this
copy
to
onedrive
method
would
be
called,
so
this
would
first
of
all
update
this
loading
state
so
that
we
see
that
messages.
We
see
that
message
that
says
uploading
right
now
and
after
that
here
we
are
actually
calling
this
get
attachment
content
method,
so
this
belongs
to
this
graph
helper.
G
So
I'll
go
over
to
this
in
a
moment,
so
this
actually
gets
the
content
of
that
email
attachment.
I
mean
the
content
of
each
of
the
email
attachments
that
we
have
selected
and
once
it
has
that
content,
it
then
checks
whether
it's
a
large
file
or
it's
a
normal
file.
So
this
I'm
doing
because
for
saving
large
attachments
there
is
a
separate
process
in
the
graph
api.
G
If
you,
if
you
are
actually
saving
a
file,
that's
greater
than
4mb,
so
I
have
a
separate
method
for
that
called,
save
large
attachment,
and
if
it's
a
small
file,
then
we
just
call
this
save
attachment
and
then
lastly,
we
just
update
this
status,
whether
if
it
has
completed
successfully
so
then
we
just
give
this
success
message.
Otherwise
we
just
show
this
that
some
error
has
occurred.
G
So
that's
it
for
this
method.
So
so
now
let
me
go
over
to
the
graph
helper
plus.
This
is
the
class
that
contains
all
these
methods,
like
you
can
see
for
getting
the
onedrive
folders.
So
this
would
give
you
all
the
root
folders
that
are
present
in
your
onedrive,
and
then
we
have
the
sub
folder
as
well.
G
So
if
you
have
selected
any
folder
and
it
has,
it
contains
multiple
sub
folders,
so
it
allows
you
to
get
a
list
of
all
the
subfolder
that
the
current
folder
has
as
childs,
and
apart
from
this,
this
was
the
method
for
get
attachment
contents.
So
here
we
just
specify
the
message
id
as
well
as
the
attachment
id.
So
all
these
are
graph
api
methods,
and
so
this
was
the
save
attachment
so,
like
I
said
so,
if
the
file
size
is
smaller
than
4mb.
So
so
then
this
operation
is
pretty
much
straightforward.
G
We
just
call
this
method
and
it
executes
this
rest
api
call
to
save
that
attachment
content
into
your
selected
folder,
it's
a
large
file.
So
then
we
have
to
do
some
extra
effort
in
this
case.
So
what
we
do
for
this
is
first
of
all,
we
need
to
create
an
upload
session,
because
if
the
file
size
is
large,
then
it
if
you
don't
create
this
upload
session,
then
it
might
show
you
a
timeout
error
that
the
file
size
is
large.
G
So
for
that
I
first
call
this
create
upload
session
method
here
and
then
I
actually
break
break
down
the
content
into
smaller
chunks
and
then
upload
those
as
individual
slices.
So
you
can
see
I
mean
I'm
not.
I
won't
go
into
the
details
of
all
this,
but
this
is
how
actually
we
enable
saving
the
large
files
into
this
into
any
onedrive
folder.
G
C
You
lisa
excellent
stuff:
oh
gosh,
really
really
cool
one
thing,
just
a
really
really
clean
implementation
and
a
nice
craft
helper
for
sure
for
people
to
use
as
a
reference,
so
really
really
cool
stuff,
like
your
arca
shed
just
to
re-reiterate
on
that
one.
The
office
add-in
option
for
spfx
is
unfortunately,
still
in
preview,
and
this
is
not
because
we
wouldn't
want
to
provide
this
nga.
C
C
If
you
would
like
to
have
this
kind
of
a
support
for
spfx
as
well,
because
our
idea
from
a
day,
one
has
been
that
the
same
piece
of
code
can
actually
work
in
a
microsoft
teams,
tab
or
as
a
spfx
web
part
or
as
a
single
base
application
or
as
a
author
setting
as
well.
But
it
is
what
it
is
for
now.
Well,
we
are
still
waiting
for
the
final
decisions
on
the
office
and
outlook
site
on
this
one,
but
I
think
that's
it.
Thank
you.
A
Thank
you
alex.
Thank
you
jerry.
Thank
you,
akash,
three
great
demos,
again,
just
a
reminder,
if
you
would
like
to
demo
on
this
call
whoever
you
are
wherever
you
are,
please
reach
out
to
myself
or
vasa
and
we'll
get
you
scheduled.
It
might
not
be
on
like
the
immediately
next
call,
sometimes
we're
booked
out
a
little
bit,
but
we
will
get
you
scheduled,
we'll
get
you
a
slot.
Would
love
love,
love
to
host
your
demos
and
see
all
your
great
work?
A
So
please
just
reach
out
to
us
and
again
thank
you
alex
thank
you
jerry
and
thank
you
akash
for
your
great
demos.
This
week
our
recording
will
be
available
in
about
24
hours
on
our
youtube
channel.
M365
pnp
dash
videos
there
on
the
link.
You
can
always
follow
us
on
twitter
for
the
latest
updates.
Our
next
spfx
focus
special
interest
group
call
will
be
november
19th.
That's
two
thursdays
from
now
same
time:
7
a.m,
pacific.
Our
next
general
development
special
interest
group
call
will
be
next
thursday
november
12th
at
same
time.
A
7
a.m,
pacific
and
our
monthly
community
call
for
november
is
going
to
be
on
november
10th.
So
I
look
forward
to
seeing
everybody
at
any
and
all
of
those
if
you
can't
get
enough
developer
community
calls.
There
are
tons
of
great
calls
with
great
content
going
on
about
adaptive
cards.
The
microsoft
graph
calls
identity
platform
office,
add-ins
power
apps,
the
sharepoint
calls
general
development
calls
sharepoint
framework,
all
sorts
of
stuff
great
topics.
A
Great
calls
check
out
as
many
of
these
as
you
like
tons
of
great
content
out
there
tons
of
great
stuff
from
all
these
communities
so
really
excited
to
promote
them
and
encourage
you
to
be
a
part
of
as
much
as
you
can,
of
course.
So
thank
you.
Everybody
for
attending
this
week
hope
you
have
a
great
rest
of
your
week
and
weekend
and
we
will
talk
soon.