►
Description
Viva Connections & SharePoint community call on August 11. Two Demos - Building React Taxonomy File Explorer experience with SPFx and Introduction to new Viva Connections Toolkit VS Code extension to streamline your development. Released SharePoint Framework (SPFx) – v1.15.2 (RC), PnPjs Client-Side Libraries – v3.6.0 (GA) and CLI for Microsoft 365 – v5.6.0 (GA). Delivered 3 web part samples (Pages Hierarchy, My Awards and Palette Picker) and 1 ACE (Public Holidays). Register for Sharing is Caring – Power Platform Samples Contributor - Wednesday, August 17th. The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place as always in chat throughout the call.
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
Hello
and
welcome
to
the
viva
connections
and
sharepoint
framework
bi-weekly
sync,
it
is
august
11
2022.,
I'm
your
host
on
this
call,
patrick
rogers
and
we've
got
a
great
agenda
as
always
for
you.
We've
got
latest
updates
on
sharepoint
framework
visa
is
back
so
we'll
get
some
good
updates.
They're
excited
to
hear
what's
new
patterns
and
practices
updates
across
the
program.
New
community
samples
will
do
our
optional
picture
time
and
then
two
great
demos,
the
first
from
marcus
on
a
react,
taxonomy
file
explorer.
A
A
So
before
that,
let's
go
over
a
few
things
here,
so
we've
got
opportunities
to
participate
if
you're
ever
wondering
how
to
get
a
little
more
involved
in
the
patterns
and
practices
and
what
might
be
going
on
really
encourage
you
do
a
demo
reach
out,
there's
a
link
there
in
the
bottom
right
corner
to
request
a
demo
spot
ak
dot.
Ms
slash
m365
pnp,
slash
request.
Slash
demo
and
we'd
love
to
get
you
signed
up.
A
I
know
you're
all
doing
great
stuff
for
your
customers
and
your
companies
and
make
sure
it's
okay
to
share,
but
would
love
to
get
you
signed
up
for
a
demo?
Might
not
be
able
to
do
it
like
it
might
not
be
like
the
next
call.
Sometimes
we're
booked
out
a
little
bit.
We
will
absolutely
get
you
signed
up,
I'd
love
to
have
you
come
on
and
do
a
demo.
I
think
that's
one
of
the
most
valuable
parts
of
these
calls
as
well.
A
You
can
always
contribute
on
github
by
reporting
issues,
submitting
pull
requests
and
you
can
help
others
with
their
issues
and
questions,
which
is
a
great
way
to
get
involved,
and
then,
of
course,
you
can
always
give
us
feedback.
How
are
these
calls
how's
our
documentation?
Where
else
can
we
help
and
positive
feedback?
Is
okay
too,
if
we're
doing
something
you
like,
let
us
know
we
can
do
a
little
bit
more
of
it.
This
next
page
here
is
our
giant
page
links.
The
only
link
you
need
to
remember
is
ak
dot.
A
Ms
slash
m365
slash
community
and
that's
going
to
have
all
of
the
links
out
to
all
of
these
things.
We've
got
developer
videos
which
are
focused
on
developer
scenarios,
learning
specific
technologies
getting
started
on
graphs
stuff,
like
that.
We've
got
our
community
videos
which
are
going
to
be
the
recordings
of
this
call.
Other
community
calls
or
other
thursday
call
our
tuesday
calls.
So
if
you
miss
a
call
or
just
want
to
review
something
that
was
covered
in
one
of
the
previous
calls,
that's
how
you're
going
to
find
them
on
the
youtube
channel.
A
All
our
recordings
are
available,
typically
about
24
hours.
After
the
calls
happen,
we've
got
a
bunch
of
open
source,
repository
or
organizations
rather
on
github
pnp
office,
dev,
microsoft,
graph,
sharepoint
and
onedrive.
We
need
to
get
added
to
this
slide.
I
keep
forgetting
to
do
that.
That's
on
me
so
check
all
of
those
out
all
of
those
places.
Welcome
your
feedback.
A
Your
participation
and
we've
got
a
ton
of
great
sample
galleries
that
top
link
there
ak
dot,
msl
m365
samples
will
take
you
to
the
new
unified
samples
gallery,
which
is
a
great
way
to
find
samples
across
all
of
these
repositories.
Instead
of
having
to
go
to
individual
places,
you
can
search
for
a
filter
and
find
exactly
the
samples
you
need
without
having
to
maybe
know
exactly
which
github
repository
to
go
to
so
really
excited
about
that
and
to
see
that
get
created
by
folks
and
the
great
work
that's
gone
into
that.
A
Definitely
check
that
out
again.
The
one
link
ak
dot,
ms
slash
m365,
slash
community,
will
get
you
to
the
landing
page
and
links
back
to
all
of
this
great
content.
Here's
a
page
of
all
of
the
great
community
calls
we've
got
going
on.
We've
got
our
microsoft
platform.
Call
that
is
actually
going
to
start
back
up.
Somebody
in
the
chat
will
correct
me,
but
it's
the
on
the
31st
of
august.
I
think
that
starts
up
again.
Is
that
a
tuesday?
Let
me
look
briefly
to
calendar.
A
No,
so
it'll
be
the
6th
of
september.
It
looks
like
that's
going
to
start
again
for
those
tuesday
calls
and
we've
got
adaptive
cards,
microsoft,
identity,
platform,
office,
add-ins
and
power
platform,
as
well
as
the
two
bi-weekly
calls
there
at
the
bottom
you're.
You
are
right
now
today
on
that
bottom
call,
the
spfx
dash
call
link
there.
All
the
recurrent
invites
ak
dot.
B
Awesome,
thank
you,
patrick
well,
friends,
as
you
have
seen,
and
we'll
see
even
more
opportunities
to
participate
in
the
community.
We
are
here
to
provide
you
assistance
and
guidance
if
some
of
those
areas
are
new
and
unfamiliar
to
you,
for
example,
how
do
I
submit
a
pull
request?
What's
a
fork?
How
do
I
clone
something?
Well,
we're
here
to
provide
you
hands-on
guidance
sharing
is
caring
is
a
program
that
will
in
live
sessions,
work
with
you
to
show
you
how
to
accomplish
a
number
of
these
tasks.
These
are
safe
space
opportunities.
B
We
don't
record
them
and
you're
more
than
welcome
to
join
more
than
once
and
ask
any
and
all
questions.
You'll
work
right
alongside
members
of
the
team
members
of
microsoft
and
mvps
in
the
community
and
other
like-minded
folks
that
want
to
collaborate
with
you.
We
have
upcoming
dates
in
august
and
september
for
power
platform,
samples,
contributor
and
writing
for
the
web
and,
as
the
summer
comes
to
an
end,
and
everyone
gets
back
from
their
vacations,
we'll
be
expanding
those
as
well.
B
Now,
once
you
have
contributed,
we
want
to
recognize
and
celebrate
all
the
amazing
work
that
you're
doing,
and
you
may
have
seen
some
of
these
badges
out
there
in
the
wild
twitter
linkedin
on
your
fridge.
They
are
here
to
provide
the
recognition
for
all
the
hard
work
that
you're
doing
we
partnered
with
credly
the
same
credly
that
does
all
the
certification
badges.
B
So
these
are
going
to
sit
right
alongside
those
same
badges
and
you
can
associate
them
to
your
linkedin
profile.
As
I
mentioned,
share
them
on
twitter.
They
really
show
that
you're
making
a
difference,
and
it's
our
way
of
saying
thank
you
and
recognizing
and
celebrating
all
the
work
you're
doing
we
do
need
you
to
opt
in.
You
only
need
to
do
that
once
aka
dot,
ms4
m365,
pnp
recognition,
we've
seen
some
coming
out
in
the
last
couple
of
weeks
and
we'll
see
even
more
this
week,
so
be
on
the
lookout
for
your
email.
B
C
Some
of
the
new
features
are
going
to
be
mentioned
in
upcoming
slides,
so
please
check
it
out.
It
is
the
default
installation
if
you
install
the
sharepoint
framework
right
now
from
mbm
what
was
cool
to
see
that,
even
though
it's
a
summer
holiday
season
still,
we
did
a
all-time
highest
record
on
the
third-party
custom
components
built
with
spfx
on
this
week's
monday.
I
haven't
actually
checked
tuesday's
statistics
because
of
her
personal
reasons,
and
so
I
run
out
of
time
on
that
during
that
today.
C
So
but
anyway,
it's
cool
to
see
that
the
growth
continues.
That
small
dip,
which
has
happened
within
the
previous
week,
is
completely
normal.
It's
a
seasonal
thing
which
we
can
see
throughout
the
last
years
as
well,
and
this
is
the
latest
listing.
What's
in
the
1.15.2,
where
we
actually
had
a
new
feature
called
enable
service
principal
registration
in
app
acquisition
flow,
so
this
simplifying
approval
of
third-party
custom
apis
as
part
of
the
deployment
there
was
also,
among
the
other
things,
new
media
action.
Type
of
viewer
connection
went
ga.
C
There
was
es
eslint
support,
update
based
on
community
feedback.
So
we
got
a
lot
of
feedback
related
on
enforcing
some
of
the
slim
rules
and
we
changed
that.
So
thank
you
for
the
feedback
on
that
and
a
lot
of
a
lot
of
bug,
fixes
and
adjustments.
Now,
1.16,
a
preview
is
coming
out
in
late
august
or
early
september,
and
one
of
the
really
cool
things
as
part
of
these
releases
will
be
that
themes.
C
Javascript
sdk
v2
will
be
natively,
supported
as
the
default
teams,
javascript
library
as
part
of
the
sharepoint
framework,
and
that
enables
multiple
other
scenarios.
Then,
with
sharepoint
framework,
a
lot
of
more
details
will
be
then
shared
when
released
is
getting
closer
and
when
the
preview
is
available.
But
that's
all
from
my
site,
a
lot
of
cool
stuff
in
the
development
and
more
good
days
for
developers
to
take
advantage
back
to
you,
patrick.
A
D
Yes-
and
we
have
a
few
so
version-
3.6-
is
to
be
released
tomorrow
and
if
patrick
and
I
can
get
ourselves
together,
that
will
absolutely
happen.
We're
going
to
have
some
general
documentation
updates,
as
we
always
do.
It
looks
like
the
graph
support
for
list.
Content
types
and
columns
will
be
ready
to
go
for
this
next
release.
D
We
are
releasing
an
update
for
the
url
encoding
and
that
should
solve
some
issues
that
people
have
been
having
over
the
last
few
months
with
the
url
encoding,
so
that'll
be
a
good
update
and
then
graph
support
for
special
folders,
which
is
already
merged
in.
So,
if
you
want
to
try
that
out,
you
can
check
out
the
nightly
build.
So
if
you
do
an
npm
install
for
the
at
pmp
slash
sp
at
v3
nightly,
you
will
get
the
nightly
build,
which
has
any
updates
that
were
merged
in
the
pre
a
release.
E
So
thanks
patrick.
So
as
vase
has
already
mentioned,
we
had
the
release
of
new
version
of
sharepoint
framework
earlier
in
the
week.
So
we
have
a
new
release
of
cli
for
microsoft,
365,
with
support
for
upgrading
to
115.2
and
also
validating
your
projects
as
well.
So
there's
the
the
project
upgrade
command
and
the
project
doctor
command
has
has
gained
that
support,
and
so
we've
done
a
a
new
minor
release
kind
of
straight
away
so
that
you
don't
have
to
install
the
beta
release
to
take
advantage
of
this
upgrade.
E
You
can
just
install
the
the
latest
release
and
you'll
get
that
new
functionality.
Alongside
that,
we've
got
a
couple
of
extra
commands
as
well,
that
have
been
added
in
and
extended.
So
one
is
a
simple
command
to
just
rename
files
in
sharepoint.
So
we've
made
that
really
super
easy
by
just
providing
a
single
command
to
do
that,
and
also
enhancements
around
permissions
and
and
groups
as
well
in
sharepoint.
There's
lots
and
lots
of
issues
open
around
permissions.
A
Awesome
stuff,
thank
you
gary
for
those
updates
and
now
we'll
go
over
to
reusable
components.
Updates
we've
got
react:
controls
390
with
some
new
controls
in
there
really
neat
stuff
content
type
picker,
for
example,
modern
audio
excited
to
see
that
get
dropped
in
enhancement
system
or
existing
controls
and
various
other
fixes
and
those
react
controls
again
are
the
ones
designed
to
be
used
in
the
body
of
your
web
parts
or
application.
A
Customizers
and
we've
got
the
react,
property
controls
which
are
at
three
eight
zero,
so
some
localization
some
other
stuff
there
and
then
updates
for
spfx
115.2
is
in
progress
thanks
to
everybody,
contributing
and
working
on
the
controls,
a
really
super
valuable
resource
for
everyone
in
the
community
to
help
jump
start
your
projects
and
really
excited
to
see
those
continue
to
grow.
You
can
follow
them
on
twitter
at
m365pnpcontrols
for
all
the
latest
updates
there,
and
with
that
we'll
go
over
to
updates
on
modern
search,
which
is
ak
dot.
A
Ms
slash
pnp
search,
we'll
get
you
all
the
latest
documentation
and
updates
we're
still
on
470
beta.
That's
the
june
2022
release.
Thanks
to
all
the
contributors.
There
that's
got
support
for
adaptive
card
rendering,
as
well
as
release,
note
or
I'm
sorry,
see
the
release,
notes
for
all
the
other
fixes
and
new
features
as
well
again,
if
you're
on
the
v3
branch
really
encourage
you
to
update
to
the
v4
branch.
When
you
get
a
chance,
it's
been
quite
a
bit
now
since
we're
really
not
updating
the
v3
branch
anymore.
A
So
if
you
want
all
the
latest
greatest
definitely
jump
over
to
that
v4
branch
before
you
do
any
other
major
modifications
involving
deployments
on
the
using
the
v3
branch.
I
said
the
word
branch
a
lot
there,
so
good
stuff
definitely
check
out
the
modern
search.
It's
the
best
way
to
build
a
great
flexible
experience
for
your
users
in
sharepoint
and
get
all
the
greatest
results
to
them,
really
just
good
work
on
that
slide.
Patrick
p,
spfx
samples-
this
is
going
to
be
hugo.
F
Thank
you,
patrick,
so
we
have
two
repositories
for
spfx
extensions
and
web
parts
and
they
contain
samples
that
sometimes
are
almost
production.
Righty
samples,
sometimes
they're
just
there
to
illustrate
a
concept,
and
you
know
they
also
help.
You
understand
that
sometimes
there's
not
just
a
single
way
that
you
can
solve
a
problem,
there's
different
ways
to
do
this.
F
So
it's
a
custom
property
pane
that
has
a
custom,
color
palette
generator
and
it
was
actually
inspired
by
the
property
pain
portal,
which
is
another
web
part
that
we
have
contributed.
That's
a
lot
of
peas
by
the
way,
so
I
guess
in
other
words,
you
could
say
that
you
know
they
were
persuaded
by
the
pesky
pain
of
custom
property
pains
and
the
palette
picker
was
prepared
from
the
previously
published
property
portal
by
pristine,
passionate
participant
who
properly
deserves
praise
promotion
and
probably
a
pat
on
the
back
patrick.
Oh,
no,
actually,
sorry
david.
B
Back
to
you,
that's
some
powerful
persistence.
There,
hugo
it
was
very
nice
work
all
right,
I
loved
it
aces.
We
have
a
new
ace.
It
is
a
public
holidays,
ace
by
nandeep
as
well
as
smita
and
ravi.
So
they
co-authored
this
together,
but
it
was
a
poll
request
by
nandeep,
so
public
holidays.
It
allows
you
to
identify
what
the
public
holidays
are
for
your
office,
pretty
cool
and
you
can
even
set
your
office
location,
so
you
can
identify
exactly
where
you're
at
for
that
day,
so
definitely
check
it
out.
A
C
C
What's
the
face.
What's
the
face,
we
still
have
a
few
more
seats,
a
few
more
seats
in
the
room
and
we
are
filling
in
it's
good
to
see
so
many
familiar
faces
again
on
here
and
we
are
said
we
are
already
recording.
So
let's
do
some
handwaving
everybody
thanks
everybody
for
joining
one
more
time,
we'll
grab
a
keef
animation
out
of
this.
Thank
you,
chris,
for
the
great
acting
on
the
middle.
C
G
Yes,
can
you
see
my
screen
sure
can?
Okay
today,
I
want
to
present
you
a
little
sharepoint
framework
solution
on
a
taxonomy
file
explorer.
This
is
a
file
like
view
based
on
sharepoint
framework,
managed,
metadata
and,
of
course,
pnp
js
short
entry
about
me
who
might
have
forgotten
me,
because
I
think
the
last
time
I
was
presenting
was
a
while
ago.
My
name
is
marcus
mueller,
I'm
a
microsoft,
365,
developer,
expert
working
for
avenatt
in
germany
and
since
last
year,
I'm
also
a
microsoft
mvp
for
microsoft,
365
development.
G
G
So
what
I've
prepared
is
a
list
with
some
plain
or
easy
documents,
and
what's
important
here
is
the
fifth
color.
It's
a
custom,
the
fifth
column,
a
custom,
one
called
folder
structure
and
this
column
is
based
on
managed
metadata.
As
you
can
see-
and
I
have
tagged
all
my
documents
with
at
least
one
folder
of
a
hierarchical
structure
and
this
hierarchical
structure-
I
can
now
render
in
a
custom
web
part.
G
Therefore
I
have
to
switch,
and
this
is
how
my
structure
looks
like
and
how
it
is
rendered
and
what
you
can
see
with
the
figures
on
the
right
is
how
many
documents
are
recited
below
that
folder,
including
subfolders.
So
this
is
an
aggregated
thing,
but,
for
instance,
let's
have
a
look
in
the
sub
folder
one
one
where
we
can
find
three
documents
in
and
now
what
I
already
introduced,
what
we
can
do,
we
can
manipulate
the
managed
metadata
column
simply
by
drag
and
drop
operations,
so
we
can
pull.
G
G
When
we
compare
this
to
file
explorer,
what
we
did
is
we
did
not
move
the
file,
but
we
did
place
it
additionally
in
this
folder,
because
it's
still
here
in
the
source
folder,
this
is
like
in
the
file
explorer.
You
would
do
like
with
a
link
to
a
document.
Yes,
you
have
a
document
in
one
folder
and
you
put
a
link
or
place
a
link
to
that
document
in
the
second
folder.
But
this
is
my
default
operation.
G
G
And
this
we
can
also
drag
into
our
folder
and
there
we
have
our
brand
new
document
also
in
the
list.
So
this
works
the
same
because
our
drop
zone
is
able
to
detect
between
coming
a
custom
item
from
my
sharepoint
framework
webpart,
as
well
as
from
a
standard
trial
item,
and
this
now
let
me
show
you
in
the
next
thing,
but
finally,
what
I
can
also
show
you
this
is
what
I
did
in
an
update
is
also
what
was
a
request
was
to
have
expand
and
collapse
all
button.
This
also
should
work.
G
Expand
all
is
okay,
but
collapse.
All
is
also
possible
here,
as
you
can
see,
and
this
also
how
this
works.
I
can
show
you
in
my
next
slides,
so
first
a
little
overview
how
this
is
rendered.
We
have
one
big
parent
react
component,
and
this
is
you
can
see
with
the
outer
region.
Is
the
taxonomy
fire
explorer
and
then
the
tree
is
consisting
of
many
many
components
called
term
label.
G
On
the
right
hand,
not
that
much
important,
but
also
important
for
the
drag
and
drop
operations
are
my
file
labels,
because
they
also
consist
the
information
about
which
document
it
is
which
grade
it
has
which
url
and
so
on
and
so
forth.
What
I
all
need
for
the
file
operations
later
on
and
the
methods
to
do
all
this
are
all,
and
this
is
what
you
can
see
at
the
bottom
located
in
the
parent
taxonomy
file
explorer
component,
and
we
will
see
the
connection
in
between
in
the
code
snippets
on
the
next
slides.
G
G
This
is
the
magic
method
is
get
all
children
as
ordered
tree.
This
will
get
from
our
term
store.
The
given
term
set
all
the
terms
in
an
ordered
manner,
and
also
with
children,
show
this
here
in
debug
mode.
How
this
looks
like
what
you
can
see
here
when
you
start
at
the
top,
we
have
three
items:
one
is
or
two
are
collapsed.
One
is
expanded.
The
folder
one
is
expanded.
Folder
two
and
three
are
collapsed
at
the
bottom
and
folder.
G
You
simply
have
to
build
your
tree
with
terms
by
simply
transferring
all
the
items
into
your
custom
data
structure,
nothing
else,
but
the
only
difference
is
you
have
to
do
it.
Recursive
yeah,
because
every
parent
term
not
consists
children
and
so
on
and
so
forth,
and
this
is
how
I'm
going
to
render
all
that.
G
G
In
the
upper
side,
I
have
my
parent
taxonomy
fly
explorer
component
and
at
the
bottom
you
can
see
the
term
label
component
what's
happening
there
now.
So
the
term
label
component,
which
is
rendered
at
least
the
the
base
ones,
is
rendered
in
the
parent
one
on
the
upper
left.
You
can
see
how
it's
using
some
functions
there
and
the
first
functions.
What
we
need
in
the
parent
component
is
render
files
and
reset
the
you
have
seen
that
in
a
demo
that
was
not
working
perfectly
at
the
moment.
Don't
know
what
was
happened.
G
There
is
when
I
highlight
one
clicked
folder.
I
have
to
deselect
and
unhighlight
all
the
others,
and
this
only
works
in
parent
components,
because
I
don't
know
when
I
click
one
component,
which
other
component
might
be
highlighted
to
simply
drop
that
off.
So
this
is
why
I
will
check
off
all
of
that
and
start
it.
This
is
in
the
term
label
component.
This
is
what
you
can
see
at
the
bottom
once
and
not
get
selected.
G
Highlight
it
once
again
same
way,
I'm
doing
with
the
term
operations.
These
are
also
done
by
callbacks.
So,
for
instance,
we
have
all
the
different
methods.
Here
I
showed
we
have
the
add
term,
which
which
was
the
default
one.
We
have
the
replace
term,
which
was
the
move
operation.
We
have
the
copy
file
or
the
upload
of
a
brand
new
file.
G
These
are
all
handed
into
the
child
components,
and
this
is
done
what
you
can
see
on
the
bottom
left
in
the
drop
operation
and
in
the
drop
operation
you
can
see
in
the
if
statement
above
the
highlight
is.
If
I
do
not
find
files,
then
I
don't.
I
then
I
know
I
don't
have
to
upload
something
from
outside
and
then
I
distinct
between
my
if
I
have
an
event
control
key.
G
This
was
the
context
menu
or,
if
I
don't
have
that
clicked,
then
I
will
simply
run
my
default
operation
called
add
new
term,
which
is
also
shown
here
on
the
bottom
right.
How
I
do
that
and
how
I
call
it
and
the
real
file
operations
in
my
sp
service.
I
will
show
later
on,
so
the
difference
I
already
introduced
is
how
do
I
handle
the
special
drop
from
files
outside
this
is
when
I
find
in
my
data
transfer
object
when
I
find
the
default
files.
G
This
is
always
how
it
comes
in
then
I
will
catch
them
and
simply
proceed
them
in
an
upload
operation.
What
I
have
additionally
done
is
some
contextual
styling
there.
You
also
might
have
some
seen
some
mismatch,
and
the
demo,
unfortunately,
is
what
I'm
doing
here
on
the
drag,
enter
or
drag
leaf
events
that
I'm
changing
my
style.
G
The
symbols
of
all
of
them
is
the
move
operation
or
the
item
by
replace,
because
here
I'm
simply
overwriting
whatever
was
there
with
the
new
taxonomy
value,
and
this
is
that
one
coming
from
the
drop
operation
on
that
folder,
I
dropped
the
file.
This
is,
I
will
overwrite
two
lines
more.
I
have
my
default
operation.
This
is
the
update,
because
here
I
have
to
build
before
I
have
to
build
a
construction
of
my
existing
field,
value,
which
might
be
one
two
three
more
terms
and
add
the
new
taxonomy
value
coming
from
the
drop
operation.
G
The
rest
is
the
same.
I
will
only
only
update
my
file
list
item
or
my
corresponding
list
item
to
the
file.
Nothing
more
much
more
complex
are
the
real
file
operations,
and
here
I
only
want
to
show
the
item
by
copy,
because
what
I'm
here,
what
I
have
to
do
here
now,
of
course,
I
have
to
create
a
new
file
name.
This
is
you
have
seen
I'm
only
inserting,
like
microsoft
does
by
default
as
well,
inserting
an
underscore
copy
into
existing
file,
name
and
based
on
that
new
file.
G
Name,
I'm
creating
a
destination
url
and
based
on
that
one,
I
can
copy
my
existing
file
bypass
to
a
new
one
and
that's
it
mainly,
and
then
I
will
also
update
the
list
item.
But
this
list
item
update,
I
already
shown
that's
quite
the
same
way
than
done
previously
yeah.
That
was
for
my
site.
That's
not
least,
as
you
might
remember,
from
all
my
presentations
some
resources.
G
I
wrote
a
detailed
blog
post
about
how
I
implemented
all
this
stuff.
I
of
course
shared
the
sample
with
the
pmp
library
yeah.
I
have
to
add
that
my
blog
post
is
a
bit
outdated
because
I
updated
the
sample
already
to
sharepoint
framework
version
115
and
including
that
I
was
also
introducing.
I
did
not
mention
that
in
the
code
forgot
about
that.
A
H
So,
thank
you
very
much
hello.
All
I'm
going
to
do
an
introduction
on
the
fifa
connections
toolkit
which
I've
been
building
for
a
while
now
and
finally,
we
can
show
it
it's
still
in
beta
or
preview,
and
we
want
to
have
some
feedback
from
you
using
it
from
what
we
can
extend
and
so
on.
So
let's
get
started.
H
Okay,
so
who
am
I
I'm
elio,
I'm
currently
working
for
rapid
api,
which
does
everything
around
apis?
I
do
a
lot
of
extension
development
in
vs
code
these
days,
so
I'm
also
the
lead
developer
of
devtools
what
they
call
it
in
a
rapid
api.
If
you
want
to
find
me
all
the
details
are
here,
but
let's
just
dive
into
what
is
the
viva
connections?
Toolkit
there's
quite
a
lot
of
toolkits,
but
the
viva
connections
toolkit
is
created
for
viva
connections.
It's
an
extension
that
is
created
for
visual
studio.
H
I
already
mentioned
that
it's
currently
in
beta
and
you
can
start
using
it
with
the
guidelines
that
I'm
going
to
give
you.
So
why
is
it
created?
It's
first
created
for
streamlining
your
development
process.
We
saw
that
there's
quite
a
lot
of
people
that
don't
know
how
to
start
doing
development
with
fifa,
but
also
making
it
easier
for
them
to
start
using
viva
or
to
start
from
a
sample
or
by
scenario
so
learn
from
others.
H
That's
where
the
project
is
going
to
help
you
a
lot
and
over
time
there
will
become
more
and
more
features
available.
So
right
now
you
can
start
using
it
to
create
and
manage
your
projects
and
learn
by
couple
of
scenarios
that
are
already
there
for
you
straight
from
the
start
or
start
by
a
sample
that
somebody
else
created
from
the
community.
H
So
installation
process
is
pretty
simple.
You
can
actually
go
to
the
marketplace
from
vs
code
and
there
you
can
look
for
the
viva
connections,
toolkits
extension
or
you
can
open
visual
studio
codes
and
then
from
the
extensions
panel.
You
can
push
the
button
and
search
for
viva
connections
toolkit
and
then
you
can
install
it.
There's
one
quirk
which
I'm
going
to
show
you
in
this
demo,
because
it's
a
preview,
you
actually
need
to
install
it
from
a
preview.
H
So
that's
one
thing
that
I'm
going
to
quickly
highlight
over
here,
so
here
I
am
in
my
visual
studio,
codes,
clients
or
editor,
and
if
I
look
for
viva
I
I
already
find
the
vita
connections
toolkit
over
here
right
now.
You
see
that
it's
version
0.0
and
then
a
build
number
that
we
added.
If
you
install
or
click
on
install,
it
will
say:
hey,
there's,
no
main
version,
that's
because
it's
a
pre-release
and
we
haven't
released
a
final
version
yet
so
the
first
time.
H
That's
it
it's
already
installed.
So
that's
a
good
thing.
So
from
the
moment
you
did
that
over
here
you
see
a
pmp
vs
code
logo
and
then
you
end
up
on
our
welcome
experience.
This
welcome
experience
will
be
shown
when
you're
not
opening
an
spfx
project,
so
the
moment
you're
in
an
spfx
project.
You
don't
see
this
kind
of
welcome
experience
anymore.
This
is
only
created
for
you
to
get
started
with
a
new
project
creation.
H
So
what
can
we
find
here
is
a
couple
of
things
so
on
above
you
will
find
how
you
can
start
creating
a
viva
project
by
just
from
a
clean
slate
or
from
a
scenario
or
from
an
example
or
sample.
You
can
also
open
a
folder
if
you
already
have
a
project
or
you
can
actually
check
your
dependencies
because
for
viva
connections
you
need
to
have
a
couple
of
dependencies
like
you
need
to
have
the
omen
generator,
because
this
extension
is
still
used
since
the
yeoman
generator.
H
You
also
need
to
have
gulp
and
swan
in
order
to
start
running
these
processes,
and
we
made
it
pretty
easy
for
you.
So
if
you
just
click
on
check
dependencies,
hopefully
for
me
it's
it
works
out
fine,
so
everything
is
there.
If
not,
it
will
tell
you
what
is
failing
or
it
will
tell
you
hey
note
is
not
correct
or
maybe
there's
a
missing
dependency,
and
then
it
will
give
you
a
message
like
do
you
want
to
install
these
dependencies?
You
can
also
click
on
install
dependencies
over
here.
H
If
something
ever
goes
wrong
with
the
extension,
you
could.
Click
on
control
tactic
to
open,
actually
this
pane
at
the
bottom
and
then
go
to
output
and
find
viva
connections
toolkits
in
the
output
and
there
you
can
actually
see
what
it
does
so
for
every
kind
of
action.
There's
a
couple
of
things
that
it
will
do
so
for
the
check
dependencies.
It
checked
the
node
version
they
checked.
H
If
npm
was
there
and
then
also
it
checked
for
all
the
npm
dependencies
that
you
need
to
have
so
apparently
we
have
all
of
them,
so
we
can
actually
start
so,
let's
start
with
a
new
project.
So
as
it's
aviva
connection
project
is
going
to
ask
me:
where
do
I
want
to
create
it?
I
already
created
a
main
folder.
H
If
you
want,
you
can
just
select
another
folder
where
you
want
to
create
it,
so
I'm
going
to
create
it
in
the
bmp
viva
folder
and
then
I'm
going
to
say,
viva
demo
community
called
it's
going
to
ask
me:
do
I
want
to
create
basic
image
or
primary,
and
so
I
can
just
say
primary,
and
then
I
give
this
a
name
or
hello.
World
is
just
fine,
it's
already
essays.
So
let's
say
one
two
three
and
what
it
now
does.
H
So
what
I'm
going
to
do
is
I'm
just
going
to
open
a
new
folder
where
I
haven't
done
anything
yet
apart
from
installing
it
so
once
this
is
done
and
you
go
back
to
the
pmp
vs
code
panel
now
the
welcome
experience
is
gone
and
you
have
a
couple
of
other
experiences
or
actions
that
are
now
available.
Let's
focus
on
the
above
one,
so
the
above
one
is
the
account,
so
what
you
can
do
is
sign
in
to
m365.
H
So
if
I
click
on
that
button-
and
I
say
I
allow
this
what's
going
to
happen
now-
is
it's
going
to
use
the
microsoft
365
cli
in
order
to
authenticate
so
behind
the
scenes
we
just
use
the
same
cli
that
gary
was
showing
before
we,
I
just
updated
it
to
the
latest
version.
So
all
the
things
that
are
possible
could
be
possible
within
this
extension.
H
H
There
are
a
couple
of
validation,
steps
that
are
going
to
happen
and
one
of
these
validation
steps
is,
it
will
receive
my
sharepoint
or
the
main
sharepoint
site,
but
also
the
main
sharepoint
app
catalog
site.
So,
if
I'm
going
over
here,
so
that's
my
sharepoint
site
and
that
was
my
main
app
catalog
site.
So
as
my
sharepoint
site
is
different
than
the
placeholder
that
is
being
set
in
any
of
the
configuration
files.
So
if
we
go
to
the
config
file
and
let's
say
surf,
I
apparently
already
clicked
in
this
one
before
so.
H
Did
I
already
click
it?
Okay,
apparently
I
already
clicked,
but
what
it's
going
to
do
if
there
are
like
insert
the
initial
page
if
this
is
set
to
the
placeholder
url,
which
is,
I
think,
put
your
sharepoint
sites
url
here.
That
is
the
actual
placeholder.
Then
you
can
just
say.
Yes,
I
want
to
update
this
and
then
automatically
it
will
update
this
particular
placeholder
and
then
it
matches
the
one
that
you
currently
are
logged
into,
because
that's
pretty
easy
to
start
running
the
next
tasks
and
the
next
tasks
are,
for
instance,
serving
it.
H
So
if
I
click
on
surf,
it
will
automatically
spin
up
the
globe
surf
command
and
then
it
actually
knows
where
it
needs
to
go
and
if
everything
works
out
here
is
my
hello
world
adaptive
card
that
is
being
added
within
my
project.
So
this
is
what
it
can
do
and
there
are
a
couple
of
other
things
like.
I
can
cancel
this
and
then
I
can
start
bundling
it
locally.
H
A
H
And
I
go
to
my
app
catalog
just
to
see
that
I'm
not
cheating,
so
there's
no
file
there
yet.
So,
if
I
click
on
deploy
the
solution,
it
says
hey.
This
solution
has
been
deployed.
If
I'm
going
to
refresh
this
over
here,
there's
now
a
new
file
that
is
being
added.
Fifa
demo
there's
one
thing
that
is
not
yet
available
here,
it's
the
sync
to
teams
so
as
there
is
no
api
that
we
can
actually
use
from
within
the
extension,
this
is
something
yeah.
Sorry,
that's
not!
Yes!
I
use
the
old
experience.
H
H
H
So
what
can
we
do?
More?
Gary
was
also
already
mentioning
like
validating
the
current
project,
like
with
the
cli
doctor
or
the
cli
spf
x,
doctor
command
same
thing.
We
do
here
behind
the
scenes
or
we
use
the
same
command.
So
if
we
click
on
validate
current
projects,
it's
actually
going
to
run
that
command
and
then
going
to
say,
hey
cli
didn't
find
any
issues
with
your
project,
because
I
just
created
the
project.
We
can
go
to
outputs
and
we
can
also
see
the
same
thing
over
here.
H
There's
also
some
help
and
feedback
available
for
you,
so
quick
access
to
the
documentation
and
if
you
want
to
report
an
issue
or
if
you
want
to
start
using
the
graph
explorer,
everything
is
there
if
there's
something
missing,
yeah
just
report
it
in
our
issue
list.
Now
there
are
a
couple
of
other
things
that
are
pretty
cool,
and
one
of
these
things
that
we
have
been
thinking
about
was
scenarios.
H
So
scenarios
is
a
way
for
you
to
get
to
know
and
get
to
understand
how
you
can
do
things
with
fifa
connections
in
this
case
or
here
what
you
can
see
is
well,
they
created
two
scenarios
that
you
can
leverage,
so
they
are
available
on
github.
If
you
click
here
on
the
github
link,
it
will
bring
you
to
this
scenario,
but
what
you
can
also
do
is
click
on
this
computer
icon
and
it
will
allow
you
to
download
it
locally
and
start
using
it.
H
H
If
I
click
on
yes,
it
will
start
updating
all
these
references
so
right
now
everything
is
updated,
but
the
cool
thing
is:
there's
a
full
code,
tour
integrated.
So
with
this
experience
you
have
a
nice
way
to
get
started
and
to
get
used
to
how
to
work
with
this
a's
experience,
and
you
can
then
just
walk
through
the
full
go
to
your
experience
in
order
to
know
and
to
get
to
learn
how
to
start
working
here
you
are
going
to
do
some
http
calls
and
so
on.
H
So
well
that
did
a
really
good
job
on
explaining
where
and
what
to
do
and
how
you
can
start
using
it.
The
same
thing
can
be
done
from
samples,
although
a
sample
is
not
going
to
provide
you
some
guidance
if
the
developer
didn't
put
it
into
that
system,
but
let's
go
to
over
here,
but
you
will
see
a
similar
experience
like
before
so
an
ex
a
scenario
or
a
sample.
It's
just
the
same.
It's
just
a
project
that
lives
in
github
and
we
do
a
roll
up
over
here
as
well.
H
You
can
go
through
all
the
samples
that
have
quite
a
lot
of
them,
so
you
can
just
click
on
next,
just
to
see
all
these
things
and
then,
if
you
say
okay,
this
is
a
scenario
that
I
want
to
start
using,
or
this
is
sample
that
I
want
to
start
using.
You
just
do
the
same
thing.
You
click
on
the
use
sample
button,
you
click
on
browse,
because
I
want
to
be
able
to
put
it
in
the
correct
folder.
This
was
the
my
recent.
H
So
yet
again
what
you
can
see
over
here,
it's
started
a
new
project,
so
it
knew
that
it
was
a
new
project.
So
it's
just
the
npm
installation
straight
away
just
going
to
cancel
it.
It's
not
a
requirement,
but
what
we
have
more
here
is
is
another
thing
is
a
way
for
you
to
add
new
components.
So
if
you're
working
in
a
particular
spfx
project,
you
can
click
on
new
components,
and
then
you
have
a
way
to
add
more
things
in
here
as
well.
So
if
you
want,
you
can
add
a
web
part.
H
So
this
was
actually
a
quick
demo
or
a
quick
introduction
of
what
the
viva
connections
toolkit
actually
is
for
you
to
use
within
visual
studio
code,
there's
a
way
for
you
to
also
contribute
and
the
actual
code
code
lists
on
the
github.com
on
the
pmp.
There
is
now
a
microsoft
365
hosted
apps
vs
code
repository,
so
that's
where
you
can
put
all
the
issues,
feedback
and
whatsoever.
So
if
you
want
to
be
part
of
it,
your
will
be
happy
to
accept
your
pull,
requests
and
feedback
there.
So
back
over
to
the.
A
Host
great
thanks,
elio,
my
name
is
still
patrick,
so
we're
going
to
jump
back
over
to
the
slides,
real,
quick
to
close
things
out
two
great
demos
from
marcus
on
their
that
react.
Taxonomy
file
explorer
really
great
stuff.
There
and
elio
just
showed
us.
The
fantastic
viva
connections,
toolkit
vs
code
extension.
So
if
you
haven't
certainly
check
out
both
of
those
a
little
bit
more,
I
want
to
thank
all
of
you
for
joining
us
here
on
today's
call.
Recording
will
be
available
again
in
about
24
hours
on
our
youtube
channel.
A
You
can
follow
us
on
twitter,
at
microsoft,
365
dev
or
at
m365
pnp.
Our
next
viva
connections
and
spfx
call
will
be
august
25th
same
time,
and
our
next
general
dev
call
be
next
thursday
august
18th
can't
believe
we're
already
into
august
big
stuff.
Thank
you
all.
So
much
for
joining
us
have
a
great
rest
your
week
and
we'll
talk
soon.
Bye.