►
From YouTube: Building Office Add-Ins using SharePoint Framework
Description
This demo is taken from the Office Add-Ins Developer Community call recorded on January 8, 2020. Visit the Office 365: Developer Blogs to view the entire community call.
In this 18-minute demo, Vesa Juvonen (Microsoft) starts the session with a topic backgrounder - architecture and explanation of Microsoft's focus on delivering a unified toolchain across Microsoft 365 platform. Then Vesa steps the viewer through the creation of an Outlook Web Access (OWA) extension (Office add-in) using the SharePoint Framework (SPFx). The distinct advantage of using the SharePoint Framework to create Office add-ins is the Framework is completely optimized for rapidly creating and hosting your Office Web Applications as opposed to hosting your Office Add-in app on a separate service. The SPFx Yeoman Generator is used to execute many tasks behind the scenes such as setting up permissions, creating the manifest, and bundling all client-side assets.
Presenter:
• Vesa Juvonen (Microsoft) | @vesajuvonen
Supporting materials:
• Article: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-addins-create
• Tutorial: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial
• Overview of SharePoint Framework: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview
• Article: An Outlook Add-in with SharePoint Framework (SPFx) – Introduction | Markus Möller (Avanade) | @Moeller2_0 https://mmsharepoint.wordpress.com/2020/01/11/an-outlook-add-in-with-sharepoint-framework-spfx-introduction/
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/sppnp.
A
So,
basically,
if
you
want
to
modify
and
create
an
widget
on
a
SharePoint,
I
want
to
create
a
widget
in
Microsoft
themes
or
nowadays,
if
we
want
to
create
a
widget
or
functionality
or
a
solution
also
in
office
settings,
you
can
actually
take
advantage
of
SharePoint
framework.
Now
why
on
earth,
where
I
would
actually
do?
That
would
be
probably
the
first
question
if
you're
not
familiar,
which
you
have
one
framework.
So
let's
actually
start
with
that.
A
One
now
quickly,
so,
first
of
all,
if
you're
not
familiar,
but
it's
a
shipment
framework
and
how
these
things
work.
Obviously
I
will
show
you
some
resources
and
a
live
demo
in
a
second.
But
the
beauty
of
SharePoint
framework
is
that
we
take
care
of
the
hosting
so
number
one
challenge:
what
office
add-ins
developers
kept
on
saying
and
enterprise
developers
who
were
planning
to
do
an
enterprise
extensibility
for
their
customers
were
saying
that
well,
it
always
gets
complicated
because
somebody
needs
to
host
my
extensibility.
A
My
web
application
I
need
to
create
an
azure
application
and
I
when
I
go
and
request
an
azure
application
for
my
customer
enterprise
customer
it
takes
ages
to
get
that
and
all
of
those
permissions
and
everything
else.
It's
really
really
difficult
with
chip
and
framework
and
officer
dense
development.
All
of
this
is
automatic.
You
don't
actually
have
to
worry
about
hosting,
because
everything
is
hosted
for
you
automatically,
so
your
code
is
being
hosted
by
us,
which
is
a
great
thing,
because
you
go
save
money
now.
A
The
second
really
a
good
thing
is
that
authentication
so
authentication
and
which
open
framework
and
of
assonance
it
just
works.
You
don't
need
to
do
anything
related
on
your
code
and
the
authentication
just
works
automatically.
So
there's
a
single
sign-on
you're
authenticated
with
Microsoft
365
or
office
365
identity,
and
you
are
good
to
go
now.
The
code
maintenance
is
a
good
thing
as
well
the
so
the
same
code
can
work
across
SharePoint,
Mike's
of
teams
and
office
exactly
the
same
code.
A
You
don't
have
to
do
any
changes
within
your
code,
except
unless
you
want
to
access
something
a
service
or
application
specific,
for
example,
using
the
office
Java
JavaScript
SDK,
then
you
obviously
use
the
office
JavaScript
SDK,
which
is
given
to
you
easily
within
the
code
as
well
and
I'll
show
you
that
one
in
a
second
as
well,
but
you
can
basically
the
baseline
component
and
based
on
implementation
and
solution.
It's
exactly
the
same.
So
you
can
reuse
the
same
piece
of
code,
which
is
super
super
important.
The
skills
reuse
super
important
thing.
A
You
don't
actually
have
to
learn
anything
specific
if
you're
developing
anything
for
these
three
different
applications.
So
it's
the
same
tool
set
it's
the
same,
yeoman
generator,
it's
the
same,
API,
it's
the
same
same
typescript
version.
It's
the
same
extensibility
model
which
we're
taking
advantage.
So
you
can
actually
build
on
top
of
your
existing
skills
in
the
deployment
is
super
easy.
You
basically
have
automatic
hosting
and
you
can
want
this
one
way
of
deploying
office
settings
much
the
theme,
stamps
or
SharePoint
framework
webparts
as
well.
A
Now
we're
also
looking
into
having
a
more
consistent
and,
let's
say
more
wider.
Microsoft
raises
to
file
developer
story,
and
this
is
something
which
is
coming
slightly
later.
So
sooner
or
later
you
don't
actually
use
SharePoint
framework
to
create
of
a
sentence
you
use
Microsoft,
365
framework
or
whatever
it
will
be
called
and
even
in
ignite,
we
kind
of
a
said.
We
didn't
say
out
loud
what
it
will
be
called
because
it's
a
marketing
decision,
but
there
will
be
a
one,
unified,
Microsoft
365.
A
Is
it
a
component
or
an
application
platform
where
you
can
actually
then
say
that
hey
I
want
to
have
a
component,
and
with
that
component
you
can
define
where
it's
going
to
be
hosted.
It's
going
to
be
hosted
in
office,
add
as
an
office
settings
or
as
a
Microsoft
team's
term
or
as
a
SharePoint
favorite
part
the
covenants,
so
you
can
have
a
one
centralized,
centralized
management
of
the
the
covenants
as
well,
so
managing
all
of
your
applications
in
a
single
location.
A
This
comes
with
a
unified,
app
catalog,
which
is
in
development
and
not
yet
available,
and
then
cross-platform
support
in
the
office
using
the
same
chip
on
framework
web
part
or
your
four
servants
across
the
windows,
Excel
PowerPoint
and
office
across
all
of
the
different
platforms
as
well
again
same
piece
of
code,
which
is
a
very
important
thing.
So
those
three
and
things
are
coming:
they're
not
yet
available.
Technically,
the
whole
implementing
of
a
sudden
surge
in
SharePoint
framework
is
in
preview,
so
we
released
it
actually
to
preview
yesterday.
A
So
this
is
super
super
new
stuff
for
you
to
take
advantage,
we
did
show
it
in
ignite
already,
so
what
I've
actually
seen
some
of
the
videos
now
the
longer-term
vision?
What
we
want
to
do
with
my
stories
is
divide
platform.
It's
really
to
come
up
with
a
one
unified
way
of
doing
extensibility,
obviously,
and
it's
a
complex
platform
and
Obrestad
behind
the
scenes.
Videos
max
of
craft
api
is
because
that
gives
you,
the
contextual,
personalized,
access
to
the
relevant
information,
and
then
you
can
use
the
specific
KPIs
and
SDKs
for
the
service.
A
What
you're
using,
but
the
whole
idea
of
this
longer-term
vision
is
to
have
a
one
yo
at
Microsoft
365,
where
you
can
actually
then
create
your
application
or
your
widget
or
a
solution
which
then
you
can
define
where
it's
going
to
be
hosted
when
it
kind
of
space
surfaced.
So
you
don't
actually
again
need
to
have
specific
knowledge
of
a
specific
application,
not
sure.
If
you're
implementing
an
excel-based
extensibility,
you
will
take
advantage
of
excel
JavaScript
SDK
and
it
has
its
own
specific
things
to
make
happen.
A
But
the
actual
widget,
the
implementation
of
the
style,
is
the
same
cross
to
Microsoft
radius,
the
violent
that's
the
vision
where
we're
heading
gradually.
This
will
take
a
while
still
and
to
get
there,
but
this
was
already
presented
in
the
ignite
ignite
2019
in
November
in
Orlando
three
months
ago,
but
that
gives
you
a
scene
where
we
are
hitting
now
like
I
said
yesterday,
and
we
release
the
preview
version
of
Office
add-ins
built
with
SharePoint
framework,
and
even
that
sounds
really
weird
by
the
way,
creating
office
a
times
using
SharePoint
framework.
A
Why
would
you
ship
and
frame
were
too
great
of
a
silence?
Well,
that's
precisely
the
reason
why
we're
renaming
all
of
this
stuff
as
a
unifying
platform
sooner
or
later,
but
for
now
what
we're
actually
doing
is
that
we
are
building
a
shape
on
framework
report
or
in
the
preview
time
frame.
We
have
a
ship
on
framework
web
part
to
carry
with
office
context.
A
We
have
the
office
manifest
and
we
are
using
site
loading
during
previous
timeframe
and
that
actually
is
the
Outlook
Web
Access
application,
so
Outlook
Web
Access,
setting
which
you
can
then
take
advantage
with
in
your
Outlook
Web
Access.
This
is
the
preview
time
frame
and
we're
looking
into
extending
this,
then
to
cross
all
of
the
other
applications
as
well,
so
word,
PowerPoint,
Excel
and
all
of
that
work
is
being
done
already
or
being
actively
worked
on.
So
let's
have
a
look
on
this
one
in
practice.
A
So
what
does
it
actually
mean
that
you
build
using
a
one,
specific,
tooling
and
your
targets
either
web
part
or
a
SharePoint
or
a
teams
or
an
office
areas?
And
what
does
it
mean
that
I
can
access
to
office
JavaScript
SDK
within
my
code,
if
I
jump
first
on
the
commander,
so
let's
actually
have
a
look
on.
How
do
we
create
this?
So
if
you
are
familiar
with
SharePoint
framework
and
then
it
might
be
super
familiar
what
I'm
doing
here,
but
let's
actually
have
a
look
on
what
we're
doing
so.
A
First
of
all,
we
are
using
the
SharePoint
framework,
yeoman
generator
like
set
for
now,
sooner
or
later,
there's
going
to
be
Microsoft,
365,
yeoman
generator,
which
you
use
for
generating
the
UX
layer
for
extensibility
and
because
this
is
a
preview
capability
and
we're
gonna
do
before
I
go
to
the
comment
line.
Let
me
recap
slightly
and
you
can
find
the
documentation
in
AKMs.
A
Spf
X
is
actually
the
URL
AKMs
SPF
X
is
the
easiest
way
to
find
the
relevant
documentation
and
that's
a
really
easy
thing
to
remember,
as
well
as
the
effects
meaning
SharePoint
framework
from
here.
I
can
search
for
office
office,
adding
or
office,
and
we
can
actually
find
the
building
of
a
Saeta
institution
in
SharePoint
framework
and
that's
basically
the
endo
tutorial,
which
we
kind
of
a
take
advantage
in
this.
You
end
this
quick
demo
as
well,
so
we
can
I
use
the
OMA
generator
and
we
can
I
use
the
post
beta
command
behind
it.
A
So
let
me
actually
get
back
on
the
comment
line
to
the
plus
beta
and
I'll
do
skip
install
here,
which
basically
means
that
I'm
not
gonna,
run
the
yeoman.
Sorry,
the
npm
install,
which
will
save
some
time
for
showing
you
what
we
actually
get
for
executing
the
yeoman
generator.
So
on
your
my
generator
energy
up
on
framework,
it's
first
gonna
ask:
what's
the
solution
names
outlook
NEMA
is
fine.
We're
gonna
talk
a
SharePoint
Online
for
now,
like
I
said
for
now.
A
This
is
quite
SharePoint,
specific
questions,
but
all
of
this
is
going
to
be
changed
in
the
future.
Use
the
current
folder.
Do
we
want
to
allow
not
admin
to
deploy
stuff
immediately
cross
the
tenant
yes
want
to
have
a
specific
permissions.
No
we're
going
to
target
a
web
part
for
now
and
we're
gonna
call
it
outlook.
Demo
and
description
is
fine.
I
do
want
to
use
react,
knockout
well,
for
now,
let's
not
use
any
JavaScript
framework,
and
there
we
go.
A
The
yeoman
generator
has
created
us
the
solution,
without
node
modules
folder
so
quickly
having
a
look
on
what
actually
happens
here
is
that
we
give
you
a
webparts
solution
and
we'll
part
baseline
solution,
and
we
also
give
you
it's
basically
ready
to
go
as
a
starting
point,
and
we
also
give
you
a
manifest
file
which
is
ready
to
go
to
get
hosted
into
Outlook
Web
Access.
So
you
can
easily
get
started
on
testing
things
because
everything
what
you
need
is
available
in
here,
so
I'm
not
gonna,
actually
camp.
In
a
package.
A
This
one
I'm
gonna
close
this
one
I'm
going
to
use
another
solution
which
I
created
earlier,
because
I
wanted
to
save
some
time
for
not
actually
installing
the
node
modules
and
that's
the
one
if
I'm
not
mistaken.
Yes,
that
is
the
one.
So
this
is
a
solution
which
I
created
earlier,
where
we
actually
have
an
access
already
to
the
office
office
context
and
accessing
the
office
context
is
nothing
more
than
in
the
web
part
or
in
the
panel
implementation.
A
I
do
this
job
context,
don't
nest
a
case
and
from
here
again
depending
where
to
the
panel
or
in
widget
or
an
application,
whatever
we're
going
to
call
this
in
the
future,
if
it's
actually
hosted
in
the
office
and
that
office
context
is
then
available
and
from
the
office
context,
I
can
actually
access
something
like
mailbox
and
Mail's
and
messages,
and
all
of
that,
whatever
is
the
API.
What
you
need
to
access
on
now
I
can
then
use
this
context.
To
figure
out
am
I
actually
in
office
or
am
I
in
SharePoint.
A
So
I
can
use
exactly
the
same
piece
of
code
as
an
officer
in
or
as
a
SharePoint
framework
or
as
a
team
stamp
as
well.
If
you
prefer
to
do
that,
so
in
this
case
we're
just
going
to
basically
output
the
message
and,
depending
on
the
fact
that
are
we
in
SharePoint?
Are
we
office
so
quick?
Let's
quickly,
actually
walk
this
through,
because
this
is
super
super
cool
because
all
of
the
hosting
deployment
everything
else
super
straight
line
or
you.
A
A
So
I'm
gonna
do
godpa
bundle.
Does
the
ship
which
is
going
to
actually
prep
the
package
and
prep
the
typescript
to
a
JavaScript
format
and
there
we
go
and
then
it's
ready
to
get
actually
packaged
and
the
beauty
of
the
SharePoint
framework
solution
model
really
is
the
fact
that
we
can
actually
package
our
solution
as
an
individual
solution
file
which
actually
contains
all
of
the
assets
images,
JavaScript
files,
all
of
the
other
assets
as
well,
and
that's
actually
being
done
by
using
and
and
the
rules
of
that
is
being
controlled
by
the
package
solution.
A
Json
file,
you
can
even
ask
Mike
self
crafts
permissions,
so
nobody
needs
to
go
to
a
sure
ad
and
create
an
application
and
current
permissions
that
go
through
all
of
that
burden
in
the
enterprise
development
process.
To
get
those
permission
ekran'
debts.
Now
you
don't
actually
need
to
go
through
ad
at
all.
You
just
request
the
permissions
and
the
tenant
administrator
of
the
office
tenant
can
grant
the
permissions
and
this
for
your
application,
quite
streamlined
experience.
Now
let
me
actually
do
a
call
back
it's
solution
as
well,
so
I'm
going
to
actually
package
the
solution.
A
It's
going
to
not
gonna
take
too
long
and
that
we
actually
get
stuff
created
and
let
me
actually
open
up
and
that's
solution,
so
it
here's
my
solution.
We
can
actually
see
I'm
located
in
Finland,
it's
631
right
now
in
Finnish
timeframe.
So
let
me
actually
go
to
my
tenants.
What
are
we
going
to
how
we
gonna
install
this
to
my
tenant
right
now?
It
is
still
using
the
SharePoint
app
catalog
again
we're
working
on
a
unified,
app
catalog
experience
in
a
tenant
level.
A
That's
coming
sooner
or
later
this
year,
as
well
now
I'm
installing
the
solution
to
my
tenant
and
it's
gonna
actually
ask
some
permissions.
Just
gonna
ask
them:
do
some
nodes
related
in
minecraft
permissions
which
which
the
solution
is
requesting
to
get
a
permissions
as
well
I'm,
not
actually
using
those
in
the
sample,
so
I
don't
need
to
grant
those
permissions
as
such,
but
now
there
we
go.
Our
solution
is
being
hosted.
A
What's
really
cool
about
this
model
again,
if
you're
not
familiar
with
SharePoint
framework,
is
the
fact
that
this
file,
this
SB
PKG
file,
actually
contains
all
of
the
assets
it
contains.
All
of
the
JavaScript
files,
it's
going
to
condense
off
the
manifest
files
and
all
of
those
stuff,
so
everything
is
automatic.
I
can
send
that
file
to
any
of
my
customers
and
say
instant
that
your
and
you're
good
to
go.
Super
easy
super
convenient
experience
as
well.
Now
we
have
the
solution
available.
Now
we
need
to
actually
take
that
available
in
the
outdoor
quick
access.
A
Let
me
actually
get
the
path
to
the
folder.
Let
me
actually
open
up
a
folder
one
more
time,
so
I'm
actually
get
the
manifest
location.
That's
my
manifest
location
for
this
file,
which
required
away
create
automatically
for
you
as
well.
So
I
don't
have
to
worry
about
how
do
I
create
the
manifest
we
create
it
for
you
with
the
default
settings.
So
now,
if
I
go
to
the
outlook
settings
in
my
tenant,
my
applications
at
a
head
from
file
I
can
upload
my
application.
A
Manifest
file
install
that
acid,
using
the
site
loading
during
the
preview
time
frame
and
then
then
means
that
I
can
actually
start.
My
application,
which
is
actually
automatically
hosted
from
the
SharePoint
and
and
super,
is
a
super
convenient
way
of
implementing
audience.
Ooh
and
well
that
worked
really
well
and
then
I
did
a
mistake:
I'm
not
going
to
spend
too
much
time
on
investigating.
We
are
in
a
preview
timeframe:
I
will
need
to
double
check.
What
did
I
actually
do
wrong
and
I
know
what
I
did
wrong
so
I
actually
use
the
wrong
money
first.
A
Well,
let
me
actually
fix
that.
So
I
will
prove
you
that
the
things
are
working
properly.
So
let's
do
that
one
more
time
it's
not
going
to
take
too
long
like
I.
Don't
have
too
much
time
on
my
built
anymore,
because
I
promise
to
do
stuff
in
15
minutes
there
we
go.
Let's
cloak
that
wasn't
necessary,
but
let's
get
the
application
manifest.
Well
one
more
time
in
and
uploading
from
a
file
and
I
uploaded
the
wrong
file.
That
was
the
problem.
A
It's
installed
that
there
we
go
and
let's
get
my
application
available
and
now
it's
getting
hosted
and
there
we
go
welcome
to
office,
extending
office
with
custom
business,
extensibility,
there's
the
context
I'm
accessing
the
email
address
where
I'm.
Actually
there
you
can
do
some
level
of
a
configuration
as
well
and
everything
will
be
available
for
you
again
super
convenient
automatic
host
that
you
can
take
advantage
of
things
you
can
get
access
on
the
office
jeaious,
so
the
the
JavaScript
SDK
from
the
implementation
really
easily
as
well,
but
I
think
that's
pretty
much
from
my
side.
A
Like
said,
we
do
have
a
tutorial.
We
are
more
than
willing
to
get
your
feedback
on
this
one.
There's
multiple
people
into
office,
settings
engineering
who
would
be
highly
interested
in
getting
your
feedback
on
this
one
as
well,
because
this
definitely
is
not
a
SharePoint
specific
thing.
This
is
an
outlook
and
an
office
add-ins
engineering
investments
mainly
and
and
for
SharePoint
specific
stuff.
We
do
have
an
issue
list
in
the
SPD
blocks,
issues
where
we
would
love
to
have
your
input
as
ok,
tablet.
A
Rom
sharepoint
SP
develops
issues
where
we
would
love
to
have
your
feedback.
Your
input,
your
suggestions
related
on
things
which
you
might
be
finding
from
the
solution,
but
that's
it
from
my
side
for
now.
So
hopefully
you
find
that
interesting
and
it's
a
useful
thing
for
you
as
well.
Thank
you,
oh
maybe
before
we
move
to
Kim
just
to
be
in
point
of
fact,
this
is
not
going
to
replace
the
source
level
implementations
of
add-ins.
A
This
is
definitely
in
an
add-on
tool
for
your
tool
belt
as
a
basically
designed
for
enterprise
developers
and
and
let's
say,
system
integrators
who
implement
Enterprise
extensibility
for
Outlook
and
an
office
as
well.
So
you
easily
getting
dengue
techs
deployed
your
stuff,
but
there's
obviously
still
will
be
applications
which
are
web
hosted.
Applications
like
let's
say
key
top
or
let's
say
Trello,
and
if
you
want
to
extend
a
Lea
of
those,
is
be
solutions
within
your
within
your
office
audience
or
in
your
outlook.
A
B
A
B
Really
cool
to
see
the
end
of
this
integration
with
the
SharePoint
framework
and
office
add-ins,
like
Mesa,
said
just
an
yet
another
way
that
you
can
build
office
add-ins
and
additions
in
addition
to
the
ways
you've
already
been
able
to
build
them
previously,
also
really
cool
to
see
the
direction
that
things
are
with
em
365
developer
experience
in
this
greater
effort
on
our
part
to
make
developing
across
the
various
Microsoft
workloads,
a
seamless
experience
versus
feeling,
like
everything,
is
a
little
bit
different,
so
really
cool
to
see
where
things
are
headed.
There.