►
Description
Viva Connections & SharePoint community call on May 5. Demos - Manage data in OneDrive application folder, Auto Batching Microsoft Graph Calls in your SPFx solution, and SPFx Design Patterns – Property pane exception handling. Project releases for Reusable SPFx React Controls v3.8.0, and Reusable SPFx React Property Controls v3.7.0. Delivered 3 web part and 1 ACE samples. Registration open for Power Platform Samples – First Time Contributor | Monday, May 9, 10:30 am PT- Register. The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place as always in chat throughout the call.
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp
A
New
community
sample
updates
we'll
do
our
picture
time
with
together
mode,
and
then
we
got
three
great
demos
from
adam
marcin
and
hugo,
showing
us
managing
data
in
onedrive
application,
folders,
auto,
batching
graph
calls
and
then
spfx
design
patterns
so
really
excited
to
see
all
three
of
those.
So
let's
get
through
the
intro,
so
we
can
get
to
those
demos.
A
A
I've
always
thought
the
demos
are
one
of
the
most
valuable
parts
of
these
calls
giving
us
a
chance
to
all
learn
from
each
other,
so
encourage
you
to
reach
out.
I
know
you're
all
doing
great
work
for
your
companies
and
your
customers
and
we'd
love
to
be
able
to
highlight
that
here
so
make
sure
it's
appropriate
to
share
publicly,
of
course,
and
then
reach
out
we'd
love
to
get
you
scheduled.
It
might
be
a
few
months
out.
Sometimes
we
are
booked
up,
but
you
can
always
request
a
demo
spot
at
ak
dot.
A
Ms
slash
m365
pnp,
slash,
request,
slash
demo
and
we
will
get
you
signed
up.
You
can
always
contribute
on
github
across
all
of
the
repositories
associated
with
microsoft,
open
source
reporting
issues,
submitting
pull
requests
and,
of
course
you
can
help
others
with
issues
and
questions
they
might
have.
And
finally,
we
always
welcome
your
feedback
about.
How
are
these
calls
going?
How's
documentation?
A
Where
can
we
help
and
positive
feedback
is
okay
too,
because
if
we're
doing
something
you
like,
we
can
always
try
and
do
a
little
bit
more
of
it
with
that
tons
and
tons
and
tons
of
resources
across
lots
of
different
areas.
The
one
link
you
need
to
remember:
ak
dot,
ms
slash
m365
pnp:
that's
the
patterns
and
practices
landing
page!
A
That's
going
to
get
you
directed
to
all
of
our
developer
videos,
so
those
are
topic
focused
videos
more,
like
I
think,
those
as
how
to
videos
to
get
you
started
on
a
range
of
topics
as
well.
We
have
our
community
videos,
those
are
going
to
be
recordings
of
things
like
this
call.
Our
other
community
calls
and
other
sort
of
event-based
things
we'll
be
in
those
community
videos.
We've
got
a
bunch
of
open
source
organizations,
pnp
office,
dev,
microsoft,
graph
and
sharepoint
that
all
welcome
your
contributions.
A
Your
feedback
have
opportunities
to
participate
in
various
ways
across
all
of
those
organizations,
and
then
we've
got
tons
of
great
samples
across
teams,
spfx,
aces
adaptive
card
extensions
power
platform,
spf
x,
extensions
and
list
formatting.
So
you
can
find
all
of
that.
We'll
talk
about
the
unified
sample
gallery
here
in
just
a
second,
but
instead
of
all
those
links,
you
can
always
just
go
to
ak.msl
m365pnp.
A
You
will
get
directed
there
to
all
of
the
various
calls
and
various
links.
So
these
are
a
bunch
of
the
other
developer
community
calls
available.
M365
platform
calls
on
tuesdays.
That's
a
microsoft,
hosted
call
and
the
rest
of
these
are
a
mix
of
microsoft,
hosted
and
community
hosted,
so
encourage
you
to
check
those
out,
but
again,
all
of
it
ak
dot.
Ms
slash
m365
pnp
for
all
the
details
and
speaking
of
the
unified
samples
gallery.
This
is
a
fantastic
new
resource
ak
dot.
A
Ms
m365
samples,
that
gives
you
a
roll
up
searchable
filterable
list
of
all
of
the
samples
available
across
many
many
different
github
repositories.
So,
instead
of
having
to
go
hunt
across
github,
you
can
just
find
all
the
samples
through
this
unified
gallery
here.
It's
really
fantastic
love,
seeing
this
get
developed
and
out
there,
and
it
looks
like
there's
more
than
2060
samples
from
microsoft
in
the
community,
but
just
welcome
you
to
check
that
out
really
great
resource
rolling
up
tons
of
samples
from
across
lots
of
different
places,
making
it
easy
to
find
and
get.
A
A
This
is
a
microsoft,
hosted,
call
focusing
on
microsoft,
presenters
and
so
next
week,
we'll
have
divyanka
and
michelle
talking
about
additional
contextual
actions
in
your
extended
app
and
we'll
have
david
talking
about
getting
started
on
using
azure
communication
services
in
your
website
so
check
that
out,
as
well
as
all
the
latest
news
and
info
across
the
m365
platform
for
developers.
So
that's
a
great
call
to
catch
up
on
tuesdays
and
that
recording,
of
course,
with
all
the
others
will
be
available
as
well.
B
Excellent,
thank
you,
patrick,
and
you
all
may
be
wondering:
where
did
those
cornucopia
of
samples
come
from?
They
came
from
amazing
individuals
like
you
in
the
community,
but
you
may
be
wondering
how
do
I
get
my
samples
in
there
or?
How
can
I
further
contribute
into
the
community?
Sharing
is
caring
is
a
program
that
provides
you
hands-on
guidance
in
a
variety
of
topics
such
as
contributing
your
samples
becoming
more
efficient
as
a
presenter,
perhaps
you'd
like
to
get
involved
with,
using
and
or
giving
back
to
the
existing
samples
that
are
there.
B
These
are
live
safe
space
opportunities
for
you
to
interact
with
members
of
microsoft,
the
patterns
and
practices,
team
and
other
members
of
the
community.
So
we
invite
you
to
join
any
and
all
that
you
like.
They
are
absolutely
free,
safe
space,
not
recorded,
so
you
can
feel
free
to
ask
any
and
all
questions
you'd
like
next
week
on
monday
is
our
power
platform
samples
first
time
contributor
session,
and
that
is
open
and
available.
B
Still
plenty
of
room,
for
everybody
got
lots
that
are
going
to
join
that
session,
so
don't
hesitate
and
we've
got
more
amas
coming
up
soon.
As
they
are
ever
popular
and
everyone
is
enjoying
that
interaction
now,
once
you
have
contributed,
we
absolutely
want
to
recognize
all
the
amazing
work
you're
doing,
and
so
the
recognition
program
is
here
to
celebrate
that
it
is
powered
by
credly.
B
Yes,
the
same
credly
that
manages
the
badges
for
all
the
microsoft
certifications,
so
they
can
be
associated
to
your
linkedin
share
it
on
twitter,
put
on
your
blog
shown
to
your
clients
and
managers
to
show
how
much
you're
influencing
the
community.
It
is
absolutely
free.
We
do
need
you
to
opt
in
and
we
just
hit
the
beginning
of
a
new
month,
so
we'll
be
running.
Some
reports
and
you're
gonna
be
seeing
lots
of
new
badges
sending
out
to
all
of
you
for
the
amazing
work
that
you
did
over
the
last
month.
Patrick
back
to
you.
A
Great
updates
there
and
love
seeing
the
growth
of
the
samples
and
love,
seeing
the
growth
of
the
recognition
for
that
work.
So
wonderful
work
there.
Everybody
involved
and
congratulations
to
everybody,
who's
gotten
a
badge
and
encourage
you
to
get
a
badge
yourself
there.
If
you
haven't
yet
so
I'm
basic
today,
so
we're
gonna
do
sharepoint
framework
updates.
We've
got
sharepoint
framework.
1.15
public
developer
preview
is
available.
The
big
thing
in
there
right
now
is
the
list
form
extensibility
preview.
A
I
want
to
stress
this:
is
all
preview
subject
to
change,
not
ready
for
production,
etc,
etc,
but
definitely
check
it
out
exciting
new
capabilities
to
override
list
forms
and
take
control
of
that
experience
in
a
way
we
haven't
previously
been
able
to
in
modern,
so
excited
to
see
that
show
up,
and
you
can
always
install
those
npm
install
g
at
microsoft.
Slash
generators
at
next
we'll
get
you
the
preview
version
of
that
so
check
that
out
and,
of
course,
give
us
feedback
on
that.
A
That's
how
we'll
make
it
better
prior
to
release
and
the
road
ahead
for
115
we're
looking
at
new
action
types
for
media
and
geolocation,
so
a
new
tutorial
is
just
out
there
for
that.
We've
got
support
for
the
graph
sdk
v3
excited
to
see
that
get
in
there
bug
fixes
and
adjustments
based
on
github
issues
and
then,
as
I
mentioned,
there's
new
customizers
for
add
and
edit
list
and
library
forms.
So
some
great
capabilities
in
that
preview.
A
For
you
to
try
out,
encourage
you
to
do
so,
and
we've
got
a
bunch
of
other
stuff,
I'm
not
going
to
read
it
all
out
in
progress
for
1
15.,
so
we'll
be
excited
to
see
those
things
show
up
as
well,
eventually
and
then
post
115,
we're
working
on
some
bots
powered
adaptive
card
extensions
and
support
for
node
v16
and
that's
delayed
a
bit
just
do
some
dependencies
internally.
That
will
get
resolved
shortly.
C
Hey,
thank
you
all
right,
so
version
3.3
release
is
scheduled
for
may
13th.
We
don't
have
a
ton
we
did
so
much
last
month.
I
think
we
needed
to
take
a
big
breath.
We
do
we'll
have
some
general
documentation
updates.
We
did
get
a
new
submission
for
a
git
locked
by
user
file
method.
So
that's
going
to
be
handy
and
we
will
get
that
rolled
into
the
3.3
release
and
so
we'll
address
any
other
reported
issues
and
enhancements
as
we
go.
But
that's
about
all.
C
C
You
can
check
out
any
of
the
new
issues
that
were
merged
in
and
see
if
the
fixes
actually
work
for
you.
So
that's
a
great
way
to
test
those
out
and
give
us
early
feedback
before
the
actual
release
version
goes
out.
So
definitely
check
that
out
also
follow
us
m365pmpjs
on
twitter
and
that's
all.
I
have
thanks.
A
Patrick
awesome
thanks
julie
for
those
updates
and
all
the
great
work,
of
course
on
pmpjs
by
you
and
everyone
else,
who's
contributing.
So
thank
you
for
that.
I'm
gonna
try
and
click
through
our
animations
there
to
get
to
the
cli
for
microsoft.
365
updates,
we've
got
new
version.
5.2
is
out
with
extended
spf
x
project,
upgrade
guidance
to
include
spfx
fast,
serve
real
tongue
twister.
A
Today,
upgraded
spf,
x
projects,
spfx
115,
beta
6,
simplified
login,
support
for
adding
private
teams
channels
and
lots
more
encourage
you
to
check
out
that
new
version
of
the
cli,
a
fantastic
tool.
If
you
haven't
used
it,
you
can
install
it
there
as
well
use
the
great
docker
containers
they've
set
up
to
make
installing
and
using
the
cli
even
better
and
easier,
so
definitely
check
that
out
with
all
those
great
new
enhancements.
A
Next
up,
some
updates
on
the
reusable
controls.
We've
got
two
packages
there.
The
react
controls
are
at
380,
with
some
people,
picker
enhancements
adaptive
card
host,
enhancements
and
support
for
section
backgrounds
and
accessible
accordion
and
tree
view,
as
well
as
some
various
fixes.
Those
are
designed
to
be
used
in
the
body
of
your
web
parts
and
application
customizers,
and
then
we've
got
the
react:
property
controls
that
are
three
seven
zero.
Those
are
designed
to
be
used
in
the
edit
pane
of
your
web
parts.
A
We've
got
some
updates
around
the
property
field
list
picker
and
the
property
field.
Color
picker,
so
encourage
you
to
update
when
you
get
a
chance,
the
latest
versions
and
enjoy
all
those
enhancements,
and
thank
you
to
everybody,
that's
working
on
the
reusable
controls
to
make
those
better
every
week
and
every
month.
So
thank
you.
Thank
you.
Thank
you
for
that
work.
Next
up
is
modern
search.
Aka,
ms
p,
p,
search,
building,
flexible,
modern
search
experiences
with
web
parts.
461
is
out.
That's
the
april
release.
A
You
can
see
the
full
notes
there
at
the
link,
I'm
not
going
to
read
the
whole
link
there
to
you,
but
you
can
see
that
and
that's
going
to
give
you
all
the
updates.
Thank
you
to
everybody
that
helped
update
this
and
that's
going
to
give
you
the
ability
to
build
these
fantastic,
rich
search.
Experiences
super
customizable
within
your
portals
for
your
customers
and
your
companies
so
definitely
check
that
out
and
just
a
reminder.
The
v3
branch
of
things
is
really
just
in
long-term
maintenance
mode.
A
At
this
point,
not
a
lot
happening
there
encourage
you
to
update
to
the
v4
branch.
When
you
have
time
I
know
not,
everybody
can
drop
everything
and
update
search
portals
all
the
time,
but
at
this
point
definitely
worthwhile
to
get
onto
that
v4
branch
of
things
so
encourage
you
to
check
that
out
and
then
next
up
is
hugo
with
samples
updates.
E
F
B
D
D
We
welcome
contributions
again,
if
you
don't
know
how
to
contribute
samples,
but
you
have
some
cool
samples
you
want
to
share.
Please
see
us
with
sharing
scaring
we're
going
to
help
you
get
started
thanks
to
everyone
who
contributes
samples
and
speaking
of
samples.
Let's
go
talk
to
my
friend
david
about
aces.
B
Awesome.
Thank
you.
Hugo
aces.
We've
got
a
word
of
the
day,
ace
by
guidos
amborda,
a
very
cool
way
to
kind
of
share
some
of
that
information
around
new
words,
definitions.
Examples
might
even
help
you
with
your
wordle.
If
you're
doing
that.
So
thank
you
again
for
the
contributions.
We
are
open
for,
more,
don't
hesitate,
patrick
back
to
you.
A
B
A
B
F
A
A
G
Here,
yeah
basically,
first
time
demoing,
so
I
hope
you
you
will
enjoy
it
as
much
as
I
can.
I,
like
coding
and
coffee
and
mime
located
in
poland,
not
much
more
to
say.
If
you
would
like
to
contact
me,
you
can
do
it
by
thinking
or
twitter
and
anyway,
if
you
are
like
using
some
of
my
open
source-
and
you
have
this
idea-
hey,
maybe
I
will
buy
this
guy,
a
coffee,
don't
do
it
yeah.
I
work
for
free,
at
least
in
open
source.
G
I
work
for
free,
but
in
the
current
situation,
maybe
you
can
consider
helping
the
the
ones
in
need
and
I
there's
a
link
for
the
verified
support,
how
you
can
do
it?
It's
not
always
charity,
but
also
other
stuff
and
you're
interested.
And
anyway,
let's
go
back
to
the
topic,
so
I
will
be
presenting
a
subject
how
we
can
save,
let's
say
personalized
data.
Let's
say
we
have
a
really
cool
application.
G
If
we
developed
and
of
course
in
this
spfx
application,
we
have
some
user
personal
data,
some
user
settings-
that
we
want
our
app
to
be
personalized
and
consistent.
Let's
say
our
application
is
in
teams
and
in
sharepoint
and
when
we
want
to
whatever
we
set,
and
this
spfx
web
part
in
sharepoint,
to
see
it
also
in
teams
and
it's
personalized
for
for
the
current
user.
So
of
course
we
should
save
this
kind
of
data,
but
maybe
where-
and
maybe
you
had
already
had
this
problem
and
considered
it?
G
Okay,
we
could
consider
data
first,
maybe
it's
more
connected
to
the
power
platform
and
powerapps,
and
to
be
honest,
I
didn't
even
I
didn't
develop
a
solution
where
I
have
an
spfx
webpart
and
I
connect
to
the
dataverse.
But
okay,
it
is
some
point
to
keep
the
data
for
sure
and
and
this
m365
world
we
can
consider.
G
Other
thing
I
saw
in
the
future
and
also
create
is
a
couple
of
times
this
solution
that
we
we
have
some
hidden
sharepoint
list
on
some
sharepoint
sites,
and
then
we
keep
each
user's
data
in
columns
and,
of
course,
there's
many
things.
We
need
to
consider
here
how
we
provision
this
this
sharepoint
list.
Maybe
it
can
be
provisioned
by
a
separate
script
or
with
our
spfx
package
or
the
web
part.
Could
each
time
check?
G
Oh,
if
there
is
present,
if
it's
not
it,
creates
it
and,
of
course
we
have
to
consider
permission
management
here,
at
least
the
user
who's
the
author
of
his
role,
he
or
he
or
she
should
be
able
to
only
add
added
this
data,
his
or
she's
data
right.
So
there
are
a
lot
of
things.
We
need
to
consider
other
thing
where
we
can
save
user
personal
data
is
the
user
profile
service.
We
can
create
a
custom
custom
property
and
we
could
keep
those
user
settings
as
a
custom
properties
to
me
seems
this.
G
This
could
seem
a
quite
old-school
approach,
maybe
from
the
sharepoint
on-prem
versions,
but
okay.
This
is
also
something
we
can
do.
I'm
not
really
sure
if
we
can
script
this
in
sharepoint
online
and
of
course
we
can
consider
saving
data
in
a
user
onedrive.
I
think
this
is
a
really
sweet
place
for
user
personal
data.
I
mean
the
users
his
or
she's
onedrive
is
the
place
where
the
user
stores
their
personal
data
and,
of
course,
okay.
G
We
can
say
okay,
but
in
onedrive
I
store
mainly
files,
and
here
we
should
consider
something
like
a
structural
object
like
a
table
with
some
settings.
Well,
we
can
consider
xml
or
better.json
right
and
there
is
a
a
graph
endpoint
that
supports
all
that.
So
there's
not
much
work.
We
actually
need
to
do.
We
need
to
only
like
remember
one
or
okay,
two
okay,
most
of
the
times
three
three
endpoints
gets
and
put
how
to
save
the
data
and
how
we'll
actually
present
this
now.
G
So
I
hope
you
you
weren't
bored
with
the
slides,
not
much
here.
So
this
is
my
user
test
user
onedrive,
okay,
this
user
is
me-
and
I
have
nothing
special
here,
but
okay
using
the
graph
explorer,
let's
see
what
what
will
happen.
If
I
just
do
a
simple
get
request
to
this
special
me
drive
uproot
end
point:
okay,
we'll
see
it's
ended
with
a
success
and
it
was
translated
to
this
kind
of
url,
which
goes
directly
to
my
onedrive
to
a
special
apps
folder.
G
I
didn't
have
it
yeah
before
and
here
I
see
a
graph
explorer
folder
created
okay,
so
let's
go
back
and
okay.
It
actually
happened
a
few
seconds
ago,
the
graph
for
me
created
a
new
apps
folder
in
the
user's
onedrive.
This
is
a
special
uproot
catalog,
where
each
app,
which
is
using
this
endpoint,
will
create
their
own
folder
for
their
own
files,
metadata
whatever
and
in
this
graph
explorer.
I
was
using
graph
explorer,
so
I
have
a
graph
explorer
for
the
created
for
me
automatically.
G
I
don't
need
to
provision
it
and
think
about
anything
else
and
currently
it's
empty.
So,
let's
see
how
we
can
add
anything
here.
We
can
do
it
with
a
simple
put
request
and
I
will
save
it
as
a
test
data
json
file.
Putting
this
as
my
content
and
okay.
If
I
refresh,
I
see
that
okay,
this
file
was
created,
and
this
is
my
json
file.
G
So
this
is
all
well
and
good
if
we
have
a
simple
solution
that
we
want
to
save
the
data,
how
we
would
now,
let's
say
we
want
to
retrieve
the
data
for
sure.
So
we
can
just
query
this
single
file,
this
physical
json
file
from
the
special
uproot
folder.
We
don't
need
to
go
to
any
sub
catalogs.
It
will
already
be
translated
to
the
graph
explorer
folder
in
the
uproot,
and
then
we
need
actually
to
do
an
additional
step
which
I
will
show
in
the
in
sample
solution.
G
We
as
a
response.
We
get
the
download
url
which
will
actually,
if
we
open
it,
it
will
download
our
file.
So
in
our
web
part
we
can
actually
do
the
same
and
parse
the
json
back
to
our
typescript
object.
So
it
seems
pretty
straightforward
and
pretty
easy,
even
comparing
case
to
provisioning
sharepoint
list
with
columns.
Let's
say
in
future:
we
want,
we
want
to
add
additional
metadata
for
the
user
personal
settings,
so
we
need
to
extend
it
with
additional
columns
and
stuff
like
that.
G
Here
we
have
a
json
which
is
really
flexible
and
we
just
with
a
couple
of
two
requests:
we
save
it
and
get
it
yeah
from
from
the
place
we
want
and
okay.
So
maybe
you
could
ask
okay,
nice,
that
it
showed
it,
but
these
are
only
requests
now.
I
need
to
develop
it.
What
there's
a
sample
in
the
sample
solution
gallery?
If
you
type
save,
there's
the
save
to
user
application
person
folder,
maybe
could
be
a
better
name,
and
this
is
actually
a
sample
solution.
G
G
It's
just
one
one,
one
client
with
two
buttons
to
save
and
get
the
data,
and
this
we
could
actually
delete
and
create
our
own
cool
application
and
just
leverage
the
the
things
done
in
the
library
to
to
manipulate
with
the
with
the
data
we
want
to
save
and
since
hugo
added,
even
a
dev
container.
Here,
it's
just
really
easy
to
try
it
out.
G
Let
me
see
so
we
can
just
have
it
running.
We
can
just
pull
it
and
just
have
it
running
in
the
dev
container
already
and
let's
okay,
let's
maybe
see
how
it
works
first,
before
I
jump
into
the
code,
so
I
already
have
it.
I
have
the
group
server
running
and
this
is
my
workbench.
So,
let's
just
add
this
web
part
it's
called
clients
under
beneath
it
uses
this.
G
This
spfx
library
I
created
and,
let's
just
add,
a
pnp
demo
like
whatever,
so
I
have
a
small
json
with
one
property
data
which
I
saved
to
the
pmp
demo
value.
Okay,
so
let's
see
what
happened
in
the
apps
folder,
I
have
a
new
folder
which
will
be
shared
between
all
sharepoint
spfx
solutions,
extensions,
so
extensions
web
parts
whatever-
and
this
is
really
important.
G
So
if
we
have
an
extension
and
then
a
web
part
and
another
web
part
and
all
of
those
are
using
this
graph
api
to
save
our
data,
we'll
all
go
to
the
same
location.
Those
solutions
will
go
to
the
same
location.
So
it's
a.
I
think
it's
a
good
practice
to
have
a
separate
subfolder.
Here's
app
data
for
our
for
this
specific
web
part.
We
are
using
now
so
in
this
sharepoint
online
extensibility
folder
that
was
created
automatically
I
create
in
the
in
the
library.
G
I
create
a
subfolder
where
I
keep
this
json
file
just
just
in
case.
I
would,
in
the
future,
have
a
different
solution
which
would
also
save
the
json
file
with
the
same
name
and
okay.
We
see
we
have
this
small
json
saved.
We
can
also
use
the
get
button
to
to
get
our
data
and,
of
course,
we
can
just
update
it
and
save
and
then
add
safety
no
magic
here.
G
So,
as
I
said,
it's
a
pretty
straightforward,
we
have
only
two
components
and
library
and
a
web
part
we
just
type
gup
surf
on
the
web
part
which
will
start
our
workbench.
One
thing
really
important,
also
to
remember
that
the
live.
It
is
a
graph
api
endpoint,
so
it's
defined
in
the
web
uppy
permissions
needed
for
it
is
defined
in
the
lab
library
component.
So
if
you
are
planning
to
use
this
sample
or
do
a
similar
one
based
on
this
one,
please
do
remember
that
after
you,
you
use
it.
G
You
need
to
go
that
you
need
to
go
to
the
sharepoint
admin
portal
and
and
click
on
the
consent,
admin
consent
for
those
permissions
to
make
it
working.
Okay
and
then
okay.
This
is
the
client.
So
this
is
the
part
of
the
of
the
web
part.
Okay,
actually,
and
as
you
can
see
it's
pretty
straight
forward,
I
have
some
really
like
simple
ui
logic
with
two
buttons,
and
so
here
it.
G
Of
course
there
could
be
some
really
cool
solution
and
we
have
two
really
small
functionalities,
get
and
save
and,
as
you
can
see,
it's
pretty
straightforward
to
get
the
data
retrieve
it
as
a
json
or
save
it
where
we
pass
any
kind
of
typescript
object.
We
want
to
serialize
to
the
json.
The
typescript
object
I
created
is
update.
That's
really
easy,
as
I
said,
has
one
property
which
can
be
anything
in
our
case.
It's
a
string,
and
then
this
is
the
whole
abstracted
layer
which
you
could
use.
G
If
you
want
and
sample,
which
is
the
library
itself,
it's
we
could
think
it's
quite
complex,
but,
as
you
can
see,
there's
not
many
code
here
like
100
lines
and
there
are
some
predefined
settings
at
the
top.
So
what
is
the
json
name
we
will
have
and
this
sub
catalog
we
will
be
creating
and
we
have
two
public
methods
we
can
use
in
our
web
parts
when
we
reference
this
library.
One
is
a
get
data
which
basically
checks
if
default.
G
If
the
sub
catalog
and
this
automatically
created
a
catalog
by
graph
is
created,
if
not,
it
creates
the
subcatalog
for
us.
It
retrieves
from
the
subcatalog.json
file,
gets
the
download,
link
and
downloads
it
and
then
parse
it
to
parse
the
json
to
our
object
and
the
save
just
does
pretty
much
the
same,
but
the
other
way
around
to
get
gets.
There
gets
the
object
and
parse
it
as
a
stream,
and
then
we
put
it
directly
to
the
subcatalog
data.
G
So,
first
we
query
query
by
the
id
and
we
saved
the
content
to
the
subcatwalk
and
pretty
much
that's
it.
I
hope
you
liked
my
demo-
and
this
is
the
first
time
if
I
was
burning
you
and
fell
asleep
or
you're
like
me
and
you're
more
a
reader
person,
it's
always
easier
to
copy
copy
paste
from
code
or
blog
post,
not
from
movia.
So
I
also
created
a
blog
post
on
the
community
under
a
new
github
community
blog.
G
A
E
E
The
question
I
believe
you
all
want
to
ask
why
even
implement
auto
batching
and
very
quickly
graph
api
has
amazing
ability
to
batch
requests,
which
is
great
because
you
want
to
communicate
with
any
server
as
little
as
possible.
So
if
you
can
batch
multiple
requests
into
one
you're
actually
doing
things
faster,
amazing,
another
point
for
auto
batching:
this
is
effectively
data
access
layer.
E
So
the
optimal
implementation
list
for
me
would
actually
not
expose
any
of
the
implementation
details
about
the
batching,
but
do
it
under
the
hood
and
very
quickly
for
the
real
world
example,
let's
consider
user
card.
If
you
want
to
render
a
simple
user
card,
you
have
first
of
all
call
graph
to
get
user
in,
for,
for
example,
slash
the
endpoint.
E
E
How
would
we
do
it?
First
of
all,
we
will
define
an
interface
that
will
abstract
our
get
post
patch
methods
effectively
ihttp
client,
and
this
will
be
our
contract
to
graph
api.
Then
we
will
very
quickly
create
an
adapter
from
http
glider,
actually
aad,
http
client
provided
by
sharepoint
framework,
and
we
will
map
certain
functions
to
our
ihtp
client
implementation.
E
And,
finally,
we
will
implement
a
very
nice
http
client
that
will
aggregate
over
the
requests
put
it
on
some
queue
and
every
few
milliseconds
or
a
few
hundred
milliseconds.
It
will
get
everything
on
the
queue
budget
together,
send
and
resolve
the
promises
associated
with
their
requests.
I
believe
that
makes
sense.
I
cannot
see
anyone
nodding
or
not.
I
believe
you
are
nodding
and
shelling
by
my
approach
to
this.
So
to
show
you
how
it
looks
like
here,
we
have
very
simple
web
part.
We
have
two
users,
one
is
myself
marcin.
E
You
can
see
that
I
am
available,
and
this
is
my
photo,
and
here
is
my
test
manager,
which
is
not
available
and
has
no
photo
just
to
see
what
will
happen
is,
as
you
can
see,
there
is
actually
only
one
batch
request
which
called
the
endpoints
we
needed.
So
it's
me,
meme
presence,
photo
manager,
manager
photo
and
management
presence.
E
E
If
you
wonder
why
not
use
the
contract
provided
by
microsoft
with
svg,
client,
http,
client
and
aadhtp
client
answer
is
very
simple:
I
don't
want
to
use
the
configuration
object
so,
and
this
is
much
more
similar
to
fetch
api.
So
this
is
why
I
decided
to
implement
it
like
this.
We
have
two
implementations
of
the
client.
As
I
mentioned,
the
first
one
is
very
simple:
only
a
the
http
client
and
we
when
we
are
calling
get
we
are
effectively
just
just
calling
get
from
the
http
client
provider
provided
by
sharepoint.
E
We
are
only
adding
few
headers,
for
example,
for
consistency
level.
If
you
are
not
too
familiar
with
graph.
This
is
very,
very
important
header.
I
highly
recommend
using
that
fourth
post
same
thing:
patch
put
no
no
magic
there
when
it
comes
to
batching
itself.
We
have
this
budget
of
client
and
for
much
graph
client.
I
opted
for
composition,
which
you
can
see
here.
If
you
wonder
my
composition,
I
like
composition,
because
effectively
this
is
inheritance
with
whatever
bass
class.
You
want
so
very
nice.
E
E
E
If
there
is
already
a
badge
we
will
see
if
there
is
a
batch
for
the
same
url
or
not.
If
there
is
for
the
same
url,
we
will
push
the
promise.
If
not,
we
will
just
add
a
new
new
url
with
new
promise
so
effectively.
What
we
are
doing
here
is
we
are
establishing
one-to-one
reference
between
the
promise
of
the
call
from
the
code
and
batch
that
we
will
soon
dissolve.
E
E
get
sub
mappings
effectively.
We
will
get
only
the
15
promises
we
registered.
Then
we
will
create
our
batch
handler
and
we
will
execute
batch.
What
is
a
batch
handler?
Nothing
too
difficult.
Our
batch
handle
just
gets.
The
registered
promises
gets
the
url
from
each
promise
and
builds
some
will
heal.
E
Somewhere
it'll
build
somewhere
batch
body.
Oh,
I
believe
that's
it
map
request
url.
Once
we
build
the
build
the
body
we
execute
request
and
we
process
the
batch
response.
You
can
see
here
that
we
are
checking
the
version,
because
there
is
separate
batch
for
v1
and
separate
batch
for
the
v2.
If
you
call
some
endpoint,
for
example
the
endpoint
in
beta
version,
you
may
call
it
because
it
it
gets
you
more
data.
E
E
E
E
Then
we
are
creating
new
batch
graph
client
and
this
is
the
client
we
will
use
in
our
auto
battery
sample.
Let's
check
out
how
we
have
one
user
card
in
user
two
and
two
user
card,
we
provide
graph
client
and
the
user
query
we
want
to
use
and
finally,
the
user
card
and
that's
what
we're
looking
for.
We
are
dissolving
three
promises
at
all
with
very
simple
api,
because
we
just
called
get
whole
batching
is
happening
underneath
so
it
looks
like
we
have
three
different
requests,
but
under
the
hood
they
are
batched
into
one.
E
We
resolve
them
all
and
we
are
handling
personal
object
from
fluent
ui
with
user
data
presence
and,
of
course,
photo
now
for
the.
I
believe
last
part
something
I'm
big
fan
of
unit
tests
because,
as
you
may
imagine,
due
to
the
number
of
requests
that
set
timeout
literally
operations,
there
is
a
lot
of
logic.
We
should
be
able
to
test
so
how
we
can
test
something
like
this
with
jest
of
course.
E
So
here
let's
say
we
want
to
test
very
simple
batch
request.
We
will
create
a
simple
mock
for
the
base.
Client
create
batch
request
based
on
this
client
note
that
here
I
would
say:
okay,
the
only
response
that
this
base
client
will
have
is
a
response
from
post
that
will
have
a
specific
id
and
for
the
second
request,
this
is
much
for
the
request,
one
and
the
request:
two.
E
We
call
it
a
waiting
git
and
we
can
very
easily
check
that
out.
Actually,
yes,
I
I
executed
the
post
request
with
with
batch.
I
returned
test
user
for
me
and
test
group
id
for
my
group
and
there
are
a
few
other
tests
which
help
you
out,
for
example,
with
testing
different
linguals
and
like
that,
I
will
not
go
too
much
into
details
here.
I
highly
encourage
you
to
download
the
sample
play
around
with
this
and
optimally
get
me
some
feedback.
E
E
I
believe
adaptive
cut
extension.
That's
it
we
initialize
it
in
all
effectively
the
same
way.
We
are
getting
the
client
from
adhd
factor
for
the
graph.
We
are
using
the
same
batch
client
and
we
just
set
to
our
this
time:
adaptive
current
state
user
user
presence
and
photo
everything.
Everything
is
batched
together
and
effectively.
There
is
only
one
request
to
graph,
I
would
say:
inadaptive
card
or
inadaptive
cards
in
general,
that's
much
more
important
than
in
web
parts,
because
you
can
get
throttled.
E
I
believe
if
you
have
15
consecutive
requests
to
graph
about
15
or
nine
something
like
this,
it's
not
a
big
dumper.
You
will
get
throttled
by
graph
so
especially
on
adaptive
cards,
when
you
still
don't
have
that
nice
assing
option
or
async
opportunity
to
get
cut
the
details,
you
have
to
load
everything
at
once.
E
E
A
Soon,
awesome
thanks
so
stuff
marcin,
really
cool
pattern
there
with
the
auto
batching
and
definitely
the
performance
implications
are,
are
big
with
batching.
These
requests
so
encourage
folks
to
kind
of
check
out
that
sample
and
those
patterns
and
and
see
how
you
can
best
incorporate
them
into
your
applications
and
with
that
we're
gonna
move
over
to
hugo
who's.
Gonna
walk
us
through
some
custom
properties,
part
six.
Take
it
away.
D
D
Finally,
because
we're
going
to
have
more
sequels
in
the
fast
and
furious
at
this
space
and
we're
going
to
start
talking
about
content,
but
today,
let's
focus
on
custom
properties.
My
name
is
hugo
bernier.
I
work
at
microsoft,
I'm
a
senior
cloud
solution
architect
at
microsoft,
and
you
can
see
my
blog
here
on
my
twitter
account,
but
just
one
thing
my
blog
is
currently
down
under
maintenance
because
we
were
so
busy
building
the
new
microsoft
365
community
blog
that
I
neglected
my
own
blog,
but
we'll
be
fixing
that
very
shortly
all
right.
D
So,
let's
recap
a
little
bit
so
far.
We
spent
most
of
our
time
on
property,
panes
and
again.
The
reason
for
that
is
because
we
want
to
make
sure
that
your
web
parts
are
configured
properly
and
they're
reusable
right.
We
don't
want
to
create
single
used
web
parts.
We
want
to
create
reusable
web
parts
as
much
as
possible
and
we
want
to
make
sure
that
we
bound
properties
to
property,
pane
controls
and
how
to
validate
them.
Now,
let's
do
a
little
recap
here
on
how
we
validate
so
here
on
this
web
part.
D
D
So
the
first
thing
that
we
do
is
on
your
web
part.
So
in
this
case
mywebpart.ts
you
have
a
method
called
getpropertypane
configuration
and
all
we
need
to
do
is
we
need
to
actually
pass
the
individual
fields
that
we
want
and
bind
them
to
the
individual
properties
and
how
we
get.
The
validation
is
by
passing
on
get
error
message
where
we're
going
to
pass
it.
Basically,
a
string
and
it'll
return,
a
string
and
the
string
if
the
string
is
empty.
It
means
there's
no
error
message.
D
D
Now
we
have
a
list
web
part
and
the
less
web
part
are
sorry,
not
list
property,
a
list
property
where
we
ask
people
to
enter
the
list.
Name
and
you'll,
see
here
as
I'm
typing
it's
starting
to
scream
at
me.
Saying:
hey
this
list
doesn't
exist
all
right.
Well,
let's,
let's
actually
talk
about
how
we
want
to
handle
this,
and
the
best
example
that
I
like
to
use.
D
When
I
talk
about
user
experience,
is
those
fancy
atm
machines
right
or
I
guess
I
should
just
say
atm
where
you
can
go,
get
cash
right
and
you
can
withdraw
cash
out
of
the
machines
now,
the
typical
user
interface
and
this
I
actually
took
this
from
a
local
bank-
and
I
rebranded
it,
but
typical
atms
will
allow
you
to
enter
an
amount
or
allow
you
to
pick
from
choices
and
then
so
I'll
start
typing
right.
I'll,
take
53.75.
D
So
one
of
the
design
patterns
that
we'll
talk
about
today
is
how
to
not
make
our
users
feel
like
garbage
by
using
some
code
and
by
using
some
user
experience,
and
the
first
thing
is
avoid
the
air
from
happening
in
the
first
place,
and
when
I
was
looking
for
images
here,
I
was
actually
going
to
put
a
picture
of
bruce
lee
where
he
used
to
say
the
best
way
to
never
lose
a
fight
is
to
not
fight
in
the
first
place.
But
let's
just
use
this
one
for
now.
D
D
D
That
way
I
mean
I
really
don't
need
to
have
the
validation
that
exceeds
greater
than
40..
But
you
know,
let's
remember
from
our
last
session,
that
you
should
always
also
validate
stored
values,
not
just
entered
values
right,
so
I
always
try
to
keep
my
validation
there,
even
though
I'm
going
to
try
to
prevent
the
users
from
making
that
mistake.
D
Okay,
but
now,
let's
go
back
to
our
list
right
where
we
enter
the
list
names
and
I'm
sure
you
folks
have
never
had
this
issue,
but
I
run
into
this
issue
all
the
time.
Should
I
be
entering
the
display
name.
Should
I
be
entering
the
you
know
the
the
escape
name?
Am
I
entering
the
guide
you
know
did
I
did
I
do
I
put
a
slash
in
the
in
the
name.
D
D
Now
this
is
where
it's
a
good
idea
to
use
some
help,
and
one
of
the
things
that
you
should
look
at
is
the
pnp
spsx
property
controls,
library,
which
has
tons
of
reusable
property,
pane
controls
for
your
sharepoint
framework
solutions
that
you
can
use
to
do
some
really
cool
stuff,
and
so,
let's
just
look
around.
We've
got
some
controls
here.
Tons
of
controls,
as
you
can
see,
you
know,
for
editing
code
for
picking
colors
dates
and
things
like
that
and
we'll
review
those
a
bit
later.
D
But
the
one
I
want
to
use
is
the
list
picker
and
the
list
picker
allows
me
to
actually
list
lists
on
my
site
so
that
I
can
you
know,
validate
the
list
properly,
and
so
it's
got.
Every
single
control
has
the
full
instructions
on
how
to
use
the
control
and
it's
mostly
copy
and
paste.
So
the
first
step
is
to
go
back
to
my
library
and
to
add
a
dependency
right
and
we'll
do
that
by
saying
npm
install.
D
I
usually
type
way
faster
property
controls,
all
right,
okay
and
we'll
hit
enter,
and
then,
if
everything
goes
well,
we'll
get
a
the
library
installed.
Now
we
go
back
to
our
web
part
and
we'll
actually
just
need
to
add
a
new
import
just
so
that
this
webpart
knows
how
to
use
the
property
field
list.
Picker
and
we'll
also
add
a
property,
because
we
need
to
store
our
list
now.
The
sample
actually
allows
you
to
store
both
a
multi-select
list
or
a
single
list.
D
If
I
want
to,
I
can
actually
have
it
include
the
hidden
list
versus
the
non-hidden
list,
and
you
know
how
we
sort
and
things
like
that.
But
then
what
we
want
to
do
here
is
there's
a
few
other
things
like
you
know.
Do
I
want
to.
I
want
to
bind
when
the
property
feel
is
changed
and
some
elements
that
the
control
is
going
to
need
to
be
able
to
to
actually
execute,
and
then
this
is
where
my
error
message.
D
D
Otherwise
I'll
just
return,
no
error
message,
and
so
now
we're
going
to
get
something
like
this,
where
I
can
pick
the
list
now,
let's
just
be
clear
that
the
list
that
I
see
here
is
the
list
that
I
have
permissions
to
see
right.
So
we
want
to
make
sure
that
if
you're
doing
things
on
behalf,
the
user
users
also
have
access
to
the
list,
and
that's
really
how
the
validation
is
done.
D
Now
we
could
do
the
same
thing
if
you
are
entering
colors
or
entering
dates
or
things
like
that
or
even
fancy
things
like
you
know,
selecting
people
or
even
entering
json
or
html,
or
things
like
that
right.
If
you've
ever
tried
to
type
json
in
notepad
with
that
syntax
highlighting
it
can
get
out
of
hand
a
little
bit.
So
anything
like
this
helps
reducing
the
number
of
errors.
But
now,
let's
just
do
some
rapid
fire
here
on
some
design
patterns.
We
want
to
use
the
first
thing
we
want
to
do.
D
Is
we
want
to
make
sure
that
we
are
polite,
always
polite
when
we
give
error
messages
right?
So
if
I
go
to
that
web
part
again
or
a
simple
web
part-
and
we
have
let's
say
a
description
field-
and
you
know
we
don't
want
to
scream
at
users
and
say:
hey,
you
didn't
enter
a
description,
that's
just
not
cool
right.
We
want
to
make
sure
that
we're
polite
and
we
say
something
like
hey:
please
enter
a
description.
D
That's
way
better,
but
we
also
want
to
be
as
precise
as
possible
right.
We
don't
want
to
give
generic
error
messages
if
we
can,
if
we
know
what's
wrong,
let's
actually
tell
our
users.
So,
for
example,
if
we
say
enter
an
email
address,
can't
just
say
invalid
email,
that's
just
not
cool
right.
So
maybe
what's
better
is
to
say
something
like
this
hey.
Please
enter
an
email
address
with
the
format
name
at
example.com
right.
That
is
better
because
it
makes-
or
it
tells
our
users
exactly
we're
expecting.
D
But
maybe
I
have
another
type
of
message
which
is
like
hey:
please,
don't
use
a
work
or
school
email
address
or
something
like.
Maybe
it's
an
error
message,
that's
going
from
the
back
end
and
maybe
we
can
say
oops.
I
can't
verify
the
email
right
now.
Please
try
again,
so
you
see
here
I'm
trying
to
be
as
precise
as
possible
with
my
error
message,
because
I'm
telling
the
user
exactly
what
is
wrong
and
how
to
correct
the
behavior
or
in
some
cases
you
know.
Please
come
back
later
well,
we'll
try
to
validate
it.
D
D
I
don't
want
it
to
just
like
invalidate
the
error
and
like
the
field
and
then
say
invalid
user
right,
a
better
user
experience
from
this
is
maybe
I
mistyped
it
or
maybe
I
copied
and
pasted
there
was
a
space
or
something
like
that.
So
instead
you
know
keep
that
user
there
and
say
please.
You
know
I
can't
recognize
that
username
or
that
you
know
you
can
be
fun
with
it.
You
can
say:
hey
this
user
exists,
that's
really
scary!
D
D
Your
users
are
not
going
to
know
hey,
I
could
have
sworn
I
entered
or
something
that's
valid
here
right
and
so
please
don't
do
cross
pane
validation
try
to
validate
in
the
spot.
You
want
to
validate
as
soon
as
we
can.
Obviously,
but
probably
the
one
thing
that
we
want
to
make
sure
that
we
do
here
is
we
want
to
make
sure
that
we're
flexible?
D
A
All
right,
thank
you,
hugo,
for
that.
I
want
to
thank
adam
marcin
and
hugo
for
those
great
demos
really
interesting
stuff,
always
love
seeing
all
the
demos.
So
thank
you.
Thank
you.
Thank
you
for
that
and
with
that
I'll
say,
thank
you
to
all
of
you
for
joining
us
here
on
the
call
today.
Recording
will
be
available
in
about
24
hours
on
the
community
youtube
channel,
aka
dot.
Ms
slash
m365
videos
encourage
you
to
check
that
out
catch
up
on
any
calls
you
may
have
missed.
You
can
follow
us
on
twitter.
A
Our
next
aviva
connections
and
spfx
call
will
be
in
two
weeks
on
may
19th.
At
the
same
time,
our
next
general
dev
call
will
be
on
may
12th
at
the
same
time.
That
is
next
thursday
for
a
list
of
all
the
calls
you
can
check
out
ak
dot.
Ms
m365
calls,
and
with
that.
Thank
you.
Thank
you.
Thank
you
very
much.
Everybody
have
a
great
rest
of
your
week
and
I'm
sure
we'll
talk
soon.
Bye,
bye.