►
From YouTube: SharePoint Framework Community call – 17th of June 2021
Description
SharePoint PnP Community - SPFx & JS SIG call on June 17. Two demos: spfx-fast-serve: faster SharePoint Framework development AND Building team time zone assistant Teams solution with SPFx v1.13, including Viva Connections Card. Four PnP SPFx samples delivered! Released PnPjs for Client-side Libraries v2.6.0, CLI for Microsoft 365 v3.11.0 Beta, and PnP Modern Search v4.2.3 & v3.20.0. Preview Microsoft Teams Toolkit for Visual Studio & Visual Studio Code. Summer break and community call schedule updates reviewed. Register now for June trainings on Sharing-is-caring. Join the Viva Connections private preview! The host of this call is Vesa Juvonen (Microsoft) @vesajuvonen. Q&A takes place in chat throughout the call.
Learn more:
• See the full blog post for this call at: https://aka.ms/m365pnp/community/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
Welcome
everybody
to
the
sharepoint
framework
and
javascript
special
interest
group.
We
should
actually
rename
the
title.
We
we
already
renamed
the
call
a
sharepoint
framework
community
call
but
hey
anyway.
So
let's
get
back
on
this
one
at
some
point
and
because
seig
is
not
necessarily
that
well
known,
it
means
special
interest
group
and
an
old
terminology
what
we've
been
using
anyway.
It
is
june
11th,
2021
and
today
we'll
have
a
busy
goal
related
on
updates
from
the
order.
A
My
name
is
jose
ivan
and
I'm
a
program
manager
in
the
microsoft
365
platform
level
and
handling
a
lot
of
this
community
stuff
as
well
and
since
patrick,
is
typically
the
host
here,
but
he
is
currently
in
family
leave
or
a
vacation.
So
I'm
taking
over
that
now,
quick
update
on
the
opportunities
where
you
can
contribute
is
that
we
do
welcome
people
to
do
a
demos
around
development
scenarios
in
the
microsoft
trace
sd5.
A
So
if
you
want
to
do
a
demo
of
your
learnings,
what
you
learned
to
do
patterns
and
patterns
or
development
practices
or
sample
to
show
in
this
course
those
are
more
than
welcome.
These
are
great
opportunities
that
all
show
for
those
people
who
would
like
to
be
an
mvp
and
get
more
access
on
the
microsoft
insights
and
microsoft.
People
through
that
channel
and
doing
demos
in
this
combination,
of
course,
have
and
big
big
big
impact
on
that.
A
You
can
definitely
do
another
demos
as
well
so,
for
example,
bmpjs
demo
in
this
course
or
any
other
demos,
you
can
contribute
in
a
github
and
the
most
important
thing
is
to
provide
feedback.
So
how
are
the
calls
how
to
content?
Are
we
doing
help?
What
else
can
we
actually
do
to
help
you
so
rather
than
being
angry?
A
If
because
microsoft
doesn't
get
it,
let's
make
sure
that
you
share
why
you
are
angry
if
you're,
angry
or
maybe
you
are
super
happy
on
some
of
the
calls
and
some
of
the
demos-
and
please
do
share
that
as
well.
It
is
super
important
that
especially
those
who
are
doing
live
demos
in
this
call
and
get
the
positive
feedback
on
the
volunteering
and
helping
others
in
the
community
to
make
things
happen.
A
Now,
from
an
asset
perspective,
url
perspective,
there's
a
lot
of
lot
of
assets
available.
We
have
two
different
youtube
channels.
We
have
the
official
microsoft
365
developer,
video
channel,
which
is
now
positioned
as
for
official
videos,
and
then
we
have
the
community
video
channel,
which
is
more
for
community
call
recordings
community
demos
from
this
course
and
all
of
that
stuff.
So
there's
kind
of
a
clear
separation
of
of
videos
from
between
the
channels,
and
we
have
a
lot
of
open
source
assets
available
in
multiple
different
locations,
a
lot
of
sample
galleries.
A
We
are
finalizing
the
the
unified
microsoft
365
sample
calorie
testing
right
now,
which
is
really
cool,
so
there
will
be
pretty
soon
a
new
unified
sample
gallery
where
you
can
go
and
search
for
microsoft,
team
samples
and
sbfx
samples
or
even
list
formatting
samples
or
power
platform
samples
from
a
one
single
location,
and
that's
really
really
useful
for
everybody
in
the
microsoft
resistive
area
and
if
you're
wondering
that
they
say.
There's
too
many
urls
to
remember.
A
No,
no,
no,
only
one
a
gamer's,
m365
bmp
now
something
what
we're
doing
with
the
with
within
the
summer
in
the
northern
hemisphere
and
because
it's
a
summer
in
the
northern
hemisphere,
we're
going
to
actually
have
some
summer
breaks
in
some
of
the
calls
and
after
the
summer
we're
also
adjusting
some
of
these
calls
as
well.
So
one
of
the
feedback,
what
we've
been
getting
is
that
there's
too
many
calls
and
some
of
the
calls
start
at
7am
pacific
time.
A
Some
at
8
am
some
at
9am
and
it's
not
super
clear
when
they're
happening
and
which
of
the
time
of
the
month,
they're
actually
happening,
and
that's
basically
the
map
of
those
calls
from
a
monthly
perspective
and
there's
a
lot
of
them.
So
what
we're
trying
to
do
here
is
that
we're
trying
to
consolidate
so
after
our
summer
break.
A
So,
first
of
all,
a
sharepoint
community
called
microsoft
teams,
community
called
microsoft,
craft
community
called
will
be,
will
be
not
happening
during
july
and
august,
but
from
the
start
end
of
august
we
will
actually
introduce
the
new
microsoft
365
engineering
community
call,
which
happens
every
week
at
tuesday
at
a
8
am
pacific
time.
So
you
will
know
when
these
calls
are
happening.
A
A
So
you
will
know
is
the
call
happening
or
not,
and
so
we
kind
of
schedule
all
of
these
things
now
quick
note
thursday
calls.
So
this
community
focused
calls
thursdays
are
happening
throughout
the
summer
summertime
as
well
again
summer
in
the
northern
hemisphere.
It
is
actually
winter
in
half
of
the
the
earth
as
well.
Now,
a
quick
recap
on
the
other
side's
sharing
is
caring
and
david.
Can
you
do
a
quick
update
in
here.
B
Absolutely
thank
you
well
friends,
as
you're
going
to
see
by
the
rest
of
the
slides,
there
are
a
plethora
of
resources
and
tools
available
to
you
within
our
community.
They
are
all
welcome
for
you
to
contribute
back
to
as
well.
So
we
want
you
to
use
them.
We
want
you
to
contribute
back,
but
we
understand
that
there
are
sometimes
some
hurdles
that
will
prevent
you
from
doing
that.
For
example,
you
may
not
be
sure
how
to
navigate
github.
B
We'd
love
to
see
you
sharing
is
caring
is
a
hands-on
collection
of
guidance
sessions
that
will
walk
you
through
a
number
of
these
opportunities
that
are
available
to
you,
whether
you
just
want
to
get
started
using
or
you'd
like
to
contribute
back
safe
space,
completely
free,
hands-on
opportunities
where
you
are
able
to
collaborate
with
members
of
the
pnp
team
and
your
fellow
community
contributors,
so
please
feel
free
to
join.
We've
got
a
number
of
upcoming
session
topics.
We've
got
even
more
coming
soon.
B
A
Excellent,
thank
you
david
on
that
one
and
then
let's
do
a
quick
recap
on
other
assets
and
and
project
updates,
what's
happening
so,
first
of
all
for
sharepoint
framework,
so
what's
happening
in
here,
we
do
have
some
updated
news
which
is
really
really
cool.
So,
first
of
all,
we
are
executing
still
and
the
microsoft
viva
connections
preview.
So
if
you're
interested
on
building
something
on
the
preview
capabilities
of
sharepoint
framework,
1.13
targeted
for
the
mobile
experiences,
you
can
actually
sign
up
using
the
url
which
is
visible
within
the
screen.
A
So
it's
the
best
gamers
viva
connections,
preview
register
and
then
we'll
enable
you,
the
the
viva
connections,
capabilities
within
your
channel
and
get
access
on
preview
bits.
Now
on
those
preview
bits,
because
the
viva
connections
preview
has
been
insanely
popular,
there's,
there's
close
to
500
people
already
signed
up.
We
are
actually
planning
to
move
to
a
model
where
this
bits,
which
basically
means
sharepoint
framework
1.13
preview,
will
be
available
for
you
to
get
access
for
start
of
end
of
june.
So
within
upcoming
weeks,
which
is
well
yeah.
A
Two
weeks
from
now
we're
heading
to
july,
so
we're
planning
to
get
the
1.13
preview
out,
and
that
means
that
then
anybody
can
actually
start
building
viva
connections
cards,
because
we
are
a
bit
struggling
on
setting
up
all
of
the
the
preview
capabilities
in
all
of
the
tenants.
Because
of
this
huge
huge,
huge
interest
related
on
a
viva
connections
so
and
we're
trying
to
make
this
as
easily
available
for
everybody
and
obviously
from
a
sharepoint
framework
perspective.
A
It's
actually
already
been
approved
to
get
shipped
and
we're
just
waiting
that
to
roll
out
externally
one
step
at
a
time,
so
there
were
gonna,
be
a
complete
full
sharepoint
store
modernization,
including
a
tenant,
app
catalog,
modernization
and
all
of
that
stuff.
So
we're
really
really
investing
on
all
of
these
areas.
A
C
Thank
you
vesa,
so
the
2.6.0
release
happened
on
june,
2nd.
We
had
some
really
good
client-side
page
improvements
with
some
pre-publishing
stuff
there.
We
also
had
an
addition
for
managing
site
collection,
app,
catalogs
and
an
addition
of
the
find
rooms
endpoint
for
user
and
calendcontrol
in
the
graph,
of
course,
always
keep
your
feedback
coming.
You
can
submit
any
feedback
or
questions
or
bugs
that
you
think
you
found
to
our
issue
list
and
also
follow
us
on
twitter,
using
the
m365
pmp
js
handle.
C
I
also
wanted
to
announce
once
again
that
our
v3
development
is
underway.
So
this
is
an
a
new
version
of
pmpjs
that
will
have
some
breaking
changes
in
it,
but
some
really
amazing
advancements,
we're
really
patrick-
and
I
are
really
excited
about
what
we've
gotten
done
so
far
and
we're
working
hard
on
that.
C
You
can
check
out
the
v3
branch
if
you
kind
of
want
to
peek
inside
and
see
what's
going
on,
the
v3
branch
is
available
and
to
see
what
our
plans
are
check
out,
issue
1636,
it's
pinned
and
you
can
see
what
the
plans
are
and
it
links
over
to
discussion
areas
where
all
the
details
are
exposed,
and
that
is
all
I
had
to
share
today.
Thanks
vessa.
C
A
A
So
there's
a
new
beta
available
for
version
3.11
with
generating
spf
x
bucket,
says
for
html
snippet.
This
is
actually
really
cool.
So
quite
often
you
need
to,
for
example,
embed.
Let's
say
a
google
map
or
something
to
your
modern
sharepoint
experiences,
and
this
basically
auto
generates
sharepoint
framework
packages
for
html
snippets.
So,
basically,
you
can
use
the
cli
the
auto,
generate
solutions,
sharepoint
framework
solutions
without
understanding
what
the
code
actually
is
doing.
So
you
can
just
copy
a
html
snippet
and
execute
that
in
the
cli.
A
It's
a
really
really
cool
way
of
making
it
as
simple
as
possible
to
embed
html
snippets
on
a
page
as
well.
A
lot
of
additional
things
as
well
as
pfx
doctor,
is
moving
forward.
Updating,
azure,
adapt
registration
permanently
deleting
office,
365
groups
and
new
microsoft.
36500
usage
reports
a
lot
of
a
lot
of
stuff
there
there's
an
additional
set
of
sample
scripts
also
available,
and
you
can
install
the
latest
version
and
the
beta
version,
if
you're
interested
in
doing
that
by
using
the
add
bnb,
slash,
cli,
microsoft.
A
365
at
next
is
always
the
future
version
in
general.
These
are
released
once
a
month
as
the
as
the
the
major
version
so
to
say
really
cool
to
see
and
how
this
is
evolving,
as
well.
Now
on
the
spfx,
reusable
components
and
controls.
The
latest
version
is
the
2.7
for
the
react
controls
which
are
widely
used
within
the
web
part
content.
A
So
as
an
example,
by
far
the
most
widely
used
control
here
is
the
web
part
title,
which
is
mimicking
what
we
are
using
in
a
sharepoint
engineering,
so
making
sure
that
you
can
actually
take
advantage
of
similar
kind
of
experiences
and
there's
new
controls
available
in
here
as
well,
so
that
there's
the
themes,
channel,
picker,
there's
the
my
teams
and
there's
additional
capabilities
there
as
well.
Now
the
react
property
controls
are
then
targeted
for
use
as
setting
up
and
configuring
your
web
parts
and
additional
things
and
fixes
available
there
as
well.
A
We're
right
now
seeing
more
contributions
in
the
react,
control
side
and
in
the
property
controls
which
seems
to
indicate
that
property
controls
are
getting
to
be
like
quite
a
and
they
have
a
good
coverage
on
the
business
requirements
perspective.
It's
really
really
cool
as
well.
We're
seeing
them
used
super
super
quietly
throughout
the
world
and
then
a
quick
update
on
the
bmp
modern
search.
The
latest
version
is
4.2.3
and
you
can
download
that
directly
from
the
github
as
well.
A
Also,
I
think
we
are
sharing
the
svp
kj
file
on
the
modern
search,
so
there's
a
fix
for
safari
and
legacy
edge
issues,
so
the
rendering
should
be
working
properly.
There's
additional
translations
available
export
import
report
settings
because
natively
within
the
modern
sharepoint
you
don't
have
that.
A
So
I
think
sooner
or
later
maybe
somebody
will
provide
and
first
party
experiences
or
maybe
not
we'll
see
how
that's
happening.
But
clearly
people
want
to
have
a
search
capabilities
and
this
is
providing
and
it's
providing
such
an
awesome
set
of
features
already
now
and
then
bmp
spf
examples.
I
think
hugo
you're
gonna
do
this.
One.
D
D
We
have
two
github
repositories:
the
spfx,
extensions
and
spfx
webparts,
where
you
can
find
samples
contributed
by
the
community,
ranging
from
like
simple
concepts
to
you
know,
for
example,
how
to
use
a
control
to
the
full
solution
and
utilities.
So
we
welcome
contributions
from
everyone,
and
these
are
the
updates
for
the
last
two
weeks.
Since
our
last
call
on
the
spfx
extension
side,
we
have
a
new
copy.
D
Pnp
web
part
search,
result
so
copy
the
the
settings
from
one
page
to
another,
which
makes
it
easy
for
you
to
do
and
it
was
built
by
anup
and
it's
actually
a
great
solution.
We
also
have
by
andre
laga.
We
have
a
new
follow
documents
extension
which
allows
you
to
use
a
social
follow
settings
to
actually
monitor
documents
in
a
site
on
the
webparts
site.
D
D
The
one
thing
that
we
should
probably
point
out
here
is
three
out
of
the
four
samples
that
were
updated
in
the
last
two
weeks
are
updated
to
spfx121,
and
this
is
a
great
milestone,
because
over
the
past
many
years
we've
been,
you
know
really
working
hard
to
make
sure
that
all
the
samples
get
updated
to
the
latest
version
of
spfx
just
to
make
it
easy
for
anyone
to
get
started
without
having
to
worry
about
compatibility
with
node
or
the
environment.
They
have,
and
everything
like
that.
D
E
D
A
Thank
you.
Thank
you,
hugo
on
that
one.
So,
let's
actually,
then
do
a
quick
crew
photo
for
those
who
are
willing
to
share
their
faces,
and
it's
always
a
good
thing
to
get
us.
I'm
going
to
start
the
recording
and
no
rush
yet,
but
if
you
enable
a
video,
you
will
be
soon
on
the
screen
and
we
have
a
limit
of
50
people
in
these
recordings.
The
black
looks
different,
but
it's
good
and
I
can
see
sharepoint
monkey
again
there
good
good
journey
from
lisbon.
A
Unless
I'm
completely
mistaken
and
let's
see
when
we're
filling
up
the
screen,
do
we
still
have
receipts?
Is
that
phil?
No?
No!
No
closing.
I
will
actually
enable
my
my
video
as
well,
maybe
taking
one
seat
as
well,
but
let's
do
some
handwaving
everybody.
So
thank
you
for
joining
and,
thank
you
say,
hi
for
the
community
and
and
let's
stay
in
touch.
Hopefully
by
end
of
this
year
we
can
actually
see
physically
each
other,
maybe
in
las
vegas
or
maybe
in
dusseldorf
or
maybe
in
any
other
conferences.
So
thank
you.
A
E
Yeah,
thank
you.
My
name
is
sergef.
I'm
from
belarus,
minsk,
I'm
sharepoint
and
microsoft,
365,
developer
and
consultant
also
microsoft,
mvp
under
office
development
category,
and
mostly
I
work
as
independent
contractor
in
this
demo.
We
talk
about
spfx
fast,
serve,
it's
faster
sharepoint
framework
development.
So
let's
go
to
the
demo
part.
E
So
what
is
spfx
fast
serve?
That's
the
command
line
utility
which
modifies
your
sharepoint
framework
build
so
that
it
runs
continuous,
serve
command
as
fast
as
possible.
So
what
does
it
mean
exactly
so,
let's
start
with
this
sample
web
part.
So
I
have
a
very
simple
web
part
here
which
simply
outputs
your
contact
information.
So
if
you
run
inside
of
sharepoint,
then
it
prints
your
web
information
using
rest
api
call.
If
you
run
inside
teams,
then
it
prints
out
your
team's
context,
information.
E
So
normally,
when
you
develop
spfx
web
parts,
then
you
have
this
gulp
serve
process
running.
I
have
it
already
running
here
and
when
you
modify
the
code,
let's
say
I
want
to
change
it
like
this
and
when
you
click
save,
then
as
perfect,
build
pipeline
starts
a
rebuild
process
which
rebuilds
types
create,
packs
everything.
And
finally,
you
can
reload
your
page
and
see
the
changes
so
for
for
my
part
here,
this
process
took
seven
seconds.
So,
if
I
let's
say
revert
it
back
like
this
click
save,
then
the
process
starts
from
the
beginning.
E
For
example,
I
have
I
have
a
logs
from
pnp
modern
search
solution,
and
here
when
we
run
gulp
server,
when
you
modify
a
file,
then
it
takes,
for
example,
typescript
task.
It's
almost
8
seconds.
Then
we
have
webpack
11
seconds.
We
have
copy
assets
almost
1.
Second,
in
total,
it's
more
than
20
seconds
just
to
rebuild
your
process
of
your
project
after
file,
save,
which
is
not
very
convenient
in
developer
experience.
E
So
this
is
what
spfx
fast
source
is
trying
to
solve
and
is
trying
to
improve,
to
decrease
this
reload
time
so
how
to
install
it.
It's
very
easy.
First
of
all,
you
should
install
the
cli
globally,
so
we
should
in
pm,
install
as
prefix
fast
server
dash
g,
so
I
have
it
installed,
so
I'm
not
going
to
run
it.
Then
you
should
navigate
to
your
spfx
project
and
simply
run
spfx
fast
server
after
this
command
fast
serve.
Cli
will
update
some
files
inside
your
spfx
project
so
that
fast
surf
mode
will
be
available
for
you.
E
So
let's
see
what
was
changed.
First
of
all,
that's
the
package.json
file.
It
adds
this
dependency,
which
is
very
important
dependency,
because
it
enables
all
different
helpers
and
methods
for
fast
serve
mode.
Also,
the
cli
adds
a
new
npm
script
command
here
and
this
command.
You
should
run
if
you
want
to
to
run
your
build
in
a
fast
server
mode.
Basically,
this
message
says
that
when
you're
done,
you
should
execute
npm
run.
So
that's
this
npm
script.
E
And
then,
if
you
go
to
our
route
and
then
we
find
the
fast
source
folder,
which
contains
the
config
file,
config
file
contains
the
initial
settings
you
used
when
running
the
cli.
And
additionally,
you
have
a
serve
property
where
you
can
specify
different
additional
configuration
for
your
serve
command.
For
example,
open
false
means
that
it
does
not
open
the
local
workbench.
E
You
can
specify
open
url,
so
the
exact
url
you
want
to
open.
You
can
modify,
for
example,
login
level,
full
screen
errors
etc.
Now,
so
you
can
change
it
here,
and
the
last
file,
which
is
added
by
spfx,
faster
tool,
is
the
pac.exe
file.
So
again,
this
file
is
added
to
support
some
advanced
scenarios.
If
you
in
your
build
spfx
build
if
you
use
this
feature
called
build.configure
webpack.
So
if
you
use
any
webpack
modifications
inside
your
spfx
build
pipeline
so
that
you
should
also
reapply
this
configuration
into
the
webpack.extent.js
for
serve.
E
For
example,
here
I
use
webpack
alias
so
this
is
resolve,
alias
that's
the
feature
which
allows
me
to
to
write
code.
Try
import
like
this,
so
import
from
at
src,
slash,
etc.
So
I
have
it
configured
here
and
also
I
have
it
configured
here
in
my
webpack.extend.js,
so
that
it
is
also
supported
inside
fast
server.
E
So
again,
before
running
in
a
fast
surf
mode,
it
executes
gulp
bundle
command.
This
is
the
required
step,
because
this
step
creates
some
some
configuration
files
needed
for
fast
serve.
That
is
why
this
step
is
always
included,
and
now
we
are
running
in
a
fast
surf
mode
and
again,
if
I
do
the
same
trick,
if
I
want,
if
I
go
to
components
header
and
if
I
change
this
text
to
be
like
one
one,
one
click
save-
and
I
have
to
refresh
here
because
I'm
running
from
scratch:
okay,
let's
change
it
to
two.
Two.
E
Two
click
save
and
you
see
that
this
time
the
rebuild
time
is
drastically
decreased.
So
it's
just
300
of
milliseconds
instead
of
7
seconds,
and
also
I
can
see
my
changes
live
in
a
hosted
workbench,
which
is
automatically
reloaded.
So
if
I
change
to
5
click
save
again,
it's
200
milliseconds,
so
you
see
it
is
faster.
This
is
how
this
problem
of
slow,
reload
bills
is
solved
by
spfx
faster.
E
Moreover,
it
works
in
teams
because,
if
you
remember
that's
the
context
info
web
part,
it
works
in
different
hosts.
If
you
go
to
viewer
connections,
it
works
inside
people
connections.
I
have
a
demo
page
here,
so
I
can
change
it
again
to
1-1-1
click
save,
and
you
see
it
also
automatically
refreshes
the
page
inside
the
connections
as
well.
When
I
click
save
it
refreshes
again,
and
if
we
go
to
teams
and
then
to
to
my
custom
tab
here
context
info,
then
it
works
in
a
custom
tab
to
this
time.
E
E
So
basically,
this
is
how
it
works,
how
to
configure
it
in
the
in
future.
In
the
next
version
of
s
perfect,
a
new
component
card
extensions
will
be
supported
by
fast
serve
as
well,
but
how
how
it
works
or
why
it
is
so
fast.
First
of
all,
because
fast
serve
uses
completely
custom.
The
bug
based
build
and
this
build
is
optimized
for
performance,
for
example,
all
compilations.
They
are
done
in
memory.
E
That
is
why
increment
incremental
builds
so
faster
inside
as
perfect
fast
serve,
and
I
have
a
few
minutes
left
and
I
would
like
to
show
you
a
feature
I
added
in
just
a
week
ago.
This
feature
it
is
called
hot
model
replacement.
So
if
you
have
experience
with
create
react,
app,
probably
you
know
what
is
hmr
hot
model
replacement.
E
Basically,
when
I
so
as
I
demand
before,
when
I
change
a
file
or
a
source
code,
then
webpack
rebuilds,
my
source
files
and
then
finally,
it
refreshes
the
page.
But
the
idea
behind
hmr
feature
is
that,
instead
of
performing
a
full
page
refresh
because
sometimes
it
again,
it
might
be
slow
to
perform
a
full
page
refresh.
E
It
tries
to
apply
a
partial
update
to
the
page,
so
it
grabs
your
change,
react
component
and
replaces
outdated
component
on
the
page
with
the
new
one
which
came
from
the
backend.
So
basically,
this
is
this
is
how
this
feature
works
and
to
enable
you
should
you
should
set
hold
refresh
to
true
here.
Let's
run,
npm
run
serve
and
see
how
it
works
in
action.
E
Now,
let
me
refresh
it
again
because
I'm
running
from
scratch
now
let's
say
I
would
like
the
sub
header
color
to
be
red,
so
I
change
it
to
red
click,
save
and
now
you
see
the
magic
it
does
not
perform
a
full
page
refresh.
Instead,
it
simply
applies
a
partial
update.
So
if
I
want
background
color
to
be,
I
don't
know
like
this
click
save,
then
again
it
dynamically
applies
without
full
page
refresh.
I
can
change
paging
and
again
it
does
not
refresh
page.
E
I
can
even
change
something
inside
source
code
in
typescript
like
like
this
click
save
and
again
it
does
not
refresh
the
page.
So
this
feature
is
considered
as
experimental
because
it
still
requires
some
configuration.
For
example,
it
works
only
with
typescript
four,
you
have
to
install
rushtag
compiler
4..
Also,
you
should
be
aware
that
it
doesn't.
It
does
not
work
for
all
components.
Sometimes
it
falls
back
to
the
full
page
refresh.
E
A
Absolutely
brilliant
stuff!
Thank
you.
Thank
you
sergey
on
that.
One
really
really
really
really
cool
so,
and
there
was
a
lot
of
comments.
Why
don't
we
have
this
natively
out
of
the
box
and
and
support
it
and
all
of
that-
and
maybe
we
will
be
at
some
point.
So,
let's
see
right
now,
it's
it's
it's
available
as
a
individual,
individual
package
and
thank
you
sergey
really,
awesome
stuff.
Absolutely
now!
F
F
We
had
two
main
goals
with
building
this
app.
The
first
was
that
we
wanted
to
know
exactly
what
time
it
was
for
each
member
of
my
team
so
that
I
know
if
it's
okay,
I
know
whether
or
not
somebody
is
you
know
it's
dinner
time
for
somebody
or
whether
they
haven't
woken
up
yet,
and
you
know
especially
now
that
we
we've
all
been
remote
for
so
long.
F
That
line
between
work
and
home
has
been
blurred,
and
so
this
helps
us
sort
of
work
that
out
a
little
bit
better
and
the
second
goal
was
to
have
the
ability
to
figure
out
what
time
is
least
horrible
for
everybody,
especially
when
you
need
to
schedule
meetings
around
the
globe.
I
work
with
a
team
in
japan
and
I
work
with
a
team
in
europe,
and
I
am
in
the
east
coast
in
the
us
and
so
trying
to
navigate
those
multiple
time
zones
is
pretty
challenging
all
right.
F
So
that's
the
it
for
the
slides,
we're
going
to
run
right
into
a
demo.
We've
gone
and
we've
built
this
as
both
a
teams
app
and
a
personal
app.
So
I'm
going
to
start
here
with
the
teams
app
and
when
you
load
the
application,
it
automatically
pulls
in
everybody
who
is
a
member
of
the
team
and
and
gives
you
a
visual
representation
of
where
they
are
in
the
world
and
what
time
it
is
for
them.
So
you
can
see
over
here.
F
We've
got
jamie
in
alaska
and
it's
6
34
in
the
morning
for
them,
and
we've
got
carter
over
in
tokyo
and
it's
11
yeah,
it's
11
35
in
tokyo,
and
so
we've
grouped
each
person
here
based
on
their
time
zone
or
what
time
it
is
for
them.
So
they
may
not
necessarily
be
in
the
exact
same
time
zone,
but
they
it's
that's
the
same
time
for
them,
based
on
the
offset
we've,
also
provided
sort
of
a
handy,
visual
indicator
that
you
know
for
ken
in
chicago
and
mike
and
dublin
it's.
F
F
F
It
sort
of
just
comes
up
and
pulls
it
all.
This
is
a
manageable
list.
We've
built
it
so
that
you
can
come
in
and
especially
for
external
users.
You
can
actually
set
the
time
zone
for
them,
so
say
they're,
not
in
teams
all
the
time
you
can
come
in
and
I
can
set
mike's
time
zone
to
his
his
time
zone
in
dublin
or
I
can,
if
I'm
traveling,
I'm
in
the
new
york
times
zone
right
now
and
I
can
go
ahead
and
like
if
I'm
going
to
go
to
chicago
next
week.
F
I
can
change
this
to
chicago
so
that
when
folks
come
in
and
they
look
they'll
know
I'm
in
chicago
and
that's
what
time
it
is
and
because
this
is
a
team
app
and
we
sort
of
make
an
assumption
that
teams
are
more
project
based.
We
also
provide
the
ability
to
specify
which
times
I'm
working
on
this
project,
so
you
can
see
next
to
my
name.
I've
got
a
little
profile
icon
and
so
say
it
for
this
project.
I
work
on
it
monday,
wednesday
and
friday.
F
We've
got
the
entire
grid
laid
out
red
being
times
that
you're,
not
working,
yellow
being
times
that
you
might
be
able
to
work
on
this
project
occasionally
and
green
is
your
sort
of
standard
working
hours.
So,
if
I
was
working
on
this
monday,
wednesday
and
friday,
I
could
completely
block
out
in
red,
tuesdays
and
thursdays,
and
this
gives
you
the
ability
to
sort
of
customize.
F
F
We
also
give
the
ability
to
create
views
now,
like
I
said
this
is
10
users.
So
it's
no!
You
know
it's
it's
easily
adjustable,
but
what
if
I
wanted
to
create
a
list
of
users
that
were
say
just
the
ux
folks,
so
I
can
come
in
and
I
can
create
a
new
view
called
ux
members
and
I'm
going
to
add,
alex
derek
and
stefan
and
I'm
going
to
click
save
and
now
you
can
see
it
filters
down
directly
to
that.
F
Those
three
people,
one
thing
to
know
is
that
there's
no
security
trimming
on
these,
so
you
know
don't
create
a
view
called
people
I
don't
like,
but
I'm
gonna
switch
back
to
the
default
view
so
that
I
can
see
everybody
and
so
that
sort
of
covers
the
first
item
there,
which
is
how
do
I
know
what
time
it
is?
The
second
goal
was:
how
do
I
schedule
meetings?
F
You
know,
we've
got
10
and
11
is
the
reasonable
time.
If
I
hover
over
this
box,
I
can
see
it's
going
to
be
9
o'clock
for
ken
it's
going
to
be
three
o'clock
in
the
afternoon
for
mike,
so
this
works
out.
So
I
can
click
10
the
schedule
meeting
button
lights
up
and
then
I
can
actually
click
on
it,
and
it
brings
me
over
to
a
deep
link
into
schedule.
The
meeting
in
teams-
one
thing
to
note
is
that
external
users,
mike
is
an
external
user.
It
does
not.
F
We
don't
have
the
ability
to
add
them
directly
to
the
invite
line,
so
we
added
them
to
the
body
and
you
can
actually
copy
and
paste
and
just
add
them
in
okay.
So
that
is
the
team
app,
and
we
also
created
this
as
a
personal
app.
The
personal
app
works
the
same
as
the
team,
app
with
the
exception
that
it
pulls
your
users,
the
users
that
you're
most
closely
interacted
with
via
the
graph,
as
well
as
your
contacts
from
your
outlook.
F
So
this
is
the
personal
app
and
you
can
see,
we've
got
a
few
different
users
here.
These
are
pulling
some
folks
that
are,
in
my
contacts
like
I
said,
the
biggest
difference
here
with
this
one.
Is
that
because
it's
a
personal
app,
it
pulls
folks
that
you
are
connected
to
via
the
graph
and
also
folks
can't
they
don't
have
the
ability
to
edit
your
personal
app.
So
you
can
actually
set
their
time
zones
and
their
profile
themselves.
So
we've
got
stefan
here
and
I
know
he's
in
vienna,
so
I
can
actu.
F
I
can
set
his
time
zone
here
and
I
can
also
set
his
working
hours
here
as
well,
because
obviously
folks
can't
do
that.
I
can
also
go
into
azure
id
and,
I
can
add
a
new
member
and
I
can
search
for
jane,
say
I
got
a
new.
You
know
a
new
employee,
I'm
a
manager
and
I
got
a
new
employee.
They
got
added.
So
I
can
click.
The
add
button
and
now
jane
is
part
of
my
team
and
I
can
adjust
and
put
this
together
as
well.
F
So
I
can
set
her
to
melbourne
she's
in
melbourne
and
I
click
save
and
now
this
will
update
and
put
her
in
the
appropriate
spot.
This
refreshes
periodically.
So
you
don't
actually
need
to
refresh
the
page
she'll,
just
pop
up
and
again
same
functionality.
You
know,
if
I'm
a
manager
I
can
select
director.
I
can
create
a
view
of
my
direct
reports
and
I
can
try
to
schedule
a
meeting
with
all
of
those
people,
so
I
can
come
in
and
I
can
go
like
this
and
go
wow.
F
There's
really
not
a
good,
a
good
time
between
all
of
these
people
in
all
of
these
time
zones.
So
I
can
look
and
I
can
say
well,
5
a.m,
for
me
is
really
bad,
and
so
I
can
sort
of
start
talking
to
people
and
see
whether
or
not
it
makes
the
most
sense
or
maybe
jane
doesn't
attend
the
meeting.
And
then
we've
got
a
little
bit
more.
No,
we
don't
a
little
bit
more
wiggle
room,
and
so
that's
the
personal
app
julie
did.
I
miss
anything.
C
Let
me
quickly
share
my
screen.
Okay,
so
let
me
see,
are
we
sharing?
I've
got
red,
everybody
can
see,
okay,
so
I'm
showing
the
viva
dashboard,
and
so
again
this
is
preview
code
using
the
1.13
beta
5
review,
release
of
the
viva
connections.
Preview,
that's
out
for
some
users
that
are
in
the
preview,
and
so
what
I've
done
here
is
built
a
dashboard
card
for
that
world.
Clock
app,
so
this
world
clock
app
is
only
gonna.
This
viva
dashboard
item
is
only
going
to
show
personal
information.
C
So
what
it
does
is
when
you
click
on
the
card
itself,
then
it's
going
to
deep
link
into
teams
and
when
you
come
into
teams,
I'm
going
to
just
use
the
web
client
because
it's
easier,
it's
going
to
take
me
right
to
the
world
clock
app
and
then
what
I
can
do
is
I
have
this
added
button
that
says
view
team
and
when
I
click
the
view
team
button,
then
I
get
all
the
members
of
my
different
views.
So
if
I
had
three
views,
I
have
a
family
view
here.
C
So
when
I
click
the
schedule
meeting
button
that
does
a
deep
link
passing
in
the
view
id
so
that
when
we
come
into
the
world
clock
app,
we
get
right
into
that
view
that
I
clicked
on
and
now
we
can
go
through
the
process
of
scheduling
a
meeting
and
picking
a
time
that
works
for
that
team.
So
visually
that's
what
the
this
personal
app.
So
it
does
so
now.
C
Let
me
let
me
do
the
code
review
and
hopefully
I
can
get
through
this
in
in
some
quickness,
so
we've
got
in
our
our
sharepoint
framework
solution.
We've
got
two
sections
here:
we've
got
the
web
part
for
the
world
clock
and
in
that
section
there
we
have
all
the
services
and
everything
we
needed
to
make,
that
world
clock
app
work,
and
then
we
have
the
new
edition
of
the
adaptive
card
extension.
C
So
if
we
go
into
the
adaptive
card
extension
folder,
we
can
see
that
we
have
all
the
code
to
manage
that
and
so
we're
going
to
start
by
going
into
the
teen
time
zone,
adaptive
card
and
so
we'll
have
an
on
init
function,
and
we
have
this
in
our
web
part
as
well,
that
we
use
as
the
teams
tab
or
the
personal
app.
So
we
do
need
to
configure
things.
C
So
we
register
the
cards
that
we're
going
to
use
the
card
itself
and
the
quick
view
with
some
initialization
for
the
pmp
logging
and
to
set
up
pmpjs,
and
then
we
also
have
their
online's,
49
and
50,
where
we're
initializing
our
world
clock
service
and
so
that
passes
in
all
the
information
it
needs.
We
are
using
the
personal
app
version,
so
it's
going
to
initialize
it
for
that,
and
then
it's
going
to
set
the
state
of
the
dashboard
app.
So
we
have
the
current
config.
So
that's
that
can
that
blob
of
json?
C
C
In
this
example,
it's
really
just
specifying
the
card
view,
so
we
don't
have
to
specify
a
template
because
that
we've
picked
which
template
we
want
and
in
this
case
we're
going
to
use
the
basic
card
view,
but
we
do
need
to
pass
in
the
data
that
we're
going
to
use.
And
again
this
is
pretty
hard-coded.
We
just
have
a
string
for
the
pri,
the
title
and
a
string
for
the
primary
text
that
icon
property
is
set
to
this
icon,
black
and
white,
which
is
an
import
from
a
file
in
our
assets.
C
C
So
if
we
come
into
the
quick
view-
and
we
zoom
in
here
on
the
code,
what
is
really
happening
here
same
as
the
card
view,
but
for
the
quick
view
we
have
to
specify
our
template
or
we
want
to
specify
our
template
and
we
want
to
specify
our
data.
So
the
two
are
going
to
merge
together
and
then
all
the
places
where
in
our
template
we
have
data
placeholders.
The
data
will
then
merge
together.
So
it's
it's
exactly
like
a
mail
merge
in
word.
C
To
be
honest,
so
we've
got
our
data
function
here
and
in
our
data
function
at
first.
Well,
let
me
see
if
I
can
use
my
laser
pointer
here,
so
we've
got
our
laser
pointer
here
and
so
we're
going
to
get
the
view
which
is
going
to
get
the
remember.
I
set
this
current
config
on
the
state
and
so
we're
going
to
get
the
views
and
the
current
based
on
the
current
view,
we're
going
to
get
that
view.
C
So
now
we
have
that
view
and
we're
going
to
look
at
all
the
members
in
the
view
and
we're
going
to
then
create
the
data
set.
The
way
the
template
will
understand,
so
we're
going
to
walk
through
each
member
and
figure
out
what
their
current
time
is.
So
that
line
right
here
line
53
is
going
to
go,
get
the
current
time
based
on
their
time
zone.
C
So
once
we
have
that
information,
then
when
we
render
the
card
using
the
template
and
here's
the
template,
we
can
show
that
nice
little
icon
one
way
or
the
other.
Now,
I'm
I'm
gonna
just
quickly
run
through
this.
So
we
have
this
header
here.
This
column
set
is
the
header
and
you
can
see
this
first
column
section
here
lines
14
through
like
22.
This
is
the
previous
button.
C
So
that's
that
back
arrow
that
scrolls,
through
the
view
we
have
the
previous
and
then
as
we
scroll
down,
we
have
the
title
block
and
then
we
have
the
other
section,
which
is
the
next
button.
So
that's
that
header
right
there
and
then
we
have
another
container
that
shows
it
is
going
to
be
an
array
of
items
based
on
the
members
object,
so
line
64
right
at
the
top
there.
C
You
can
see
it's
looking
at
the
members
piece
of
our
data,
that
is
an
array
of
members,
and
so
then
it's
gonna
put
on
the
display
name
and
the
current
time.
And
if
I
scroll
down
here
a
little
bit
more
based
on
which
icon,
if
they're
day
or
night,
it's
got
a
a
nice
url
to
an
image
so
that
it
knows
which
icon
to
put
and
then
last
but
not
least,
we
have
that
schedule
meeting
button
down
at
the
bottom.
That's
going
to
have
the
url
for
the
deep
link
to
schedule
a
meeting.
C
So
let's
come
back
quickly
into
the
quick
view
and
scroll
down
and
look
at
that
on
action.
So
this
is
the
this
is
where
the
the
previous
and
next
buttons
at
work.
So
when
we
come
in
here
we're
going
to
check
the
action
type
and
then,
if
the
auction
is
the
previous
button,
then
I'm
going
to
go
find
the
view.
C
That
was
previous
in
the
list
and
I'm
going
to
set
up
the
new
view
id
and
then
I
set
the
state
on
line
81
and
when
you
set
the
state
on
line
81,
what
it
does
is
re-merge
the
template
with
the
data
refreshes,
the
data
and
you
get
a
new
merged
card,
and
so
that's
how
it
changes.
What
it
looks
like
it's
it's
the
same
as
a
render
method
in
yeah.
So
then
we
have
the
next,
and
that
does
the
same
thing
all
right,
and
so
that's
all
my
code
and
julie.
A
I
know
that
you
you've
been
scripting
this
and
everything
can
we
go
back
on
the
on
the
on
the
json
structure
and
just
to
go
back
on
the
json
file,
where
you
showed
the
cards
and
just
to
kind
of
explain
for
those
who
are
not
familiar
yet
on
the
private
preview
and
that
this
is
the
basically
the
adaptive
card,
rendering
mechanism
of
the
card,
so
whatever
you're
seeing
in
the
card
is
basically
adaptive
card
but
yeah.
You
can
then
react
on
those
things
in
spfx.
Is
that
the
right
way
of
saying
that.
C
Yeah,
so
what
you're
talking
about
is
the
template?
Can
you
see
that
I
just
scrolled
it
into
view
yeah
so
you're
saying
that
in
the
template
right?
So
this
is
our
header
here.
This
column
set
right
here
in
these
columns,
so
that
was
our
header
in
the
members
section
here.
This
members
is
the
thing
that
gets
the
data
from
the
data
structure
in
here
so
over
here
I
said
that
I
was
going
to
have
members
right
in
our
data
structure
and
I'm
going
to
set
that
in
our
return
value.
C
So
I'm
returning
from
our
data,
the
quick
view,
data
and
the
interface
for
that
is
the
title,
the
url
and
the
members.
So
the
this
data
structure
is
what
is
passed
into
that
template,
and
so,
if
we
go
back
to
the
template,
oops
sorry
wrong
button.
If
we
go
back
into
the
template
this
string,
this
format
here
says
which
data
object
I
want
to
use
to
render
into
this
template.
Is
that
what
you're
asking
yeah
yeah.
A
And
given
the
timelines
and
everything
else,
I'm
going
to
skip
my
demo,
the
the
real
live
demo,
I'm
going
to
talk
about
that
in
a
few
minutes,
but
can
we
can
you
go
back
still
on
the
solution?
I
showed
the
card
one
more
time
and
let's,
let's
talk
about
that
a
bit
just
to
educate
everybody
in
this
call.
A
A
A
We
have
shown
some
of
the
demos
related
on
how
this
renders
in
the
in
the
mobile
areas
as
well
yeah,
but
this
is
basic
idea
here
is
that
you
will
have
the
vivo
connection
application
where
we
have
different
kind
of
cards.
People
can
design
their
experience
and
then
individual
card
behind
of
individual
cards
there's
an
application,
an
experience,
but
you
can
quickly,
for
example,
check
like
in
this
case
this
application.
You
can
use
that
to
check.
A
What's
the
time
zones
of
my
team
and
my
my
closest
to
working
colleagues
and
then,
if
needed,
you
can
go
directly
deep
linking
to
the
application
so
in
the
mobile
device
as
well,
and
that's
where
we
are
kind
of
a
heading
with
the
vivo
connection,
mobile
experiences
as
well,
so
really
really
cool
stuff.
From
that
perspective,
now
we
are,
we
have
two
minutes,
so
I'm
gonna
steal
back.
Thank
you.
Thank
you
for
that
demo,
really
really
cool
stuff,
julie
and
and
derek.
A
A
If
you're
an
isv,
then
you're
gonna
obviously
use
alternative
options.
Akms
teams
toolkit
is
the
url
to
get
started
and
download
and
get
in
additional
information,
and
we
would
love
to
get
your
input
and
feedback
on
this
one.
So,
if
possible,
if
you
have
ideas
how
we
can
improve
this,
and
please
please,
please
let
the
team
know
the
team
is
from
the
visual
studio
organization
and
they
would
love
to
get
more
input
around
the
sharepoint
framework
experiences
in
this
tool.
A
If
something
seems
obvious
for
you
as
a
sharepoint
framework
developer,
please
write
it
down
still.
It
is
a
new
organization,
new
team
who's,
trying
to
help
us
to
be
be
successful
with
this.
So
we
need
that
feedback
in
the
github,
so
github.com
has
office,
dev
teams,
effects
and
issues
and
there's
the
support
available
to
stack
overflow
spfx
experience
right
now
and
this
one
is
relatively
simple,
but
we
are
we're
planning
that
there's
a
lot
of
a
lot
of
plans
to
improve
that
so
human
generator
for
spfx
not
going
to
go
away.
A
Obviously
everything
what
you
have
right
now
not
going
to
go
away
and
every
the
experience
is
still
exactly
based
on
the
same
model,
you're
building
on
top
of
the
familiar
shape
and
framework
in
this
tool
as
well.
So
it's
just
a
combination.
How
we
merge
things
together
so
huge.
I
think
that's
it
for
now
we're
hitting
the
hours,
so
the
recording
will
be
available
within
24
hours
on
the
microsoft
365
community,
youtube
channel
and
follow
us
on
twitter.
The
next
sharepoint
favorite
call
two
weeks
from
now
on.
7
am
pacific
time.
A
Next
year,
microsoft,
365
general
development
call
on
june
24th.
So
week
from
now,
and
in
general,
like
we
discussed,
there
will
be
changes
in
the
community
call,
so
we
are
at
least
merging
microsoft,
graph,
microsoft
teams
and
sharepoint
course,
and
they
will
not
have
calls
during
july
and
august.
So
the
bi-weekly
calls
on
thursday
will
happen.
The
july
august
course
for
the
monthly
course
for
craft
and
teams
and
sharepoint
will
be
cancelled.
A
I
will
push
out
the
blog
post
on
this
one
next
week,
so
everybody
will
be
up
to
date,
then
we'll
do
redirections
of
the
urls
and
all
of
that
stuff,
and
and
all
of
that,
so
it
should
be
good.
But
thank
you,
everybody
from
the
from
the
demos
today.
Thank
you
julie.
Thank
you,
derek
thank
you,
sergey,
really,
awesome
stuff,
absolutely
brilliant
demos
and
there's
a
bunny
again
on
the
screen.
I
saw
that
and
thank
you
for
the
attendees
and
thank
you
for
your
feedback
and
keep
the
feedback
coming
thanks.