►
Description
In this 25-minute developer/designer focused demo, Vesa Juvonen starts with overview on how developers can more efficiently extend Microsoft 365 apps for SharePoint Online, Microsoft Teams, Microsoft Viva, and more (to be announced soon) with SharePoint Framework (SPFx). Alex Terentiev shows the latest steps for getting started with SPFx development from installing prerequisite tools to SPFx project creation, packaging, and simple deployment to production. See the same solution being added to SharePoint Online and to Teams. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on September 27, 2022.
Demo Presenters
• Alex Terentiev (Microsoft) | @alexaterentiev
• Vesa Juvonen (Microsoft) | @vesajuvonen
Learn more
• 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
B
B
So
there
won't
be
any
problems
with
the
data
moving
around
between
an
Azure
and
also
between
the
within
the
tenant
as
well,
because
again,
component
is
running
inside
of
the
Tenon
SharePoint
framework
also
provides
a
consistent
development
experience
for
Microsoft
teams,
for
V1
Microsoft
Viva
and
for
SharePoint
online
and
actually
more
in
the
future.
We'll
talk
about
that
one
in
the
upcoming
slides
and
it's
using
Interstate
standard
tooling.
So
there
it
is
using
German
generator.
B
It
is
using
web
stack
tooling,
it
is
all
about
typescript
and,
of
course,
behind
the
scenes,
we're
using
Microsoft
craft
for
accessing
capabilities
in
the
Microsoft
365.
So
you
have
full
access
on
the
apis
and
information
of
particular
particular
user
or
in
the
context
of
the
user.
Now
those
individual
shapes
and
capabilities
are
set.
Sharepoint
framework
is
for
Microsoft
teams,
Microsoft,
fiber
and
SharePoint,
and
soon
even
more
so
the
soon
even
more
will
be
visible
as
part
of
the
upcoming
ignite
announcements.
So
I
cannot
actually
share
all
of
those
details.
B
Yet
I
would
be
super
excited
to
show
you,
but
we'll
do
another
demo
after
ignite
and
again,
if
Knight
was
1
12
to
14th
of
October,
but
you'll
see
that
announcement
happening
I.
Think
in
12th
of
October.
Now
as
we're
building
SharePoint
framework
components
and
experiences
in
typescript,
you
can
use
whatever
JavaScript
framework
you
want.
Typically,
quite
often
people
use
react
because
in
Microsoft
we
use
react
as
the
default
framework
you
don't
have
to.
You
can
do
angular.
You
can
do
view
you
can
do
amber.
B
Whatever
is
your
chosen
framework
and
there's
a
new
framework
every
single
week,
which
is
the
newest
and
the
most
and
the
best
one
behind
the
scenes
were,
of
course
using
Microsoft
craft
for
accessing
the
information,
and
then
we
have
different
shapes
and
extensibility
points
across
across
the
SharePoint
and
Microsoft
Diva
and
Microsoft
teams,
which
you
can
build
using
the
SharePoint
framework
components
and
just
to
be
super
clear.
This
is
not
about
necessarily.
B
This
is
too
big
when
you're
building
a
SharePoint
framework
solution
and
a
component,
it's
not
about
surfacing
Pages
inside
of
Viva
or
inside
of
themes
or
inside
of
SharePoint.
You
are
actually
building
individual
typescript
components
which
you
can
then
expose
in
the
different
shapes
and
different
capabilities
inside
of
these
Solutions,
which
is
really
really
cool.
B
React
is
fine.
It
says,
says
Andrea
on
the
chat
now
I
wanted
to
call
out
and
show
some
teacher
pictures
also
on
where
you
can
actually
use
a
SharePoint
Frameworks.
It's
just
a
bit
of
a
marketing
message,
a
bit
of
a
marketing
things,
but
just
to
call
out
an
example.
So,
of
course,
you
can
use
SharePoint
framework
to
extend
and
modify
SharePoint
online.
All
of
the
ux
elements.
B
What
you
see
in
these
pictures
are
actually
being
built
using
SharePoint
framework,
even
the
out
of
the
box
capabilities
which
you
see
in
this
picture
are
being
built
by
SharePoint
framework
and
that's
the
really
cool
thing.
So
even
Microsoft
engineering
with
hundreds
of
developers
are
using
SharePoint
framework.
B
So
it
is
a
really
really
great
capability
of
extending
Microsoft
race
as
the
file
on
the
left
side,
you'll
see
the
the
home
page
of
a
imaginary
relay
Cloud
tenant
and
in
there
you
can
see
those
things
with
little
bit
components
or
with
widgets,
which
we
call
wet
parts
and
SharePoint,
and
you
can
build
individual
components.
As
many
of
you
want.
You
can
also
build
menus,
Footers
and
so
on.
B
Extensibility
within
a
SharePoint
on
the
top
right
corner,
you'll
actually
see
a
teaser
on
an
application
page,
which
is
a
full
page
experience
within
SharePoint
online,
so
you're
able
to
build
those
kind
of
dashboards
super
easily
using
react
as
well
and
then
accessing
lob
data
or
craft
data
for
surfing
the
industrial
relevant
information.
For
you
and
then
the
the
smaller
picture
in
the
middle
is
actually
a
custom
form,
because
you
are
able
to
build
custom
form
and
experiences
using
a
SharePoint
framework.
B
So,
of
course,
you
can
do
that
custom
form
development
using
powerapps
as
well,
but
then
there's
a
licensing
implications
and
learning
curve,
and
all
of
that,
if
you
are
a
react,
developer
or
a
web
stack
developer,
our
Pro
developer,
you
probably
want
to
write
your
form
and
and
experience
and
really
fine-tune
that
end
user
experience
in
a
pro
development
way,
using
them
typescript
and
reactor
again.
Whatever
is
a
chosen
framework
now
you
can
use
SharePoint
framework
also
to
build
experiences
in
Microsoft
teams,
and
these
are
a
few
examples
of
those
experiences.
B
The
the
bigger
picture
is
the
same
dashboard
as
what
you
saw
on
the
last
page
exposed
as
a
personal
application
in
the
Microsoft
teams,
and
the
interesting
thing
is:
there
are
no
code
changes
needed
to
make
the
same
component
to
be
available
within
SharePoint
or
within
the
Microsoft
team.
So
it's
exactly
the
same
piece
of
code
which
you
can
actually
expose
in
the
pulse
applications
and
actually
even
more
in
the
future,
which
is
really
recall
in
the
top
right
corner.
B
There's
an
example
of
surfacing
my
sites
because,
where
I
can
access
the
easily
micrograph
apis
in
the
context
of
Microsoft
teams
with
automatic
single
sign-on,
so
it
is
seamless
authentication
within
the
context
of
the
user
and
then
the
lower
piece
that
the
smallest
picture
is
actually
a
messaging
extension
implemented
using
a
SharePoint
framework
in
the
Microsoft
teams
and
now
related
on
the
announcements.
From
last
week,
we
actually
teased
a
new
location,
a
new
extensibility
model.
B
Unfortunately,
in
our
messaging
we
didn't
really
explain
and
what
are
the
extensibility
options
and
and
capabilities
around
the
Microsoft
Viva
Home,
which
will
be
by
default
available
in
the
Microsoft
teams
for
all
of
the
companies.
Now
the
bigger
picture
here
is
the
Microsoft
Viva
home
and
it's
basically
a
combination
or
evolution
of
the
Microsoft
Viva
connection,
bits
and
pieces,
which
are
the
dashboard
and
the
feed
and
then
the
assets.
B
So
there's
an
option
of
creating
this
Microsoft
Viva
home
for
the
tenants
and
by
default
it
will
be
in
some
of
the
tenants
zero
later
and
in
that
Microsoft
Viva
Home,
those
individual
cards.
What
you
can
see
on
the
dashboard
are
extensible
and
creatable
by
using
SharePoint
framework.
Of
course,
behind
of
the
scenes
you
will
take
advantage
of
again
Microsoft
craft
for
connecting
to
the
API.
Then
the
SharePoint
framework
component
is
going
to
use
adaptive
cards
for
rendering
the
card
in
that
dashboard.
B
Now
the
reason
why
it's
a
dashboard
based
on
adaptive
cards
and
this
kind
of
a
card
design
is
that
that
experiences
really
designed
to
be
accessible
and
approachable
also
in
Mobile.
So
this
is
not
only
for
people
who
are
sitting
eight
hours
in
every
single
day
in
front
of
their
computers.
It's
for
people
who
are
working
as
a
Frontline
worker,
walking
industry.
B
So
you
can
actually
use
the
SharePoint
framework
components
to
provide
a
Microsoft,
Viva
connection
or
Viva
experience
directly
in
the
mobile
experiences
and
then
on
the
top
right.
We
can
see
a
few
teasers
on
these
different
design
options
in
here
now,
coming
back
on
the
what's
happening
in
the
future.
I
want
to
make
sure
that
I
have
enough
time
for
Alex
to
do
the
demos
and
a
quick
update
on
what
we
have
right
now.
B
So
we've
been
already
having
more
than
20
versions
released
of
SharePoint
framework
and
we
started
back
in
2016
with
a
relatively
small
amount
of
capabilities
and
it's
been
extending
more
and
more
across
to
Microsoft
365..
The
latest
version
for
production
is
1.15.2,
which
was
released
in
August
and
there's
a
lot
of
new
capabilities
for
simplifying,
for
example,
API
approval
workflow
from
all
the
dump
applications
in
Microsoft
365.
There
are
some
new
media
actions
for
Viva
connections
for
that
mobile
experiences,
and
all
of
that
1.16
preview
is
already
out.
B
That's
basically
a
beta
version
of
the
upcoming
capabilities.
That's
already
out
it's
not
released
in
a
few
weeks
ago.
Yeah
it's!
It
was
released
few
weeks
ago,
kind
of
makes
sense
in
English.
Doesn't
it,
but
it
has
the
team's
JavaScript
SDK
V2
native
support,
different
additional
capabilities
inside
of
that
as
well,
and
you
can
already
test
it
out.
B
1.16
GA
is
going
to
happen
by
end
of
2022
and
then
1.17,
probably
in
December
January,
most
likely
January
because
of
the
holiday
season,
starting
in
U.S
roughly
in
the
end
of
November,
because
that's
how
the
business
works
in
the
U.S,
but
a
lot
of
a
lot
of
capabilities,
we're
looking
into
moving
into
a
quarterly
release
cycle,
or
at
least
three
versions
in
a
year
and
on
the
bigger
picture
you
can
already
see
the
Viva
logo,
SharePoint
logo,
Viva
connection
logo
and
a
teams.
Logo,
which
are
the
current
extensibility
points
for
the
SharePoint
framework.
B
But
already
as
test
in
ignite,
will
give
you
even
more
so
that's
the
present
with
the
star
there.
But
I
cannot
go
to
details
at
this
moment,
but
it's
cool
to
say,
additional
capabilities
in
Microsoft
365,
where
you
can
use
the
exact
same
component
without
any
code
changes
and
still
it's
exposed
in
the
new
location,
so
really
reusing
those
existing
investments
in
the
most
efficient
way
for
your
Solutions.
B
B
This
might
be
super,
let's
say
familiar
for
some
of
you,
but
we
also
wanted
to
show
the
latest
of
getting
started
experience
and
how
easy
it
is
to
actually
build
those
components
across
the
different
experiences
and
Alex
is
a
by
the
way
great
example
of
our
one
of
our
MVPs,
who
used
to
be
an
MVP
and
building
ISB
Solutions
for
customers
with
simple
and
framework,
but
nowadays
he's
an
engineer
and
has
sold
I
I,
guess
Alex.
You
already
solved
all
of
the
issues
which
you
have
submitted
as
a
partner
or
as
an
MVP
yeah.
B
A
Yeah,
so
yes,
as
I
mentioned,
it's
really
easy
to
start
with
the
SharePoint
framework
development.
It's
based
on
commonly
used
web
development
tools.
So
first
thing:
if
you're
like
developing
the
first
ever
SharePoint
framework
app
on
your
machine,
you
need
to
install
some
prerequisites
in
is
done
using
npm,
which
is
also
standard
for
web
development
and
what
you
need
you
need:
human
generator,
which
is
yo.
You
need
gulp
CLI
and
you
need
our
Microsoft
generator
SharePoint
itself,
and
these
things
you
need
to
install
globally,
so
they
will
be
available
in
any
folder
your
machine.
A
So
when
these
modules
are
installed,
you'll
be
able
to
go
to
the
selected
folder
and
start
scaffolding
Your
solution,
in
my
case,
of
course,
I
have
already
had
already
installed
all
these
prerequisites
and
I'm
already
in
my
demo,
a
folder
and
here
I
can
start
creating
my
SharePoint
framework
solution
as
easy
as
that
so
you're
just
doing
like
yo
at
Microsoft
SharePoint,
when
you
click
enter
after
that
our
engine,
our
generator,
will
start
asking
you
a
few
questions
like
do.
You
want
to
create
a
new
solution
or
add
something
to
existing
solution?
A
What
type
of
solution
you
want
to
create
or
type
of
component
you
want
to
add
and
first
time
when
you're
launching
it
it's
taking
a
time
to
kind
of
start
the
human
generator
but
yeah.
As
you
can
see,
it's
asking
your
solution
name.
What
type
of
component
you
want
to
add
to
your
solution.
Let's
see
like
web
part
you're,
providing
the
default
name,
you're,
selecting
what
framework
you
want
or
what
template
you
want
to
use.
Currently
there
are
three
templates
for
web
Parts,
the
first
one
minimal,
you're
kind
of
getting
the
blank
web
part.
A
So
with
no
Frameworks
in
there,
you're
kind
of
just
need
to
create
everything
from
scratch.
You
just
have
the
blank
render
method
and
nothing
else.
If
you
select
no
framework
option,
you
will
kind
of
have
few
methods
already
defined
for
you,
but
again
without
any
client-side
framework
and
react.
One
is
for
react
components,
so
you
will
have
a
simple
react
component
created
for
you
and
rendering
and
used
this
component
will
be
used
in
render
method
of
the
web
part.
A
A
So
that's
why
you
have
this
react
component
that
provides
some
basic
logic
with
some
beautiful,
let's
say:
UI
demo
UI
with
some
images,
some
links,
important
links
for
the
spfx
development
and
if
we
go
to
the
web
part
itself,
you'll
see
that
you
have
rendering
here
to
use
your
react
component.
You
have
some
code
in
on
init
to
get
the
environment
message
and
the
environment
message
actually
shows
you
how
your
solution
can
be
used
both
in
SharePoint
and
in
teams.
A
So
if
you
have
these
dot
context.sdks.microsoft
teams
initialized,
it
means
that
you're
running
in
teams,
otherwise
you're
running
in
SharePoint,
and
also
you
can
detect
if
you're,
currently
debugging,
meaning
that
you're
serving
your
JavaScript
files
from
localhost
or
you're
serving
Your
solution
from
SharePoint
online
itself,
so
pretty
standard
small
parts
of
the
code
that
will
show
you
how
to
do
the
basics
using
SharePoint
framework.
Another
thing
I
want
to
mention
here
is:
if
we
go
to
the
web
part
manifest
that
basically
shows
our
engine.
A
How
the
web
bar
should
be
served
when
it
should
be
available.
Very
important
thing
here
is
supported
host
that
actually
identifies
where
your
web
part
will
be
available
and
by
default,
when
you
scaffold
a
new
webart,
it
provides
four
options
in
here,
so
your
web
part
will
be
available
as
a
standard
web
part
that
can
be
added
to
the
page.
It
will
be
available
as
the
team's
personal
app,
which
means
that
you
can
install
your
app
to
the
like
left
up
bar
in
teams.
It
will
be
available
as
teamstep
or
in
team
set
called.
A
It
is
called
configurable
tab.
It
means
that
you
can
add
the
part
to
your
teams
or
group
chats
and
also
as
SharePoint
full
page
means
that
you
can
add
your
web
part
as
a
single
part
app
page.
So
basically,
you
have
the
full
page
with
the
only
web
part
on
it.
So
when
our
solution
is
ready,
you
can
of
course
do
some
customizations
needed
for
your
solution.
You
go
back
to
the
terminal,
and
now
we
want
to
basically
add
this
solution
to
the
SharePoint
online.
A
So
to
do
that,
I
need
to
run
two
commands.
First,
gulp
bundle
and
if
I
use
ship
parameter
in
here,
it
will
basically
manify
Minify,
compile
all
the
code
and
prepare
it
for
actual
release
per
actual
shipment.
If
I
don't
use
that.
In
that
case,
it
means
that
you
probably
want
to
debug
Your
solution
and
serve
your
solution
from
the
localhost
and
after
we
finish
with
the
go
bundle.
A
A
So,
if
I
go
back
to
my
visual
studio
code,
you
will
see
that
in
my
SharePoint
solution,
folder
I
have
this
spp
kg
package
that
can
be
actually
added
to
my
SharePoint
online
and
let
me
go
here
and
I
will
go
to
SharePoint
app
catalog.
Let
me
Zoom
a
little
bit
here
as
well
and
if
you're
creating
again
the
first
ever
solution
for
your
organization,
it
might
be
possible
that
you
don't
have
app
catalog.
Yet
in
that
case,
you
need
to
go
to
your
admin.
A
Center
go
to
more
features,
and
here
you
have
apps
and
if
you
click
on
apps,
actually
the
same.
In
my
case,
the
same
UI
for
app
catalog
will
be
opened,
but
if
it's
not
created,
if
this
app
catalog
site
collection
is
not
propagated,
it
will
be
created
on
the
Fly
and
at
the
end,
you
will
still
be
redirected
to
the
same
UI.
Here
we
can.
Click
upload
and
I
am
selecting
these
sppg
file
that
we
saw
open
it's
uploading
and
the
first.
A
A
If
your
solution
is
marked
as
for
tenant
y
deployment,
it
means
that
you
can
enable
it
for
each
and
every
site
collection
on
your
tenant,
and
additionally,
this
feature
is
important
if
you
are
going
to
serve
your
solution
in
teams
as
a
teams
app
in
that
case,
you
need
to
select
this,
enable
this
app
and
add
it
to
all
Sites.
So,
let's
enable
the
app.
A
It
is
enabled,
and
now,
if
I
select
it,
there
is
also
this
option
to
add
to
teams.
Let
me
click
on
this,
and
now
our
solution
should
be
available
in
teams
too.
But
first
let
me
go
to
my
SharePoint
site.
Let
me
refresh
it
and,
let
me
add
the
web
part
in
here
and
sorry.
My
machine
is
a
little
bit
slow.
A
And
spfx
Basics
demo
I'm,
adding
it
here
and
you
see
how
it
behaves
in
SharePoint.
So
basically,
this
is
what
you're
getting
out
of
the
box.
You
have
an
image.
You
have
information
about
the
current
user.
What
is
your
property
from
property
Pane
and
some
additional
information
just
listed
to
Showcase
how
the
web
art
will
be
looking
in
in
your
environment?
A
Spfx
Basics
demo,
as
you
can
see,
I
did
nothing
in
teams
at
all.
The
only
thing
I
did
is
basically
I
went
to
a
SharePoint
admin,
Center
and
clicked
into
teams,
and
all
the
magic
is
based
on
our
manifest.
So,
first
of
all,
we
provided
these
teams-
personal
app
and
teamstab
here
as
supported
host,
and
if
you
look
at
the
solution
Explorer,
you
will
see
that
we
have
these
teams
folder
with
basic
icons,
but
we
don't
even
have
a
teams
manifest.
It
will
be
created
for
you
on
the
fly
when
you
clicks
into
teams.
A
But
if
you
want
to
have
some
custom
manifest,
you
can
do
that.
You
can
add
manifest.json
file
in
teams
folder,
and
in
that
case,
when
you
click
on
sync
to
teams,
we'll
just
use
the
Manifest
from
your
teams
folder,
but
in
my
case
I
just
use
standard
one
and
the
app
is
available
in
teams
I.
Imagine
it.
A
And
here
is
the
same
solution:
running
teams
so
I'm
running
out
of
time.
So
let
me
quickly
show
the
second
part
which
is
related
to
Asus.
So,
basically,
in
the
same
solution
you
can
again
run
our
generator
and
instead
of
adding
a
web
part,
you
can
add
the
extension
or
in
our
case
you
can
add
oops.
Sorry,
you
can
add
adaptive
card
extension.
A
You
can
select
the
type
of
extension,
the
basic
template
you
want
to
use
and
when
you've
done
that
in
your
solution,
you
will
see
these
adaptive
card
extensions
that
provide
you
again.
The
basics
for
the
Adaptive
card,
with
the
basic
quick
view,
functionality
and
the
card
view
functionality
and
again
as
soon
as
you're
done
that
and
you
deploy
the
solution
which,
in
our
case,
have
already
been
done.
We
can
go
back
here
and
in
our
SharePoint
site.
You
can
see
the
dashboard
right
now.
A
B
Excellent
alignments,
it's
okay,
I
talked
too
much
on
the
internet.
I
have
to
call
out
whatever
you
built.
There
is
ready
for
production
now,
so
there
was
no
additional
steps.
You
deployed
them
to
the
app
catalog.
You
finalize
the
code,
it's
production
ready.
Of
course
these
are
not
looking
super
polished,
but
it's
the
deployment
process
for
production
is
as
sweet
and
easy
as
that,
and
you
can
of
course
do
automation
of
that
in
the
Azure
side
as
well.