►
Description
SharePoint PnP Community - SPFx & JS SIG call on October 22. Demos delivered: 1) NodeJs File Handler for integrating with SharePoint and OneDrive UI to handle custom file types, 2) How to synchronize photos from Azure AD to SharePoint using Microsoft Graph and Azure Function, and 3) Dynamically use correct field customizer type for SharePoint lists using FieldRendererHelper class. Released PnPjs - v2.1.0-beta, CLI for Microsoft 365 - v3.2 beta, and Reusable SPFx Controls - v2.1.0. Finally, 10 new/updated SPFx web part samples released. The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.
Demos:
• NodeJs File Handler for integrating with SharePoint and OneDrive UI to handle custom file types – Patrick Rodgers (Microsoft) | @mediocrebowler
• How to synchronize photos from Azure AD to SharePoint using Microsoft Graph and Azure Function – Sudharsan Kesavanarayanan (NTT Ltd) | @sudharsank
• Dynamically use correct field customizer type for SharePoint lists using FieldRendererHelper class – Alex Terentiev (Sharepointalist) | @alexterentiev
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
in
javascript
special
interest
group
bi-weekly:
sync,
it
is
october
22nd
2020.
the
year
is
just
flying
away.
I'm
your
host
patrick
rogers,
and
we
are
going
to
get
started
here
with
your
agenda
for
the
call
latest
updates
on
sharepoint
framework
updates
across
the
patterns
and
practices
program.
New
community
samples,
we'll
do
our
picture
time
that
we've
been
doing
for
the
last
few
weeks
and
we
got
demos
one
from
me
hope,
that's
ready
and
sudarsen
and
alex
will
have
those
demos
great
coming
later
in
the
call.
A
So
as
we
get
going,
we
always
like
to
talk
about
opportunities
to
participate
and
join
in
spf,
x
and
pnp
community.
So
you
can
always
join
in
the
demo.
You've
got
web
parts,
application
customizers
provisioning,
anything
else.
You
might
create
around
client-side
development,
we'd
love
to
have
that
demoed
on
the
call
and,
of
course
anything
from
any
of
the
at
and
p
parts
of
parts
of
the
program
offerings
from
the
program
there.
So
pmp.js
cli,
reusable
controls,
yeoman
generator
or
anything
else.
A
You
can
of
course,
contribute
on
github
those
contributions
could
take
the
form
of
reporting
issues,
submitting
pull
requests
or
helping
us
out
with
issues
and
questions
as
well.
So
if
you
see
folks
have
a
question
you
might
happen
to
know
the
answer,
it
might
be
something
you've
run
into
before.
It's
always
great,
if
you
could
jump
in
and
help
them
out
all
of
our
repositories
or
pretty
much
all
of
our
repositories.
A
Invite
you
as
well
to
submit
pull
requests,
and
you
know,
help
contribute
to
fixing
issues
or
adding
new
functionality
to
any
of
our
projects,
certainly
encourage
that
and
then
finally
provide
feedback.
So
how
are
the
calls?
How
is
our
documentation?
Where
else
can
we
help
and
positive
feedback?
Is
okay,
too?
That
will
allow
us
to
perhaps
focus
a
little
more
energy
on
areas
that
you
enjoy
so
do.
Let
us
know
where
we're
doing
well
and
we'll
do
our
best
to
do
maybe
a
little
bit
more
of
that.
A
So
with
that
we
move
into
the
page
links.
So
we've
got
lots
and
lots
of
links
here
so
developer.
Videos,
community
videos
which
include
all
of
our
community
calls.
So
this
one,
the
general
dev
special
interest
group,
called
the
monthly
community
calls.
All
of
our
calls
will
be
hosted
there
as
well.
You've
got
a
bunch
of
open
source
repositories,
all
of
which
are
open
to
contributions
and
feedback
and
reporting
issues,
so
sharepoint
pnp
office,
dev
and
microsoft
graph
and
then
sample
galleries.
We've
got
bunches
of
different
samples
around
web
parts.
A
Extensions
list,
formatting
and
samples
for
teams
always
welcome
new
samples.
So
if
I,
if
you
have
ideas
for
samples
that
perhaps
we
don't
have-
or
perhaps
you
want
to
approach
a
different
way,
would
love
to
have
you
submit
those
samples
to
the
gallery,
get
them
listed
and
help
everybody
learn
together
to
see
the
great
work
you're
doing
and
then
open
source
initiatives
and
samples?
That's
the
real
link
to
remember
there
aka.msm365
pnp,
that
will
take
you
to
the
patterns
and
practices
landing
page
all
up
and
give
you
links
to
all
these
other
resources.
A
We've
talked
about
as
well
as
descriptions
about
the
various
pieces
of
the
patterns
and
practices
program
as
well.
The
sharepoint
framework
documentation
aka.msspfx,
and
you
can
follow
at
microsoft,
365
dev
and
m365
pnp
on
twitter
for
more
and
now
we'll
go
to
david
for
updates
on
sharing
his
caring.
B
Thank
you,
patrick,
so
the
patterns
practice
community,
as
we
all
know,
is
completely
open
source,
which
is
fantastic
because
that
means
you
all
can
contribute
and
consume
all
areas
of
the
pnp
resources
and
tools.
But
we
understand
that
contributing
and
even
at
times
consuming
can
be
intimidating
and
a
little
confusing
and
provide
barriers
around
how
to
use
github
how
to
consume
and
change
between
versions
of
spfx
and
node.
The
sharing
is
caring.
Initiative
is
here
to
help
you
it's
going
to
provide
hands-on,
step-by-step
guidance
in
live
small
group
session
settings,
we'll
walk
you
through
together.
B
These
are
not
recorded
safe
space,
perfect
opportunity
to
come,
learn
together,
ask
questions.
We've
got
multiple
sessions
and
topics
covering
multiple
days,
as
you
can
see
here
in
november
october,
a
few
more
left.
It's
also
worth
noting
that
these
are
not
just
for
developer.
Only
these
are
sessions
that
cover
how
to
contribute
to
the
docs,
as
well
as
the
community
docs,
and
we've
got
a
lot
more
coming
soon,
so
they
build
upon
one
another.
So,
even
if
you
are
a
developer,
it's
great
to
start
out
with
that.
B
First
time,
contributor
will
provide
a
lot
of
the
patterns
and
practices
guidance
around
the
templating
and
pull
requests
and
contributing
the
using
p
and
p
spfx
samples
within
vm.
That
is
there
to
help
you
start
consuming
and
then
from
there
you
can
learn
how
to
use
the
cli
to
actually
upgrade
your
samples
and
submit
back.
B
A
Great
job
there,
thank
you
david
for
that
and
thank
you
for
introducing
that
program.
It
really
is
a
great
resource
if
you
are
looking
to
learn
and
get
involved,
encourage
you
check
that
out
really
great
initiative.
We
heard
some
great
feedback
from
folks
on
that.
So
hacktoberfest
is
going
on.
We
have
tagged,
not
sure
100,
but
pretty
much
all
of
the
pnp
repositories
we
are
participating
in
that.
So
welcome
you
to
be
part
of
that.
A
This
is
put
on
by
digitalocean,
but
four
poll
requests
in
october
to
repositories
that
are
signed
up
or
or
participating
in
hacktoberfest,
and
you
get
a
free
t-shirt
or
plant
a
tree
so
perfect
time
to
start
contributing.
This
great
follow-on
to
the
sharing
is
caring
sessions.
David
was
mentioning
so
if
you
do
those
sessions
and
you're
looking
for
what
to
do
great
time
to
get
started
in
october,
because
you
can
get
a
free
t-shirt
and
now
we'll
go
to
sharepoint
framework
updates
from
visa.
C
Yay
massive
amount
of
new
things
since
our
previous
update
again,
but
I
wanted
to
actually
this
one
has
been
updated.
Then,
as
you
can
see
in
the
top
right
corner
in
the
top
right
corner,
you
can
see
actually
two
days
which
are
skyrocketing
so
on
monday
and
tuesday
this
this
week
we
are
once
again
doing
the
highest
possible
or
new
records
on
the
spfx
usage
worldwide,
which
is
really
really
cool,
so
third-party
extensibility
built
using
spfx,
either
in
sharepoint
or
in
microsoft.
Teams.
C
What's
really
cool
is
that
the
microsoft
teams
extensibility
built
with
spfx
month-over-month
growth,
is
right
now
at
49,
which
is
insane
so
people
are
really
adapting
and
building
microsoft
teams
extensibility
using
spfx
as
well,
which
is
a
great
option,
the
following
slide,
which
I
have
not
significantly
updated,
but
basically
what
we're
still
looking
into
doing
by
end
of
this
year.
This
is
the
the
basic
setup
of
the
the
objectives
for
us,
as
we
talked
about
in
the
monthly
community
call
as
well.
We
had
luca
and
pat
talking
about
those
things.
C
Is
the
performance
improvement,
so
this
optimizations
related
on
bundling
and
minimizing
the
base
loading
and
making
everything
working
properly
we're
moving
the
msao
on
the
authentication
side.
The
transition
should
be
completely
seamless
for
you,
so
you
wouldn't
have
any
any
impact
on
your
side
and
then
the
teams
is
being
absolutely
the
the
big
focus
for
us
as
well.
So
we're
improving
the
store
acquisition,
we're
adding
a
support
for
complex
solutions,
so
it's
not
just
about
auto
generating
the
team's
manifest.
C
Also,
actually,
embedding
teams
modified
inside
of
the
spkj
for
making
it
possible
and
they're
more
efficient
to
mobile
support,
so
really
really
focusing
on
the
team
side
and
then
making
sure
that
we
are
updating
the
tooling
as
well
on
the
on
the
latest
possible
level,
but
no
updates
from
past
two
weeks,
but
a
lot
of
focus
internally,
and
I
will
definitely
update
you
when
there's
anything
I
can
share
more.
But
let's
jump
back
on
you
patrick.
D
D
A
Awesome,
thank
you
very
much
for
that
update
and
our
next
update
is
cli
for
microsoft,
365
and
I
believe
I'm
going
to
talk
about
this
so
released
a
new
3.2
beta
with
support
for
retrieving
teams,
tabs
retrieving
knowledge
hub
site,
urls,
deleting
modern
sharepoint
sites,
simplified
updating
to
to-do
lists
and
updated
the
cli
architecture
without
deprecated
packages,
so
just
sort
of
some
housekeeping
there.
So
if
you
haven't
tried
out
the
cli,
give
that
a
try,
v3
has
a
lot
of
great
updates
fixes
and
improvements
in
it
over
v2,
so
encourage
you
to
try
that
out.
E
Yeah,
thank
you
patrick.
So
we
did
release
both
libraries
react,
controls
and
react
property
controls
for
react
controls.
The
greatest
features
that
were
added
is
a
sticky
header
and
drag
and
drop
in
list
view.
We
also
updated
carousel
to
be
able
to
display
slide
indicators
underneath
the
image
not
like
overlapping
the
image.
There
were.
Some
bug
fixes
some
small
updates
there
for
react:
property
controls.
E
We
have
new
control
property
field
guide
and
for,
for
example,
for
file
picker.
We
have
support
for
stock
images.
It
was
part
of
react
controls,
but
was
not
presented
in
react,
property
controls
and
thanks
to
all
our
contributors
this
month
and
don't
forget
to
follow
us
at
m365bnp
controls.
Thank
you
back
to
you,
patrick.
A
F
Thank
you,
patrick.
So,
on
the
spfx
samples,
we
have
a
few
repositories
that
we
have
available
for
you.
If
you
want
to
get
started
on
a
project
and
you
need
help
with
finding
code,
it's
all
built
by
an
inclusive
community,
and
we
welcome
everyone
and
we
encourage
a
positive
attitude
and
helping
each
other.
F
So
these
repositories
again
should
be
absolutely
the
first
step
that
you
take
when
you
have
to
start
a
new
solution.
These
are
the
updates
for
the
last
two
weeks
on
the
spfx
extension
side.
We
don't
have
any
updates
so
insert
sad,
trumpet
music
here
on
the
spfx
webparts
side.
We
have
quite
a
few
updates.
The
first
one
is
a
new
tailwind
css
sample
by
fabio
fanzini,
who
shows
how
to
add
tailwind
css
to
your
spfx
web
part
and
then
on
the
update
side.
F
F
F
A
C
Hello
here
we
go
now:
everybody
is
in
here.
Why
am
I
the
only
one
who's
not
properly
rendered?
Let's
wait,
few
more
minutes
a
few
more
seconds
getting
more
and
more
people
joining
and
the
monkey
is
in
a
room
again
chef.
When
is
in
a
room.
Where
is
my
sharepoint
monkey?
I
have
a
sharepoint
monkey
somewhere
in
here.
I
have
a
time
to
get
it.
C
A
Right
so
we
should
be
seeing
my
screen
again.
I
really
really
hope
so
over
here
to
demo
section,
and
this
first
demo
is
actually
to
be
by
me.
So
luckily
I
have
a
demo
right,
so
this
demo
is
all
about
something
called
file
handlers
and
this
isn't
strictly
a
sharepoint
framework
or
a
client-side
development
thing,
but
I
think
it's
an
interesting
example
of
how
you
could
take
your
client
side
development
skills
and
extend
them
into
solving
other
problems.
A
So
what
we
have
is
a
project
that
is
a
file
handler
and
you
might
say
to
yourself
patrick
what
is
a
file
handler.
That
is
a
great
question.
A
file
handler
is
a
piece
of
functionality
that
allows
you
to
integrate
tightly
into
the
sharepoint
or
onedrive
ui
and
handle
custom
file
types.
So
I'll
just
show
you
this
real
quick.
So
I've
got
a
neat
document
library
here
with
a
bunch
of
markdown
files,
and
I
can
actually
go
in
here
and
open
and
I've
got
these
custom
file
handlers
here.
A
We're
going
to
click
this
one
and
there's
two
of
them
there,
because
I
have
a
poor,
dev
environment
hygiene,
but
you
can
see.
We've
now
ended
up
on
localhost
and
we're
editing
my
file.
So
this
is
file
has
content
and
I
can
do
markdown,
and
here
is
some
stuff
and
my
preview
updates
and
with
this
file
handle
lets
us.
A
Do
we've
got
our
our
our
mark
down
here
and
you
might
say:
well,
I've
seen
a
markdown
editor
before,
but
if
we
hit
save
we're
actually
going
to
save
and
close
just
to
get
that
cleaned
up,
we
get
little
ui
updates
and
that's
going
to
end
up
going
in
a
big
circle
and
closing
our
window.
But
we
get
our
file
updated
back
here
in
the
website
and
you
say
well,
markdown
is
not
perhaps
the
most
exciting
example,
but
it
is
a
great
example
to
show
that
this
could
be
any
proprietary
file
type.
A
So
you
might
have
a
custom
image
format.
A
custom
mapping
format,
some
type
of
you
know
I
don't
know
autocad
rendering
format-
something
like
that
that
we
natively
don't
support
in
the
service,
but
you
would
like
to
provide
some
functionality
so
file
handlers.
Give
you
an
excellent
hook
to
do
that,
and
they
give
you
a
hook
in
three
main
ways.
You
can
actually
create
a
new
file.
It's
going
to
show
up
here
integrated
right
into
the
new
menu.
A
It's
going
to
show
up
here
under
open
and,
as
you
can
see,
you
could
actually
register
multiple
file
handlers
for
a
given
extension
and
it's
also
going
to
be
built
into
the
preview
functionality.
So
if
I
hit
preview
you're
going
to
get
the
office
365,
microsoft
rendered
bar
at
the
top
here
and
then
below
that
an
iframe
which
again
is
pointing
to
our
local
host-
and
here
is
just
the
the
preview
of
the
content
with
no
editor
supplied
and
you
can
actually
scroll
through
all
the
files.
A
In
your
thing
and
it'll
invoke
correctly
our
custom
file
handler
and
our
preview,
you
can
see
my
test
content
is
all
very,
very
interesting,
says
things
like
my
heading
and
so
forth.
But
how
does
this
all
work?
And
where
is
this?
Where
can
I
see
this
so
we've
created
a
new
repository
just
made
public
this
morning
called
contoso,
and
so
that
repository
under
pnp
is
somewhere.
A
We
are
looking
to
put
isv
or
partner,
focused
samples
that
we
write
so
this
right
now
we
aren't
looking
for
contributions
here,
but
we're
working
on
figuring
out
how
that
might
work,
because
these
are
meant
to
be
reference
samples,
not
really
ones.
So
if
you
have
ideas
for
samples,
please
do
keep
putting
them
in
the
same
spot,
the
sample
galleries,
that
is
the
appropriate
place
for
all
the
community
samples,
but
these
are
going
to
be
things
we
use
in
our
discussions
with
partners
that
point
out
certain
specific
bits
of
technology.
A
So
what
is
a
file
handler
well
under
the
hood?
A
file
handler
really
is
an
azure
active
directory
application,
and
so
here's
our
file
handler
registration
and
you
can
see
all
the
settings
but
in
your
azure
active
directory
application
you
insert
into
the
add-ins
property
a
manifest
here,
and
this
manifest
describes
your
file
handler
and
really
what
it
does
is
give
you
some.
A
You
know
some
names
and
version
numbers
and
things
and
you
make
up
an
id,
that's
whatever
you
want,
but
the
important
bit
here
is
you
give
it
icons
and
you
give
it
urls
to
different
actions.
So
there's
a
new
file
action
and
we
have
a
url
here,
that's
just
one.
We
gave
it
so
that's
to
create
and
then
so
forth.
A
We
put
together
with
a
couple
interesting
things
I
think
folks
could
find
fascinating
is
that
this
is
built
with
next
js,
which
is
something
I
personally
hadn't
used
prior
to
this,
but
found
to
be
very
helpful
for
developing
an
application
like
this,
and
it's
got
a
bunch
of
great
capabilities,
one
of
which
is.
It
does
a
lot
of
the
react
and
pack
stuff
behind
the
scenes
for
you.
So,
for
example,
it
does
great
routing.
A
That
actually
is
the
path
which
comes
in
as
as
in
next
as
query,
and
we
get
our
action
and
we
can
do
some
other
things,
and
so
I've
added
in
a
bunch
of
code
tours
I'm
not
going
to
go
through
each
code
tour
here
in
the
interest
of
time,
but
we
do
things
on
the
server
side.
So
next
has
a
great
capability
of
splitting
server
and
client-side
functionality
and
there's
a
lot
of
additional
documentation
on
that
you
can
check
out,
but
so
on
our
get
server
side
props.
A
This
is
obviously
running
on
the
server
side,
but
we
get
a
post
request
from
sharepoint
when
we
launch
the
file
handler
and
then
we
have
a
helper
method
here
called
a
knit
handler
and
that
init
handler
method
take
a
quick
look
at
that
it
does
some
stuff
for
us.
So
what
it
does,
is
it
either
handles?
A
Knowing
that
we
have
a
token
meaning
we've
gone
through
the
off
flow
or
recognizes
that
we
don't
have
a
token
and
launches
the
authentication
flow
in
this
case
we're
using
the
new
msal
for
node
library,
which
is
out
in
I
think,
they're,
calling
it
an
alpha
still,
but
it's
I
found
it
quite
stable
for
what
I
was
doing
in
this
testing.
So
you
could
definitely
check
that
out,
but
we're
using
the
auth
code
flow.
So
we
get
our
auth
code.
A
A
file
handler
needs
open
id
to
sign
people
in
and
then
files
read,
write
all
gives
you
access
to
all
of
the
files
that
the
given
user
has
access
to
and
then
we're
giving
it
a
redirect
uri
back
to
our
api
login,
but
all
of
this
is
more
or
less
just
typescript
code
and
react
code
that
you're
already
familiar
with.
So
it's
a
great
way
to
take
those
skills
and
extend
them
to
solving
another
problem
in
the
sharepoint
onedrive
space.
A
So
once
we
get
through
our
off
flow,
we
get
a
token.
We
actually
make
a
request
to
graph
this
url
comes
in
activation.
Params
items
is
going
to
be
a
graph
url
to
the
microsoft
graph.
We
grab
the
content
of
that
file.
We
actually
pass
it
then
into
our
page
as
properties.
So
it's
going
to
come
in
as
part
of
the
properties.
This
handler
is
our
actual
page
component
function,
our
functional
component
for
the
page.
A
We
do
some
validation
of
the
stuff.
We
think
we're
getting.
We
set
up
our
state
using
hooks.
We
do
some
functions
here,
so
we
have
a
function
for
handling
content
change
for
save
again.
This
is
more
or
less
just
react,
programming
and
setting
states
and
things,
and
so
we
come
down
and
we
have
two
different
views,
so
we're
handling
in
the
same
control,
we're
handling
our
preview
action
and
we're
handling
the
other
two
actions
which
are
edit
or
create,
and
so
we
provide
our
ui
here.
A
Some
message
bars
we're
using
the
office
ui
fabric
and
monaco
editor
in
next
was
a
fun
piece
of
stuff
to
set
up.
So
we
actually
have
one
of
our
code
tours
outlines
how
to
set
the
monaco
editor
up
in
next
js.
So
we've
got
a
control
there
and
then
we
also
have
a
preview
control.
That
is
just
an
iframe
that
takes
the
content
and
inserts
it
into
an
iframe
to
isolate
it
a
bit
from
what
we're
doing
so.
A
We
come
back
to
our
code.
We
have
two
types
of
save,
so
these
are
just
functionally
binding,
this
flag
for
true
or
false,
we'll
come
up
to
save,
and
that
means,
if
it's
true
we're,
also
gonna
close
the
window
once
we're
done,
and
then
we
just
run
some
typescript
logic
here
we
actually
post
to
our
api
locally.
So
our
api
is
part
of
our
application.
That's
then
going
to
run
and
persist
the
content
back
to
sharepoint.
A
We
pass
it
the
things
it
needs
to
do,
no,
the
app
id
the
updated
content
and
then
as
well
the
url
to
our
item
in
graph.
We
send
that
back
and
then
this
is
all
just
normal.
The
response
worked,
we
could
clear
our
dirty
flag
and
we
could
close
the
window
or
set
the
message
bar
take
our
other
appropriate
actions.
The
last
piece
here
I'll
show
you
real
quick,
is
file
handler.
A
We
did
the
same
thing
with
the
bracket
action
using
that
next
js
capability
to
put
multiple
routes
into
a
single
page
into
a
single
module.
So
we've
got
some
configuration
our
size
limit.
We're
saying
this
sample
is
only
going
to
handle
files
up
to
10
megabytes,
because
that's
it's
just
a
sample,
so
we've
got
our
handler.
We
could
do
save
we're.
Gonna
handle
a
save.
We
come
in
here
we
again
process
some
of
our
inputs
make
sure
we're
good
to
go.
A
A
So
we
have
a
lot
of
partners
we're
looking
at
working
with
that
have
done
various
we'll
call
them
clever
workarounds
to
create
similar
functionality
to
this
file
handler
kind
of
capability
and
would
encourage
folks
to
re-look
at
file
handlers
as
a
great
option
on
that
stuff.
You
can
always
read
more
about
file
handlers,
so
that's
the
overview
of
file
handlers
all
up.
We
have
some
updates
to
that
as
well.
G
Thanks,
patrick,
let
me
share
my
screen:
hi
hello,
everyone.
I
am
sudasan
k7rinnam
and
I
am
a
microsoft
mvp.
This
is
my
first
year
getting
an
mvp,
and
these
are
all
my
blog
site,
spin,
knowledge.com
and
couple
of
social
links.
You
can
connect
me
in
so
today
we
are
going
to
see
how
we
can
synchronize
photos
from
azure
id
or
file
shares
into
sharepoint
user
profile
service.
G
As
you
all
know,
there
are
many
ways:
users
or
administrators
can
upload
photos
to
office,
365
like
via
m365
admin
center
via
judy
and
also
via
dell,
but
none
of
it
will
synchronize
with
sharepoint
ups.
Even
if
the
azure
active
directory
is
connected
to
on-premise,
most
of
the
properties
are
synced
but
photo
is
not
synced
and
there
are
a
couple
of
solutions
which
are
already
available
like
like.
G
There
are
a
couple
of
configurations
and
settings
which
you
have
to
do
to
synchronize
using
this
tool,
and
mostly
there
is
an
article
where
which
explains
how
the
photos
are
displayed
in
office
365.,
particularly
if
the
clients
are
using
having
an
exchange
online,
then,
obviously
the
photos
will
be
synced.
Whenever
the
user
access
the
sharepoint
site,
it
will
automatically
display
from
the
exchange
online
and
if
they
are
not
using
exchange
online,
then
it
is
pulled
from
the
dell
and
others
resources,
so
the
features
the
user
selection.
G
So
I
have
provided
two
tabs
like
a
first
one,
which
will
allow
the
users
to
select
a
couple
of
users
so
that
they
can
upload
they
can
synchronize
only
the
particular
user's
photo,
and
there
is
also
a
bulk
sync
where
you
can
drag
and
drop
a
bulk
of
images,
and
then
you
can
update
it.
The
only
thing
is,
the
images
should
have
the
file
name
as
user
login
name,
which
is
the
user
principle
name
which
looks
like
an
email
id
and
the
other
feature
is
access
control.
G
This
solution
can
be
accessed
only
by
a
specific
set
of
people
which
can
be
configured
in
the
web
properties,
a
sharepoint
group.
It
can
be
configured
not
all
the
end.
Users
can
access
the
solution
and
there
is
also
a
feature
where
you
can
view.
Whoever
has
uploaded
the
photos.
There
is
a
status
synchronization
job
status.
You
can
verify
whether
the
job
is
running
or
it
is
already
completed.
Or
is
there
any
error,
and
the
last
is
I
have
been.
G
I
have
used
azure
function
as
your
pnp
powershell
to
handle
the
photo
update
and
a
couple
of
packages
have
used
this.
Mostly
the
pnp
packages-
and
I
am
a
great
fan
of
pnp
package-
and
it
is
a
very
helpful
library-
and
mostly
it
is
very
easy
to
maintain
the
code
using
that
library
and
a
couple
of
property
controls
and
spfx
controls
and
image.
Resize,
where
I
have
used
to
generate
different
thumbnails
and
react
drop
zone
is
nothing
but
for
drag
and
drop
functionality.
G
G
G
Whoever
can
access
this
webpart,
and
this
is
to
enable
whether
you
need
to
enable
the
bulk,
sync
or
not
and
use
page.
Full
width
is
nothing,
but
here
I
have
created
as
a
spa,
and
you
can
also
add
this
as
a
web
part
where,
if
you
want
to
use
the
full
page,
you
can
just
select
this
option
so
the
first
one
is
alex
and
diago.
G
G
So
if
you
see
for
alex,
you
can
see
the
photo
here
and
for
diago
there
is
a
photo
and
you
can
see
the
photos
will
be
displayed
here
and
if
there
is
no
photo,
then
only
the
profiles
which
has
the
photo
will
be
taken
into
consideration
for
by
the
azure
function.
To
update
and
the
last
is
you
can
click
the
update
for
users
photos
so
once
you
click
on
this
button,
it
will
trigger
the
azure
functions
on
the
back
end
and
then
it
will.
G
G
G
So
once
you've
selected
this
then
based
on
the
file
name
I'll,
be
getting
their
user
id
and
then
the
title
and
then
I'll
be
displaying
the
current
image,
whichever
from
sharepoint
so
I'll,
be
showing
the
status,
whether
it
is
valid
or
not.
If
the
name
doesn't
match
from
the
site
users
column,
then
it
will
shows
invalid,
so
just
trigger
the
button,
that's
it
so
this
will
automatically
generate
the
image
and
then
put
it
in
the
folder
and
then
it
will
trigger
the
azure
function.
G
G
So
these
are
all
this:
is
the
user
pro
user
photos,
library,
which
is
a
temporary
library
I
have
been
using?
So
if
you
see
here
it
has
generated
all
the
thumbnails
for
the
first
scenario,
let
me
okay
and
there
is
a
sync
list
which
I
have
been
using
where
to
store
all
the
sync
data,
so
I
have
been
storing
the
sync
data
and
then
the
completed
data
from
the
azure
function
as
a
json
file.
G
G
G
G
So
on
the
packages,
as
I
have
already
mentioned,
I
have
been
using
all
the
pnp
packages
and
the
image
resize
to
generate
the
thumbnail
so
on
the
web.
Part
properties,
so
first
I'll
be
checking
the
user
current
logged
in
user,
whether
he
is
a
site
admin
or
the
normal
user.
If
it
is
a
site,
admin
I'll,
be
loading
all
the
properties
here
and
if
it
is
a
normal
user
I'll
be
just
loading,
the
property
pan
information
so
that
they
can
ask
the
administrators
to
change
or
add
any
other
user.
G
G
G
And
if
you
see
there
are
multiple
dimensions,
you
can
get
it
from
the
graph.
So
these
are
all
the
width
and
height
of
the
photo.
These
are
all
different
dimensions.
You
can
get
it
and
in
that
I
am
using
48
cross
48
for
small
96
for
medium
and
then
240
for
large,
so
the
functionality
to
get
the
photo
from
azure
I'm
using
the
graph
service
and
then
I'm
generating
the
thumbnails
using
the
graph,
I'm
just
getting
all
the
thumbnail
photo
using
the
graph
service
and
if
it
is
uploaded
via
file
share
means.
G
I
am
using
the
image
resize
to
generate
different
thumbnails
for
this
dimensions
and
one
more
thing
is:
I
have
just
created
a
batch
limit
because
since
we
are
using
graph,
we
cannot
send
each
and
every
request
individually.
So
I
am
using
the
batch
limit.
So
if
there
are
more
number
of
requests,
I'll
batch
it
the
maximum
of
18
and
then
I'll
send
it
as
a
batch.
G
G
A
E
E
So
in
our
react,
controls
library,
we
have
a
bunch
of
field
controls,
you
can
get
to
them
through
top
navigation.
So
if
you
click
on
fill
controls,
you'll
see
like
a
bunch
of
them
for
different
types
of
sharepoint
columns,
and
these
controls
are
actually
help
you
to
render
the
components
render
your
field
customizers,
similarly
to
out
of
the
box
behavior
with
ability
to
provide
additional
styling,
additional
css
or
classes.
E
But
today
what
I
want
to
talk
about
is
about
this
field.
Renderer
helper
class.
That
additionally
allows
you
to
automatically
select
one
of
those
components
based
on
the
current
type
of
sharepoint
column.
What
it
why
it
is
beneficial
because,
basically
you
can
create
one
field
customizer
and
apply
to
any
type
of
sharepoint
call.
So,
for
example,
here
I
have
a
demo
list
where
I
have
multiple
different
columns,
so
I
have
a
date.
I
have
a
multi-lookup.
E
So
let
me
show
you
a
little
bit
of
code,
so
it's
pretty
sorry
pretty
easy.
So
I
have
my
field
customizer
here,
which
is
a
little
bit
modified
from
initial
one.
We
have
some
additional
properties
that
are
passed
to
our
components,
so
I'm
passing
list
item
accessor
from
our
event
on
render
cell
field
value
from
development
and
also
some
additional
css
properties
that
will
be
used
in
our
react
component
in
our
filter.
Customizer
react
component.
What
I
am
actually
doing
in
component
did
mount.
E
I
am
getting
the
field
renderer
based
on
list
item
accessor
and
current
field
values.
So
basically
the
magic
here
is
that
inside
the
field
render
this
helper
class,
it
will
go
through
the
list.
Item
accessor,
look
at
the
current
field.
Look
at
this
type!
It
will
grab
the
proper
control
for
this
type
of
the
column
and
the
total
75
needed
the
value
of
this
cell
in
this
field
in
this
field
to
correctly
display
it
on
the
page.
E
So,
for
example,
for
the
text
column,
we
just
need
to
display
the
text
that
we
got
from
the
field
customizer
but,
for
example,
for
lookup
we
will
have
a
json
object
that
we
need
to
parse
and
correctly
display
it
with
a
value
and
lookup
id
as
well.
So
let
me
actually
grab
the
url
debug
url
for
this
example
here
and
I'll
just
apply
it
to
this
list
and
what
we
want
to
do.
First,
let's
change
the
behavior
of
journey
date.
E
E
And
here
we
go
again:
first
of
all,
the
style
is
applied,
but
also
we
still
have
the
functionality
as
in
out
of
the
box
behavior.
So
if
I
click
on
the
value,
you
will
see
the
pop-up
with
the
kind
of
value
from
the
looked
up
list
same
here.
Even
if
it's
multi-value,
we
still
can
click
on
it
and
see
the
value
for
the
for
the
looked
up
column.
E
So,
basically,
that's
pretty
easy.
As
you
can
see
from
the
code
perspective,
it's
not
so
much.
We
just
need
to
get
the
render
in
component
mount
and
then
in
our
field
in
our
render
method,
we
are
just
providing
this
field
renderer
and
basically
nothing
else
and
again
this
will
work
for
any
type
of
sharepoint
column
and
it
allows
you
to
provide
additional
css
properties
and
class
names.
E
So,
basically,
even
your
scenario,
you
just
need
to
provide
additional
styling
to
out
of
the
box
behavior
of
your
sharepoint
columns,
it's
probably
the
best
and
the
easiest
way
for
you
to
go
and
implement
the
functionality
and
that's
pretty
it.
From
my
end,
it's
pretty
easy
and
simple
back
to
you,
patrick.
A
Very
cool,
thank
you
for
that
demo
great
to
see
that
and
it
might
be
considered
simple,
but
I
think
a
very
clean
and
functional
demo,
which
is
really
nice
to
see.
You
know
exactly
how
stuff
like
that
works.
So
thank
you
very
much
to
alex.
Thank
you
to
saddarson
and
also
me,
I
guess
so
great
demos
today.
Thank
you,
everybody
for
those
demos
and
again,
if
you're
interested
in
doing
a
demo
on
this
call,
please
do
reach
out
to
myself
or
visa
and
we'll
get
you
scheduled.
A
It
might
not
be
on
the
immediately
next
call,
because
sometimes
we're
scheduled
out
a
couple
weeks,
but
we'll
absolutely
will
get
you
scheduled.
Whoever
you
are
wherever
you
are
just
reach
out,
would
love
to
have
you
demo
on
the
call
with
that
I
will
say
thank
you
to
all
of
you
for
joining
in
the
call
thanks
for
your
time
for
those
of
you
watching
later.
Thank
you
very
much
for
checking
us
out.
If
you
have
questions
or
anything
as
always
just
get
in
touch,
you
can
follow
us
on
twitter.
A
The
recording
for
this
call
will
be
available
in
about
24
hours
on
our
community
videos
youtube
channel.
Our
next
sharepoint
framework
development
call
will
be
in
november
a
whole
nother
month
november
5th
same
time.
Our
next
general
dev
special
interest
group
call
will
be
next
thursday
october
29th.
At
the
same
time,
and
our
upcoming
november
monthly
community
call
will
be
november
9th.
Thank
you.
Thank
you.
Thank
you
to
everybody
for
joining
in
today
appreciate
all
of
your
time.
A
If
you
have
some
additional
time,
lots
of
other
great
community
calls
out
there
all
across
various
microsoft
things
you
got
adaptive
cards
called
microsoft.
Graph
calls
identity,
platform,
office,
add-ins,
powerapps,
so
forth.
All
kinds
of
great
stuff
definitely
check
that
out.
Thank
you.
Thank
you.
Thank
you
and
everybody
else
have
a
great
rest.
Your
week
talk
soon
bye,
bye.