►
Description
SharePoint PnP Community - SPFx & JS SIG call on July 2. Three demos delivered: 1) Building modern page hierarchy with SharePoint Framework, 2) Building an application customizer to inform end users on alerts within date period, and 3) Upgrading SharePoint Framework projects using Office 365 CLI CodeTour. SPFx Dev Docs refreshed and Office 365 CLI now natively accessible from Azure Cloud Shell. Latest releases include PnP SPFx Generator update v1.14.1 and PnP Modern Search v4.0 preview. 9 new/updated samples delivered. The host of this call was Vesa Juvonen (Microsoft) @vesajuvonen. Q&A takes place in chat throughout the call.
Demos:
• Building modern page hierarchy presentation with SharePoint Framework | Bo George (ThreeWill) | @bo_george
• Building an application customizer to inform end users on alerts within date period | Sudharsan Kesavanarayanan | @sudharsank
• Upgrading SharePoint Framework projects using Office 365 CLI CodeTour upgrade | Hugo Bernier | @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 SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos
A
Welcome
everybody:
this
is
chiffon
framework
and
JavaScript
special
interest
group.
It
is
the
bi-weekly
sink.
It
is
July
2nd
2020
in
us
scientists
in
the
us-based
allocations
and
offices.
I
know
that
this
day
is
already
starting
to
be
slightly
slower,
because
tomorrow
is
a
public
holiday
in
the
US,
but
also
not
in
the
rest
of
the
world.
So
and
why
is
it
the
public
holiday
in
u.s.
tomorrow?
Well,
it's
Independence
Day
on
4th
of
July,
because
it's
Saturday
then,
and
this
Friday
is
off
as
well,
so
on
today's
agenda.
A
So
basically,
we
booked
kind
of
a
15
minutes
for
the
intro
and
slides
and
then
15
15
15
for
the
demos
so
really
cool
stuff
coming
today.
If
it
might
be
that
we'll
adjust
the
timing,
some
demo
site,
let's
see
how
to
timing
actually
good
but
we'll
end
on
the
hour.
Now,
let's
actually
move
into
the
slide.
So
quick
recap:
you
have
opportunities
to
contribute
and
participate
on
the
BMPs,
VFX
javascript
special
interest
group
or
in
our
community.
A
You
can
always
volunteer
to
do
a
live
demo
in
this
community
cause,
it's
just
a
matter
of
reaching
out
to
me
or
some
of
the
other
PMB
initiative,
TMP
team
members.
So
basically,
then
we'll
schedule
you
a
spot,
so
it
can
be
related
or
sharepoint
framework
or
it
can
be
related
on,
for
example,
on
the
PM
beaches
to
key
point
here.
Is
that
not
a
product
demos,
but
technology,
demos
and
samples
it
doesn't
have
to
be
open
source
we've
been
having
really
cool
demos
which
are
not
open
source,
but
it's
all
about
learning
from
others.
A
By
by
seeing
your
stuff
life
on
the
community
course,
you
can
contribute
in
kids
hump.
We
have
multiple
different,
different
key
top
locations
repositories
where
you
can
actually
start
actively
contributing
workers
here,
some
of
them
and
those
projects
are
slightly
later
on
the
slides,
but
really
reporting
issues
submitting
for
requests
and
helping
with
issues
and
pull
requests
as
well.
So
that's
more
than
welcome
from
your
sign
and
the
most
important
part
always
give
us
feedback.
Give
us
feedback,
give
us
feedback,
and
it's
the
core
content
interesting.
A
What
else
could
we
be
actually
providing
documentation
needs
related
on
anything
on
my
staff
365
platform,
where
we
can
help
you
to
be
more
successful.
That's
the
information.
What
we're
interested
and-
and
the
last
thing
obviously,
is
that
positive
feedback
is
always
cool
as
well
so
remember
to
in
general
in
life
to
always
to
provide
positive
feedback
as
well.
It's
not
about
always
for
the
improvements
or
something
is
missing
and
calling
them
out.
Now
a
quick
recap
on
the
assets.
We
have,
the
micro
365
developer,
videos
channel.
A
We
have
the
micro
street
races,
our
shipment
community,
video
channels.
We
have
the
open
source
assets,
we
have
sample
galleries
and
one
URL,
which
is
the
easy
location
to
get
access
to,
and
all
of
this
stuff
is
a
gameis
entries
is
5,
P
and
B.
If
you're
looking
in
the
shipment
framework
documentation,
that's
in
a
game
as
SPF
X
and
the
easy
access
point,
and
there
follow
us
on
what's
happening
at
at
Microsoft,
resist
5kf
or
at
in
365,
B
and
P.
A
Now,
one
of
the
things
one
of
the
most
successful
actually
initiatives
which
were
executing
under
B
&
B
is
the
BMP
sharing
is
caring
initiative,
and
this
is
really
for
you,
if
you're
not
familiar
enough
on
getting
started
on
using
github
contributing
or
keeps
up
contributing
on
documentation,
contributing
on
samples
and
that
that's
where
the
BMP
sharing
is
caring.
Initiative
feel
healthier,
so
David
born
and
Hugo
Bernier
are
hosting
these
setups
and
hosting
these
training
sessions,
where
they
will
help
you
one
by
one
or
all
of
the
attendees
to
be
successful
in
github.
A
So
it
doesn't
matter
if
you
actually
contribute
planning
to
contributing
the
industry's
it's
5
p.m.
P
assets
or
some
other
assets.
These
sessions
are
open
for
anybody
in
the
community
to
join,
to
understand
how
to
get
started
on
the
own,
contributing
so
really
really
cool
stuff
and
we're
getting
a
lot
of
lot
of
positive
feedback
on
the
on
these
sessions
and
like
we
can
see
from
Oscar
on
the
chat
as
well.
So
thank
you.
Brad
one.
A
The
following
sessions
are
first-time
contributor
sessions
in
24th
and
27th
of
july,
and
then
community
dog
sessions
in
july,
31st
and
august
3rd.
A
chemist
sharing
is
caring.
It's
the
location
where
you
can
get
more
information
now
quick
recap
on
on
SharePoint
framework,
just
to
recap
on
on
where
we
are
and
I
intentionally.
We
are
not
showing
exact
numbers,
but
this
is
basically
the
lifetime
growth
of
SharePoint
framework
that
we're
trop
earlier
this
year
is
related
on
data
click
which
we
had
in
our
telemetry
slightly
awkward
thing.
A
We
more
than
doubled
and
the
SharePoint
framework
third
party,
day-to-day
usage
and
people
are
building
more
and
more
SharePoint
framework
extensibility
now
on
the
SharePoint
framework
extensibility
for
Microsoft
teams,
because
you
can
build
Microsoft
teams,
tabs
and
personal
applications
which
open
framework,
that's
actually
growing
at
40%
on
a
month-to-month
basis.
So
we
cruder
usage
30
to
40%
from
May
to
end
of
June
on
a
SharePoint
framework
extensibility
for
Microsoft
team,
so
really
cool
to
see
that
site
to
be
growing
as
much
as
it
is
as
well.
A
Now,
a
quick
recap
on
what's
happening
on
SharePoint
same
works
of
1.11
is
coming
out.
It
is
expected
to
come
out
in
July
we're
still
hoping
that
we
can
get
it
out
in
July.
We
are
actually
doing
actively
internal
testing
on
it
and
there
are
some
issues
which
we
still
need
to
fix
on
that
before
we
can
actually
get
it
out
for
you,
because
we
want
to
make
sure
that
the
package
is
in
a
best
possible
quality,
so
that
there's
no
problems
with
that.
The
key
point
here
is
that
we
wanted
1.11.
A
We
will
also
enable
SharePoint
framework
in
the
app
source
or
in
the
office,
or
so
you
can
actually
build
SharePoint
framework
based
with
parts,
and
you
can
put
them
in
the
app
source
and
people
and
customers
and
can
actually
install
them
to
their
tenants
from
there.
That
will
require
1.11,
because
we're
adding
some
additional
metadata
attributes
on
the
solution
and
making
things
more
better
and
as
more
about
at
one
point
they
were
11
will
have
also
themes,
integration,
improvements,
especially
for
test
modules
and
then
metadata
updates
for
the
manifest
order
generation.
A
Now
this
one
of
other
stuff
happening
on
the
SharePoint
frameworks
are
not
just
about
the
client-side
packages
getting
updated,
and
so
we
are
pushing
out
updates
on
the
on
the
server
side
of
time,
and
there
will
be
other
announcements
coming
later
this
summer
and
autumn
on
the
improvements
in
in
this
areas
on
the
shipment
framework
documentation
side,
there's
a
lot
of
a
lot
of
actually
updated
documentation
available.
A
camus,
SPF
X
is
the
resist
way
to
get
there
or
a
chemist,
SPF
Docs,
and
that
will
rank
you
to
the
right
location.
A
So
we
actually
have
now
refreshed
to
SharePoint
framework
overview
debate
for
its
extensions
library
components
my
creating
existing
customizations
and
there
will
be
further
updates
on
the
on
the
horizon
as
well.
So
we're
trying
to
do
a
full
reset
on
the
1.10
level,
because
one
by
10
is
the
latest
version
out,
but
then
I
spotted
one,
but
11
version
will
also
release
new
documentation,
related
on
store
and
all
of
that
stuff
which,
by
the
way,
partly
is
already
in
the
docs
but
they're,
not
in
the
table
of
contents.
A
Now,
if
you
see
something,
if
you
see
problems
in
the
docs,
if
you
need
something,
please
please
please
please
let
us
know
we
want
to
help
you
to
be
successful
with
SharePoint
favored
in
SharePoint
or
in
the
Microsoft
themes.
So
please,
please,
let
us
know
on
the
feedback
on
down
on
the
BMV,
TAS
client,
side,
library,
site,
quick
update
on
that.
One
2.07
is
scheduled
to
happen
in
july
10th
so
in
next
week,
and
also
nothing
too
much
has
been
changed
here.
So
additional
versions,
additional
improvements
are
coming.
A
Also
Patrick
is
still
on
a
family
leave,
but
he
is
coming
back
actually
on
Monday,
so
it's
great
to
have
Patrick
Rodgers
back
on
on
the
on
the
office
well
in
quotes
in
the
office,
because
everybody's
working
remotely,
but
back
in
the
back
in
business
as
well.
He
was
on
parental
layer
for
quite
a
few
weeks.
Actually,
so
you
can
see
more
announcements
on
this
side
when
he
is
back
now.
Office
365
CLI
really
create
interesting
announcements
and
movement
in
here
as
well.
A
So
obviously,
we
already
talked
about
publicly
on
the
fact
that
we'll
rename
office
365
CLI
as
Microsoft
365
CLI.
So
it's
a
line
on
the
new
naming
and
what's
really
really
cool
as
part
of
the
one
2.11
release
is
that
this
office
resist
far
CLI
is
now
natively
in
the
azure
cloud
sell.
So
if
you
start
up
your
as
your
close
shell,
you
can
actually
start
using.
The
office
raises
two
five
commands
directly
from
that
shell.
So
it's
automatically
loaded
inside
of
the
of
the
cloud
shell,
so
really
really
really
cool
stuff.
A
On
this
side,
a
lot
of
additional
commands
a
lot
of
actions
happening
here.
Additional
improvements,
also
the
updates
on
the
strip
under
project
great
commands
happening
today
by
the
way
Hugo
will
actually
show
you
a
live
demo
on
how
that
upgrade
come
on
actually
works
with
together,
which
we
saw
studio
code
coach
guidelines.
What
says
it
code
flows,
no
I'm
using
codes
I'm
using.
A
Code
tours,
thank
you
God!
Thank
you.
Thank
you,
cool
and
I've,
written
that
in
attender,
but
I
lost
the
word.
That's
quite
typical
for
me:
SPF
X,
reusable
components,
quick
recap
on
here:
not
much
have
changed
from
the
past
week.
So
from
the
past
two
weeks.
So
pretty
reason
they
will
release
the
new
version.
One
point
in
nineteen
for
both
react,
controls
and
react
property
controls,
and
these
are
basically
controls
which
will
increase
your
productivity
as
developers,
so
making
sure
that
you
don't
have
to
worry
about
where
the
data
is
coming.
A
How
do
you
get
to
the
data?
How
do
you
get?
How
do
we
implement
this
speaker
or
a
beer
or
a
file
picker?
It's
all
reusable
controls
for
you
behind
the
scenes,
they're
using,
obviously,
obviously
our
fabric
controls
and
accessing
then
the
rest
api,
so
krafayis
as
needed,
so
really
cool
stuff
for
you
to
take
advantage
on
the
PPS
VFX
community
yeoman
generator,
and
there
wasn't
any
vision
and
this
week
actually
one
point
fourteen
point,
one
which
is
the
latest
and
there
is
a
additional
angular
nine
support,
support.
A
I
think
it
was
actually
in
one
point,
fourteen
when
angular
9
support.
Oh
sorry,
so
the
BMPs
VFX
generator,
extends
the
out-of-the-box
SharePoint
framework,
yeoman
generator
and
adds,
for
example,
angular
9
support
for
you
to
take
advantage
and
as
part
of
the
the
yeoman
generator
for
BMPs
VFX
generator.
A
It
asks
additional
questions
like
do
you
want
to
use
BM
bjs
and
if
you
do
it
associate
all
of
those
packages
and
components
directly
in
your
solution
without
you
have
to
worry
about,
what's
happening
behind
of
things
so
again
increases
your
productivity
as
the
developer
and
in
here
in
the
BMP
modern
search.
Just
to
recap
a
quick
recap
on
that
one
as
well.
So
that's
moving
ahead.
The
latest
version
is
from
china
3.14
point
one,
which
is
a
two
in
2020
version,
mainly
bug
fixes
polishing,
but
basically
the
whole
point
of
the
B&B
modern
search.
A
Just
to
recap
on
that
one,
it
is
a
set
of
web
parts
which
will
enable
you
to
build
and
modern
share
points
as
search
experience,
because
we
don't
have
an
out-of-the-box
native
paper
to
actually
make
that
happen,
and
this
one
has
its
own
github
repository.
It
is
an
open-source
there's,
a
v4
is
now
available
also
for
preview,
so
you
can
actually
start
testing
and
seeing
what
in
the
v4
will
be
out.
So
there
will
be
a
new
architectural
designs
for
that.
A
B
Thank
you.
So
we
have
a
lot
of
updated
samples
over
the
last
two
weeks.
The
first
one
was
an
update
to
the
applique
announcements.
Application
customizer
was
originally
built
by
ma
panacea
and
mike
myers
added
the
ability
to
handle
a
blank
start
date
and
end
dates,
and
then
on
the
webparts
side
we
have
well.
We
will
probably
needed
a
whole
page
just
for
Abhishek's
updates
but
I'd
be
shy,
updated
the
react,
accordion,
the
script
editor
and
the
RSS
reader
with
some
great
fixes.
B
We
also
have
an
end
eveness
on
who
updated
the
image
gallery
web
part
built
with
adaptive
cards
and
then
Andrew
I
know.
Andrew
probably
wouldn't
want
to
be
listed
in
this
list,
but
he
did
contribute.
He
updated
the
the
jQuery
data
tables
tutorial,
as
well
as
the
jQuery
full
calendar
tutorial,
vivec
chand,
updated
the
react,
image
gallery
and
finally
eater
he
Merrik
and
I'm
sorry
theater.
If
I'm
mispronouncing,
your
name
created
a
great
version
of
minesweeper
in
SPF
X
using
the
fluent
UI.
B
A
Thank
you
thank
you,
hookah
really
cool
stuff
and
it's
great
to
have
bit
more
and
more
of
their
samples
because
they're
great
starting
points
for
anything.
What
we
built-
and
you
know
in
the
day
to
day
work
as
the
project
so
really
really
really
cool
stuff.
I
know
that
the
RSS
reader,
as
an
example
was
was
clearly
know
that
also
internally,
as
so,
people
were
like.
C
Am
and
I
hope
you
don't
want
me
to
sing
any
culture
club
song,
so
your
choice,
your
choice
that
will
lose
everybody
really
fast,
so
alright.
Well,
hopefully
you
see
my
slide
as
just
stuff
about
me
principal
consultant
at
three
will
and
all
my
contact
stuff
three
wheels
gold
partner
in
the
southeast.
We
do
collaborative
solutions,
migrations
all
that
kind
of
stuff.
I
did
thinking
about
something
you
said
earlier
VESA,
so
the
web
part
I
demoed.
Before
a
couple
months
ago,
q
add
a
webpart,
have
customer
approval
to
get
it
open
source.
C
So
now
the
only
constraint
is
Bo
and
it's
time
from
his
day
job
to
get
that
out
there.
So
maybe
in
the
next
few
weeks
months,
I'll
have
that
open
sourced
as
part
of
the
samples
as
well.
So
I
just
wanted
to
call
attention
to
that
one.
So
today,
what
am
I
here
for
I
am
I'm
going
to
talk
about
another
web
part.
I
did
react,
pages,
hierarchy
solution
and
that's
the
link
to
where
it
is
in
github.
C
So
it's
already
open
sourced
and
available
for
people
to
download
immediately
got
a
lot
of
good
feedback
from
everybody.
In
it,
so
so
why
did
I
build
that
thing?
A
lot
of
customers
I
was
talking
to
you
know
now
in
modern
SharePoint.
We
can
create
so
many
pages
so
quickly
and
easily
that
we
kind
of
have
page
for
all,
sometimes
insights
and
there's
always
a
desire
to
say
well.
C
You
know,
I
want
to
link
these
things
together
to
sort
of
navigate
within
my
particular
site
collection,
and
you
know
I
want
to
know
where
I
am
in
this
site.
So
you
know
before
writing.
Code
I
was
like
well,
I
could
use
the
rich
text
editor
and
put
hyperlinks
in
there.
I
could
use
a
quick
links
web
part
and
link
to
pages,
but
those
were
a
little
bit
brittle.
C
C
So
you
know,
I
was
thinking
about
that
and
obviously
we
have
mega
navigation
that
it
part
of
its
intent
is
maybe
to
show
a
hierarchy
sometimes,
but
it's
kind
of
limited
to
three
levels
and
some
of
the
customers
I
was
talking
to,
were
you
know,
seven
levels
of
hierarchy
and
I
was
like
really
so
so
you
know
with
that
and
I.
Like
writing.
Code
I
just
made
an
excuse
to
create
this
thing,
so
so
I'm
just
gonna
switch
over
to
show
in
it,
because
that's
actually
what's
what's
fun
and
before
I
show
the
code.
C
Let
me
show
you
what
it
does
so
so
I've
got
this
spaceship
earth
site.
I
just
did
because
I'm
kind
of
a
geography,
dork
and
I
thought
that's
a
great
way
to
show
a
hierarchy.
So
you
know
I've
got
earth
and
then
I've
got
the
continents
going
across
the
top
and
just
a
Spicoli
image
that
I
found
somewhere,
and
so
if
I
went
into
North
America,
you
know
from
the
homepage.
The
hierarchy
really
starts
to
show.
So
you
know
I've
come
from
home
and
I'm
on
North
America
and
then
hey.
What
are
the
you
know?
C
C
What's
what's
beneath
me
and
this
hierarchy,
so
I
could
go
to
the
United
States
kind
of
drill
in
there
and
you
see
that
I've
got
all
the
50
states
each
one
of
these
is
an
aspx
page,
that's
being
filtered
by
my
webpart
and
so
I
think
the
one
I
actually
puts
stuff
in
is
because
I
live
in
Georgia.
So
you
know
you
could
drill
into
Georgia
and
again
your
breadcrumb
Trail
builds
out,
and
you
know:
I've
got
my
cities
in
Georgia
and
I.
C
Think
I
live
in
Columbus,
there's
probably
nothing
below
this
one,
except
for
how
to
get
back
up
from
there.
So
you
know
no
children
found
and
stuff
like
that.
So
that's
you
know.
If
I
go
back
up
to
Georgia,
you
can
kind
of
see
the
the
relationship.
So
so,
what's
what's
in
the
web
part
that
makes
it
do
that
really
really
there's
when
you
put
the
web
part
on
the
page,
there's
just
one
decision
to
make.
C
You
know
what
am
I
rendering
am
I
rendering
the
ancestor
pages,
who's
who's
myself
and
above
me,
in
this
hierarchy
or
in
my
rendering
children
pages.
So
this
one
if
I
switch
to
it,
it's
rendering
children
pages.
So
you
know
who
has
chosen
me
as
a
parent
and
those
two
relationships
drive
everything
in
this
webpart
and
you
know
not
not
much
else
to
do
it,
so
it
should
make
it
simple
for
an
end
user
to
edit.
The
other
thing
that
I
did
is
thinking
about
responsive.
C
You
know
we
think
about
responsive
in
terms
of
a
device
with,
but
in
SharePoint
you
actually
have
to
think
about
what
column
it
is.
Is
it
in.
So
if
this
webpart
was
in
a
well,
let
me
click
the
right
place,
so
click
here.
Let's
try
it
talk.
If
I
make
this,
you
know
to
column
or
a
three
column,
I'm
still
in
the
wrong
wrong
to
zone.
Let's
try
this
one
more
time
there
we
go
so
there
it
responded.
So
if
I
switch
to
a3
you
see
things
will
stack.
C
So
this
thing
will
respond
not
only
to
the
page-width
but
the
particular
column,
you're
in
and
start
doing,
wrapping
and
stuff
like
that,
so
you
know
I.
Definitely
that
was
kind
of
something
new
to
me
to
respond
to
you
know
the
bounding,
rectangle
and
not
just
the
page.
So
so
there's
that
and
then
just
to
show
you
in
SharePoint
a
little
bit
more
behind
the
scenes.
So
what
controls
those
relationships?
C
When
you
add
this
webpart
to
the
first
page,
so
in
my
QA
solution,
I
use
the
old
elements,
XML
style,
but
this
one
I
actually
wait
till
you
add
it
to
the
page
and
when
you
add
it
to
the
page,
it'll
create
this
column,
behind-the-scenes,
and
so,
in
that
case,
in
this
column,
I'll
actually
do
a
group
by
because
I
think
that's
a
good
way
to
show
it.
So
you
can
kind
of
see
the
relationships
that
people
manage.
So
all
they
have
to
do
in
the
page
properties
of
the
web.
C
Part
is,
you
know,
say
if
I'm
editing
this
Albany
page
I
would
pick
my
parent
is
Georgia
and
that
would
establish
the
relationships
and
I
would
follow
Georgia's
parent
all
the
way
up
and
stuff
like
that.
So
you
know
look
at
the
home
down.
You
see
that
North
America
has
picked
home
as
its
parent
and
then
in
North
America.
C
All
these
pages
have
picked
it
as
their
parent
at
Canada
and
stuff,
and
so
relationship
management
is
pretty
easy
and
that
thing
too,
to
keep
track
of
stuff
so
that
that
was
the
simple
part
of
it:
not
not
a
lot
of
list
changes
and
and
not
a
ton
of
UI
stuff.
The
the
other
thing
that
I
wanted
to
show
you
guys.
So
when
I
was
developing,
this
I
used
a
pattern
and
I'll
show
the
code
for
this.
This
might
be
one
of
the
more
interesting
things
is.
C
So
so
we
see
earth
and
then
I'm
gonna
put
this
one
at
one
as
well
and
pick
children.
So
so
we
kind
of
you
know
this
is
debugging
in
the
workbench
and
I
even
went
so
far
as
to
utilize,
a
query
string
just
for
my
testing,
so
I
could
test
this.
You
know
I'll
call
it
headless
without
SharePoint,
so
as
I
click
through
this
I'm
passing
the
debug
page
ID
that
I
only
use
in
debug
mode
as
well
and
I
could
sort
of
test.
C
This
thing
you
know,
without
SharePoint,
at
all
and
I
use
that
using
mock
data
and
in
a
custom,
fetch,
client
and
stuff
like
that,
that
I
can
mock
all
this
data
to
make
it
look
like
SharePoint
still
go
through
the
fluent
API
as
part
of
P
and
P,
but
return
data
locally.
So
you
know
this
is
kind
of
it
running
on
localhost
as
well,
just
to
show
you
that
it
works,
and
so
with
that
I'll
kind
of
switch
over
to
the
code
to
show
you
what's
kind
of
interesting
there.
C
So
I've
got
my
tabs
across
the
top.
That
I
I
think
are
most
interesting
to
show
you
in
this
the
the
first
one
and
this
use
page
API,
so
I've
done
react
without
first
eight
and
props
without
a
framework.
I've
done
it
with
redux
and
Mike
Hummel
who
works
at
three
will
did
a
really
good
write-up
on
using
react.
Hooks
and
functional
components
and
I
really
took
to
his
pattern.
So
this
use
page
API
is
using
react
hooks,
and
it's
got
some
of
the
flavors
of
redux
in
here.
C
So
I've
got
I've,
got
my
actions
and
my
action
types
and
my
reducers
for
updating
state
based
on
the
particular
action
and
then
I've
got
my
use
page
API
that
everybody
calls
as
well
as
my
collection
of
ancestor
and
child
pages.
Anybody
that's
done
hooks
knows
how
use
effect
runs.
I've
got
some
stuff
in
here
so
that
it
only
runs
when
certain
things
change
and
then,
of
course,
I've
got.
You
know
my
actual
API
calls.
C
So
that
tells
me
whether
or
not
I
can
actually
create
that
column
in
the
list
for
the
user
when
they
add
the
web
part
to
the
page,
because
somebody
could
edit
a
page
but
maybe
not
necessarily
be
able
to
manage,
schema
and
stuff
like
that.
So
I
deal
with
that
kind
of
stuff,
and
so
this
guy
is,
is
a
lot
like
what
I've
done
in
redux
in
the
past,
for
my
services
and
and
making
those
available
kind
of
going
to
the
right.
The
container.
C
It's
you
know,
one
of
the
things
I
used
to
love
in
angular
is
is
routing
and
and
redrawing
components
and
all
that
kind
of
stuff.
So
this
this
isn't
routing
based
on
URL
changes,
but
it's
routing
based
on
web
part,
config
changes.
So
you
know
if
I've
chosen
to
show
ancestors,
then
I'm
gonna
render
my
breadcrumb
control.
If
I've
chosen
to
show
children
I'm
going
to
show
a
list
layout
control,
otherwise
show
the
thing
that
says:
hey
you
need
to
finish
doing
some
work.
C
So
looking
at
one
of
those
that
actually
the
the
list
layout,
you
know
not
anything
special
in
here.
The
main
thing
to
call
out
is
that
I
do
that
get
bounding
rectangle
to
tell
me
how
big
I
need
to
render
am
I
in
a
you
know,
a
wide
or
a
three
column,
or
what
and
all
that
stuff
and
then
the
rest
of
this
is
just
rendering
the
HTML
really
that's.
All
there
is
I
did
use
the
react,
resize
detector
that
helps
me
know
to
redraw
when
people
do
that
stuff.
C
The
breadcrumb
layout,
which
I
hadn't
brought
over
pretty
much
the
same
thing.
It
looks
very
similar
to
the
other
one,
except
for
it's
got
a
little
more
logic:
around
Windish
Oh,
Chevron
down
and
Chevron
right,
based
on
the
width
of
the
zone,
you're
in
and
all
that
kind
of
stuff,
so
just
UI
rendering
stuff
but
I'm
going
through
that
stuff.
C
Really
quick,
because
I
only
have
five
more
minutes
and
I
want
to
show
you
a
pattern
that
I've
had
for
a
long
time
that
I
started
with
angular
that
I
use
for
the
localhost,
so
I
use
the
custom.
Fetch
client
that
you
basically
configure
so
I
have
a
base
web
part
in
here
and
I
configure
the
fetch
client
factory
to
my
custom,
fetch
client
and
then
in
that
fetch
client.
C
C
The
only
thing
that
that's
important
about
this
to
kind
of
point
out
is
this
base
list
collection
right
here
is
where
I
mock
up
all
of
the
SharePoint
lists
and
libraries
that
I
want
to
fake
out
with
arrays,
and
so
you
know,
I've
had
projects
where
I
had
ten
or
fifteen
related
lists
with
lookups
and
all
that
sort
of
stuff,
and
so
this
would
be
bigger.
The
rest
of
this
code
is
pretty
boilerplate.
C
It
doesn't
change
it's
just
it's
managing
that
list
data
and
in
particular
it's
using
local
storage,
so
that
I
could
actually
do
updates
to
list
items
and
it
saves
and
then
I
could
use
the
updated
list
items.
So
that's
what
mock
list
Factory
is
for
the
other.
Probably
this
is
where
my
labor
of
love
over
you
know
time
has
been
so.
This
is
where
I
handle
all
of
those
calls
and
figure
out
how
to
cruft
it
up
and
make
it
look
like
what
the
API,
the
the
P&P
API
would
return
to
me.
C
So
most
of
these
are
not
used
by
this
particular
web
part
because
I'm
just
really
working
with
list
items,
but
getting
a
user
site
users
getting
the
current
web
attached
files.
Relative
things
items
context
info
doing
batch
calls
where
you
wrap
multiple
calls
in
a
batch
all
that
stuff
I've
a
long
time
ago,
coded
stuff
to
deal
with
that,
and
so
that
this
is
what,
where
all
the
the
workhorse
is
and
then
as
a
consumer.
C
What
I
do
is
copy
this
from
project
to
project
and
then
all
I
really
have
to
do
is
create
array
of
items.
So
this
page
list
is
what
represents
my
SharePoint
pages.
So
if
you
guys
kind
of
remember
that
localhost
one
everything
is
this
self-referencing
lookup,
so
I
have
a
lookup
field
and
then
I
have
an
ID
a
title
of
the
thing
and
in
this
case
I'm
using
for
my
debug
my
file,
references
that
that
debug
page
ID.
So
that's
how
I
was
able
to
drill
through
those
things
and
then
my
parent
page
ID.
C
So
these
are
my
lookups
and
so
going
this
stuff
all
gets
returned
through
the
the
mock
response
and
the
custom,
fetch
client
and
all
that
stuff,
and
so,
when
I
use
this
page,
API
and
I
make
one
of
these
calls
like
this
in
here
or
or
really.
More
importantly,
this
call
my
mock
data
returns
it
back
through
here,
so
that
the
items
collection,
I
get
here,
looks
exactly
like
it
would
in
native
SharePoint
and
that's
how
I
can
develop
and
test
without
SharePoint
at
all.
C
So
it's
been
really
helpful
to
me,
building
that
out
and
being
able
to
test
without
SharePoint
and
just
fire
something
up
and
run
it
on
localhost
workbench
is
great
and
I
love.
How
easy
it
is
to
run
that
now,
with
just
gulp
serve
and
hanging
off
a
URL,
but
sometimes
you
just
want
to
run
on
localhost
too,
so
so
I
just
wanted
to
show
that
and
I
think.
C
The
only
thing
else
I
have
to
show
is
my
last
slide
just
shoutouts
to
everybody,
especially
my
camels,
heroes,
SPF
RAC
react
hooks's,
where
I
stole
all
that
stuff
for
a
use,
page
API
and
then
all
their
community
stuff.
So
that's
that's
my
time.
Hopefully
everybody
enjoy
that
and
certainly
can
answer
questions.
If
there
are
some.
If
we
have
time.
A
C
A
It's
we
need
to
prioritize
our
time.
I
understand
that,
but
really
really
cool
really
creates
clarification
as
well,
how
it's
actually
being
implemented
and
the
whole
functionality
is
also
really
cool,
so
awesome,
stuff
cool
now,
let's
actually
move
into
Sutra
screen
and
Sutra
has
a
building
an
application
customize
that
to
inform
any
users
on
alerts
within
the
date
period
so
and
we're
champion
to
search
our
yes,
we
can
see
your
screen
so.
D
D
So
the
main
ka
use
case
scenario
is
my
client
wants
to
display
a
message,
a
kind
of
a
flash
message,
some
important
announcement
to
the
end
users
so
based
on
the
department,
and
it
should
have
an
expire
so
something
like
that
so,
but
they
have
to
manage
the
message
easily
using
the
SharePoint
list.
So
this
is
the
business
case.
D
No
need
to
delete
the
item,
they
can
just
change
the
flag
and
then
there
is
a
property
called
animation
type,
which
is
a
property
for
this
extension
bad.
They
can
change
the
animation.
So
some
of
the
artifacts
used
in
this
or
I
have
used
a
jQuery
plug-in
called
a
more
fixed
and
then
animate
dot
C
s.
So
this
animate
RCS
is
used
for
animation,
where
you
can
select
various
animations
like
bouncing
from
right
left.
Those
are
all
some
sample.
D
Animation
effect
and
I
have
used
PNP
SP,
and
there
is
one
component
alert
component
which
I
have
developed
using
react,
functional
components
with
hooks.
So
let
us
get
back
to
the
demo.
So
here
you
can
see
the
extension.
So
once
you
refresh
it
once
you
deployed
it
so
so
it
is
an
application
extension,
so
it
will
automatically
start
displaying
the
messages.
D
So,
since
this
is
an
extension
that
has
to
be
a
list
which
you
need
to
create,
which
has
to
which
has
columns
like
start
date,
expiry
date
is
active
and
the
sequence,
so
the
sequence,
the
messages
will
be
displayed
based
on
the
sequence,
and
you
can
also
set
the
start
date
and
end
date.
So
whenever
you
refresh
the
page,
so
I
have
used
the
predefined
placeholders
of
size,
35,
250
pixel,
so
that
it
will
previously
allocate
the
size
and
then
it
will
start
displaying
the
message.
D
So
it
is
very
simple
and
easy
to
maintain
and
it
is
very,
very
simple
extension.
There
is
no
great
functionality,
complex
functionality
implemented
in
this,
so
let
us
go
through
the
core.
So
the
first
is
the
application
customizer
dot
TS,
where
I
have
defined
a
animation
type
of
property.
You
can
change
the
animation
type,
and
this
is
where
I
am
rendering
the
placeholders.
So
this
render
placeholders
and
I
am
just
pausing.
The
property
to
the
component
called
react.
D
Sorry
alert
dot,
yes
alert
component,
so
this
is
the
alert
component
and
one
thing
I
need
to
mention
it
here,
because
I
have
seen
in
some
forums
and
in
some
of
the
issues
that
they
are
not
rendering
the
placeholders.
So
this
line
is
more
very
much
important
for
the
extension
that
we
need
to
implement
this
line,
because
this
line
will
check
whether
the
placeholders
are
already
there
in
the
page
or
not,
then
it
will
render
the
our
custom
component.
D
So
this
is
a
very
important
line,
so
we
have
to
include
this
and
I
have
set
it
up
the
SP
context
and
let
us
move
to
the
alert
component.
So
this
is
a
normal
reactor.
Functional
component,
so
here
I
have
used
in
selective
imports
for
webs
and
list
items,
and
this
is
a
start
inert
animation
component,
where
I
am
just
using
the
jQuery
plug-in
called
the
morph
extension
and
then
I
am
setting
up
the
properties.
D
So
by
default
it
will
be
bouncing
right
and
if
there
is
any
animation
property
declared,
so
it
will
take
the
animation
property
and
the
separator
will
be
a
tilde
simple
and
the
speed
is
5,000.
So
this
exact
this
sample
I
have
defined
only
the
animation
type
property.
Maybe
you
can
enhance
the
sample
by
giving
is
the
duration
and
also
we
can
you
can
implement
the
separator
properties
and
and
other
properties
which
you
can
define
based
on
the
morph
extension
and
load
alerts.
It's
pretty
simple.
D
I
have
just
defined
the
query
so
based
on
the
camel
query
based
on
the
is
active
flag,
start
date
and
expiry
date,
and
then
I
am
just
fetching
the
title
and
I'm
using
PNP
Jas
to
get
items
using
the
camel
query,
and
then
I
am
just
joining
the
alerts
and
said
hitting
setting
up
in
the
state.
So
once
it
is
set
it
up
in
the
state,
then
it
got
displayed
so
based
on
the
alert
start
animation.
It
will
trigger
it
and
then
it
will
displayed,
and
the
last
is
elements
detects.
D
Someone
here
I
have
applied
this
package
to
the
site
collection.
It
is
not
a
tenant
level
activation,
so
I
have
used
these
elements,
not
example.
So
this
is
the
test
of
property,
I
haven't
changed
or
anything
on
this.
The
main
thing
is
the
host
properties.
I
have
defined
the
pre-allocated
application
top
height,
which
is
35
pixel.
So
this
is
a
very
major
feature
where
there
won't
be
any
flick
around
your
page.
If
you
have
implemented
this
reallocation
height
so
hopefully
I
have
covered
everything.
A
Excellent
yeah:
that's
that's!
Actually
a
really
good
point
on
the
pre-allocated
application.
Customers
are
high
because
then
just
can
you
go
back
on
the
on
the
implementation.
We
can
explain
what
it
means
for
those
who
are
not
on
the
UI.
So
if
you
do
not
define
that
booking
so
to
say
beforehand,
you
can
actually
see
when
it's
loading,
there's
a
white
or
on
the
location
where
the
red
line
is
coming.
Can
they
do
it
one
more
time
so
it
hard
there?
We
go
white
bar
and
there's
a
red
line.
A
The
white
bar
is
basically
there
because
we
have
that
free
allocation
in
the
user,
custom
action
and
define
as
part
of
the
implementation.
So
whenever
the
solution
is
loaded,
we
service
we
basically
allocate
than
a
thirty
five
pixel
so
that
whenever
the
actually
implementation
is
rendered
on
client-side
in
a
project
because
this
JavaScript
it
doesn't
actually
move
the
baits
down,
because
I
know
that
everybody
is
is
every
now
and
then
super
annoyed
on
different
applications
and
websites
with
bait
is
loading
gradually
and
an
async
endemic
Mouse
and
drugs
transitions
and
and
even
actually
SharePoint?
A
Does
it
every
now
and
then
and
it's
super
annoying,
so
the
pre
allocation
is
basically
hand
for
handling
that
section,
but
super
powerful
and
obviously
like
like
Sudarsan
said
you
can
absolutely
evolve
this
sample
with
a
you
could
actually
modify
the
implementation.
You
can
modify
the
background
color,
you
can
modify,
let's
say
a
support
in
HTML
inside
of
the
the
rendering.
A
Thank
you
thanks,
which
are
not
that
one
I
think
that's
it
for
this
one
then,
and
that
leaves
you
go
some
extra
time
for
you,
which
is
cool
and
then,
if
we
have
time
in
the
end,
we
can
do
Q&A.
Please
use
also
the
chat
during
the
call.
If
there's
any
questions
for
which
you
would
like
to
address
and
because
we
do
have
so
many
people
in
a
call,
we
can't
really
during
the
sessions
and
during
the
demos,
jump
on
the
questions,
that's
too
hard,
but
Hugo
take
it
away.
Thank.
B
You
this
is
kind
of
a
lot
of
pressure
for
me
after
two
awesome
demos
to
be
presenting
about
upgrading
your
SharePoint
framework
projects
using
office,
365
CLI
cote-d'or
upgrades
hi.
My
name
is
Hugo
Bernie
I'm,
an
MVP
I'm,
also
a
proud
member
of
the
patterns
and
practices.
Virtual
team
I
can
be
reached
on
my
blog
and
on
Twitter,
and
don't
be
shy
to
reach
out
to
me.
Let's
talk
about
what
is
office,
365
CLI!
Well,
if
you
don't
know
what
office
365
CLI
is
I'm
really
offended
and
I'm
not
talking
to
you
ever
again.
B
It's
it's
really
a
you
know.
Cli
is
the
command-line
interface
that
allows
you
to
manage
your
office,
65
tenant
and
your
SharePoint
framework
projects
on
any
platform.
Unlike
you
know,
some
other
command-line
tools
or
parish
le
kind
of
things
where
it
was
not
so
available
in
the
past
to
install
it.
You
just
need
to
use
NPM
and
you
deploy
it
with
the
GE
tag
or
the
GE
flag
to
make
it
the
global.
So
it's
a
PNP,
office365
CLI
and
to
use
it
really.
B
All
you
need
to
do
is
to
type
office
365
in
your
command
or
terminal
or
any
anything
used
to
type
your
commands
at
the
bottom,
I've
included
some
URLs.
One
of
them
is
to
have
access
to
kind
of
all
the
documentation
and
one
the
other
one
I
think
is
just
access
to
code.
If
you
want
to
contribute,
because
this
is
an
open
source
initiative
that
everyone
can
contribute
to
and
what
we'll
be
showing
today
is
actually
something
that
I
had
the
opportunity
to
contribute
to.
B
So
one
of
the
commands
that
are
available
in
office,
365
CLI
is
the
SPF
X
project
upgrade
and
what
it
allows
you
to
do-
and
this
is
this
is
probably
very
timely,
given
the
fact
that
you
know
SPF
X
111
is
is
coming
soon,
is
the
ability
for
you
to
take
your
SPF
X
project
from
pretty
much
any
version
1.0
and
above
and
to
convert
it
to
any
specific
specified
version?
Now
the
the
one
thing
that
we
have
to
be
clear
is
this
command
does
not
change
your
project.
B
What
it
does
is,
it
gives
you
the
instructions
or
the
steps
to
upgrade
your
project,
but
all
you
need
to
do
is
you
type?
You
know
after
you've,
typed
office
365,
and
you
get
this
this
pretty
new
command
prompt
users
type
as
the
effects
project
upgrade,
and
then
you
put
the
options
and
the
options
are
listed
here
on
the
screen,
but
I'll
show
you
a
little
bit
further
later
and
then
the
types
of
upgrades
that
you
can
do
our
text,
JSON,
markdown
and
tour.
Now.
B
The
reason
why
we
didn't
want
to
change
your
project
is
because,
depending
on
the
complexity
of
your
project,
you
might
have
a
lot
of
NPM
packages
that
are
included
in
your
project.
That
may
or
may
not
be
compatible
with
the
newer
versions
of
the
SFX
upgrades,
and
this
is
something
that
you
have
to
do
yourself.
You
have
to
validate
every
every
component
that
you
got
in
your
project
to
make
sure
that
it
upgrades
successfully.
B
But
what
the
report
or
the
steps
give
you
is
really
kind
of
a
the
full
detailed
list
of
what
you
have
to
do.
The
problem
is:
if
you're
working
on
a
big
project
like
the
project
I'll,
be
showing
you
had
a
lot
of
steps
for
me
to
upgrade.
It
becomes
really
hard
to
keep
track
of.
Okay
was
I
on
step,
11
or
step
111.
I
can't
remember,
and
this
is
where
the
code
or
upgrade
comes
in
now.
What
is
code
tour
well
code
core
is
actually
a
Visual
Studio
code
extension.
B
The
URL
is
at
the
bottom
here,
AKMs
slash,
go
tour
and
it
was
not
written
or
it
was
not
intended
to
be
used
for
the
office
365
CLI,
it's
just.
We
saw
a
great
opportunity
here.
Code
tours
are
something
that
allows
you
to
record
a
and
and
playback
a
guided
walk
through
of
your
code
in
your
project,
and
you
can
have
as
many
code
tours
as
you
want
in
your
pod.
In
fact,
we've
started
to
add
good
doors
in
a
lot
of
the
PMP
samples.
B
The
as
a
fact
starter
kit
now
has
a
code
tour
that
walks
you
through
the
architecture
of
the
solution
and
we're
planning
on
adding
more
and
more
so
it's
it's
a
great
way
to
guide
people
through.
You
know
where,
where
they
should
pay
attention
and
what
it
does
is
it
creates
a
tours,
folder
dot
tours
and
that's
what
our
solution
does
so
now,
because
my
upgrade
process
actually
requires
doing
NPM
install
I
actually
pre-recorded
this,
because
I
didn't
know
how
much
time
it
would
have
to
do
this
demo.
B
B
All
I
did
is
I
open,
the
Visual
Studio
code
or
the
project
folder
and
I
open
my
command
line
there
and
then
I,
just
typed
office
365
and
hit
enter
and
what
I
get
is
I
get
this
command
prompt
and
that's
the
command
prompt,
that's
provided
to
me
by
office,
lucify,
CLI
and
then
I,
just
type
SPF,
X
project
upgrade
and
then
I
always
do
help,
because
I
never
remember
what
what
what
the
instructions
are
and
then
what
you'll
see
here
is
nelly.
Remember
right
here,
the
output
this
here.
B
So
the
command
is
output
and
the
output
types
are
JSON
text
markdown
or
tor,
and
the
default
is
text
so
once
you've
once
you've
done
that,
so,
let's
actually
just
again
I'm
in
the
current
project,
folder,
so
I
don't
really
need
to
do
anything.
Fancy
here,
I
just
need
to
just
type
out
put
an
N
tour,
and
that's
it
that's
my
demo.
Thank
you.
The
ruin,
no
I'm
just
kidding
really
the
code
tour
has
been
created,
the
upgrade
has
been
created
and
this
was
not
sped
up.
This
is
actually
real
time.
B
This
is
how
long
it
took
to
do
this.
So
then,
what
you
do
is
you
open
your
Visual
Studio
code
project
and
you'll
notice
at
the
top
here
there
is
a
new
folder
called
tours
right
here.
I
know
it's
green
on
green,
it's
hard
to
see,
but
it
it
adds
this
to
your
project.
Now,
if
you
don't
have
a
code
tours
installed
as
an
extension,
it
doesn't
do
anything
right,
it's
just
a
folder
with
some
JSON
files
in
it
and
you
could
absolutely
ignore
it.
B
But
if
you
have
code
tours
installed
automatically,
it
shows
you
this
window
here
that
lets
you
start
the
code
or
so,
if
you
click
on
play,
let's
do
that
key
click
on
play.
What
it
should
do
is
it
should
launch
a
coat
or
for
you-
and
it
shows
you
here-
and
this
is
a
I-
have
to
to
admit.
This
is
a
big
project.
B
It's
got
146
steps,
but
it
gives
you
the
steps
here
and
you
see
it
says,
execute
the
following
command
and
all
you
need
to
do
is
click
on
that
blue
button
or
that
clewd
blue
text.
It
will
automatically
start
the
command
for
you
now.
We
could
just
sit
here
and
wait
until
NPM
install
has
been
completed,
but
I
recorded
the
video
to
make
it
faster.
So
once
it's
done,
you
actually
click
on
right
here.
B
You
just
click
on
next
and
it
takes
you
to
step
2
and
as
we
go
through
the
whole
process,
we
actually
walk
you
through
every
file,
so
you
know
exactly
what's
being
changed
in
your
project,
so
you
can
see
here.
Lodash
subset
is
showing
version
171,
but
at
the
end
of
this
step,
it'll
show
me
that
it's
on
version
1
pen,
so
you
keep
on
doing
this
until
you
get
to
and
I've
skipped
a
lot
of
steps
here.
B
I'm
already
at
710,
but
you'll
have
some
other
steps
where,
if
we
go
to
the
next
step,
you'll
see
this
one,
it
can't
be
updated
for
you
with
a
command.
So
it
says
this
is
what
you
need
to
do.
You
need
to
copy
the
version
number
from
171
to
110,
so
you
this
is
where
you
exercise
your
copy
and
paste
skills,
and
you
just
do
that
now
when
it,
when
you
do
this,
you
have
to
keep
in
mind
that
you
still
want
a
JSON
to
be
properly
formatted
when
you
are
entering
the
information.
B
So
there's
a
few
steps
in
there,
where
we
ask
you
to
add
new
nodes
and
things
like
that.
Just
remember.
Sometimes
you
need
to
add
some.
You
know
commas
or
things
like
that,
so
you
go
through
all
the
steps.
It's
usually
not
a
hundred
and
forty-six
steps,
it's
usually
about
20
or
so
steps,
but
you
go
through
all
the
steps
and
then
eventually,
when
you
get
to
the
end,
it'll
tell
you.
B
This
is
an
optional
step.
If
you
have
any
problems,
because
sometimes
some
people
will
get
problems
with
SP
httpclient
configuration,
it
tells
you
you
can
just
run
and
PMD
dupe.
Otherwise
it
says:
that's
it
you're
done.
There
is
one
additional
thing
that
you
can
do
is:
if
you
really
don't
want
people
to
be
to
have
to
see
the
store
when
they
open
the
project,
you
can
delete
the
tour
folder,
but
I
strongly
iced
and
I
actually
strongly
recommend
you
delete
the
tour
and
then
go
nuts
and
create
your
own
tour.
B
So
you
can,
you
can
introduce
people
to
the
content
and
the
structure
of
your
code.
So
that's
that's
it
at
this
point.
Once
you've
done
this,
you
can
just
run
your
npm
build
and
you
have.
If,
if
everything
went
well,
you
actually
have
a
fully
upgraded
SPF
X
project.
Now
there
is
one
little
thing
that
I
should
point
out
is
the
the
code.
Tour
extension
was
updated.
Yesterday
and
of
course,
it
happened
just
the
day
before
I
was
doing
a
demo
and
what
could
happen
is
depending
on
the
version.
B
The
the
code
to
our
schema
might
require
your
your
file
to
be
instead
of
having
slash
/
like
this,
it
might
have
to
be
just
the
relative
path
from
from
the
root
of
the
project.
So
if
you
open
the
code
tour
and
depending
on
the
version
of
the
code
tour
that
you
have
installed,
if
the
code
tour
doesn't
start,
that's
more
likely
what
it
is
so
you'd
have
something
like
this.
You
just
go
and
remove
this
I
just
did
a
global
search
and
replace,
and
the
code
tour
will
be
happy.
A
A
But
anyway,
so
when
you
are,
when
you
are
executing
the
office
release
five
CLI,
it
will
give
you
the
steps-
and
this
is
a
great
add-on-
actually
pinpoint
you
to
the
actual
locations
actual
places
where
you
change.
This
needs
to
be
done
and
obviously,
from
the
SharePoint
framework.
Engineering
are
working
directly
with
office,
365
CLI
team,
so
that
whenever
the
1.11
comes
out,
there
will
be
immediately
available
upgrade
steps
from
the
1.1.11
as
needed.
So
that's
that's
being
already
tested.
A
B
So
when
we
started
with
just
an
overview
of
the
SP
starter
kit
and
then
we're
actually
going
in
and
creating
code
tours
for
each
of
the
web
parts
so
to
just
to
lower
the
duction
barrier
and
make
it
easy
for
people
to
understand
the
project
structure
and
every
new
SP
FX
webpart
sample
that
I'm
creating
I'm,
actually
adding
code
tours
in
them
as
well,
just
to
kind
of
give
the
the
same
tour.
That
I
would
give
if
I
was
demoing.
This
on
the
community
call
I'm
doing
the
same
code.
B
B
A
Yep
really
really
cool
stuff,
absolutely
absolutely
and
good
point
from
ralph
related
on
this
being
a
great
tool
for
the
for
the
remote
work
and
for
the
teamwork
as
well
couch.
We
do
not
have
too
much
time,
so
I'm
actually
gonna
go
and
let's
go
to
the
qnn
page
and
obviously
continue
having
a
discussion
in
the
chat.
So
I'm
just
gonna
share
my
slides
from
my
screen
so
freeing
hugo
screen
from
there.
So
let's
jump
there
now,
just
a
just
to
recap.
So
thank
you,
boo.
Thank
you
suit.
A
Her
son,
Thank
You
Hugo,
really
great
demos,
a
clean
demo
system
again
so
we'll
get
the
recording
out
in
24
hours
in
the
Microsoft,
realistic
worship
on
community
YouTube
channel,
take
MSM
choices,
that
being
videos,
and
please
follow
us
in
Microsoft.
Resist
for
TIFF
or
M
choices
to
5:00
p.m.
be
those
are
the
two
channels
and
accounts
which
we
are
using
the
next
shipment
framework
or
is
on
July
16th.
A
We
will
not
have
a
summer
break
at
this
time,
so
if
you
follow
it
up
on
on
the
BMP
work
in
the
past,
we've
been
always
typically
having
a
few
weeks
summer.
Break
this
time,
we'll
just
keep
on
going,
and
so
all
of
our
meetings
are
recurrent
meetings
until
the
end
of
the
world,
and
so
they
don't
have
an
end
date.
That's
what
I
mean
with
that
end
of
the
world.
It's
not
a
term.
We
should
be
using
opening
anyway,
so
in
this
call
is
in
July
16th
at
7
a.m.
A
and
the
next
moisture
to
resist
by
general
def
call
is
on
July
9th.
So
we
come
now
we'll
talk
about
team,
stuff
and
and
other
stuff
and
SharePoint
stuff
on
that
one
as
well.
July
July,
monthly
community
call
is
on
July
14th,
where
we
talk
about
barriers,
Microsoft,
resist
five
barriers
and
governance,
and
there's
really
cool
demos.
Coming
up
on
that
one
as
well.
A
In
general,
we
have
quite
a
lot
of
nudity
calls
so
feel
free
to
pop
in
and
check
all
of
those
ones
which
are
interested
for
you
and
stay
away
from
those
weeds
or
not.
Everything
is
recorded.
Everything
is
in
a
youtube
and
typically
for
the
individual
demos
like
this
one.
Well,
then,
after
a
few
weeks
or
a
week
after,
the
the
full
recording
will
ship
also
individual
demos
sub
videos,
so
you
can
easily
find
them
from
YouTube.
So
please
join
on
those
which
you'll
find
interesting.
A
A
Is
that
please,
if
you're,
looking
into
doing
one
of
your
own
demos
or
you
contributed
a
sample-
or
maybe
you
have
your
own
sample
in
your
own
key
table
so
reach
out,
we
can
help
you
first
of
all
get
maybe
a
sample
in
in
the
one
centralized
gallery,
because
we
want
everybody
to
get
more
visibility
for
to
work
what
they
done,
and
this
is
way
to
do.
That
is
surveys
in
your
sample
in
the
InDesign
choice
gallery.
A
The
second
thing
is
that
we
love
you
to
actually
do
a
live
demo
in
this
community
course,
because
these
are
so
valuable
and
learning
from
others
learning
new
tools,
learning
new
functionalities.
If
we
run
into
an
awesome,
Visual
Studio
code
extension,
which
is
useful
for
aspects,
please
share
that
and
let's
talk
about
the
extensions.
Let's
talk
about
the
learnings.
All
of
that
is
super
super
useful
in
this
code
in
this
course
as
well.
A
Where
is
this
gallery
again
from
Le
HTTP,
AKMs
SPF
x,
webparts,
a
game
as
SPF
X
extensions
I
will
actually
jump
into
the
slide
on
that
one,
because
we
have
two
minutes
of
human
it's
time.
So,
basically,
here
we
can
see
a
chemist
as
the
FX
extension.
A
chemist
SPF
X
wit
part
and
those
not
really
do
easiest
way
to
find
it
highest
by
FX
report
or
if
there
is
B
FX
extensions.
A
Now
we're
looking
into
potentially
having
a
more
let's
say,
polished,
one
centralized
location
for
all
of
the
samples
in
my
substrate
is
divided
as
sooner
or
later,
and
the
one
which
we
have
in
the
dost
of
my
samples
is
slightly
not
as
flexible
as
we
want
for
our
usage,
so
it
might
be
that
will
bring
a
new
UX
for
this
one
later
this
autumn.
Now
it's
not
autumn
now
later
in
autumn.
A
So
after
the
summer
time
in
the
northern
hemisphere
has
gone,
but
I
think
yes,
I'm
teasing
on
the
on
the
future
stuff
as
well,
a
lot
of
a
lot
of
plans
to
improve
stuff,
absolutely
but
I
think
that's
it
for
now.
So
thank
you,
everybody
for
joining.
Thank
you.
Hugo
suit,
our
Sun
and
Boo,
for
the
crate
demos
as
well,
and
let's
differently,
stay
in
touch
if
you're
based
in
u.s.