►
Description
In this 16-minute developer focused demo – Microsoft continues to evolve SPFx experiences in Microsoft 365 that span SharePoint, Teams and Viva Connections canvases. The engineering team reviews capabilities delivered in SPFx v1.14 and on new capabilities being built for v1.15 to be released in phases. Two work-in-progress items shared are Command Set API update for ListViewAccessor (update asynchronously for list state changes) and a new action called VivaAction.SelectMedia providing media upload capabilities on an Adaptive Card Extension. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 1, 2022.
Demo Presenters:
• Luca Bandinelli (Microsoft)
• John Nguyen (Microsoft)
• Alex Terentiev (Microsoft) | @alexaterentiev
• Siddharth Gulati (Microsoft) | @sidvaani
Supporting material:
• Documentation - SharePoint Framework v1.14 release notes | https://docs.microsoft.com/sharepoint/dev/spfx/release-1.14
Learn more:
• 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
We
started
this
journey
for
as
a
way
to
extend
sharepoint
pages
with
web
parts
and
extensions
and
the
more
our
product
grow.
The
more
we
were
able
to
target
additional
canvases.
We
then
worked
with
microsoft
teams
as
personal
apps
and
teams
tabs
and
very
recently,
we
are
now
working
with
the
viva
connection
dashboard
and
the
ability
to
use
sharepoint
framework
to
build
card
and
quick
view
using
basically
the
same
technology.
A
So
this
is
kind
of
the
evolution
of
sharepoint
framework.
This
slide
is
interesting,
because
now
you
can
see
that
you
can
use
a
single
technology
and
potentially
a
single
solution
and
by
basically
simply
tweaking
the
manifest
and
building
your
logic.
You
can
target
all
of
these
canvases
with
one
single
package.
One
single
code
base.
B
A
And
you
know
not-
and
you
don't
have
to
be
a
sharepoint
expert,
which
is
nothing
wrong
with
that,
but
basically
the
entry
point
of
starting
adopting
sharepoint
framework
is
just
like.
As
long
as
you
can
work
with
any
web
api
is
basically,
you
can
work
with
sharepoint
framework.
So,
as
I
was
saying
at
the
beginning
of
the
call
we
recently
released,
1.14
1.14
provided
some
kind
of
a
new
functionalities
and
capabilities,
specifically
around
some
of
the
issues
that
we
fixed
very
recently
on
github.
A
A
A
We
also
have
some
kind
of
beta
capability
beta
features
and
capabilities
over
there.
They
do
not
show
up
in
114
release,
because
now
we
have
this
new
way
of
release
updates
on
sharepoint
framework,
where
every
time
we
release
something
in
ga,
we
are
also
releasing
something
on
as
a
better
functionalities
and
capabilities.
A
So
if
you
go
to
the
next
slide,
there
is
a
question
around
the
react
in
115
we
are
doing
some
kind
of
work
to
be
able
to
have
some
new
functionalities
and
capabilities.
So
as
a
115
bed
release,
which
is
a
coming
very
very
soon,
you
will
have
the
better
functionalities
that
were
available
in
114
beta.
So
you
will
have
card
view.
Caching,
for
adaptive
card
extensions.
You
will
have
the
ability
to
use
the
new
media
ngo,
location
capabilities.
Some
of
these
things
will
surface
in
demo.
A
Today
you
will
be
able
to
have
a
new
error,
handle
method
to
be
able
to
have
a
better
error,
management
and
error
experience
in
your
card
when
you're
developing
your
card
from
a
connection
dashboard
and
then,
as
we
are
progressing
in
new
beta
releases,
and
we
are
going
close
to
ga.
We
will
start
introducing
new
capabilities
that
will
surface
in
115,
so
the
first
thing
that
we
are
going
to
work
with
is
the
ability
to
have
isolated
functionalities
and
capabilities
in
cards
similar
to
what
we
have
with
web
part.
A
Two
days,
you
will
be
able
to
have
isolated
adaptive
card
extensions
that
will
give
you
the
ability
to
target
specific
api
that
require
extra
amount
of
security
or
x
amount
of
elevated
access.
Elevated
is
the
wrong
word
because
you're
not
elevating
but
extra
access,
consider
it
to
everything
else.
You
will
be
able
to
do
that
in
a
protected
way,
meaning
that
everything
else
will
not
be
able
to
have
access
to
the
same
kind
of
scopes.
A
We
will
then
move
to
ga
to
caching,
and
hopefully
we
want
to
move
to
dj,
also
the
geolocation
and
media.
We
will
also
do
some
kind
of
tweaks
on
the
team's
integration,
one
of
the
things
that
we
are
doing
in
teams
today.
We
are
not
using
the
on
the
alpha
flow
on
teams
web,
so
we
are
normalizing
that
experience
so
that
everything
that
will
surface
around
teams
will
use
the
same
flow
in
terms
of
gathering
tokens
to
access
apis.
A
D
A
Right:
okay,
sorry,
my
bad,
not
too
much
coffee.
Yet
then
we
are
aligning
on
the
libraries
capability
and
availability.
We
are
landing
on
graph,
sdk3
typescript
before
not
16,
and
we
are
adopting
the
sdk
version,
11
of
sdk,
of
teams
sdk
and
then
one
of
the
things
that
we
are
working.
Oh
another
small
things
but
important
things
that
we
want
to
do
is
to
align
the
api
registration
to
the
app
acquisition
flow.
A
What
I
mean
by
that
is
that
today,
when
you
are
installing
an
spfx
component
that
requires
an
api
that
is
not
registered
to
the
tenant,
let's
say
a
tenant
api.
You
need
to
do
manually
and
extra
step
to
do
that.
We
are
streamlining
that
capability
by
being
able
to
register
the
service
principle
of
your
multi-tenant
api
when
you
deploy
the
package
so
that
now
you
don't
have
to
do
anything
else
and
we
are
aligning
to
what
the
team's
experience
also
is
for
accessing
apis
in
teams.
A
And
then
one
of
the
things
that
we
are
working
very
very
hard
is
the
ability
to
have
adaptive
card
extensions
card
view
and
quick
views
powered
by
bots.
The
scenario
here
is
that
you
already
have
your
bot,
you
built
your
bot
for
microsoft
teams.
Your
baby
wanted
to
have
your
adaptive
card
powered
bots
for
team
stops,
and
you
also
want
to
use
the
same
capabilities
in
technology
in
viva.
A
B
Yeah,
I
think,
to
kind
of
add,
based
off
of
the
roadmap
you
can
see
here
is
that
you
know
we
started
the
journey
with
1.13,
where
we
started
doing
different
versions
of
the
113
or
the
spfx
releases
in
terms
of
doing
betas
and
release
candidates,
and
so,
as
we
sort
of
work
on
these
features,
and
we
think
that
they're
ready
for
broader
consumption,
we'll
have
them
as
part
of
our
beta
releases
and
we'll
make
announcements
for
them,
and
so
I
encourage
you
all
to
download
them
test
them.
Use
them.
Give
us
feedback.
B
C
Yeah,
so
in
114
we
were
working
hardly
to
improve
the
api
of
common
sets.
So
previously
the
api
was
pretty
weak
and
sometimes
it
was
not
exactly
what
developer
wanted
it
to
be
third-party
developers.
So
we
have
updated
listview
accessor
class
to
provide
a
lot
of
information
about
the
current
list.
Current
view
filters
and
sorting
applied
by
the
user.
Like
the
client
side,
we
have
also
introduced
the
new
list.
View
stay
changed
event
that
you
can
handle.
C
It
will
show
you
previous
state
and
what
exactly
was
happened
with
the
list
view,
so
you
kind
of
can
have
this
information
analyze
it
and
react
on
that
and
how
you
can
react.
There
is
a
new
raise
and
change
method
that
you
can
use
that
allows
you
to
asynchronously
react
on
any
update.
So,
for
example,
you
can
up
when
the
user
clicks
button.
You
have
some
logic
in
on
execute
some
sync
logic.
C
C
So
here
is
my
demo
command
here,
as
you
can
see,
it's
like
a
center
command.
I
just
folded
it
from
the
yeoman.
So
now,
if
I
do
some
new
item
in
here,
the
item
is
added
and
we
will
wait
a
few
seconds
here.
So
it's
a
synchronous
operation
and
now
you
can
see
first
of
all,
it's
disabled.
This
is
a
new
property
of
the
command
and
it
has
been
updated
after
five
seconds.
C
So
basically,
our
command
or
our
command
set
reacted
asynchronously
on
the
changes
in
the
view
and
why
it's
called
now
items
changed,
because
we
knew
that.
Basically,
new
item
has
been
added
to
this
list
and
from
the
code
perspective,
it's
pretty
simple.
So
in
our
command
set,
I'm
using
list
view
list
view
state
changed
event
and
in
the
list
state
change
event
at
least
use
the
change
event.
I'm
checking
the
state
changes
if
rows
has
been
changed,
I'm
just
adding
the
handler
to
this
listview
state
changed
event
inside
the
handler.
C
I'm
checking
the
state
changes,
which
is
basically
an
annum.
That
provides
us
information.
What
exactly
has
been
changed
and
in
our
case,
if
rose,
has
been
changed
in
that
case,
I'm
adding
timeout
and
inside
the
timeout,
so
it's
kind
of
a
synchronous
operation.
In
that
case
I'm
changing
the
title
of
the
command
disabled
and
then
I'm
calling
this
raison
change
and
basically,
after
five
seconds,
our
command
is
changing
in
the
toolbar,
which
is
pretty
excited.
I
believe-
and
that's
the
demo
luca
back
to
you.
E
E
So
here,
as
you
can
see,
there
is
this,
I'm
actually
projecting
my
phone
onto
the
screen,
and
here
we
have
come
up
with
a
mock-up
card
for
media
upload
and
I'm
just
gonna
tap
onto
it
and
quickly
show
you
what
happens
so.
This
is
a
mock-up
card
that
has
been
created.
So
when
you
open
it,
we
have
hooked
the
viva
action.
Dot,
select
media
capability
on
this
upload
button.
E
If
you
want
to,
and
then
press
done
and
that
will
automatically
show
up
on
the
on
the
card-
and
this
like
what
happens-
is
that
when
you
submit
it,
the
image
and
all
the
payload
is
passed
to
the
on
action
handler
and
then
the
third
party
developer
can
figure
out
what
they
want
to
do.
So
in
this
case,
the
third
party
dev
took
the
name,
the
file
size
and
the
thumbnail
and
presented
it
back
onto
the
card
itself.
E
You
can
add
multiple
images,
so
the
previous
one
I
took
a
photo
in
the
next.
I
can
actually
pick
up
something
from
the
image
gallery,
so
here
I
have
a
receipt
that
I
want
to
upload.
I
can
do
that
and
the
same
can
be
seen
over
here.
If
I
want,
I
can
remove
individual
images
and
just
for
the
purpose
of
this
card.
E
We
have
kind
of
exposed
these
settings,
but
you
can
decide
whether
you
want
to
what
is
the
maximum
file
size
that
you
want
to
want,
that
you
want
your
users
to
upload
or
whether
you
want
them
to
upload
multiple
file,
images
or
not.
But
let's
say
that
you
reduce
it
down
to
say
102
bytes
and
you
save
this
setting
and
you
go
back
then,
in
that
particular
case,
the
size
of
this
image
that
I
had
already
that
I
had
already
shared
was
way
too
large
than
102..
E
In
that
particular
case,
the
on
error
callback
gets
invoked
that
the
third
party
developer
can
latch
onto
and
then
they
can
show
the
appropriate
message
saying
that
the
file
size
is
too
large,
so
yeah.
Those
were
the
capabilities
that
we
are
trying
to
provide
as
part
of
the
select
media
action.
Yeah.
That's
very
much.
B
Awesome
thanks
sid.
I'm
also
super
excited
to
say
that
you
know
this
was
previously
only
available
on
desktop
in
the
previous
1.14
beta
releases,
but
as
of
this
week,
or
as
of
this
call,
it's
now
available
to
be
used
within
mobile
worldwide
as
part
of
the
beta,
and
so
you
can
start
playing
around
with
that
functionality.
Today,
with
the
viva
connections,
mobile
yep.
D
Excellent
thanks
john,
and
I
want
to
recap
just
the
use
case,
because
I'm
going
to
show
my
my
phone
in
here
again,
if
you
think
about
the
vivo
connection
mobile,
it
is
your
company's
own
portal,
a
mobile
portal
and
for
there
you
can
then
include
these
ace
cards
and
in
those
ace
cards
you
can
now
start
operating
with
the
actual
device.
And
that's
really
the
idea
here.
D
So
those
people
who,
let's
say
take
screenshots
out
of
the
the
let's
say,
inventory
on
the
shops
and
all
of
that
taken
easy
that
access
that
directly
from
the
ace
directly
from
the
company
mobile
portal,
which
is
available
in
the
in
the
mobile
and
then
they
can
access
information
like
the
cameras
and
location
and
all
of
that
stuff
in
the
future.
So
that's
where
all
of
that
is
coming
from.
E
Now,
and
just
to
add
on
to
what
we
just
said,
like
I
mean
another
use
case
would
be
just
to
upload
your
vaccination
cards
right
like
now
that
we
are
moving.
All
of
us
are
gradually
moving
into
our
offices.
We
are
asked
to
share
our
vaccination
reports,
so
the
same
thing
could
be
used
over
there
and
for
many
other
frontline
workers
scenarios.
D
So,
rather
than
being
forced
to
implement
your
full
independent
mobile
application,
you
implement
that
and
that
mobile
experience
using
spfx
and
then
it
will
be
rendered
in
the
mobile
of
vivo
connection.
So
I'm
sure
for
those
in
this
call
who
are
super
familiar
with
power
apps.
Yes,
you
can
do
similar
kind
of
things
with
power
apps,
but
then
power
apps
and
it's
low
code,
no
code
rather
than
spfx,
which
is
pro
developer
code
implementation.
D
So
you
can
access
more
efficiently
other
areas
as
well,
but
again
matter
of
opinion
matter
of
fact,
requirements
which
implementation
style,
always
the
customers.
Take
we
in
spfx
site.
We
of
course
promote
spfx
model,
but
it
depends
on
customer
case
right,
but
I
guess
john
lucas
just
double
checking.
I
guess
we
went
through
all
of
the
topics
and
we
can
jump
on
sep.