►
Description
This tutorial will guide you through on how you can use SharePoint Framework to build a custom solution, which can then be surfaced in both SharePoint and in Microsoft Teams as a tab.
You can use the same code base across Office 365 as SharePoint, Microsoft Teams or Office add-in solution.
You can find the written version of this tutorial from the following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab
January 2020 version using SharePoint Framework 1.10.
More details around SharePoint Framework from http://aka.ms/spfx
Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp
Sharing is caring!
A
Hello,
welcome
to
this
getting
started,
SharePoint
framework
tutorial
series.
In
this
tutorial.
We
will
be
actually
looking
into
how
you
can
use
SharePoint
framework
to
create
a
Microsoft
themes
tab.
So
we
can
basically
do
ship
on
framework
to
create
a
web
part,
but
not
exposing
web
part
as
a
web
part
in
SharePoint.
We're
rather
gonna
actually
use
the
web
part
as
a
Microsoft
themes
time.
So
it's
not
technically
than
a
web
part
or
it
can
be
exposed
as
a
web
part
as
well.
A
Now
this
is
video
has
been
recorded
in
January
2020
and
it's
using
the
SharePoint
framework,
1.10
version,
and
if
we,
if
you're
watching
this
later
on-
and
you
have
a
newer
version
of
SharePoint
framework,
there
might
be
a
small
adjustments
on
the
video.
So
please
have
a
look
on
the
documentation,
which
is
always
kept
the
most
update,
so
videos
are
updated,
but
not
as
frequent
as
frequently
asked
the
documentation,
but
let's
actually
get
right
into
it.
A
So,
let's
jump
to
our
Windows
10
test
machine,
we're
going
to
use
in
this
tutorial
and
let
me
actually
go
to
my
normal
location,
where
I'm
actually
going
to
use
when
I'm
gonna
actually
use
all
of
my
codes.
So
I
have
a
C
code.
Folder
again
depends
on
your
preference,
where
you
want
to
actually
store
and
create
the
solutions,
and
here
let's
actually
create
a
teamstepps
folder.
A
A
So
the
execution
is
successful
and
executes
the
yeoman
generator
for
SharePoint
framework
and
we're
going
to
use
the
default
name,
which
is
always
taken
from
a
folder
and
because
we
are
already-
and
we
want
to
talk
at
this
over
the
SharePoint
Online,
because
we're
creating
Microsoft
team
staff
on
top
of
this
solution
being
a
web
part
which
is
pretty
pretty
cool.
Actually,
now
we're
going
to
use
the
current
folder,
because
we
already
went
to
the
team
start
folder
and
we
kind
of
choose
the
yes
in
here
to
be
clear.
A
When
you
are
creating
microsoft
games
tabs,
you
would
take
advantage
of
this
while
deployment
option,
so
there's
no
kind
of
a
let's
say
additional
thinking
on
the
context
how
to
make
things
work
in
the
Microsoft
team.
So
technically
you
can
actually
have
a
web
part
or
an
adding
or
a
tab
in
Microsoft
Amos,
which
is
only
targeted
to
a
specific
specific
team,
but
not
for
the
whole
tenant,
but
that's
a
really
technical
or
small
nuance.
A
So
by
default
you
would
be
actually
say
yes
on
that
one,
and
in
this
case
we're
gonna
not
have
any
unique
permissions,
so
I'm
going
to
say
no
and
that
one
we
aren't
creating
a
web
part
which
slightly
may
be
confusing,
even
though
we're
actually
creating
Microsoft
teams
tab.
We
were
actually
creating
both
so
we're
looking
into
potentially
changing
the
terminology
here.
A
Whenever
the
SharePoint
framework
will
be
renamed,
the
basic
experience
will
remain
the
same,
but
since
we
are
no
longer
just
targeting
SharePoint,
it
does
make
sense
the
renamed
SharePoint
framework
to
be
more
proudly
named,
so
we're
going
to
create
a
web
part.
Let's
call
that
my
first
team
step
and
let's
do
the
description
as
my
first
team's,
the
in
stab
as
defined
in
the
documentation
and
in
this
case
we're
not
gonna
use
any
JavaScript
framework.
So
let's
choose
the
no
JavaScript
framework.
A
We
could
absolutely
extend
the
servation
to
use
any
JavaScript
framework
in
the
world
after
it
has
been
scaffolders
as
well,
but
now
this
is
going
to
take
a
while.
So
let's
actually
speed
up
the
video
so
we'll
continue
after
the
scaffolding
and
the
dependencies
and
everything
else
has
been
downloaded
from
NPM,
so
we'll
be
back
in
one
or
two
seconds
and
they
will
get
another
solution.
Structure
has
been
scuffled
and
we
are
able
to
have
a
look
on
what's
actually
being
created
for
us,
so
we
didn't
actually
do
any.
Let's
say
specific
settings
in
here.
A
It's
close
to
welcome,
and
so
the
default
structure
is
obviously
exactly
the
same
as
for
the
normal
web
parts,
but
now,
starting
from
and
the
Microsoft
SharePoint
sorry
safer,
SharePoint
Server
1.8
release.
We
actually
have
now
the
team's
structure
and
the
team's
folder
available
in
here,
and
these
are
basically
the
files
which
are
relevant
and
used
by
the
team,
snaps
or
the
team's
application.
Whenever
we
replicate
our
solution
in
the
teams
and
in
solution
our
team
size.
So
we
will
come
back
on
the
that
process
in
a
second.
A
But
if
you
want
to
use
some
sort
of
an
alternative
images
for
your
application
or
the
teams
tab
when
it's
being
exposed
in
the
Microsoft
themes-
and
you
would
update
these
files
now
what's
important
to
notice
here,
the
prefix
of
this
file
is
actually
matching
with
the
manifest
ID
of
your
paper.
So
if
you
are
updating
the
file
name,
I
want
the
file.
Please
use
the
exact
for
the
same
file
and
naming
so
they
will
be
properly
packaged
and
then
properly
replicate
it
and
do
the
Microsoft
inside.
So
it
is.
Actually.
A
You
can
say
that
the
ID
manifest
ID,
the
whipcord
manifest
ID
is
actually
the
one
which
is
being
used
there
and
you
could
have
a
multiple
webparts,
obviously
and
Mark
some
multiple
tabs
in
a
one
SharePoint
framework
solution.
Now
we
want
this
webpart
actually
to
be
a
Microsoft
team
stamp.
So
what
does
it
mean?
A
Well,
we
have
this
setting
in
our
manifest
file
in
the
web
part
manifest
file,
or
we
could
call
this
a
a
let's
say
a
panel
or
a
a
component
or
a
control,
and
my
in
this
manifest
file
well,
which
is
now
a
web
part.
Still
we
actually
have
the
supported
host
setting
no
supported
host
settings.
Basically,
it
can
be
used
to
say:
where
will
this
webpart
be
available,
so
you
could
actually
not
expose
the
web
part
as
a
web
part
and
sharepoint.
You
could
only
expose
and
the
web
part
also
as
a
Microsoft
teams.
A
At
there
we
go
or
starting
from
1.10
version
of
your
Panther
framework.
What's
quite
a
new
thing,
you
can
actually
target
and
the
thing
as
a
team's
personal
app
as
well
now,
depending
on
ten
on
a
timing
depending
on
your
channel
setting
everything
else.
The
personal
app
option
might
be
available
for
you
and
might
not
be
available
for
you.
It
really
depends
again
when
you're
watching
this
video
but
personal
apps
is
a
relatively
new
thing
announced
in
ignite
2019
and
it's
coming
rolling
out
gradually
on
the
on
the
office
365
or
Microsoft
365.
A
In
the
team's
experience.
We
cannot
concentrate
today
on
the
fact
that
we
can't
we'll
have
the
team
stamp
cited
in
here
and
I'm
going
to
leave
the
team's
personal
apps
option
available
here
and
you
can
have
multiple
settings.
We
could
get
rid
of
the
SharePoint
web
part
setting
in
here,
but
we
actually
want
to
test
the
SharePoint
experience
for
the
web
part
as
well,
so
I'm
not
going
to
do
it.
A
So,
let's
leave
all
of
those
tree
in
so
we're
able
to
see
what
it
means
in
practice
and
that
this
web
part
is
actually
a
team's
tab,
but
also
teams
person
alive
if
those
settings
are
already
rolled
out
properly
in
this
tenant
as
well.
Now,
let
me
actually
saying
save
the
chair
settings
close
up
the
things,
so
everything
is
saved
good
and
then
we
actually
want
our
code
to
be
modified
slightly.
A
Slightly
I'm
actually
do
the
indent
here
properly
for
that
one,
which
is
a
snus,
the
styling
issue,
and
this
this
this
intention
mistake
is
a
nester
styling
is
in
in
SharePoint
1.10,
which
definitely
is
going
to
be
fixed,
but
let
me
actually
replace
the
render
method
completely
with
the
example
code
which
we
have
on
the
documentation.
Let's
have
a
look
on
what
we're
doing
here.
So
this
is
my
first
teams
down
flat
part
in
the
render
we'll
just
have
three
variables
there
and
we're
checking.
A
If
the
this
that
context
test,
a
cast
of
marks
of
teams
has
a
value.
So
if
it
has
a
value,
we
know
from
that
that
we
aren't
actually
being
hosted
in
the
Microsoft
teams.
So
we
are
running
in
the
Microsoft
teams
context
and
therefore
we
can
actually
access
Microsoft
teams,
context
and
information
related
on
the
mice
of
teams
and
that's
actually
really
really
cool.
A
So
as
long
as
we
have
the
Microsoft
teams
context,
we
can
actually
access
different
kind
of
relevant
information
which
is
relevant
for
the
Microsoft
teams,
experience
so
like
channel
name
or
chat
ID
or
local
ID,
while
local
ID
is
obviously
used
in
SharePoint
as
well.
Team
name
teams,
I've
URL
team
typed
in
tenants
s,
qsq,
SKU
and
user
license
type.
A
Some
of
these
are
overlapping
with
with
the
SharePoint
site,
but
you
definitely
have
this
additional
level
of
information
on
where,
in
the
Microsoft
team's
your
being
actually
rendered,
they
can
actually
get
that
one
back
to
the
original
one.
Whatever
we
had,
we
had
the
team
name
and
visible
over
there
good.
Now,
if
that
SDKs
marks
of
teams
is
not
set,
then
we're
falling
back
on
the
normal
SharePoint
rendering
and
we're
saying
welcome
to
SharePoint,
so
we
kind
of
made.
We
know
that
we're
being
hosted
in
the
SharePoint
experience.
A
A
This
is
I'm
not
going
to
do
any
debugging
I'm
not
going
to
do
any
testing.
In
my
case,
especially
in
the
tutorial
case.
We
know
that
the
code
will
just
magically
work
because
well
it
wasn't
that
complicated
code
in
first
place,
but
the
normal
scenario
would
do
some
debugging.
It
would
to
testing
it
would
verify
and
all
of
that
iteration.
But
in
the
case
of
this
simple
tutorials,
we're
not
gonna
actually
spend
time
on
that,
because
we
know
that
the
code
is
actually
working
properly
and
let's
buckets
the
solution.
A
So
we
get
in
this
SB
pkg
final
generator
as
well
in
the
SharePoint
folder,
which
is
now
trying
to
write
in
here
as
well.
So
let
me
again:
I
could
actually
go
in
here
and
the
Explorer,
so
we
can
actually
get
the
Explorer
view
open.
Let
me
go
to
the
SharePoint
folder,
a
solution
folder,
and
we
can
see
the
team
stamp
over
there.
So
now
we
need
to
get
that
one
installed
to
our
tenants.
So,
let's
actually
do
that,
so
let
me
go
in
the
process
which
wasn't
open.
So
let
me
open
up
a
browser.
A
Let
me
kill
the
app
catalog
in
this
town.
Let's
go
to
the
apps
for
SharePoint,
let's
get
in
the
folder
structure,
there's
our
folder
structure
track
and
drop
drop
it
in
and
make
sure
that
it's
available
in
all
of
the
sites
and
organization
that
was
the
setting
which
was
asked.
When
do
you
mean
I
wrote
it
was
executed
again
and
we
can
see
that
there's
no
errors,
they're
not
deployed
everything
is
fine
and
that's
really.
The
key
understanding
is
there's
any
exceptions
or
errors
related
on
deployment.
A
No,
because
we
set
that
the
host
locations
and
host
and
platform
is
also
not
only
SharePoint,
but
it's
also
teams.
We
have
now
additional
options.
So
if
you
go
to
the
files
tab
and
we
activate
that
application,
you
can
see
the
sync
two
teams
button
to
be
available
for
this
solution
now,
just
showing
the
example
if
I
flip
to
another
solution,
because
this
solution
doesn't
have
the
hosts
and
defined
in
the
teams
that
sync
is
not
actually
available.
A
A
Newton
I
haven't
even
been
in
Microsoft
team,
so
we
haven't
actually
set
up
the
basic
structure
of
Microsoft's
teams
teams,
so
it
will
actually
fail
again
depending
on
your
situation,
depending
on
how
have
you
been
in
the
team's
have
a
set
up
the
basic
structure
in
your
team's.
The
situation
is
slightly
different,
so
let's
go
to
the
teams.
Let's
make
sure
that
teams
this
up
and
running,
let's
create
a
one
solution
in
here.
A
We're
gonna
use
a
web
application
in
here
there
we
go
I'm
not
going
to
do
any
notifications,
we're
not
interested
on
that
yeah
bring
it
together,
yeah
yeah
yeah.
It
seems
it's
fine
team
school
chat.
This
awesome
some
discussions
over
there,
but
what
I
actually
want
to
do
I'm
interested
on
creating
a
team?
Oh
there's,
a
controls.
A
The
team
is
created
by
default
there
we
go
just
a
double
check
in
the
situation
if
I
go
also
on
more
apps,
I
can
actually
see
the
app
catalog
and
the
team's
structure
is
now
valid
in
the
team
side,
so
cool.
So
now
we
know
that
the
team
says
is
up
and
running
and
we
actually
completely
move
away
from
the
from
the
App
Catalog.
So
let
me
actually
get
back
in
there.
A
So
that's
one
thing
to
be
potentially
where
so,
if
you
see
that
sync
failing
on
the
right
side,
when
you're
syncing
a
solution
to
the
team's
when
you're
doing
the
the
files
and
center
teams,
that's
a
one
thing
to
be
aware.
So
this
time,
what
do
we
actually
get
successfully
synced
the
installation.
So
at
this
time
the
whole
system
is
successfully
being
synced
and
it
takes
a
while
actually
the
solution
to
be
available
in
the
Microsoft,
and
so
there's
there's
some
caching
available
and
but
technically
just
to
recap
what
was
the
problem?
A
The
problem
was
that
this
tenant
is
a
tenant
where
I
had
not
been
at
all
in
the
Microsoft
teams,
so
I
needed
to
go
there
once
to
make
sure
that
solution,
structures
and
my
default
tabs
and
default
team
is
available,
and
after
that
the
same
two
teams
actually
were
now
related
on
this
one.
There
might
be
actually
some
challenges
later
on,
if
you're
doing
an
update,
for
example,
for
the
solution
and
racing
to
see
him
again,
it
will
actually
fail.
A
So
we
can
actually
see
that
if
I
do
a
center
team,
one
more
time,
it
says,
fill
the
sink.
The
solution,
two
teams
and
the
reason
with
this
one
is
that
the
solution
already
exists
in
the
team's
App
Catalog,
so
the
SharePoint
app
catalog
is
different.
Then
the
team
said
catalog
and
therefore
under
sink
two
teams,
it
does
not
by
design
overwrite
and
the
teams
the
entry
in
the
team's
app
catalog.
And
yes,
we
know
that
the
exception
should
be
much
more
descriptive,
and
so
you
know
about
this
one.
A
How
do
we
sold
an
is
that
we
go
actually
the
team
site
we
refresh.
How
do
I
refresh
the
page?
Let's
actually
do
that,
let's
go
back
in
the
teams
and
let's
go
onto
on
the
apps
and
after
a
while,
we
will
well
test.
The
caching
is
still
little
impacting
that,
after
a
while,
we
can
say
the
contoso
a
specific
applications
in
here
and
then
we
go
explicitly
there
and
delete
the
application.
A
And
after
that
we
can
again
sync
the
new
version
to
be
available
in
themes,
not
a
super
optimal
situation
or
an
experience,
but
we're
looking
into
changing
that
that
it
might
be
depending
on
when
you're,
watching
this
video
and
this
the
experience
might
have
gone
slightly.
Better
exceptions
might
have
been
already
better
and
but
that's
the
situation
in
January
2020.
When
this
video
has
been
updated,
know
what
are
we
going
to
do
next?
A
Instead,
I'm
gonna
actually
refresh
this
page
until
we
will
see
the
contoso
that
was
fast
canto,
so
entry
on
the
Left
menus
at
this
one
which
says
here
built
for
contoso,
because
my
tenants
name
is
canto,
so
it
is
actually
now
available
I
if
I
click
that
one
we
can
see.
My
first
teams
tap
available.
So
there
was
a
small
delay
there
on
getting
this
available
and
fully
synced
on
the
teams,
app
catalog,
as
you
noted,
so
it
wasn't
their
first.
A
We
refreshed
few
times
now
it's
available
there,
and
that
means
that
we
can
actually
use
it.
We
can
use
it
from
here
or
I
could
actually
go
to
the
a
team
site
and
any
team
in
the
team
side.
I
can
just
add
a
tap
and
in
here,
if
I
search
for
my
first
team
or
we
can
actually
find
it
from
the
list
of
things
as
well
have
based
on
the
icon.
A
I
can
actually
select
that
one.
It's
gonna
ask
an
address
for
additional
information.
Obviously
icon
metadata.
The
metadata
by
the
way
is
coming
from
the
web
part
properties
as
well
by
default,
and
you
can
technically
create
your
own
manifest
file
for
them
as
well.
That's
definitely
an
option
which
is
being
documented
in
our
in
our
documentation
as
well,
but
in
this
case
we
create
it
and
used
the
sink.
A
Two
teams:
option
where
the
SharePoint
generated
the
manifest
file
and
the
package
and
took
the
title
and
the
additional
description
from
the
web
part
properties
and
now
we're
adding
this
one
to
the
actual
team.
I
say
own
tab.
If
there's
any
configuration
option,
there
is
actually
in
this
case
slightly,
they
will
be
visible
in
a
second.
This
is
basically
just
to
indicate
you
that
a
we're
adding
out
this
team.
It
looks
good
we're
saving
that
as
a
new
tab
on
the
team,
and
we
can
actually
see
the
configuration
option
visible
in
here
so
by
default.
A
That's
being
shown
there
for
the
first
time,
but
not
after
that,
you
can
actually
technically
control
that
behavior
as
well.
So
if
you
want
to
have
that
setting
available
later,
we
can
click
the
tab
and
settings
and
we
can
actually
see
the
configuration
and
we
are
able
to
configure
the
web
part,
and
you
can
actually
see
it
evaluate
being
actually
reflected
in
here.
The
key
points
here.
You
also
do
notice
that
it
says,
welcome
to
tips
so
because
the
context
of
the
web
part
is
telling
the
web
part
code
that
we
are
in
teams.
A
A
We
can
add
a
webpart
and
I
think
we
had
something
related
on
tap.
Yes,
my
first
team
stop
and
there
we
go.
We
can
actually
see
the
same
web
part
rendered
in
the
SharePoint,
but
it's
actually
saying
welcome
to
SharePoint,
based
on
the
code
which
we
are
updated
on
on
the
render
method.
So
quite
simple,
quite
simple
thing:
to
follow
quite
simple
thing
to
manage-
and
there
are
certain
things
like
mention:
distinct
to
team's
button-
does
fail
if
the
solution
already
exists
in
the
App
Catalog
in
the
team
side.
A
So
that
means
that
you
need
to
actually
go
to
the
app
section
and
bill
for
contoso
and
delete
this
one
from
the
teams
and
then
you're
able
to
sync
the
solution
again.
If
you
have
a
newer
version-
and
we
also
notice
that
I
need
to
go
teams
at
least
once
before
the
same,
two
teams
actually
work
in
a
tenon,
so
that
should
be
kind
of
understandable
as
well,
and
he
is
like
fixable
now.
One
thing
we
didn't
yet
test
and
I
haven't
actually
double-checked
the
situation
in
this
particular
tenant.
A
But
if
we
go
to
our
personal
apps,
we
can,
in
this
tenant,
already
see
the
my
first
themes
tab-
and
this
is
now
the
personal,
app
and
personal
apps,
because
once
again
in
a
manifest
file,
let's
get
back
on
on
the
solution
in
the
web
part
manifest.
We
said
hey
so
let's
and
only
expose
this
report
as
a
SharePoint
web
part
or
a
team
stand,
but
also
expose
that
there's
a
team's
personal
I'll
have,
which
is
again
a
new
setting
in
the
1.10
release.
A
Let's
click
got
it
because
we
are
not
in
the
context
of
team,
so
that
means
that
the
channel
and
the
team
name
doesn't
exist
because
we
are
actually
running
this
code
in
the
context
of
the
user
as
a
personal
app
and
that's
why
that's
going
to
actually
say
undefined.
If
you
go
back
on
the
teams
and
the
tap
in
here,
it's
actually
saying
cantata,
because
in
our
code
once
again
and
back
in
the
code
and
have
a
look
on
what
we
are
doing
here,
we
are
taking
a
side
tap
title.
A
We
are
taking
the
Microsoft
teams
and
the
team
name,
but
when
again,
when
you're
accessing
the,
when
you're
hosting
the
the
web
part
as
a
personal
application,
it
is
not
actually
in
the
context
of
a
specific
team.
It
is
in
the
context
of
a
personal
application.
So
it's
a
slightly
different
experience
and
we
are
providing
additional
guidance
on
all
of
their
settings.
Definitely
in
the
fuse
and
future
stages
as
well,
but
starting
from
one
point,
then
you
can
actually
do
personal
applications
using
SharePoint
framework.
A
You
can
actually
have
multiple
tabs
multiple
experiences
and
all
of
that
using
which
is
based
on
the
guidance
of
the
personal
app
implementations
in
Microsoft
Ames.
All
of
that
documented
and
more
guidance
will
be
added
as
step
by
step
in
the
future
as
well,
but
that's
it
for
this
tutorial.
We
went
slightly
further
down
on
the
croydon
explanation
in
the
video,
rather
than
just
concentrating
what
was
in
documentation,
but
we
stayed
pretty
much
in
line
on
the
settings
as
well.
A
Maybe
one
one
note
where
we
actually
did
have
in
the
documentation
which
we
didn't
go
actually
on
the
video
in
the
manifest
we
can
actually
set
a
setting
here,
which
is
actually
do
it
on
loop,
which
is
can
update
configuration
so
can
update
configuration
if
I
said
this
one
Falls,
it
means
that
we
do
not
have
the
property
buying
experience.
So
if
I
go
back
in
the
team's,
if
I
go
back
in
here,
I
have
the
settings
and
I
have
that
one
available,
so
you
can
control.
A
Do
we
have
this
probability
and
configuration
option
available
by
using,
and
this
can
update
configuration
setting,
which
then
from
the
manifest
file
will
be
translated
to
the
auto-generated
team's
manifest,
and
then
that
controls
the
behavior
in
themes
and
again,
you
can
also
manually
create
your
team's
manifest
files
and
pointing
them
to
the
URLs
and
with
a
hose
that
in
SharePoint,
but
that's
already
and
slightly
more
advanced
topic,
which
we
kind
of
clarify
in
traditional
documentation.
But
hopefully
that
was
interesting
and
thank
you
for
watching
the
video
bye-bye.