►
Description
Summary:
Microsoft 365 PnP Community - SPFx & JS SIG call on August 13th. Three demos delivered: 1) SharePoint Framework - Optimizing Bundles with Code Splitting Chunks, 2) Calling Dynamics 365 CRM APIs from SharePoint, and 3) Photo ID Web Part using Azure Cognitive Services. Open-source project releases include: PnPjs v2.0.8 and PnP Office 365 CLI beta version v2.14. 5 new SPFx sample webparts: Modern Charts, Microsoft Graph People Search, My Sites, Smart Profile Photo Editor, and Avatar Editor, delivered in the last 2 weeks. The host of this call was Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.
Demos:
• SharePoint Framework - Optimizing Bundles with Code Splitting Chunks | David Warner (Catapult Systems) | @DavidWarnerII
• Calling Dynamics 365 CRM APIs from SharePoint | Ramin Ahmadi (Content and Code) | @raminahmadi1986
• Photo ID Web Part using Azure Cognitive Services |Hugo Bernier (Tahoe Ninjas) | @bernierh
Learn more:
• See the full blog post for this call at: http://aka.ms/spdev-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
at
javascript
special
interest
group
by
weekly
sync.
It
is
august
13
2020.
stepping
into
our
agenda.
We
got
a
great
call
for
you
today
latest
updates
on
sharepoint
framework
updates
across
the
patterns
and
practices
program,
offerings
new
community
samples,
and
then
we
got
demos
from
david,
ramen
and
hugo,
so
spfx,
optimizing
with
bundles
and
call-in
dynamics
apis
from
sharepoint,
and
also
the
photo
id
webpart
very
excited
to
see.
All
of
those
especially
mixing
in
the
cognitive
services.
A
Gonna
be
very
some
very
neat
demos
today,
as
always
before
we
get
too
far
into
the
call.
I
always
like
to
mention
opportunities
to
participate
in
the
sharepoint
framework
of
javascript
special
interest
group
encourage
you
to
demo
any
and
all
of
the
great
work
you're
doing
for
your
customers
and
your
companies.
Those
could
be
sharepoint
frameworks,
stuff
web
parts,
application,
customizers,
provisioning,
anything
else.
You
create
client-side,
scripting
related
and
then,
of
course,
anything
involving
any
of
the
at
pnp
offerings
that
could
be
pmpjs.
A
The
cli
reusable
controls
the
omen
controls.
You
know
any
of
those
things
or
all
of
those
things
together
in
a
demo.
I
think
can
be
really
interesting.
We've
seen
some
great
demos
to
encourage
any
and
all
of
you
who
might
be
interested
in
presenting
on
this
call
or
any
of
our
other
community
calls
please
reach
out
to
myself
or
vasa
and
we
will
get
you
booked.
I
always
do
like
to
say
it
might
not
be
the
very
next
call
we
can
get
you
booked
on.
A
Sometimes
we're
booked
out
a
little
bit,
but
we
will
get
you
booked.
We
would
love
to
host
your
demo
and
have
you
on
the
call.
So
please
just
let
us
know,
and
we
will
get
you
a
spot.
The
last
two
ways
or
the
other
two
ways
to
contribute
or
get
involved,
is
to
contribute
on
github
and
that
could
take
a
couple
of
forms,
reporting
issues.
So
many
pull
requests
or
helping
others
with
issues
and
questions
they
might
have.
A
So
if
you
see
a
question
in
the
list-
and
you
might
happen
to
know
the
answer
for
whatever
reason
jump
in
and
answer
that,
question
it'll
really
help
those
folks
get
going
and
you
know
make
them
get
it
or
let
them
get
an
answer
a
little
bit
faster
than
maybe
just
waiting
for
somebody
from
the
core
team
or
one
of
the
the
core
maintainers
to
respond
to
that.
So
everybody
helping
everybody
is
how
we
all
get
better
and
then
finally,
you
can
provide
feedback.
So
how
are
these
calls?
What
are
you
know?
A
What
documentation
can
we
do
better?
A
lot
of
the
times
we
get
comments
about
your
documentation
should
be
better,
and
I
do
not
disagree
with
that,
but
it
really
helps
us
if
you
have
concrete
suggestions
that
we
could
sort
of
say,
okay,
this
page
and
focus
on
something,
because
the
all
up
documentation
should
be
better
is
just
kind
of
it.
We
can't
really
solve
that
as
a
thing.
So,
if
you
have
specific
feedback
around
documentation,
love
to
get
that
love
to
get
those
things
updated.
A
Where
else
can
we
help
and
of
course,
positive
feedback
is
okay
too.
So,
there's
something
that
we're
doing
that
you
really
like.
I
would
love
to
hear
that,
so
maybe
we
could
do
a
little
bit
more
of
it
or
bring
that
a
little
bit
more
prominent
into
the
phone
calls
and
arpeggio
links.
So
dev
youtube
are
the
developer
videos
youtube
link
there,
m365
dev
youtube
will
get
you
all
the
developer,
oriented
videos,
m365
pnp,
dash
videos
gets
you
the
community
video.
So
that
would
be
things
like.
Recording
of
this
call.
A
Our
other
community
calls
things
like
that,
as
well
as
some
more
general
sessions
and
stuff
like
that,
there's
a
great
mix
of
stuff
there
so
awesome
place
to
catch
up
on.
What's
going
on
in
the
community
open
source,
we've
got
a
whole
set
of
organizations
now
github.com
sharepoint,
slash,
pnp,
slash
office,
dev
and
microsoft
graph.
A
All
four
of
those
are
open
to
various
levels
of
feedback
and
pull
request,
submissions
and
working
together.
So
I
know
the
sharepoint
one
is
more
about
the
issues
list:
that's
not
as
much
open
source
but
pnp
office,
dev
and
microsoft.
Graph,
as
far
as
I
know,
are
all
open
to
contribution
and
looking
for
folks
that
are
interested
in
getting
involved.
I
know
the
graph
folks
are
doing
a
lot
of
work
to
sort
of
open
things
up
to
contributors
and
they'd
really
like
to
get
some
more
contributors
involved.
A
So
if
you've
got
interest
in
putting
some
energy
in
over
there,
that,
I
believe
would
be
absolutely
welcome
by
that
team.
Definitely
check
that
out
sample
galleries,
so
lots
of
samples,
so
web
parts,
extensions
list,
formatting
and
then
we've
got
team
samples
now
as
well,
certainly
check
those
out
and
those
samples
use
a
host
of
different
technologies
under
the
hood.
So
you've
got
react,
stuff,
angular,
stuff,
graph,
stuff.
A
You
know
cli
samples,
you
know
that
involved
with
cli,
so
all
kinds
of
great
ways
to
see
how
these
things
work
and
what
we
you
know,
different
capabilities.
You
can
bring
into
your
projects,
see
how
others
have
solved,
maybe
problems
you're
having
today
and
then.
Finally,
the
all
up
link
to
everything,
pnp
akms,
slash,
m365,
p
and
p.
A
If
you
can
only
remember
one
link
or
only
want
to
write
down
one
link,
that
is
the
one
that'll
get
you
to
all
of
these
other
resources
from
that
landing
page
and
then
as
well
stuck
down
here
at
the
bottom,
the
sharepoint
framework,
documentation
aka,
ms
spfx,
will
take
you
to
the
sharepoint
framework
developer,
documentation,
which
is
also
you
can
find
in
the
same
similar
area.
The
rest
of
the
sharepoint
developer,
documentation
around
the
same
spot,
so
stepping
in
now.
So
this
is
the
sharing
is
caring
program.
A
So
these
are
free
sessions
to
help
you
if
you've
never
contributed
to
open
source
before
you're.
Maybe
you
know
looking
for
a
little
bit
of
guidance.
How
do
I
submit
a
pull
request?
What's
an
appropriate
pull
request
things
like
that?
These
are
fantastic
free
sessions
put
on
by
david
warner,
typically
and
hugo.
A
But
these
are
all
skills
you'll
be
able
to
take
and
contribute
to
really
any
project
in
github
aka.ms
sharing
is
caring,
is
a
registration
link
and
as
well
more
information
there
for
folks
that
are
interested-
and
these
are
great
sessions-
encourage
you
to
check
those
out
as
a
way
to
get
started,
contributing
in
terms
of
training.
We
have
a
free
virtual
conference
coming
up
on
the
1st
of
september
and
that's
the
pnp
virtual
conference,
so
8k
dot,
ms
pmp
virtual
conference
for
the
community
by
the
community.
A
That's
pretty
much
put
on
entirely
by
mvps
and
others
from
the
community
really
excited
to
see
that
happen.
A
great
free
conference,
lots
of
fantastic
sessions.
You
can
see
the
agenda
for
all
the
different
sessions
there
at
the
link.
Akms
pnp
virtual
conference
so
certainly
encourage
folks
to
check
that
out
a
great
kickoff
to
what
is
going
to
be,
I
think,
a
large
virtual
conference
season
over
the
next.
You
know
six
to
12
months
now,
sharepoint
framework
updates
from
visa.
B
Yes,
so
nothing
really
super
dramatically
new
stuff
from
our
site
from
the
engineering
side.
Obviously,
just
a
reminder:
sharepoint
framework
1.11
is
out,
and
and
as
part
of
this
announcement,
we
also
enabled
sharepoint
framework
in
the
store,
so
we're
really
welcoming
sharepoint
framework
solutions
and
application
with
parts
and
extensions
in
the
app
source
and
in
the
sharepoint
store,
and
what
it
means
basically,
is
that
you
don't
need
to
really
decide.
B
Are
you
going
to
put
your
solution
to
the
app
source
or
a
sharepoint
store,
or
whatever
it's
actually,
both
so
you're
able
to
offer
your
offerings
inside
there
and
you
you
can
have
a
licensing
model
in
those
in
those
solutions
as
well.
The
web
parts
or
extensions
could
be
dependent
on
another
applications
or
services.
All
of
that
is
available
as
well
and-
and
we
obviously
also
support
sharepoint
framework
for
microsoft
teams
through
this
channel
as
well,
and
we're
looking
into
making
that
better
and
better
in
the
future.
B
Now
the
next
slide
is
more
on
just
a
reminder
and
credits
for
our
partners,
who
are
part
of
the
preview
program.
So
most
of
these
partners
already
have
a
solution
available
in
the
store.
Some
of
them
are
still
finalizing
or
doing
adjustments
on
their
solution
and
they
will
be
available
in
the
store
relatively
fast.
So
thank
you.
B
Lightning
tools,
hyperface
sharepoint
office
office
at
work
and
ringcore
for
making
sure
that
our
validation
process
and
the
store
stores
publishing
process
is
in
place
and
it
works
properly
for
our
partners,
making
sure
that
everybody
know
how
to
get
their
stuff
in
the
store
as
well.
We
obviously
have
guidance
on
publishing,
sharepoint
training
solutions
to
the
store.
B
So
what
are
they
looking
into
doing
so?
Sharepoint
framework
1.12
is
already
in
the
works
where
we
concentrate
really
on
the
team's
integration
and
we're
looking
into
having
also
better
microsoft
graph
apis
in
general
for
sharepoint
site,
more
branding
settings
better
microsoft
teams
embedded
support,
which
means
that
you
can
embed
your
portals
in
the
microsoft
teams.
That's
getting
actually
written
a
really
nice
stage
and
that's
going
to
be
definitely
demonstrated
in
the
upcoming
ignite
conference
as
well.
Sharepoint
framework
store
improvements.
B
We
are
live
now
with
the
store,
but
it's
still
here
and
there
it's
a
classic
experience,
so
we're
modernizing
that
relatively
soon
as
well.
So
it's
getting
a
lot
of
love
from
the
engineering
perspective
and
then
numerous
other
things
as
well,
but
I
think
that's
it
from
my
side,
so
we're
saving
some
time
for
the
other
ones
as
well.
You
know,
if
there's
any
questions
I'll
follow
up
on
the
on
the
chat.
A
All
right,
quick
updates
through
the
pnp
offering
so
we
can
get
to
the
demo,
so
pmp
client
side,
libraries,
pmp.js
2.0.8,
released
on
august
7th.
That's
last
friday
added
some
capabilities
around
extending
a
custom,
sp
http
client,
not
something.
I
think
anybody
would
ever
really
need
to
do.
But
we
added
that
capability.
There
was
a
one
user
had
a
need
that
the
library
needed
a
little
help
there
base
url
for
graph
that
helps
with
government
gcc
clouds
non-clouds
that
use
a
different
url
than
graph.microsoft.com.
A
So
that's
a
capability
added
now
lots
of
documentation,
updates
and
got
some
issues
fixed
as
well.
We
got
the
2.0.9
release
scheduled
for
september,
4th
we're
back
on
our
monthly
cadence
as
before.
Thank
you
to
everybody
that
contributed
for
the
2.8
release
and
all
the
rest
of
the
releases
appreciated
and
look
forward
to
working
with
more
contributors.
As
we
move
forward
great
video
series,
ppjs
videos,
understanding
extension
methods
has
been
released.
A
Hopefully
we'll
have
some
more
to
come
on
that
video
series
soon
help
us
socialize
the
m365pjs
twitter
account
and
then
just
a
final
reminder.
Do
please
all
feedback
to
the
issues
list
that
just
helps
us
track
it.
If
we
get
stuff
in
twitter
or
teams
or
any
of
the
other
dozen
channels,
sometimes
it
just
gets
lost
and
that's
not
on
purpose
or
not,
because
we
don't
care
but
putting
stuff
in
the
issues.
A
List
means
it
can
be
tracked
and
we're
not
going
to
lose
it,
and
we
have
one
spot
to
look
for
all
that
feedback.
So
very
much
appreciate
all
the
feedback,
but
please
do
direct
it
to
the
issues
list
to
ensure
that
we
don't
miss
it
or
forget
about
it
or
something
like
that:
pnp.github.io
pjs
for
the
docs
at
m365
ppjs
on
twitter
and
encourage
everybody
to
check
out
pnpgs.
If
you
haven't
already
pnp
office,
365
cli,
pnp
office,
365
cli,
no
big
updates,
we've
got
the
new
beta
version.
A
214
is
out
with
uninstalling
teams,
apps
and
then
listing
site
groups.
Have
you
tried
the
spfx
doctor
command?
Yet
let
them
let
them
know
and
as
you
can
always
install
the
latest
beta
npm
install
dash
g
at
pmp,
slash
office
365-cli
at
next
more
information
aka.ms0365cli.
If
you're
not
familiar
with
the
cli.
It's
a
great
command
line
tool
to
help
you
manage
and
deploy
your
sharepoint
either
development,
environment
or
production,
environment
or
anything
they
have
graph
commands
in
there
there's
stuff
for
managing
teams.
A
A
They
have
put
a
ton
of
work
into
getting
the
v2
betas
out
there,
so
supporting
react.
16
support
for
the
fluent
ui
sharepoint
online
only
is
a
limitation
for
these,
because
the
react
16
version.
I
believe
that's
why
and
some
other
reasons
perhaps
but
definitely
check
these
out.
This
is
a
great
way
to
drop
functionality
into
your
projects.
Get
a
great
out
of
the
box
look
and
certainly
opportunity
for
folks
looking
to
contribute.
A
I
feel
like
I'm
telling
folks
to
check
things
out
a
lot
today,
but
the
reusable
controls
folks
are
absolutely
looking
for
your
feedback,
especially
around
the
v2
beta.
So
if
you
have
some
time
to
install
these
test,
the
v2
beta,
they
would
love
to
hear
about
any
issues
you're
having
or
ideas
you
have
to
help,
and
you
know
make
those
things
better.
A
The
pmp
community
omen
generator
no
updates
this
week,
but
want
to
remind
folks
the
pnp
generator
is
out
there
and
is
a
great
way
to
jump
start
your
projects.
So
you
have
under
the
hood
the
sharepoint
out
of
the
box.
Sharepoint
framework
out
of
the
box
generator,
but
with
a
few
more
options,
so
you
could
create
different
kinds
of
projects.
A
Angular,
you
can
include
different
things
like
pnpjs
or
the
pmp
controls,
just
as
part
of
the
yeoman
setup
experience,
so
they
are
also
looking
for
some
help
on
reworking
some
stuff,
another
great
place
to
contribute
and
get
involved
if
you're
interested
in
yeoman
and
working
to
make
a
yeoman
generator
creation
generator
work
on
making
it
better
if
you're
interested
in
learning
more
about
that
process
and
what's
gone
into
that
already,
certainly
an
excellent
opportunity
to
get
involved
to
contribute
there
and
then
moving
on
to
the
modern
search,
aka
dot.
Ms
slash
p,
p
search.
A
This
is
all
about
building
modern
search
experience
with
flexible
web
parts.
So
it's
a
set
of
web
parts.
You
can
compose
together
on
a
page
to
get
a
rich
search
experience,
so
the
314.2
is
still
the
latest
release,
we're
only
for
the
three,
the
3.x
branches,
we're
not
looking
for
prs
for
new
features.
Right
now.
Only
bug
fixes
and
there's
work
going
on
behind
the
scenes
for
what
the
v4
is
going
to
look
like.
A
I
don't
have
any
dates
or
details
around
that
at
this
point,
but
that
is
all
coming
so
certainly
check
out
the
modern
search.
It's
again,
a
great
drop-in
solution
build
a
rich
experience.
Composing
those
web
parts
together
and
allow
allow
you
to
build
a
great
search
center
for
your
users
and
then
I
think
hugo.
C
Thank
you.
So
we
have
a
few
new
samples
over
the
last
two
weeks.
First
of
all,
we
don't
have
any
new
extension
samples,
so
I
was
I
was
crying
before
this
call,
but
I'm
sure
that
people
are
are
going
to
be
submitting
new
samples
for
xpfx
extensions
on
the
spfx
web
parts.
On
the
other
hand,
we
do
have
some
changes.
Peter
paul
kirschner,
fixed
a
little
bug
with
managed
metadata
with
the
modern
charts
and
modern
charts
were
originally
created
by
jeremy
coleman,
but
peter
paul
kirschner
made
some
updates
for
us.
C
C
My
sites,
which
lists
my
sites-
and
we
have
a
web
part
that
I'll
be
demoing
today,
which
is
a
smart
profile,
photo
editor
which
will
use
azure
cognitive
services
to
make
sure
that
whatever
pictures
people
are
submitting
for
their
profile
picture
are
actually
kosher
and
in
the
domain
of
editing
profile
pictures
we
have
a
new
avatar
editor
by
kunsthangani,
which
allows
you
to
build
an
avatar.
It's
very
fun
to
use.
I
I
created
many
avatars
for
me,
but
that's
all
we
have
for
samples.
C
A
D
All
that
about
david,
let's
find
out
together,
take
it
away
all
right,
excellent,
so
for
those
that
are
new
in
the
community,
this
is
my
contact.
Information.
Don't
hesitate
to
reach
out
to
me
if
you'd
like
to
collaborate
on
anything
today
we
are
going
to
talk
about
the
spfx
optimized
package
bundling
and
controlling
the
javascript
chunk
of
names
that
come
with
that.
So
what
we're
going
to
cover
is
what
is
a
javascript
chunk
and
for
those
that
are
not
familiar,
perhaps
with
the
overview
of
the
basic
package.
D
Bundling
we'll
have
an
overview
on
that,
and
then
we
have
a
demo
of
how
you
can
customize
those
chunk
names
and
then
we'll
talk
about
the
benefits
all
right.
So
what
is
a
javascript
chunk
now,
if
you're
old,
like
I
am,
and
a
fan
of
the
goonies,
you
may
be
thinking
of
captain
chunk
from
goonies
right,
but
that
is
not.
We
love
chunk
there,
but
we
love
even
more
javascript
chunks.
Javascript
chunks
are
the
javascript.
D
That's
output
from
your
spfx
control,
whether
it's
an
extension
or
a
web
part,
and
so
when
you
generate
them,
you
get
a
javascript
or
one
or
more
javascript
files
that
will
run.
Obviously
your
web
parts,
so
the
default
package,
bundling
you
can
see
here
on
the
screen
is
when
you
include
and
import
things
such
as
something
like
we'll
see
in
the
demo,
such
as
jquery
or
moment,
both
very
basic
libraries
and-
and
there
are
better
libraries
that
we're
going
to
use
or
can
use,
but
we're
going
to
go
ahead
and
demo.
D
D
So,
as
we
see
here,
this
is
an
example
of
importing
a
jquery,
but
in
our
case
for
this
particular
sample,
we
don't
need
jquery
until
it's
actually
called
upon
by
a
button
click.
So
we
can
see
that
it's
converted
out
to
a
separate
file
and
now
that
100k
original
file
payload
on
page
load
is
now
only
14
kilobytes.
So
we
can
see
that
the
load
of
the
original
file
is
smaller,
so
we're
going
to
have
a
better
execution
and
load
time
and
it
reduces
that
initial
load
of
the
solution.
D
I've
done
the
video
you
can
see
that
there
at
the
at
the
url,
if
you'd
like.
So,
let's
look
at
a
demo,
we'll
examine
the
default
package
chunk
names.
What
happens
now
we'll
modify
them
as
well
to
be
asynchronously
imported.
So
if
you're
not
familiar
asynchronously,
it
just
simply
means
that
we
wanted
to
go
call
in
those
libraries
at
a
time
later
on
demand,
while
other
things
on
our
solution
are
processing.
D
So
essentially
we
want
it
to
occur
in
the
background
kind
of
when
we
click
that
button
and
then
we're
going
to
see
how
we
can
combine
multiple
async
imports
into
a
single
chunk
bundle
all
right.
So,
let's
dive
in
so
here.
Let
me
set
the
context
for
what
you
see
on
your
screen.
I've
got
an
out
of
the
box
web
part
here
on
the
left
in
vs
code,
my
command
prompt
to
that
exact
demo
web
part
on
the
right
and
we're
looking
at
the
actual
distribution
files
of
our
javascript
chunks.
D
Now,
what
we're
looking
at
in
this
case
is
a
pre-bundled
version
of
if
we
had
simply
done
this,
if
we
just
simply
imported
moment
or
jquery
and
then
used
it,
and
we
can
see
I'm
using
it
here
when
we
click
a
button,
load,
async,
bundles
and
we're
just
simply
executing
on
moment
and
using
jquery
to
do
a
very
simple
content
injection
right.
But
what
happens?
Is
we
get
this
initial
payload
on
the
load
of
the
page
that
we
don't
need?
We
don't
need
jquery
and
moment
at
that
time,
so
we're
going
to
close
this.
D
This
is
just
a
glimpse:
we're
going
to
open
the
real
file
and
we're
going
to
see
what
we're
doing
here
with
optimize
package,
bundling
we're
able
to
actually
dynamically
and
on
demand
pull
in
our
libraries.
Now
I've
put
them
into
a
separate
file
here
for
jquery
and
moment,
and
you
don't
have
to
do
that
right.
I
do
that
because
I
like
the
I
like
the
organization
of
it,
the
separation-
I
can
add
additional
functional
methods
here.
D
If
I
need
to
do
more
than
just
simply
import
and
return
jquery,
but
it's
functional
for
me
and
that's
kind
of
how
I
like
it,
so
we're
able
to
call
them
in
on
demand.
So
what?
What
does
that
look
like,
though,
when
I
bundle
it?
So
let
me
just
delete
these,
so
we
don't
get
multiple
bundles
and
we're
going
to
go
ahead
and
execute
a
gold
bundle
ship
based
on
our
values
that
are
saved
right
here
now
in
that
web
packs.
D
What
we're
going
to
see
is
something
similar
to
what
we
saw
in
the
slides,
we're
going
to
see
that
all
of
our
bundles
are
now
chunked
out
into
separate
files.
Our
original
payload
right
here
is
down
to
only
15k
and
then
just
because
we
know
jquery
is
bigger
than
that.
It's
87k,
but
moment
is
huge.
Very
big
library
is
259k,
but
if
you
look
at
the
names
of
these
files,
well,
it's
a
little
confusing
right.
It
adds
somewhat
of
a
grid
to
them
and
just
prefaces
them
with
a
name.
D
So
if
you
were
doing
debugging,
if
you
were
doing
telemetry,
checking
and
reporting,
you
wouldn't
really
know
which
is
which
it'd
be
hard
to
know,
there's
a
better
way
we
can
use.
What's
called
web
pack
chunk
names
to
identify
exactly
what
these
files
are
by
their
file
name.
So
what
I'm
going
to
do
in
our
await
import
right
here
is
I'm
going
to
go
ahead
and
paste
in
a
very
simple
what
looks
like
a
comment?
D
This
is
used
by
webpack,
but
it's
actually
an
instruction,
and
it's
saying
instead
of
just
giving
this
a
default
name.
I
want
you
to
give
this
webpack
chunk,
name
something
that
includes
import
jquery.
So
now
we'll
go
ahead
and
do
that
as
well
on
our
moment,
we'll
save
that
and
we'll
rebundle,
let's
delete
our
files
and
see
what
the
result
is,
what
the
result
will
be.
I
can
give
you
a
preview.
Is
it
will
include
the
name
that
we
just
gave
it
right,
so
we're
going
to
see
when
it's
finished
packing
and
bundling
right
there.
D
We
now
see
our
files
have
our
specific
names
in
them.
We
know
that
this
is
moment
right
because
the
size-
and
we
see
that
by
the
name
the
same
with
jquery
and
87k,
pretty
cool.
This
helps
with
telemetry.
It
helps
with
debugging.
We
know.
What's
loaded,
you
see
these
other
ones
here,
because
those
are
simply
the
additional
files
that
type
your
files
that
do
actually
be
importation.
So
don't
need
to
worry
too
much
about
those,
but
these
are
the
primary
things
right
now
you
may
be
saying
well
hold
on
a
second.
D
What,
if
I'm
only
using
those
together
in
this
case,
I
am
only
using
moment
and
jquery
together
for
my
particular
use
case,
so
I
don't
necessarily
want
them
to
always
be
two
separate
files.
Is
there
any
way
that
we
can
have
them
optimized,
bundled
right
so
that
they
can
be
pulled
in
asynchronously,
but
also
be
in
the
same
name,
meaning
the
same
file?
Yes,
so
all
we
do
again
very
simple
change.
D
Is
we
change
our
chunk
name
to
the
same
thing,
so
I'm
going
to
go
ahead
and
just
change
that
name
here
to
import
jquery
and
moment.
Now
I'm
going
to
do
that
for
both
of
them,
so
they
both
now
are
referencing
the
same
name:
let's
delete
our
bundles
and
re-run,
the
gulp
bundle,
and
when
this
is
done,
what
we'll
see
is
a
combined
chunk
file
for
us
that
uses
the
same
name?
D
So
when
the
webpack
is
done
here,
we
see
the
bundling
is
done,
and
now
we
see
one
single
file
that
includes
both
of
our
libraries
together
and
we
know
that
by
way
of
the
name.
So
what
does
that
functionally?
Look
like
in
a
real
world
scenario?
Well,
let's
go
ahead
and
jump
over
to
just
this
quick
web
part.
This
is
exactly
the
same
web
part
very
simple,
we'll
go
ahead
and
refresh
and
I'm
going
to
go
ahead
and
bring
up
the
network,
and
we
know
that
it
has
vendors
in
it
right.
D
So
I'm
just
going
to
filter
here
to
vendors,
I'm
going
to
eliminate
now
what
happens?
Is
I'm
going
to
go
ahead
and
load?
My
bundles
when
I
click
this
button
and
it's
going
to
display
the
current
date?
So
we
know
it's
working,
so
I
click
that
we
see
the
current
date
and
there
is
our
bundle
having
been
imported
asynchronously
at
the
time.
We
need
it
as
opposed
to
just
on
demand
or
on
load,
even
if
we
don't
necessarily
need
it
immediately.
D
So
let
me
go
back
to
our
slides
and
what
are
the
benefits
for
us?
Improved
debugging
makes
it
easier
to
find
out
exactly
what
files
we're
working
with
right,
because,
instead
of
seeing
those
random
names,
we're
able
to
see
custom
names
that
we're
then
able
to
key
on
and
identify
and
know
exactly
what's
going
on,
improve
telemetry
right,
so
you
can
use
custom
names,
you
can
build
reports
on
that,
it
helps
identify,
what's
being
used,
etc
and
of
course
you
can
use
these
in
library
components.
D
As
you
know,
I'm
a
big
fan
of
library
components
here
are
some
useful
links,
I'll
paste
them
in
the
chat
window
after
the
tutorial
or
after
the
demo,
but
there's
a
microsoft
documentation
on
dynamic
loading,
a
couple
of
video
tutorials
and
then
we
do
have
a
sample
in
the
pnp
repo
that
does
show
how
to
do
and
take
advantage
of
the
optimized
dynamic,
bundling
and
including
those
webpack
chunk.
Names
are
as
simple
as
the
small
little
comment
that
we
saw
inserted
all
right.
A
E
It
away
yeah,
okay,
hello,
everyone.
My
name
is
ramin
ahmadi,
I'm
a
sharepoint
developer
at
continent
code,
and
you
can
find
my
contact
information
from
here
and
today,
I'm
going
to
show
you
how
you
can
call
dynamics,
365
crm,
apis
from
a
sharepoint
framework
web
part.
So
let's
jump
to
the
demo
without
wasting
time,
so
the
demo
itself
is
really
simple.
I
used
and
design
to
build
this
ui.
It's
a
react
library
which
has
plenty
of
ui
components
you
can
explore
from
its
website.
E
E
You
can
see
the
related
contacts
to
to
each
account
and
we
have
a
search
box
at
the
top
that
you
can
search
and
it
returns
data
back
from
dynamics
crm.
So
this
is
the
web
part.
It's
really
simple!
So
in
terms
of
the
properties,
it
has
three
properties.
One
is
the
crm
instance
url
url,
which
we
can
define
here
and
the
app
registration
and
azure
function,
url,
which
I'm
gonna
talk
about.
E
E
So
this
is
the
accounts.
Components
which
using
and
design
as
I
mentioned,
is
a
table
divider
and
search
components
and
by
the
way,
I'm
using
react
hooks.
I
think
we're
getting
used
to
this
approach
and
it's
a
really
like
a
simple
way
of
building
components
and
is
more
readable
than
the
classic
way
of
building
components.
E
B
E
Remember
a
few
weeks
ago
I
explained
this
for
building
a
yammer
part,
so
in
this
case
you
can
get
access
to
another
resource,
and
when
you
get
the
token
you
can
use
it
to
call
the
api
that
you
can
find
here.
For
example,
we
are
getting
contacts
by
a
filter
filter
that
is
a
account
id
and
also
set
the
authorization
header.
With
the
token
we
got
from
the
aed
token
provider
and
when
user
try
to
search,
you
also
get
the
accounts
back
from
the
dynamics
crm
by
filtering.
E
The
name
bear
in
mind
that
you
need
also
to
add
the
permissions
to
the
sharepoint
online
client
accessibility,
which
is
dynamic
crm,
and
it
has
only
one
permission
available.
Is
it
is
a
user
impersonation?
So
this
is.
This
is
one
way
to
get
the
data
back
or
calling
dynamics
crm,
but
recently
we
had
a
project.
That's
client
asked
us
to
develop
a
azure
function
for
them
instead
of
using
this
approach.
So,
as
you
can
see,
application
permission
is
permissions
are
not
available
here.
So
how
we
can?
E
E
E
So
we
know
that
the
user
using
our
web
part
has
already
has
has
been
already
authenticated
and
also
we
know
that
when
we
use
adhd
client
to
access
azure
id
protected
apis
like
azure
functions,
it
attaches
very
jwt
token
to
the
ongoing
request.
It
means
that
internally,
the
aad
http
client
implements
the
azure
adr's
flow,
using
awjs
to
obtain
a
valid
access
token.
So
here
we
have
the
access
token
to
get
access
to
the
azure
function.
E
So
from
here
we
need
to
authenticate
to
microsoft,
identity
platform,
token
token,
insurance,
endpoint
to
request
another
token
to
get
access
to
dynamics,
365
crm.
It
validates
the
credentials
along
with
the
azure
function
and
issues.
The
access
token
for
dynamic
crm
and
after
obtaining
the
access
token,
we
can
set
it
in
the
authorization
header
of
the
request.
And
finally,
when
we
get
the
result
back,
we
can
pass
it
over
to
the
spf
extra
part
to
display
to
the
user.
E
E
As
you
can
see
here,
we
are
calling
that
azure
function
with
with
the
parameter,
which
is
instance
url.
It
is
a
dynamic
crm
instance
url,
so
it's
passing
them
passing
the
access
token
to
the
azure
function
and
it
does
it
behind
the
scene.
So
we
don't
need
to
do
anything
about
the
access
token,
and
if
we
go
to
the
azure
function
code.
E
We
have
a
function.
We
have
a
function
here,
I'm
using
microsoft.com
to
get
the
token,
but
by
building
a
client
application
using
client
id
client,
secret
and
tenant
id,
and
also
the
default
scope,
which
is
a
built
in
scope
for
every
application
that
refers
to
to
the
static
list
of
permissions
configured
on
the
application.
E
Registration,
as
you
saw
in
this,
only
has
a
one
permission,
but
it
can
be
multiple
permissions
and
it
returns
all
of
them
and
by
calling
acquire
token
on
behalf
of
we
can
pass
that
jw
token,
which
is
a
user
session
and
get
the
access
token.
We
need
to
get
access
to
dynamics
crm
and
then
we
can
set
that
token
to
the
authorization
header
and
then
we
can
call
the
caller
api
and
get,
and
if
it
returns
any
data
back,
we
can
return
it
to
the.
B
E
The
web
part
and
the
the
azure
function
itself
is
secured
with
azure
active
directory.
So
this
is
a.
This
is
a
secure,
azure
function
and
we
also
add
a
dynamics
crm
in
into
the
permissions
for
that.
For
for
this
azure
function,
which
you
you
need
to
do
that,
otherwise
it's
gonna
throw
you
to
read
an
error
for
getting
access
to
that
resource.
B
E
B
E
A
C
C
This
is
my
mug
shot
and
I
can
be
reached
at
bernieh
on
twitter
and
taiwan
ninjas
that
blog
I'm
an
mvp
and
a
proud
member
of
the
pmp
team,
and
today
I
will
be
talking
about
a
web
part
that
I
originally
built
without
spf
hex.
It
was
a
web
part
that
I
created
for
a
college
that
wanted
to
allow
students
to
upload
their
own
photo
id.
Now.
The
problem
is
at
that
age.
Those
students
are
not
always
making
the
best
decisions.
That's
why
we
have
to
put
messages
like
do
not
eat
laundry
detergent.
C
C
C
So
we
tried
to
do
something
that
was
foolproof,
but
it
would
require
students
to
be
able
to
upload
passport
style
pictures
that
would
be
a
one-to-one
ratio
like
a
square
picture,
only
one
person
per
picture
and
it
should
be
the
student's
own
picture,
not
their
children
or
pet
and
trust
me.
You
wouldn't
believe
the
pictures
we
got
no
avatars,
no
drawing
no
racy
images.
Yes,
we
did
get
racy
and
adult
images,
no
hats,
but
religious
headwear
should
be
permitted
and
no
sunglasses.
C
C
C
So
if
you
go
to
the
api,
you
can
actually
make
post
or
get
request
on
different
things
and
it'll
document
everything
you
need
to
do
so
you
pick
a
location
and
then
you
specify
the
features
you
want
to
identify.
So
we
want
adult.
We
want
categories,
we
want
description
faces
and
things
like
that
and
then
you
can
also
detect
celebrities
and
one
of
the
reason
why
it
detects
celebrities
is
because
we
used
to
have
jokers
that
would
submit
pictures
of
celebrities,
pretending
that
it
was
them.
C
And
then,
when
you
submit
the
picture,
you
can
determine
whether
it's
a
url
to
a
picture,
a
binary
stream
or
multiform
data,
which
is
what
I'll
be
using
and
the
response
you
get
looks
a
little
something
like
this,
where
you
get
a
json
structure
with
it's,
never
a
hundred
percent
right,
we're
using
machine
learning
here.
So
it's
never
100,
but
it's
definitely
a
high
confidence,
99
confidence
that
these
things
are.
You
know
not
racy,
for
example,
and
things
like
that.
C
So
what
you
need
to
do
to
get
this
going
is
you
can
go
to
your
azure
and
you
can
create
a
new
ai
cognitive
service
resource
in
azure
and
it'll,
create
a
key
and
an
end
point
for
you.
I'm
not
going
to
share
my
key
with
you,
but
that's
the
problem
right.
So
if
you
have
an
api
key
and
it's
supposed
to
be
secret,
you
probably
don't
want
to
allow
your
users
to
or
ask
your
users
when
they
configure
the
web
part
to
enter
the
key.
C
At
the
same
time,
you
probably
don't
want
to
hard
code
those
values
in
your
web
part,
and
this
is
where
there's
a
really
cool
feature.
I
don't
think
many
people
know
about
is
the
sharepoint
online
tenant
properties
and
what
it
allows
you
to
do.
It
allows
you
to
call
a
rest
api
from
within
your
web
part
to
retrieve
properties
that
you
want
to
store
centrally
at
your
tenant
level,
and
there
are
no
rest
apis
to
that.
I
know
of
to
set
the
the
properties,
but
you
can
actually
use
things
like
pnp,
powershell
or
office
365.
C
To
do
this,
so
you
would
call
with
office
365
you
called
spo
storage
entity,
and
then
you
would
give
it
a
unique
name,
a
unique
value,
for
example
I'll.
I
use
the
very
original
azure
key
and
azure
endpoint
and
then,
when
I
call
the
rest
api
from
within
the
web
part,
I
get
the
value.
So
this
is
a
great
way
to
allow
me
to
deploy
web
parts
that
have
secret
apis
or
secret
keys
or
secret
values
that
I
don't
want
people
to
see
for
the
purpose
of
the
demo.
C
However,
I
did
customize
the
web
part
so
that
when,
if
you
don't
specify
the
the
storage
entity,
it
will
automatically
show
the
prompt
the
user
to
enter
this.
So,
let's
see
all
right.
So
this
is
my
web
part
and
as
soon
as
you
do
this,
so
you
can
see
here
because
I
didn't
use
tenant
properties,
I
have
to
configure
it
so
to
configure
it
here.
C
I
have
to
provide
again
my
key,
which
I
will
copy
and
my
endpoint
and
by
the
way,
if
anybody
is
displaying
like
asking
questions,
I
can't
see
the
the
chat
window.
I
just
want
to
point
out
here.
This
element
here
is
you'll
you'll
notice,
it's
actually
rich
decks
that
I've
displayed
inside
of
the
property
pane,
and
this
is
usually
not
trivial
to
do,
but
there's
a
new
pnp,
reusable
property,
pane
control,
that's
currently
in
beta
that
allows
you
to
use
things
like
markdown
to
actually
create
text.
C
This
is
a
great
way
to
provide
guidance
for
your
users
when
you
want
or
help
or
support
information.
When
you
want
people
to
do
this
and
then
at
the
bottom
here
I
can
say
I
want
portrait
photos.
I
don't
want
to
allow
clip
art,
racy
images,
adult
images
and
so
on
and
so
forth
and
I'll
come
back
to
the
forbidden
tags.
If
I
have
time
so
now,
all
I
should
be
able
to
do
here
is:
I
should
be
able
to
just.
B
C
Drag
and
drop
click
or
things
like.
So
if
I
pick,
for
example,
this
picture
here,
which
is
a
real
passport
picture
and
if
I
I
can
just
kind
of
crop
it,
when
I
click
submit,
you'll,
see
the
gratuitous
animation
and
then
it
says
yes,
this
is
a
picture
and
I'll
click
update
later,
let's
try
a
different
picture.
C
So
if
I
use
let's
say
this
picture
here,
this
is
actually
not
a
passport
picture.
This
is
not
a
portrait.
This
is
kind
of
a
just
a
mug
shot
right.
So
let's
see
vesa,
I'm
sorry,
but
it
hasn't
been
ken
kind
to
you.
It
says
you're
53.,
just
for
fun.
Let's
look
at
the
slightly
younger
picture
here
again.
This
should
not
get
approved,
but
let's
see
oh,
it
didn't
like
that.
C
C
Now
I
know
everybody's
looking
forward
for
me
to
show
a
an
adult
picture.
I'm
not
going
to
show
an
adult
picture.
I
will,
however,
show
a
picture
of
my
future
wife
and
if
I
actually
take
this
picture
here,
which
is
as
as
racy
as
as
I
could
do
in
this
call-
and
I
submit
that
it
should
automatically
detect
that
this
is
a
racy
picture.
C
Now
all
the
call
information
that
we're
getting
behind
the
scene,
all
the
information
I'm
in
the
web
part
sample,
I'm
actually
outputting
the
return
information
in
the
console.
So,
if
you're
ever
interested
to
see
what
kind
of
analysis
we're
getting.
This
is
all
the
information
here
so
see
here.
It's
actually
saying.
Yes,
it
is
racy
content
and
there's
a
lot
of
information
so.
E
C
Take
a
real
picture
of
me
instead,
just
to
show
you
know
that
this
thing
works,
and
I
just
go
like
this.
I
submit
it'll
actually
say
hey.
This
is
not
a
this
is
not
a
portrait,
it'll
also
say:
hey.
Did
anyone
ever
tell
you
how
much
you
look
like
daniel
craig?
It's
I
get
that
all
the
time
so
I'll
just
change
this
to
be
more
like
a
passport
photo,
and
I
can
just
click
and
update
right.
C
So
this
is
the
same
web
part
now
I
could
actually
use
the
camera
if
I
wanted
to,
and
this
works
on
mobile
devices
as
well,
hello,
everyone,
smile
yeah,
they
say
the
camera
at
that's
ten
pounds,
so
I'm
probably
overlaying
about
three
cameras.
So
I'm
showing
here
my
profile
picture-
and
I
guess
I
should
have
showed
you
when
I
when
I
click
on
update
my
profile
picture-
should
always
update
here.
C
There
you
go
so
we've
got
a
few
more
minutes.
So
let
me
get
to
the
code
to
show
you
the
code
unless
there's
a
specific
picture
that
anyone
wants
to
see.
But
let's
do
this
so
the
first
thing
we
do
is
we
in
the
web
part,
we
have
a
storage
entity
service
that
I've
created
which
just
gets
the
api
calls
the
api
that
we
talked
about
and
we
use
both
the
the
storage
key
as
the
name.
C
So
that's
the
api
key
and
the
api
key
and
the
api
endpoint,
and
then
I
just
do
a
regular
http
response
or
request
to
get
the
information
and
then
whatever
value
is
coming
from
the
json
structure,
I'm
just
looking
at
the
dot
value
and
I'm
returning
that
back
to
my
entity
service
in
my
analysis,
services,
yes
I'll,
actually
verify
multiple
people
as
well.
In
my
analysis,
services.
C
C
Now
the
web
part
has
this
little
bit
here
at
the
bottom.
That
shows
you
whether
your
web
part
meets
the
criteria
or
not.
This
is
done
in
a
web
in
a
element
called
analysis.
Dialog
content
is
derived
from
the
spfx
dialog,
so
it
allows
me
to
overlay
everything
on
top
of
the
page
and
block
everything
else
on
the
page.
C
So
what
I
do
here
is,
I
just
call
my
web
service
or
my
service,
which
calls
the
cognitive
services
and
then
I
do
some
analysis,
and
this
is
kind
of
embarrassing.
How
I
do
this,
but
I
just
go
through
every
single
connection.
You
know
like
let's
look
at
the
categories.
Is
this
a
valid
portrait?
Is
there
only
one
person
and
so
on
and
so
forth,
and
then
I
use
state
to
actually
store
the
information
so
that
the
screen
refreshes
automatically
and
then
I'm
using
some
very
simple
react:
rendering
to
render
information
like?
B
C
I
created
the
custom
checklist
control
because
I
wanted
to
be
able
to.
I
was
too
lazy
to
kind
of
rinse
and
repeat
every
time
that
I
wanted
to
say.
Is
it
yes
or
no?
So
I
just
created
an
analysis
checklist
component
that
I
use
to
display
the
list
and
then,
finally,
when
I
want
to
update
the
photo,
I
have
two
methods
in
there,
one
that
uses
the
pmpgs
one
that
uses
the
graph.
C
I
was
honestly
having
some
problems
with
the
pmpgs,
if
only
I
knew
people
on
the
call
that
could
help
me
with
this,
but
I
I
just
called
the
the
graph
using
the
regular
graph
api
method
and
I'll
show
you
the
page
for
that.
I'm
not
actually
doing
so
well
with
handling
the
error
right
now.
I
just
write
that
to
the
console.
C
I
should
probably
put
a
nice
message
or
not
so
nice
message
when
there's
an
error,
but
you
get
the
point
and
then
finally
the
part
that
was
telling
you
the
rich
text
in
the
I
have
hyperlinks
here
and
bold
in
the
property
pane
and
if
you've
used
property
paints.
It's
not
always
easy
to
do
that.
So
we
are
using
the
brand
new
property
pane,
markdown
content
control
that
allows
you
to
pass
markdown,
and
so
all
I
can
do
here.
C
C
C
You
can
find
the
code
at
the
url
and
you
can
reach
me
at
this.
My
blog
and
my
twitter
account.
Let's
go
back
to
the
cool
web
part
for
a
second,
and
so
we
asked
someone
asked:
can
it
detect
multiple
pictures?
So
this
is
a
poster
from
a
session
that
david
and
I
are
going
to
be
doing
at
the
pnp
conference.
C
C
No,
it
didn't
work,
oh
well.
Okay,
let
me
just
prove
that
this
works.
Let
me
just
show
this
really
picture
of
awesome.
Cool.
Looking
people
here
and
submit
you
can
see.
Bert
is
not
too
impressed
here
that
he's
on
the
picture.
And
yes,
it
detects
four
pictures
and
says
you
shouldn't
do
that,
and
then
we
had
a
question
to
ask
a
picture
parker.
I
don't
have
a
picture
of
parker
but
hey.
A
Hugo,
let's
this
has
been
a
fantastic
demo,
but
we
need
a
couple
minutes
here
to
close
out
the
call
and
do
the
picture
so
awesome
demo.
Very
much
appreciate
it.
Thank
you.
Thank
you.
Thank
you
very
great
to
see
that
integration
with
cognitive
services
is
really
exciting
to
see
love,
seeing
that.
So
thank
you
to
hugo
for
the
demo
there.
Let
me
bounce
over
to
screen
number
two
and
thank
you
as
well
to
ramen
and
david.
A
So
three
great
demos
again
very
much
appreciate
those
demos
from
folks
take
your
time.
If
you
would
like
to
do
a
demo
on
this
call,
please
do
reach
out
to
us.
We
would
love
to
host
you
on
the
call
for
the
demo.
We
don't
really
have
any
time
for
q
and
a
today,
unfortunately,
recording
will
be
available
in
about
24
hours
on
sharepoint
community
youtube
channel.
Follow
us
on
twitter.
Next
spfx
call
will
be
in
two
thursdays
on
august
27th.
A
The
next
general
dev
call
is
next
thursday
on
august
20th
and
our
september
monthly
community
call
is
september
8th,
so
encourage
everybody
to
attend
all
or
any
of
those
that
you
can.
If
you
can't
make
it,
of
course,
the
recordings
will
be
available.
A
final
reminder
for
folks
that
mention
things
like
they're
having
an
issue
with
pmpjs
or
any
of
the
other
libraries
would
love
to
hear
about
those
issues
in
the
issues
list.
Please
do
report
those
we'd
love
to
get
those
fixed
for
you.