►
Description
Viva Connections & SharePoint community call on July 14. Demos: Upgrading SPFx solutions to the latest version using the CLI for Microsoft 365 and Adaptive Card Extensions - Dynamic Announcements. Project releases: PnPjs Client-Side Libraries – v3.5.1 (GA), CLI for Microsoft 365 – v5.5.0 (beta), Reusable SPFx React Controls – v3.9.0 (GA), Reusable SPFx React Property Controls – v3.8.0 (GA). Delivered 3 web part samples, 1 Microsoft 365 Developer Podcast and 1 Microsoft 365 PnP Weekly episode. Register for Sharing is Caring event – “Power Platform Samples Contributors” on July 20th. 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
sharepoint
framework
and
viva
connections-
bi-weekly
sync,
it
is
july
14th
2022,
I'm
your
host
for
this
call,
patrick
rogers
and
we've
got
a
great
call
for
you
as
always
a
little
bit
slimmed
down
agenda
here.
For
the
summer
we
got
patterns
and
practices
updates
across
the
program.
New
community
samples,
we'll
do
our
picture
time,
our
optional
picture
time
in
together
mode.
A
So
two
great
demos,
today
dawn
on
upgrading
spf
x,
solutions
to
the
latest
version
using
the
cli
and
siddharth
is
back
with
an
adaptive
card
extension
on
dynamic
announcements,
but
first
we
always
like
to
talk
about
opportunities
to
participate
here
in
the
program
or
here
on.
These
calls.
The
best
way-
and
my
favorite
way
for
all
of
you
to
participate-
is
to
do
demos
on
these
calls
in
the
bottom
right
corner
there.
You
can
see
a
link
ak
dot.
A
A
Would
love
love,
love
to
see
all
the
great
work
you're
doing
for
your
customers
and
your
companies
do
make
sure
it's
okay
to
share,
of
course,
on
a
community
call
publicly,
but
would
love
to
see
what
you're
working
on
and
share
with
the
community?
I
always
learn
something
great
from
the
demos
and
I
think,
they're
really
valuable
part
of
what
we
do.
You
can
always
also
contribute
on
github.
You
can
report
issues,
submit
pull
requests
or
help
others
with
issues
and
questions
they
might
have.
A
If
you
have
a
few
minutes,
I
can
jump
in
and
help
out
definitely
gets
folks
going
a
little
bit
faster
and
then,
as
always,
we
welcome
your
feedback.
How
are
these
calls
going?
What
other
documentation
can
we
provide?
How
else
can
we
help?
Of
course,
positive
feedback
is
okay
too,
if
we
are
doing
something
you
like,
we
could
try,
maybe
do
a
little
bit
more
of
it.
So,
just
again
do
encourage
you,
reach
out
schedule
a
demo
you're
all
doing
great
stuff.
A
We
would
love
to
see
it
next
up
is
all
of
our
different
links
to
developer
videos
and
all
these
other
things
ak
dot.
Ms
m365
community
is
the
one
link
you
need
to
get
to
all
of
the
open
source
initiatives
and
samples.
We've
got
developer,
videos
which
are
going
to
be
focused
on
developer
tasks
such
as
connecting
to
the
microsoft
graph
working
with
off
getting
started
with
sharepoint
framework,
getting
started
with
adaptive
card
extensions
tons
of
great
videos
out
there
on
those
topics
as
well.
A
We
have
our
community
videos,
which
are
the
recordings
of
these
calls.
The
other
thursday,
calls
or
tuesday
calls
lots
of
all
of
our
other
community
calls.
You
can
always
catch
up
on
episodes
you
might
have
missed
or
just
want
to
review
a
certain
demo
or
something
like
that
to
see
how
maybe
somebody
did
something
you
can
always
check
out
all
those
videos
on
the
youtube
channel
as
well.
A
We've
got
a
bunch
of
great
open
source
organizations,
pnp
office,
dev,
microsoft,
graph
sharepoint,
and
we
need
to
add
onedrive
to
that
list,
all
of
which
welcome
your
contributions.
Your
input,
your
feedback
on
the
work.
That's
there
as
well
tons
and
tons
and
tons
of
great
sample
galleries
ak
dot.
Ms
slash
m365
samples
is
the
unified
sample
gallery,
which
is
a
great
way
to
find
samples
across
all
of
these
different
locations.
A
So
you
can
search
in
there
and
filter
to
get
and
find
the
samples
you
need
without
having
to
go
to
all
of
the
different
individual
sample
galleries,
so
definitely
check
out
ak
dot.
Ms
slash
m365
samples
and
ak
dot.
Ms
slash
m365
slash
community,
we'll
get
you
to
the
landing
page
which
has
links
to
all
of
the
stuff.
I've
just
talked
about,
so
you
can
find
it
nice
and
easily
and
don't
have
to
remember
30
different
links
and
well
we
got
a
bunch
of
other
community
calls.
A
We've
got
the
tuesday
call
that's
on
summer,
break
we'll
be
back
with
that
in
august.
So
don't
worry
about
that
one
for
right
now,
but
that
will
restart
in
august
as
before,
we've
got
the
adaptive
cards,
call
identity,
platform,
office,
ads
power
platform
and
then,
of
course,
r2
sig
calls
on
alternating
thursdays.
A
B
Awesome,
thank
you
patrick
well,
friends,
sharing
is
caring,
as
you
may
or
may
not
know,
is
a
program.
That's
here
for
you
to
provide
hands-on
guidance.
We
take
you
into
safe
space
opportunities.
These
are
sessions
where
we
work
together
with
you,
they're
not
recorded,
so
you
can
feel
free
to
ask
any
and
all
questions
you
may
have
we're
going
to
show
you
how
to
do
things
like
maybe
do
your
first
pull
request?
How
you
can
help
curate
the
community
docs?
B
Please
do
love
to
show
you
in
the
amazing
ways
in
which
we
can
get
your
samples
out
there
and
bubbled
up
to
the
adoption.microsoft.com
site,
so
feel
free
to
reach
out
now,
once
you
have
contributed
in
one
of
the
many
many
ways
we
want
to
celebrate
it.
The
recognition
program
is
here
to
provide
you
official
and
accredited
recognition
and
celebration
of
all
the
amazing
work
that
you're
doing
within
the
community.
B
We
cannot
tell
you
how
excited
and
inspired
we
are
by
everything
you're
doing,
and
it's
our
way
to
ensure
that
you're
being
recognized.
These
are
official
badges
by
credly
the
same
ones
that
provide
the
certification
badges.
So
that
means
they
can
be
associated
to
your
linkedin
profile
to
be
shared
with
managers
or
customers.
You
can
share
them
on
twitter,
we've
been
seeing
a
lot
of
great
tweets
and
linkedin
posts
about
them
over
the
last
few
weeks,
as
we
get
into
july,
and
a
lot
of
the
last
couple
of
months
have
been
reviewed
and
sent
out.
B
A
Great
stuff,
thank
you
david
for
those
updates.
Love
to
see
all
the
great
stuff
that's
happening
with
the
sharing
is
caring
initiative
and
the
number
of
folks
that
are
participating
in
that
it's
really
outstanding,
so
great
work,
everybody
and
if
you
haven't,
joined
one
of
those
and
interested.
Please
do
it's
really
a
great
fun
time.
C
Hey,
thank
you,
patrick,
so
we
did
a
3.5
release
on
july
12th
and
then
probably
did
a
351
release
on
july
13th.
We
had
a
slight
regression
in
a
in
a
check.
We
were
doing
for
the
spfi
interface
factory
interface,
and
so
we
got
that
fixed
pretty
quickly.
So
hopefully
that's
helped
everybody
out,
but
in
addition
to
that
we
had
some
documentation
updates.
C
As
usual,
we
had
the
web
part
context
original
fix
for
the
spfx
1.15
change,
so
that's
now
supported
patrick
killed
it
on
a
beta
2
release
of
the
cancelable
fetch
calls.
That
was
just
crazy
amounts
of
confusing
and
and
difficult
work.
So
we're
really
excited
about
the
beta
2
release
of
that
so
check
that
out,
if
being
able
to
cancel
your
calls
for
like
large
file
uploads
or
something
like
that
is
important
to
you.
Full
support
for
the
tenant
admin
api.
C
So
that's
a
new
package
called
sp
admin
that
you
can
import
and
if
you're
you
know
doing
a
node
project
that
you
want
access
to
those
tenant
admin
apis,
that's
available
updates
to
the
lists,
render
list
data
parameters
so
now
there's
a
bunch
of
additional
options.
There
that
weren't
present
that
you
know
to
have
just
been
added
to
the
api
that
we
didn't
have
updated
and
a
fix
for
a
caching
and
batching
combination
where
there
was
a
bug.
So
that
is
all
the
updates
for
3.5,
which
is
significant.
A
D
Right,
okay,
so
yeah
we've
been
busy
adding
new
capabilities
to
cli
microsoft
365,
so
we
are
currently
releasing
our
beta
updates
for
the
next
version,
which
will
be
5.5.
We've
got
updates
new
commands,
enhancements
across
planner,
more
sharepoint
framework
updates
and
also
teams.
This
also
comes
with
just
general
improvements
and
bug
fixes
as
well.
We
have
lots,
even
though
we
only
released
our
our
regular
monthly
release.
A
couple
of
weeks
ago,
we've
got
tons
of
updates
already,
so
I'd
encourage
you
to
check
out
the
the
release
notes
to
see.
D
What's
what's
going
to
be
coming
or
to
test
out
some
of
these
new
features,
one
notable
command
that
we've
added
in
so
we've
added
a
new
command
that
allows
you
to
clean
up
your
team's
client
cache.
So
this
is
one
command
if
you're
on
windows,
if
you're
on
linux,
if
you're
on
mac,
run
that
one
command-
and
it
will
clear
your
your
team's
cache-
that's
in
the
latest
beta
release.
So
if
that
interests
you
please
do
check
that
out.
D
I
had
a
few
people
already
saying
that
this
is
a
a
nice
approach
so
and
they're
looking
forward
to
trying
it.
That's
great,
I
would
love
to
hear
your
feedback
on
on
that.
We,
you
know
if
you
want
to
try
out
that
that
beta
version,
so
you
can
get
that
direct
from
mpm
or
you
can
use
our
docker
image
as
well.
Just
use
the
app
next
tag
and
if
you
want
to
keep
up
with
our
latest
beta
releases,
like
I
mentioned,
we're
releasing
all
of
the
time.
D
The
best
place
to
follow
for
those
updates
are
on
the
twitter
account
at
cli,
microsoft,
365.
and
likewise
any
feedback,
positive
negative
or
any
new
ideas
for
features.
Then
please
reach
out
to
us
at
the
github
repository
either
raise
a
new
issue
or
get
involved
in
the
discussions
and
again
thank
you
to
all
the
contributors
who
made
these
releases
possible.
That's
all
for
now.
Thank
you.
A
Great
stuff
love
to
see
the
continued
growth
of
the
cli
and
really
exciting
to
see
all
those
new
capabilities
coming
out
each
month
so
definitely
check
that
out.
If
you
have
not,
next
up
is
reusable
components.
We've
got
the
react,
controls
390
as
got
some
new
controls
there,
so
a
theme
provider,
a
field,
picker
content,
type,
picker,
modern
audio
and
adaptive
card
designer
host,
as
well
as
some
enhancements
and
various
fixes
in
three
nine
and
then
we've
got
the
react:
property
controls.
A
These
are
the
ones
designed
to
be
used
in
the
edit
pane
of
your
sharepoint
framework
web
parts.
Some
additional
localization
I'd
love
to
know
the
differences
between
us
and
british
english
enhancements
for
faster
property
field,
state,
picker,
property
field,
collection
data.
Various
other
fixes
encourage
you
to
check
those
out
and
update.
When
you
get
a
chance
for
your
solutions,
you
can
find
out
more
information.
A
The
two
links
down
there
at
the
bottom
and
then,
of
course,
you
can
follow
m365
pnp
controls
on
twitter,
so
that
we
can
so
that
you
can
get
all
of
the
updates
and
latest
capabilities
as
those
continue
to
get
improved
and
rolled
out.
So
thank
you
to
all
the
folks
driving
that
work
long
list
of
contributors
there.
So
thank
you
to
all
of
you
for
the
great
work
you're
doing
around
the
react,
controls
and
next
up
is
pnp,
modern
search.
A
This
is
how
you
can
use
sharepoint
framework
web
parts
and
capabilities
to
build
a
modern
search
portal
version.
470
beta
is
out
that
was
the
june
2022
release
or
this
june.
I
guess
I
could
say
it
that
way,
so
you
can
see
the
tag
there
on
the
470
beta.
Thanks
to
those
folks
who
contributed,
that's
got
support
for
adaptive
card,
rendering,
which
is
really
exciting,
really
exciting,
to
see,
as
well
as
release
notes
for
fixes
and
other
features.
This
is
a
really
great
set
of
capabilities.
A
I
encourage
you
to
check
this
out
as
well.
If
you
are
still
on
the
version,
three
branch
encourage
you
to
update
to
the
version
four
branch
when
you
are
able,
as
the
v3
branch
is
only
really
in
maintenance
mode.
At
this
point
and
not
getting
a
lot
of
new
features,
so
definitely
check
out
the
four
seven
branch
and
encourage
you
to
try
this
stuff
out
really
fantastic
way.
To
build
incredible
search,
capabilities
for
your
customers
and
your
companies
and
now
I'll
hand
things
over
to
hugo
for
the
samples.
E
Thank
you,
patrick,
so
we
have
some
repositories
with
spfx
samples.
We've
got
spfx
extensions
and
spfx
webparts,
and
these
samples
can
be
simple
concepts
or
they
can
be
almost
ready.
You
know
to
use
in
production,
but
their
purpose
is
all
to
teach
really
cool
techniques
and
code
patterns,
and
things
like
that.
These
are
the
updates
for
the
last
two
weeks.
Jc
wegenberg
has
updated
the
page
navigator
and
that's
the
first
of
many
of
or
not
the
first,
but
the
last
of
many
updates
that
jc
has
done
on
this
sample.
E
E
E
B
David
awesome,
thank
you,
hugo.
Well,
we
have
our
aces
adaptive
card
extensions
samples
available.
Now
we
have
no
new
samples
to
tell
you
about,
but
we
do
love
them
and
we
want
to
see
more
of
them.
So
please
don't
hesitate
to
submit
some
of
your
samples
and
we
are
having
a
sharing
caring
session
coming
soon.
I
know
derek
and
luisa
are
working
heavily
on
that
it
is
likely
going
to
be
a
two-part
session,
a
lot
of
in-depth
opportunity
there
and
we've
been
talking
about
for
a
while
now.
B
A
B
D
A
F
All
right,
let's
talk
about
upgrading
spfx
projects,
all
right
all
right,
so
this
is
me:
I'm
don
kirk
on
my
microsoft
mvp
in
m365
development,
I'm
a
consultant
with
dmi
as
an
enterprise,
architect,
there's
some
contact
information
there
for
me,
so
feel
free
to
reach
out
and
find
some
information.
I'm
a
long
time,
lurker
first
time,
presenter,
a
product
of
the
sharing
is
caring
process.
So
this
is.
F
This
is
pretty
awesome
to
get
to
do
this,
so
I
always
like
learning
interesting
facts
about
speakers,
and
so
my
interesting
fact
is
that
before
I
became
a
full-time
developer,
I
was
a
pilot
in
the
air
force.
So
I
did
20
years
in
the
air
force,
flying
these
three
airplanes
and
had
a
lot
of
fun
doing
it
and
love
talking
about
that.
If
you
ever
get
a
chance
we'll
we
can
talk
about
fine,
all
right
upgrading.
F
Why
do
I
want
to
do
this?
Okay,
I
I
always
install
the
latest
version
of
spfx,
so
I
just
use
that
when
I
create
my
projects
and
that's
great,
but
if
you
do
spfx
projects
for
more
than
a
few
months,
guess
what
the
version's
going
to
change
and
now
you're
using
multiple
versions
and
while
I
wouldn't
recommend
going
back
and
just
upgrading
all
your
projects,
there
will
be
times
where
you
figure
out
that
you
need
to
do
this.
So
you
end
up
with
this
stable
of
solutions
using
different
versions.
F
So
is
a
is
a
call
out
to
you
know
my
buddy
chris
kent.
We
got
warrior
horses
in
the
stable,
so
we're
doing
that.
But
eventually
you
end
up
with
this.
These
projects
it's
like.
Well,
I
need
to
go
back
to
an
older
project
and
make
a
change
to
it.
So
I
need
to
fix
a
bug,
maybe
or
I
need
to
change
some
functionality.
Maybe
I
want
to
add
a
new
feature
to
that.
So
you
have
an
option.
F
You
can
either
go
back
to
the
original
version
of
sharepoint
framework
reinstall,
that
environment
set
everything
up
so
that
you
can
work
with
the
environment
that
it
was
built
in
or
you
can
upgrade
to
the
latest
environment,
which
is
what
I
recommend
doing
so
again.
I
wouldn't
go
back
and
just
do
it
by
default,
but
if
I'm
gonna
make
a
change
to
it
anyway,
I'm
gonna
go
ahead
and
upgrade
so
I
can
get
all
the
latest
and
greatest
stuff
from
the
framework.
F
So
how
do
I
do
this?
Well,
you
can
do
it
yourself.
You
can
go
through
the
files
and
try
and
change
all
the
dependencies
and
do
the
package
installations
and
change
all
the
different
configuration
options.
But
I
did
this
before
this
tool
was
available
and
I
don't
think
I
ever
did
it
correctly.
So
I
just
don't
think
that's
a
good
option,
so
you
can
use
a
tool.
There
may
be
commercial
tools
out
there.
I'm
not
sure,
because
I
have
a
free
tool
available
to
me
through
the
cli
for
microsoft,
365,
a
free
community
project.
F
F
It
does
so
much
more
than
what
we're
going
to
show
today,
but
if
you
haven't
played
with
this
tool,
you
definitely
should
do
it,
and
this
is
one
of
the
things
I
really
like
about
it
all
right.
So
let's
go
ahead
and
get
this
done
so
first
thing
we
need
to
do.
You
need
to
set
up
your
environment
for
the
version
of
spfx
that
you
want
to
upgrade
to
so
we're
going
to
upgrade
to
115
0
today.
So
that's
the
environment
that
I
set
up
so
I'm
using
node
16..
F
The
only
other
dependency
I
need
is
a
golf
cli.
I
don't
even
need
the
framework
installed
most
of
the
time
you
have
that
because
I'm
building
new
projects
and
stuff,
but
I
don't
need
it
for
this
particular
process.
So
all
I
have
to
do
is
just
install
gulp
cli
and
then,
after
that
I
just
end
up
with
this.
So
this
is
actually
the
environment
that
we'll
look
at
today.
F
F
It
does
need
to
be
installed
in
the
local
environment
because
you
have
to
be.
You
have
to
run
it
from
inside
the
project
folder.
So
the
docker
solution
is
a
great
solution,
but
it
doesn't
work
in
this
particular
case
or
it
takes
extra
steps
to
make
it
work.
I
should
say
next
thing:
is
you
need
a
project?
So
just,
however,
you
get
your
project,
whether
you're
cloning,
it
from
a
repo
somewhere
or
whatever
you
got
to
get
it
into
a
folder,
so
you
can
start
working
on
it.
F
We're
going
to
use
vs
code
today,
one
of
the
options
for
the
upgrade
involves
code
tour.
If
you're
not
familiar
with
that,
it's
it's
a
really
neat
little
tool,
especially
for
learning,
but
the
you
do
need
an
extension
in
vs
code.
In
order
to
to
do
that
and
then
once
you
do
that
you
go
into
the
project,
you
open
up
your
integrated
terminal
out
of
vs
code
and
you
run
an
upgrade
command.
F
So
I
got
a
couple
of
them
up
here
that
we're
going
to
look
at
today,
so
it's
spfx
project
upgrade
and
then
your
options
so
dash
o
or
dash
dash
output
is
how
you
want
your
results.
So
there's
several
options.
The
two
we'll
look
at
today
are
tour
and
markdown.
So
tour
creates
that
code,
tour
piece
and
then
markdown
creates
a
markdown
file,
and
then
you
just
save
that
into
your
local
project
or
wherever
you
want
to
save
it,
and
then
you
use
that
to
walk
through.
F
F
All
right,
so
how
do
I
get
this?
So
if
you
go
to
the
you
know
the
easiest
way,
if
you
want
to
always
start
with
the
pnp
page,
if
you
go
to
the
tools
and
go
down
to
the
cli,
take
you
to
the
to
the
home
for
the
cli
for
microsoft.
365
tells
you
how
to
install
it.
We've
already
kind
of
gone
through
all
that.
F
If
you
want
to
learn
more
about
the
commands,
so
here's
all
the
commands
all
the
different
areas
of
commands
that
you
can
get
to
again
we're
just
talking
about
one
command
out
of,
I
don't
know,
probably
hundreds
that
are
in
this
project.
So
if
you
go
to
project
upgrade,
you
know
it
walks
you
through
the
different
options
you
don't
have
to
upgrade
to
the
latest
version.
You
can
pick
a
specific
version
you
want
to
upgrade
to
you
can
also
use
in
the
preview.
You
can
upgrade
to
any
beta
versions
that
might
be
available.
F
So
there's
things
in
here
that
definitely
worth
reviewing
to
see
how
you
want
to
how
you
want
to
do
this
as
far
as
projects
go,
so
I
just
went
and
grabbed
a
web
part
out
of
one
of
the
pnp
repositories,
so
this
is
actually
in
the
web
part
sample
web
part
repository,
but
it's
also
in
the
spf
sp
starter
kit
repository.
So
I
worked
on
this
a
few
months
ago.
F
It's
just
a
nice
little
web
part
that
you
know,
gives
you
a
people
directory,
and
so
you
click
on
it
gives
you
little
people
cards
for
stuff.
But
I
noticed
when
I
was
doing
this,
that
this
project
is
is
a
few
years
old
and
you
know
so
it
was
built
originally
in
2018,
and
so
it
doesn't
use
any
of
the
new
microsoft
graph
toolkit
stuff.
So
I
was
like:
would
it
be
kind
of
cool
to
to
put
tool
kit
stuff
in
here?
F
F
F
And
so
as
we
as
we
look
at
this,
so
let
me
close
a
couple
things
up.
So
if
we
look
at
the
package.json
file,
you
can
see.
Yes,
it's
113.1,
so
this
is
what
we're
starting
with
and
then
we're
going
to
walk
through
the
process.
To
get
this
upgraded,
I'm
going
to
close
those
back
out
all
right,
I'm
going
to
open
up
my
integrated
terminal
and
then
I'm
just
going
to
run
the
command.
F
So
m365
spfx
project
upgrade
that's
cool,
and
then
I
want
to
output
this
the
first
time
we're
going
to
do
we're
just
look
at
that
tour.
So
that's
how
long
it
took
so.
It
didn't
even
register
that
little
check
mark.
That's
in
my
my
prompt
will
tell
you
how
long
the
previous
command
took
unless
it
took
so
little
time
that
it
just
didn't
even
register.
So
so
it
creates
this
new
tours
folder
up
here
with
a
tour
folder
in
it.
F
Since
I've
installed
the
extension
into
visual
studio
code,
I'm
just
going
to
go
ahead
and
open
it
from
here.
I
just
tell
it
which
file
I
want
to
update
or
open
and
off.
It
goes
so
code.
Tour
is
a
step
by
step
you
it
lets.
You
highlight
things
and
walk
you
through
things,
so
what
it
does
is
it
opens
up
the
file
package.json.
F
It
shows
you
the
line,
so
it's
going
to
look
at
the
sp
core
library
and
then
it
tells
you
what
you
have
to
do.
So
you
need
to
upgrade
this
dependency
package
for
the
sp
core
library
and
here's
the
command
to
do
that
now,
from
code
tour,
you
can
actually
just
click.
This
command
and
it'll
open
up
the
integrated
terminal
and
start
running
this
command
for
you,
I'm
going
to
show
you
a
different
way
of
doing
that.
But
that's
a
really
nice
feature
just
to
do
that
and
then
you
just
walk
to
the
next
one.
F
So
you
go
to
the
next
one.
Now
we're
going
to
update
sp
low
dash
and
again
here's
the
command
to
do
that,
and
it
just
walks
you
through
it.
So
you
just
run
each
of
these
commands
one
at
a
time
as
you're
going
through
the
upgrades
typically
are,
are
two-parted,
so
the
first
part
is
all
the
dependency
upgrades.
So
you
just
you,
walk
through
each
of
these
npm
installs
at
different,
the
dev
dependencies,
the
regular
dependencies
and
then
once
you're
done
with
all
of
that.
F
F
So
the
first
thing
is,
you
know
yo
rc
we
upgrade
here,
so
you
can
see
it
again.
It
opens
up.
The
file
shows
me
the
line
it
has
the
insert
code
here.
If
you
do
that
it
inserts
a
little
bit
more
than
what
I
like.
So
I
just
need
this
one
line.
So
it's
so
I
just
typically
just
copy
the
line
and
paste
it
in
there
myself
when
I'm
using
this
particular
way.
F
F
F
It
will
do
it
in
the
local
directory
if
I
don't
specify
somewhere
else,
but
I
can
specify
wherever
I
want
so
now
when
I
come
over
here
and
look
so
here's
my
upgrade
markdown
file.
So
if
I
do
preview
for
markdown,
you
can
see
this
looks
a
lot
like
the
code
tour
right.
So
it's
the
same
type
of
instructions
that
you
get
in
the
code.
Tour,
it's
just
in
a
little
different
format.
F
F
So
while
it's
doing
that,
I
can
run
back
over
and
go
through
the
the
modification.
So
let's
take
a
real
quick
look
for
this
project.
What
the
modifications
are
so
the
first
thing
it's
going
to
change
the
version
number
in
yo,
rc,
okay,
that
makes
sense,
then
we're
going
to
upgrade
the
compiler
version.
Then
ts
config
to
use
a
later
version.
That's
good!
It
adds
this
heft
folder
to
the
git,
ignore
file.
F
F
You
know,
but
you
can
just
basically
click
on
the
link
here
opens
up
the
file
so
under
solutions,
I'm
just
going
to
go
to
the
last
item
in
solutions
and
then
paste
in
the
new
thing.
Okay,
that's
how
easy
it
is
just
to
paste
this
stuff
in
and
make
it
work.
Then
it's
going
to
go
back
and
add
another
section
for
features.
Okay,
so
I
would
go
and
copy
and
paste
that
in
there
and
then
the
last
thing
it
shows
is
it
you
can
go
into
your
launch.json
and
change
the
default
browser.
F
F
So
now
we
finished
the
last
thing
it
did
was
if
we,
if
we
go
back
and
look
here,
the
last
thing
it
did
is
it
creates
a
new
file
called
dot,
eslint
rc.js
and
we
can
see
that
ran
here
and
it
created
this
new
file
for
us
over
here
in
the
in
the
project.
So
that
was
the
last
thing
they
got
ran
so
now
everything's
good
to
go.
F
F
And
hopefully,
what
we
get
is
no
no
errors,
all
right
so
as
it
starts
walking
through,
because
the
first
thing
it
does
is
the
gulp
build
and
starts
going
through,
and
it's
looking
for,
you
know
any
errors,
so
we
don't
see
any
errors
that
show
up
now.
We
do
see
all
these
warnings
now.
This
is
part
of
the
new
eslint
piece,
so
as
they
as
we
microsoft
put
the
esl
engine
in
there
and
the
rules.
These
are
warnings
that
are
coming
up.
Andrew
connell
posted
a
link
earlier
in
the
chat
about
a
discussion.
F
That's
going
on
about
these
rules
and
how
this
is
implemented.
We've
been
wanting
eslint
for
a
while,
but
there's
different
ideas
on
how
to
implement
it
and
which
rules
should
apply
and
which
should
come.
That
sort
of
stuff
go
to
the
link
that
andrew
posted
participate
in
the
discussion.
Microsoft
wants
to
hear
our
opinion
on
this,
so
please
do
that
anyway,
they're
all
warnings,
so
they
don't
really
affect
anything
other
than
just
code
style,
all
right.
We
get
to
the
end
here
and
we
get
to
the
reload
steps.
F
Oh,
I
guess
I
forgot
to
take
that
out
for
my
last
practice
session,
but
let's
take
it
out
and
add
a
new
word
part,
so
I'm
going
to
add
people
directory
local
and
so
here's
my
web
part
working
just
fine
and
you
know,
but
it's
now
in
version
115
0..
So
now
it's
ready
for
me
to
go
back
into
my
code
and
start
making
my
changes.
F
So
it
took
us
less
than
15
minutes
with
me
doing
a
lot
of
talking
and
doing
slides,
so
it
takes
less
than
10
minutes.
Usually
to
do
this
now
the
tool
concentrates
on
the
the
core
sharepoint
framework
pieces.
It
will
try
and
work
with
other
if
you
have
other
dependencies
and
stuff
in
there.
It'll
try
and
work
with
those
too.
F
A
Thank
you
don
great
stuff
there
really
a
nice
clean,
look
at
how
to
update
a
project
with
the
cli
encourage
folks.
If
you
haven't
tried
to
update
your
old
spf
x
projects,
it
is
really
valuable
to
stay
on
later
versions.
You
get
a
lot
of
great
new
capabilities
and
fixes,
and
the
cli
really
gives
you
a
nice
easy
path
to
do
that.
So,
if
you
haven't,
do
give
that
a
try,
we're
just
going
to
move
right
over
to
siddharth
now
for
adaptive
card
extensions
with
dynamic
announcements
siddharth.
G
Hello:
everyone
today,
I'm
going
to
present
demo
and
code
walkthrough
on
the
adaptive
card,
extensions,
which
I
have
recently
submitted
to
the
spfx
adaptive
card,
extensions,
github
repo
a
little
bit
about
myself.
I
am
siddharth,
so
I
am
a
microsoft
mvp
and
I
am
an
active
php
contributor
and
proudly
showcasing
all
the
patches
which
david
has
talked
about
about
various
crazy
pages
which
we
get
while
we
are
contributing
to
all
the
pnp
reports
and
everything.
G
So
today,
I'm
going
to
talk
about
an
s
component
to
basically
show
multiple
cards
and
items
from
the
sharepoint
list
and
at
a
time
based
on
updates.
This
is
the
report
to
the
sample
from
which
you
would
be
able
to
download
the
repo
and
also
make
changes
if
you
like,
or
you
can
just
let
it
use
it
as
it
by
just
building
it.
G
Let's
first
see
summary
of
the
this
particular
adopted
card
extension
sample,
so
it
basically
is
a
single
component
here
which,
where
we
would
be
able
to
show
various
cards
and
items
from
the
sharepoint
list
at
a
time,
and
that
would
be
based
on
the
day.
So
that
is
why
I
call
this
as
a
dynamic
announcement
wherein,
as
a
practical
use
case,
what
we
can
do
is
we
can
use
this
particular
adaptive
card
extension
solution
to
display
different
kinds
of
announcements
in
our
viva
connection.
Dashboard
right.
G
So
we
will
see
that
how
that
will
work
in
a
while,
and
then
there
is
an
option
in
the
card
view
whether
we
can
choose
whether
we
wanted
to
open
an
external
link
or
we
wanted
to
open
a
quick
view
on
the
click
of
the
card,
or
we
don't
want
to
do
any
any
suggestion.
We
just
wanted
to
have
a
plain
and
simple
card
view
to
be
displayed
on
the
dashboard
right.
G
Some
of
the
examples
which
I
think
this
can
be
useful
is
to
basically
show
the
communications
or
the
news
and
articles
which
we
can
get
it
from
the
external
external
systems
or
external
apis.
From
the
same
way,
we
can
implement
rss
feed
to
be
displayed
and
updating
to
sharepoint
list,
any
other
important
updates,
a
quarter
of
the
day
tip
of
the
day
or
any
other
announcement
which
we
think
we
would
like
to
give
to
all
the
users
within
our
organization
in
our
viva
connection,
dashboard
itself.
G
Now
these
are
some
of
the
other
features
which
these
adaptive
card
extensions
provide
is.
Basically,
you
know,
allows
us
to
create
the
list
from
the
configuration
panel.
So
it
means
that
you
don't
have
to
pre-create
the
list
from
manually
from
the
sharepoint,
but
you
can
use
this
adobe
card
extension
and
just
click
on
the
button
and
it
will
automatically
create
the
required
schema
or
required
list
to
be
used
for
this.
G
So
without
much
audio,
let's
quickly
see
the
demo.
So
this
is
my
dashboard.
Okay
and
you
can
see
many
adaptive
card
extension,
but
we
are
mostly
focusing
on
this
particular
component.
So
right
now,
if
you
see
it
is
showing
one
card
view
which
is
pnp
landing,
page
a
single
url
to
find
them
all.
So
once
you
click
on
it,
it
will
take
us
to
the
home
page
where
you'll
be
able
to
find
all
the
links
to
the
pnp
on
click
of
next.
G
It
is
showing
a
different
sample
which
is
basically
a
restaurant
sample
and
you
click
on
it
and
you
see
a
different
kind
of
quick
view.
So
the
first
card
view
which
we
have
seen
what's
worse
and
simple-
to
link
to
the
external
system.
This
one
is
where
we
are
displaying
a
quick
view,
and
this
is
one
of
the
examples
from
the
adaptive
card
designer
I
o
from
where
it
shows
how
we
can
different
kinds
of
adaptive
card
can
be
displayed
next,
it's
an
image
gallery
sample.
G
G
First,
let's
see
also
see
the
properties
which
are
available,
so
you
can
configure
the
obviously
the
card
title
which
is
displayed
like
dynamic
s,
then
the
card
icon
and
the
list
name
from
where
we
wanted
to
get
the
data
from
and
this
button
will
basically
create
a
list.
If
at
all,
you
wanted
to
create
a
new
list
and
use
this
card
in
multiple
in
the
same
dashboard.
G
G
Then
there
is
start
and
end
date.
As
I
said,
it
is
more
like
an
announcement.
So
this
is
a
feature
wherein
you
can
have
a
single
list,
but
you
can
control
what
you
wanted
to
display
on
that
particular
dashboard
or
what
are
the
items
you
wanted
to
get
based
on
the
start
date
and
end
time,
so
it
means
it's
like
an
expiry
of
a
particular
announcement
or
expiry
of
a
particular
card.
So
if
the
current
today's
date
will
fall
between
the
start
and
end
late,
then
only
it
will
display
here.
Otherwise
it
won't.
G
Then
there
is
a
column
for
on
card
selection
type.
So
this
will
tell
the
code
logic.
You
know
what
to
do
when
a
card
particular
card
is
selected.
So
if
it
is
a
quick
view,
it
will
basically
go
and
refer
this
to
column,
which
I
will
be
talking
about
in
few
seconds.
But
if
it
is
just
an
external
link,
what
it
will
do
is
it
will
try
to
find
from
in
which
link
you
wanted
to
redirect.
G
G
What
we
do
is
we
define
our
adaptive
card
schema
within
our
code
base
itself
within
a
template,
folder
somewhere
and
then
what
we
do
is
we
have
our
data
method,
which
we
basically
kind
of
pass
the
dynamic
data
to
that
adaptive
card
schema
and
then
the
rendering
of
the
adaptive
card
takes
place
by
the
spfx
framework
itself
right.
So
this
is
where
you
know,
rather
than
getting
that
adaptive
card
schema
from
the
code
solution
or
from
the
template
folder.
G
What
we
are
doing
is
we
are
allowing
user
to
make
it
configurable
in
the
sharepoint
system.
So
here
you
can
define
all
the
schema
which
you
have
and
the
data
data
column
would
be
where
you
have
to
basically
create
your
data,
which
basically
will
combine
with
the
adaptive
card
extension
right
now.
One
question
you
know
we
would
have
in
our
mindless
signal
how
we
are
going
to
update
this
data
column
right.
G
If,
for
example,
if
consider
an
rss
feed,
which
we
wanted
to
display
onto
the
adaptive
card
here
and
which
probably
can
be
on
the
daily
basis,
a
power
automate
would
be
kind
of
running
daily
or
on
a
scheduled
time,
and
what
it
will
do
is
it
will
read
the
rss
field
and
what
it
will
do
is
it
will
automatically
not
automatically,
but
basically
based
on
our
logic.
It
has
to
create
a
specific
json
format
in
which
the
schema
would
require
right.
So
that
is
how
both
of
these
would
combine
and
then
it
would.
G
The
spfx
member
could
take
care
of
displaying
the
data
in
the
quickview
itself.
So
now,
let's
just
quickly
see
you
know
how
we
can
probably
create
a
new
entry
here.
So
what
I'm
going
to
do
is
I'm
going
to
use
this
adaptive
card
template
repo,
wherein
there
is
an
adaptive
card
sample
which
basically
displays
the
event
schedules
and
registration?
G
Okay
and
within
this,
if
you
think
about
this,
there
are
two
two
json
files:
one
is
the
template,
json
file,
template
file
and
the
data
file,
which
is
there
right.
So
let
me
do
one
thing:
let
me
create
one
repo
one
sample
here,
so
let
me
call
this
a
customer
because
title
column,
we
are
not
using
event.
G
And
I'll
say
on
card
selection,
I
wanted
to
open
the
quick
view
right.
So
that's
why
we
don't
want
to
put
any
external
link
here
and
let's
now
put
the
adw
card
json
in
the
data
here.
So
as
this
is
just
an
sample,
what
I'm
going
to
do
is
I'm
going
to
copy
this
schema
from
here,
which
is
readily
available
for
the
event
schedule
in
the
json
column,
and
we
also
have
the
sample
data,
which
is
uploaded
here
as
a
part
of
this
sample.
G
G
Let's
just
refresh
the
dashboard
now
and
if
you
see
the
new
item
has
been
created
here
and
it
is
getting
displayed
event.
2021
click
here
to
show
agenda,
and
if
you
click
on
it,
it
is
showing
exactly
the
way
the
sample
was
showing
in
the
repo
itself
in
the
quick
view,
with
all
the
functionality
as
it
is
now.
One
thing
to
note
here
is
because
this
is
an
adaptive
card
announcement
kind
of
thing.
Probably
it
will
not
support
any
update,
which
we
have
to
do
like,
for
example,
this
particular
sample.
G
What
it
does
is.
It
has
a
registration
problem
also
and
on
click
of
submit.
Probably
we
might
be
submitting
data
to
some
of
the
api
or
we
might
be
storing
this
data
into
sharpening,
so
that
won't
be
supported,
but
it's
more
or
less
a
read-only
kind
of
scenario
in
which
you
can
use
this
adapter
card,
and
this
is
how,
overall,
you
would
be
able
to
do
it
now
in
this
particular
case.
G
Also,
if
you
think
about
it,
probably
the
agenda,
which
is
which
we
are
displaying
in
terms
of
the
data
we
might
be
getting
it
from
the
api
or
we
might
be
getting
it
from
the
another
system
or
within
sharepoint
somewhere
itself.
We
just
need
to
make
sure
that
that
particular
piece
of
automation
is
going
to
go
and
update
the
data
in
the
particular
json
format,
where,
based
on
the
schema
which
we
have
created,
so
this
particular
adaptive
card
extension
is
more
or
less
targeted
to
developers.
G
Like
us,
who
can,
basically,
you
know,
kind
of
use,
this
kind
of
reusable
adaptive
card
extension
to
be
displayed
somewhere
and
give
a
solution
to
the
client
that
bearing
if
they
say
that
okay,
I
need
to
quickly
display
some
announcement
or
something,
but
it
should
be
in
this
format
and
depending
on
the
type
of
the
announcement
or
type
of
the
message,
we
wanted
to
display
different
kind
of
card.
So
in
this.
C
G
G
Then
we
have
state
object
which
will
basically
hold
the
data
which
we
get
from
the
sharepoint,
the
area
of
the
items,
the
current
index,
which
is
being
displayed
in
the
card
view,
then
the
current
item,
which
will
hold
the
actual
item
within
that
particular
selected
card,
and
then
there
is
a
quick
view
right
now.
This
is
not
been
used.
I
was
trying
something
else,
but
you
can
ignore
this.
Then
there
is
on
init
method,
say
owning
it
method.
G
If
I
remember
correctly,
I
got
this
reference
from
one
of
the
session
or
demo,
which
patrick
did
on
how
to
auto
rotate
the
particular
card
from
based
on
a
few
seconds.
So
this
is
the
same
logic
which
I
have
kind
of
you
know
get
it
from
the
particular
demo
which
was
when
done.
Then
we
here
we
have
only
two
cards,
I
mean
the
card
view
and
the
quick
view
and
single
preview
is
basically
make
dynamic
in
a
way
to
get
the
schema
and
the
data
from
the
sharepoint
list.
G
G
G
Moving
on
to
card
view.
First
thing
to
understand
here
is
the
buttons
so,
depending
on
the
current
item
index,
we
would
have
to
either
add
one
button
or
two
button.
So
if
the
current
index
is
greater
than
zero,
then
it
means
we
know
that
there
are
more
items
to
be
displayed,
so
we'll
display
previous
button
also.
But
if
it
is
a
last
item,
if
it
is
not
the
last
item,
then
we
have
to
display
the
next
button.
G
G
Next
thing
is
on
action.
This
is
where,
whenever
an
action
button
from
the
card
view
has
been
clicked
so
here
what
we
are
doing
is
we
are
just
incrementing
and
decrementing
the
index
and
the
current
item
object
change.
The
current
item
object
based
on
whether
the
previous
or
next
button
has
been
clicked
in
the
data
method.
As
I
said,
the
card
view
is
basically
getting
data
from
the
sharepoint
list
and
from
the
current
item.
G
So
what
it
will
do
is
we
are
displaying
the
primary
text,
which
would
be
configured
in
the
sharepoint
list
and
the
description
which
will
be
configured
in
this
sharepoint
list.
Based
on
the
current
item,
which
has
been
displayed
now,
this
is
important
on
card
selection
means
what
we
need
to
do
whenever
a
user
clicks
on
the
card
right
so
depending
on
what
is
the
current
value
set
of
the
current
item
in
the
card?
G
Whether
it
is
a
quick
view,
we
will
return
the
quickview
object,
but
if
it
is
an
external
link,
then
we
would
return
the
object
of
the
type
external
link
and
also
we
will
send
the
target
parameter
to
the
column
value
which
is
there
in
the
external
link
url.
And
if
the
card
view
selection
doesn't
have
any
action
item,
then
what
we
are
going
to
do
is
we
are
going
to
do
nothing,
so
it
means
nothing
would
happen.
One
click
of
that
then
coming
to
the
quick
view.
G
So
this
is
interesting
generally
in
the
quick
view.
What
we
would
have
is
we
would
have
we
would
be
either
returning
the
making
the
api
calls
getting
data
from
somewhere
based
on
the
use
cases
or
the
scenarios.
So
in
this
case
we
know
that
we
just
have
to
get
the
data
from
a
particular
column
in
the
sharepoint
list
item.
So
what
we
are
doing
is
if
it
is.
G
We
are
reading
this
schema
from
the
adwords
json
column
and
again
passing
it
and
returning
it
so
that
you
know,
basically,
whenever
spfx
framework
would
have
to
display
the
ui,
it
will
combine.
The
schema
object
with
the
data
object
to
basically
dynamically,
create
the
quickview
and
display
it
in
the
ui
right.
Next
is
the
sp
provider
class,
so
sp
provider
class.
Basically,
we
are
using
pnp,
but
we
are
using
the
older
version
of
pnp.
When
I
started,
I
still
start.
G
So
this
is
how-
and
there
is
one
more
method
checklist
which
is
just
to
check
whether
the
list
already
with
the
same
name
already
at
least
or
not.
So
if
user
tries
to
create
again
this
list
with
the
same
name,
we
can
just
display
an
error
message
thing
that
lists
already
exist
right
so
yeah.
So
this
is
it.
This
is
it
from
my
site.
A
Great
stuff
there,
thank
you
so
much
siddharth.
Thank
you!
So
much
don,
so
two
great
demos,
nice
relaxing
pace
there
today
with
thank
you
again
for
those
want
to
thank
all
of
you
for
joining
us
here
today.
I
know
it's
the
summer,
so
folks
have
a
lot
to
do
but
appreciate
you
spending
some
time
with
us
today.
Recording
will
be
available
in
about
24
hours
on
the
microsoft
365
youtube
channel
ak
dot.
Ms
slash
m365,
slash
videos:
you
can
follow
us
there
on
twitter
at
microsoft,
365,
dev
or
m365
pnp.
A
Our
next
connections
in
spfx
call
will
be
in
two
weeks
on
july
28th
at
the
same
time
as
usual,
and
our
next
general
dev
call
will
be
next
thursday
july
21st,
at
the
same
time
as
usual,
get
all
the
links
to
the
calls
at
ak
dot.
Ms
slash
m365,
slash
calls.
I
want
to
thank
all
of
you
for
joining
us
today
have
a
great
rest
of
your
week
and
we'll
talk
soon.