►
From YouTube: SharePoint Framework Training - Build Microsoft Teams customization using SharePoint Framework
Description
This module will introduce you to leveraging your SharePoint Framework customizations with Microsoft Teams. You can create your Microsoft Teams tabs using SharePoint Framework.
The module is presented by Andrew Connell (Voitanos). Associated training materials are available from GitHub for easy reuse as needed: https://github.com/SharePoint/sp-dev-training-spfx-teams-dev.
More details on the complete SharePoint Framework training package can be found from http://aka.ms/spfx-training.
You can use these training materials any way you want in new training deliveries or in other presentations. Sharing is caring!
A
In
this
screencast
we're
going
to
look
at
how
we
can
build
Microsoft
teams
customizations
using
the
SharePoint
framework
in
this
first
section.
We're
gonna
just
do
an
overview
where
we
can
understand
Microsoft
teams,
development,
the
benefits
using
the
SharePoint
framework
to
extend
Microsoft
teams
and
then
how
to
surface
SharePoint
framework
customizations
in
Microsoft
teams.
Microsoft
teams
provides
many
different
extensibility
options.
You
can
create
a
team's
app
which
can
consist
of
a
custom
tab.
A
It
could
also
leverage
BOTS
messaging
extensions
and
connectors,
or
you
can
also
build
a
custom
bot
which
would
reply
and
receive
messages
from
a
user
to
have
a
nice
little
interaction.
Experience
with
your
users.
Now,
let's
look
a
look
at
an
overview
of
building
a
Microsoft
team's
tab.
So
the
way
you
would
do
it
is
you
first
have
to
design
your
tab.
You
want
to
select
your
relevant
application
functionality.
You're
gonna
want
to
have
a
scope
and
focus
on
what
the
user
experience
is
going
to
be
and
integrate
in
seaton
streamline
access
to
the
application.
A
So
you
can
have
anything
that
you
want
inside
of
this
custom
tab
here.
You're
then
gonna
need
to
go,
develop
your
tab
now.
The
way
this
is
done
is
all
using
web
technologies
using
HTML
and
JavaScript,
or
typescript
and
you're
going
to
communicate
with
external
services
using
the
rest
protocol
or
Russ
standard
which
an
HTTP
based
service
you're,
also
going
to
have
the
ability
to
provide
deep
linking
so
that
you
can
jump
straight
to
a
specific
spot
inside
of
your
tab
using
custom
links
once
you've
built
your
application,
then
going
to
deploy
your
tab.
A
A
This
is
gonna
be
displayed
when
the
tab
has
been
added
to
the
channel
and
it's
gonna
collect
some
information
for
you
now,
as
you're
gonna
see
with
the
SharePoint
framework,
things
work
mostly
the
same
way,
there's
a
little
subtle
difference
that
we'll
look
at
when
we
get
into
the
third
section
of
this
of
this
of
this
section
or
this
screencast,
but
you'll
see
this
felt
pretty
straightforward
and
the
content
within
a
tab.
All
of
this
is
rendered
inside
of
an
iframe,
so
you're
gonna
have
a
URL.
That's
going
to
be
specified
by
the
configuration
page.
A
That's
gonna
specify
where
you
should
load
the
application
from
you
can
expect
the
context
for
the
entity
ID
or
the
subunit
e
ID,
and
you
also
receive
state
based
on
the
entity
or
the
sub
and
T
or
the
user
in
question.
Now,
how
do
you
interact
with
Microsoft
teams
went
from
a
tab?
Well,
the
teams
API
is
a
JavaScript
based
API.
It's
gonna
provide
context
for
a
user
or
a
team
or
an
organization.
A
You
can
get
context
through
URL
placeholders,
which
are
placeholders
that
are
specified
in
the
URL
within
the
manifest
and
those
are
going
to
be
resolved
at
runtime,
the
placeholders
for
each
of
the
property
of
the
context.
Object
is
also
going
to
be
available
to
us,
so
you
can
see
we
have
a
bunch
of
noteworthy
properties
down
at
the
bottom
that
we
can
access
here
for,
like
a
team,
ID,
a
channel
ID,
the
locale
entity,
ID,
etc.
A
You
can
also
get
contacts
through
the
JavaScript
library,
and
you
can
do
that
by
calling
the
Microsoft
teams
get
context
and
that's
gonna
give
us
context
to
Microsoft
teams
that
has
all
these
different
properties
I
mentioned
at
the
bottom.
This
is
an
asynchronous
method
and
it's
only
gonna
have
a
single
success.
Callback,
that's
gonna
return.
The
actual
context
object
so
now
that
we've
seen
kind
of
a
brief
overview
on
how
to
extend
Microsoft
teams.
A
If
you
want
it,
you
can
also
have
different
scoping
options
on
exposing
your
tab
as
a
web
part
or
a
tab
in
your
tenant.
So
when
you
build
a
web
part,
if
it's
intended
to
only
be
used
in
SharePoint,
you
can
list
it
just
in
SharePoint.
If
you
want
to
be
used
only
as
a
tab
in
teams,
you
can
do
that.
If
you
want
to
be
able
to
be
available
to
be
used
in
either
case,
you
can
do
that
as
well.
The
tab
is,
then
gonna
be
executed
in
the
context
of
the
underlying
SharePoint
site.
A
Have
a
blank
canvas
page,
that's
gonna,
add
the
web
part
in
its
configuration
information
on
the
page
and
that's:
what's
gonna,
be
rendered
inside
of
Microsoft
teams
so
effectively
you're
gonna
be
inside
of
Microsoft
teams,
you're
going
to
go
to
a
tab
and
there's
an
iframe
that
represents
the
tab.
That
is
really
just
a
view
of
the
SharePoint
page
under
under
the
covers
another
cool
thing
about
this.
Is
that,
then
you
can
take
advantage
of
any
SharePoint,
specific
api's
or
functionalities
within
your
web
part.
A
A
Now,
how
are
you
gonna
surface
your
SharePoint
framework
web
part
into
a
Microsoft
team's
tab?
Well,
the
way
you're
gonna
do
this
is
you're
going
to
specify
the
web
part
can
be
a
tab
and
the
way
that
that
works
is
that
there's
a
simple
setting
that
you're
going
to
apply
inside
of
the
manifest
for
your
SharePoint
framework
web
part.
A
You're,
then
going
to
create
any
images
in
descriptions
and
you're
going
to
find
these
things
inside
of
your
teams,
tab
and
that's
all
going
to
be
defined
inside
of
a
team's
manifest
file,
so
that
manifests
just
manifest.
Json
is
gonna,
be
defined
inside
your
project.
Now,
when
we
get
to
the
deployment
piece,
I'll
show
you
how
there's
a
way
that
Microsoft
will
generate
this
manifest
file
for
you
on
the
fly
and
use
specific
images
that
you've
provided
as
well
as
use
the
settings
from
the
web
part
as
the
same
settings
for
your
Microsoft
teams
tab.
A
So,
for
example,
the
title,
the
descriptions
all
of
those
things
will
still
be
the
exact
same
inside
of
your
team's
tab
that
you
have
inside
your
SharePoint
framework
web
part.
However,
you
can
override
these
things
by
providing
your
own
manifest
file
again,
we'll
see
how
to
do
this
when
we
get
into
the
demo.
A
So
here's
where
you're
going
to
specify
the
web
part
can
be
a
team's
tab.
The
code
block
that
you
see
there
on
the
right
that
JSON
is
a
manifest
file
for
a
SharePoint
framework
web
part,
so
everything
there
looks
very
familiar,
except
for
one
line
right
in
the
middle
that
says
supported
hosts.
This
was
introduced
into
the
SharePoint
framework
in
version
1.8,
and
this
can
include
a
couple
different
options
for
the
sake
of
our
topic
that
we're
going
through
right
now,
there's
really
just
two
options
that
you
really
care
about.
A
If
you
want
this
to
be
listed
as
a
web
part
inside
SharePoint,
so
it
can
be
used,
it's
a
traditional
SharePoint
framework
web
part.
You
would
list
the
option
of
SharePoint
web
part.
If
you
want
to
be
used
as
a
tab
inside
of
Microsoft
teams,
you
would
say
teams
tab.
So
whenever
you
have
one
of
these
listed
and
one
of
them
not
listed
you're
gonna
have
these
different
cases
of
when
these
things
can
be
used.
A
A
That
good
is
the
unique
ID
of
your
SharePoint
framework
web
part,
so
just
above
the
red
box
in
the
code
that
you
see
there
on
the
left,
the
SPF
X
teams
together
web
part
that
is
going
to
contain
that
manifest
file
is
going
to
contain
a
component
ID,
which
is
a
good,
and
that
good
is
the
one
that
you
see.
That's
highlighted
there.
A
This
is
where
the
default
image
that
you're
going
to
see
just
these
two
gear
wheels
inside
of
an
image
you'll
have
one
that's
a
little
bit
smaller
and
one
that's
a
little
bit
bigger.
You
can
change
these
out
for
something
else.
If
you
so
choose
you're,
then
gonna
have
to
create
the
team's
Microsoft
teams
app
manifest.
A
So
the
way
you
do
this
that
what's
needs
to
happen
here
is
that
you're
effectively
gonna
need
to
package
up
your
application,
the
images
in
the
manifest
file
and
then
deploy
them
over
to
the
teams
store,
so
that
teams
knows
that
this
custom
tab
is
an
application
that
can
be
installed
inside
your
app
your
Microsoft
team's
experience.
Now
this
manifest
file,
as
I
said,
contains
the
name
location
of
those
images.
A
It
contains
the
name
of
the
description
of
the
application,
some
about
information
that
contains
like
some
metadata
like
privacy
and
additional
details
about
the
publisher
and
then
the
location
of
the
underlying
application.
Now
the
SharePoint
framework
webparts,
just
like
teams
tabs
these
have
almost
all
the
information
that
that
we
need
inside
of
the
SharePoint
framework
web
part
components
manifest
file.
Now
the
nice
thing
about
this
is
that
once
you've
deployed
your
SharePoint
framework
component
to
the
app
catalog
in
SharePoint,
what's
gonna
happen
is
that
you're
gonna
have
this
button?
A
So
it
makes
your
installation
process
really
simple.
However,
if
you
wanted
to
modify
the
manifest.json
file,
you
can
create
your
own
manifest
file
and
put
it
inside
the
team's
folder
and
in
the
SharePoint
deployment
for
sync
to
teams
won't
create
a
new
one.
It'll
just
use
the
one
that
you've
provided
it
and
we're
that's
the
way.
We're
gonna
do
it
in
the
demo.
A
So
in
the
demo,
we're
gonna
see
how
to
create
a
SharePoint
framework
web
part
and
then
extend
it
to
be
a
custom
tab
inside
of
Microsoft
teams.
All
right.
Let's
now,
first
start
by
creating
a
SharePoint
framework
web
part
project
and
we're
then
going
to
extend
this
to
be
able
to
be
used
in
Microsoft
teams,
so
I'm
gonna
start
out
first
by
creating
a
new
folder
for
our
project
and
now
I've
done
this.
Let's
go
ahead
and
let's
run
the
SharePoint
framework
generator.
A
Now
we're
gonna
go
ahead
and
just
create
the
most
basic
thing
that
we
can
create
here,
to
keep
it
very
simple
on
the
different
possibilities
that
we
could
have
with
this
I.
Don't
want
to
get
too
complicated
in
what
all
the
different
things
that
we
could
build
and
just
keep
it
very
simple.
So
you
can
focus
on
the
SharePoint
framework
component
piece
to
it
and
the
Microsoft
team's
component
piece
to
it.
A
Now,
if
I
didn't
do
this,
I
would
have
to
go
in
and
install
our
application
into
each
one
of
the
different
site
collections
where
my
application
could
be
used
now,
in
this
case
here
I'm
going
to
go
ahead
and
choose
yes
and
the
reason
why
I
want
to
do
this
is
because
every
Microsoft
team's
team
has
a
SharePoint
site
collection
that
back
set
is
kind
of
like
the
behind-the-scenes
part
to
it.
It's
where
files
are
stored
and
some
other
information
is
all
stored.
There.
A
Now,
by
selecting
yes
here,
I'm
not
gonna
have
to
go
and
install
my
application
into
that
SharePoint
site
collection
after
I
create
my
team.
It's
automatically
going
to
be
installed
and
available
to
me,
which
means
that
I
don't
have
to
this
extra
step
that
I'm
gonna
have
to
do.
This
is
making.
This
is
gonna.
Make
this
web
part
available
to
every
site
collection
throughout
my
tenant.
A
I
could,
on
the
other
hand,
just
install
it
inside
of
the
site
collections
where
I
want
it
to
be
used
or
I
can
just
deploy
it
using
the
site,
collection,
scope,
app
catalog
in
SharePoint
Online
for
each
one
of
the
different
site
collections.
The
the
thing
here
that
you
just
have
to
keep
in
mind
is
that
wherever
you
want
to
be
able
to
use
this
as
a
custom
tab,
it's
going
to
have
to
be
installed
inside
of
the
site
collection
that
is
backing
the
Microsoft
teams
team.
A
Okay,
that's
the
only
thing
you
have
to
keep
in
mind
here.
So
I'm,
just
gonna
choose
yes
here
to
keep
my
demo
a
little
bit
easy
and
then
I'm
going
to
choose
most
of
the
default
options
here.
Just
saying
we
create
a
web
part,
we'll
call
this
hello,
SP,
FX
and
teams,
and
then
we're
just
gonna
choose
no
JavaScript
framework.
Now
I'm
gonna,
let
the
NPM
package
manager
go
ahead
and
download
all
the
dependencies
and
do
the
magic
of
video
editing.
A
We're
gonna
go
ahead
and
skip
ahead,
so
you
don't
have
to
wait
for
all
this.
Alright,
now
we've
created
our
project.
So
let's
go
ahead
and
take
a
look
and
see
what
we
have.
So,
if
you've
done
anything
with
SharePoint
framework,
you
know
that
this
is
all
just
a
standard.
Sharepoint
framework
web
part
there's
nothing
special
about
this.
It's
all
pretty
basic
and
everything
is
just
gonna
work
right
out
of
the
box.
A
So
what
I
can
do
is
take
this
entire
project
now
and
I
can
go
ahead
and
package
it
all
up
and
build
it
and
deploy
it
to
SharePoint.
So
let's
go
ahead
and
do
that
so
I'm
going
to
say,
go,
build
and
then
we'll
say:
gulp
bundle,
ship
and
gulp
package
solution,
ship
I'm
going
to
let
this
process
go
ahead
and
finish,
and
once
this
finishes
we're
going
to
deploy
our
SharePoint
framework
customization
to
see
this
run
inside
of
a
SharePoint
Online
site
collection.
A
Okay,
so
now
we
have,
our
SharePoint
package
has
been
created,
so
I
can
see
that
right
here
inside
the
SharePoint
/
solution,
I
see
my
SharePoint
package.
So
let's
go
ahead
and
add
this
so
I'm
gonna
go
over
here
to
my
browser
and
I'm
going
into
my
tenant,
scoped
app
catalog
and
let's
go
find
this
file.
So
this
file
is
gonna,
be.
A
I'm
gonna
say:
let's
make
this
solution
available
to
all
sites
in
the
organization,
which
is
what
we
were
talking
about
a
minute
ago
or
we
said:
let
meet
this
available
to
all
site
collections,
go
ahead
and
hit
deploy
and
then
just
to
make
sure
that
everything
looks
good,
I'll
scroll
over
here
and
make
sure
that
it
is
a
valid
app
package.
It
is
deployed
its
tenth
deployed
and
it
contains
no
errors
so
we're
in
good
shape.
A
Let's
come
over
here
to
a
SharePoint
site,
so
here
I'm
inside
of
a
sub-site
or
a
site
collection
within
my
my
tenant
and
I'm
gonna
go
ahead
and
refresh
this
page.
It's
a
standard,
SharePoint
web
part
page
and
let's
go
ahead
and
add
in
our
web
part.
So
I'm
gonna
make
this
wide
and
then
I
will
choose
the
hello
Microsoft,
SharePoint
team's
SharePoint
framework
and
mark
sell
teams,
I'll
go
ahead
and
add
that
in
and
I'll
just
hit
publish.
So
we
can
see
here
we
go.
A
Everything
is
running
so
we're
seeing
this
running
inside
of
SharePoint.
Now,
let's
make
this
work
inside
of
Microsoft
teams.
So
there's
a
couple
things
we
have
to
do.
First
I'm
gonna
jump
over
to
teams.
I'm
gonna
create
a
brand
new
team
here.
Just
to
use
for
my
sample.
Some
of
us
say
is
create
a
team
we'll
create
from
scratch.
It'll
be
a
public
team
and
I'll
make
it
be.
The
my
first
team.
A
And
then
we'll
just
skip
adding
people
to
it
now.
What
you
can
see
here
is
that
behind
the
scenes
there's
a
SharePoint
site-
that's
that
has
been
created
for
this
now,
that's
gonna
go
ahead
and
do
this
in
the
background.
That's
gonna
take
a
minute
for
it
to
finish.
So,
if
I
refresh
the
page,
it
should
show
up
in
just
a
minute.
A
A
So
now
what
I
want
to
do
is
I
want
to
add
in
a
new
tab
a
custom
tab
for
this,
so
I'm
gonna
go
ahead
and
click
this
plus
sign
and
I'm
not
gonna,
find
my
tab
inside
of
the
list
of
all
of
the
applications
here,
because,
while
I've
deployed
this
as
a
SharePoint
framework
application
I've
not
provisioned
this
from
share
from
SharePoint
over
to
Microsoft
teams,
so
I
go
over
here
to
more
apps.
You
can
see
here
that
I
won't
have
it
listed
anywhere
over
here.
A
Do
that
what
I'm
gonna
need
to
do
is
come
back
over
here
to
my
project
and
what
I'm
gonna
do
two
ways:
I
can
do
this
I
can
either
actually,
let's
let's
change
this,
let's
go
back
and
let
me
show
you
something
but
come
back
over
here
to
my
app
catalog
and
if
I
select
this
application,
we
just
uploaded
and
if
I
come
over
here
to
files,
you'll
see
that
sync,
the
teams
is
disabled.
Now.
A
The
reason
why
this
is
disabled
right
now
is
because,
if
I
go
back
to
my
project
and
I,
look
at
the
manifest
you
can
see
that
the
supported
hosts
is
just
for
a
web
part.
What
I
want
to
do
is
I
want
to
change
this
and
make
this
a
team's
tab.
So
I
want
to
make
this
both
a
web
part
and
a
team's
tab,
so
I'm
going
to
save
my
changes
here
and
need
to
go
back
and
rebuild
everything
or
repackage
everything
and
I'm
gonna
redeploy
it
up
to
SharePoint.
A
A
I
have
synced
the
teams
as
an
option,
so
what
this
would
do
is
this
would
generate
this
share
the
Microsoft
teams
app
package,
which
will
contain
the
two
images
in
the
manifest
file
and
automatically
deploy
those
over
to
SharePoint
now
I
could
do
it
this
way.
Instead,
what
I'm,
gonna
do
is
I'm
gonna.
Do
it
the
more
manual
way
to
show
you
how
you
can
have
more
control,
so
the
steps
that
I'm
going
to
show
you
right
now
are
not
required.
A
They're,
just
giving
you
additional
details
and
I'll
show
you
where,
if
I
click
this
sync,
the
teams
I'll
show
you
where
it
would
do
all
where
it
would
pick
up
where
we
pick
up
the
demo.
So,
let's
jump
back
over
here
to
the
code
and
what
I'm
gonna
do
is
I'm
gonna
create
a
new
file
over
here
in
teams
called
manifest.json
and
I'm
gonna
paste
in
a
manifest
file.
Now,
in
the
code
associated
with
this,
screencast
you'll
find
a
sample
file
that
you
can
that
you
can
use
if
you
so
choose.
A
So
a
couple
things
with
this
is
that
I'm
going
to
put
the
manifest
for
my
web
part
off
to
the
side
over
here.
So
here's
my
manifest
for
my
web
part
and
here's
my
manifest
for
my
team's
tab.
So
what
you're
going
to
see
is
a
lot
of
different
things
that
have
been
set
up,
that
I
can
are
aliased
in
here
that
I
can
replace
so
the
package
name
here,
we'll
just
call
this
all
hello
team's
web
part.
A
A
I
will
then
grab
the
description
and
I'll
put
the
description
right
here
for
the
short
in
the
long
description,
except
for
the
long
one.
What
we'll
do
to
make
it
to
see
that
there's
a
difference
as
I'll
do
short
and
long
and
then
I
had
these
component
IDs
and
that's
gonna,
be
the
ID
of
the
web
part
itself,
so
I'm
going
to
grab
this
and
I'm
gonna.
Do
a
quick
fine
on
this
string
right
here.
There's
three
instances
of
it.
A
There's
one
inside
there's
two
for
the
icons
and
then
one
in
the
configuration
URL,
so
I'm
gonna,
replace
and
put
that
good
in
there
for
all
those
options.
Now
these
two
images
here
these
are
the
two
images
inside
the
team's
folder.
So
you
can
see
that
these
two
guys
right
here
are
these
two
images.
The
manifest
of
all
the
configuration
URL
is
telling
the
SharePoint
framework
and
Microsoft
teams
what
webparts
should
be
added
on
the
page.
That's
gonna
be
surfaced
in
teams.
So
now
that
that's
done,
I'm
gonna
save
my
changes.
A
This
manifest
file
and
I'm
gonna
come
back
over
here
into
finder
or
in
my
Explorer
and
I'm,
going
to
zip
up
these
three
files
and
let's
just
call
them
our
and
we'll
do
a
SP
FX
teams,
demo,
all
right!
So
now!
That's
that
there's
our
zip
file
right
there.
So,
let's
go
back
over
to
Microsoft
teams
and
I'm,
going
to
upload
a
custom
app
and
choose
upload
to
my
tenon.
So
I'm
going
to
choose
my
tenant
I'm
gonna
go
find
that
file.
A
And
now
that
it's
uploaded
you
can
see
here,
we
have
our
tenant
is
now
listed
over
here
now,
after
a
minute,
we
should
see
the
application
show
up
there.
It
is
we
have
our
hello,
Microsoft
teams,
you
can
see,
there's
the
long
description,
the
short
description
isn't
showing
up
just
yet
so
now
what
I
can
do
is
I
can
go
ahead
and
install
this,
so
I'm
gonna
go
back
over
here
to
my
team.
A
Go
into
the
general
tab
and
I'm
gonna
choose
scroll
down
to
the
bottom
and
there
it
is
there's
my
hello
SPF
X,
so
you
can
see
there's
the
short
description,
that's
showing
up
in
the
tooltip.
It's
no!
When
I
select
this
it's
gonna
say
what
team
do
you
want
to
add
it
to
so
I
know
it's
already
in
the
team
that
I'm
in
right
now
so
imma.
Add
to
this
team.
A
And
it's
then
going
to
it
doesn't
show
me
the
configuration
option
here
that
you
would
see
if
you
do
a
normal
Microsoft
team,
because
you'll
see
what
the
configuration
stuff
kicks
in
in
just
a
minute,
so
I'll
then
say
hit
save
it's
not
set
up
my
team,
and
now
you
can
see
that
my
team
hasn't
in
my
my
tab
has
been
set
up
now
and
it's
now
rendering
this
webpart.
So
this
is
a
SharePoint
framework
page.
This
is
our
web
part
property
pane.
A
You
can
see
it
works
all
the
exact
same
way
as
a
normal
SharePoint
framework
web
part
and
when
I
close,
this
I
can
go
back
in
and
I
can
edit
my
changes
to
this
web
part
by
setting
going
to
settings
and
see
these
changes
over
here
like
this
one,
those
changes
hit,
the
X
saves
my
changes.
I
can
go
off
the
team
or
off
the
tab
and
come
back
to
the
tab
and
see
everything
is
running.
A
A
Put
SP
in
the
name
and
hit
publish
if
I
come
back
over
here
and
I
go
come
back
to
the
team,
we're
back
to
the
tab.
You'll
see
SP
is
not
listed
here,
and
the
reason
for
that
again
is
because
you
put
TM
in
here
for
this
one
because
they're
actually
on
two
different
pages
inside
the
SharePoint
site.
So
TM
here
come
back
over
our
testbed
page
and
if
I
refresh
this
page,
it
still
should
say
SP.
A
In
this
section
of
the
build
Microsoft
teams
customizations
using
the
SharePoint
framework,
we're
gonna
see
how
we
can
leverage
SharePoint
context
and
Microsoft
teams.
Context
within
our
components
we're
first
going
to
see
how
we
can
understand
the
SharePoint
framework
based
Microsoft
teams
tabs.
Then
we're
going
to
see
how
to
work
with
the
SharePoint
context,
as
well
as
the
Microsoft
teams
context
in
the
same
application.
A
Sharepoint
framework
web
parts
have
access
to
the
current
page
context
when
they're
loaded
on
a
page.
This
is
going
to
give
us
access
to
the
current
page
site,
insight,
collection,
information
and
the
SharePoint
framework
version.
1.8
introduced
the
Microsoft
teams
context
object
to
the
SharePoint
framework
API.
This
is
the
same.
Microsoft
teams
context
object,
that's
available
from
the
Microsoft
teams.
Javascript
SDK
and
you'll
find
it
in
an
NPM
package
of
at
in
at
Microsoft
/
teams.
A
J/S
use
the
presence
of
the
Microsoft
teams
context
to
determine
if
your
SharePoint
framework
webpart
is
running
in
SharePoint
or
in
Microsoft
teams.
If
the
context
comes
back
is
undefined
you're
in
SharePoint.
If
it
comes
back
populated,
you're
in
Microsoft
teams,
so
here's
a
little
code
snippet
of
how
this
would
work.
A
You
can
see
here
at
the
top
as
I'm,
creating
a
private
member
variable
called
teams
contacts,
that's
of
type
Microsoft
teams,
dot
contacts,
then
in
my
webparts
on
an
it
method,
that's
gonna
be
executed
by
the
SharePoint
framework
before
rendering
my
web
part
on
the
page.
It's
gonna
return
a
promise
that
is
gonna
check
to
see.
If
the
Microsoft
teams
context
object
is
available
by
saying
this
context:
dot,
Microsoft
teams.
If
we
got
something,
then
we're
gonna
call
get
context
and
that's
gonna.
Give
us
a
on
a
successful
call
back.
A
Give
us
back
a
Microsoft
context,
then
inside
my
web
part,
so
saying
we're
in
the
render
method.
I
can
check
to
see.
Do
we
have
this
team's
context
object
present
and
if
we
do
then
I'm
just
going
to
set
the
value
of
the
title
property
equal
to
teams,
otherwise
it'll
be
a
SharePoint
and
then
I
can
do
the
same
thing
for
checking
for
the
current
location.
I
can
check
to
find
out.
Are
we
what
what's
the
name
of
the
current
team
we're
in?
A
If
we
don't,
if
we're
not
in
teams,
I'm,
just
gonna
get
the
name
of
the
current
site
that
we're
in
the
best
way.
You
see
how
this
works
is
in
a
real
code
demo,
so
let's
jump
back
to
our
sample
and
let's
update
it
and
then
update
it.
The
deployed
sample
and
see
it
running
both
in
Microsoft
teams
and
in
SharePoint
to
see
the
difference.
A
Now
what
I'm
going
to
do
is
I'm
going
to
create
a
global
scoped
variable
here,
a
global
scope,
member
as
the
team's
context,
so
team's
context,
which
is
Microsoft
team's
context
now.
What
I
want
to
do
is
that
when
this
web
part
is
initialized,
so
we'll
do
our
protected
on
an
it
and
that
returns
a
promise.
A
A
And
I'm
going
to
check
to
see
I'll
say
if
this
context
look
at
the
current
page
context,
if
you
have
a
reference
to
Microsoft
teams,
if
you
do
then
I
know
that
we
are
in
Microsoft
teams.
So
if
not
that
I'm
just
going
to
resolve
the
promise,
there's
nothing
to
do
here
and
in
either
case
actually
we're
gonna
want
to
resolve
the
promise.
But
what
I
want
to
do
in
this
case
is
I'm.
Gonna,
say
this
context:
dot
micros
Microsoft
teams
get
the
context.
A
I'll
pass
the
context,
then
the
team's
context
in
and
I'll
say
this
team's
context
is
equal
to
the
context
that
we
just
got
and
we
need
to
put
the
resolve
inside.
So
it
actually
waits
for
that
to
finish
now,
what
I
can
do
is
then
come
down
here
and
let's
go
ahead
and
add
into
our
in
our
render
method.
A
A
Sharepoint
or
two
teams,
and
then
I'm
gonna,
say
that
we
are
for
the
subtitle,
I'll,
say
you're
currently
in
the
context
of
the
following,
and
this
is
a
current
location
like
that,
so
what
I
doesn't
need
to
do
is
need
to
package
it
up
in
to
play
it
back
to
the
SharePoint
to
SharePoint
Online.
So
I'm
gonna
come
back
over
here
to
my
command
prompt
and
do
a
gulp,
build
gulp
bundle
and
gump
package
solution
using
the
ship
flag
for
all
of
them,
and
we'll
wait
for
this
to
finish.
A
I,
don't
have
to
do
anything
inside
of
teams
because
remember
this
is
this
web
part
is
running
inside
of
SharePoint.
It's
not
running
inside
of
teams.
Teams
is
simply
creating
as
an
iframe.
That's
going
to
be
exposing
a
SharePoint
page
where
this
web
part
is
running.
So
let's
come
back
over
here
to
our
component
that
we
created
and
let's
go
to
SharePoint
solution.
Let's
upload
our
manifest.
A
Here
we
can
see
it's
welcome
to
SharePoint
and
we're
currently
in
the
context
of
the
following
site:
collection
vie
demos,
zero,
zero
one,
which
is
true
if
I
come
over
here
to
my
team,
if
I
come
to
a
different
tab
and
then
go
back
to
our
team,
we'll
see
this
get
rendered
and
it
shows
we
are
currently
in
teams
and
we're
inside
of
the
context
of
a
Microsoft
team
called
my
first
team.
So
there
we
go.
A
We
can
see
how
we
can
work
with
the
different
context,
objects
and
figure
out
where
we
are
running
the
exact
same
application.
That's
really
easy
to
be
able
to
leverage
a
SharePoint
context
or
teams
context
inside
the
exact
same
codebase
in
this
last
section
of
building
Microsoft
teams
customizations
using
the
SharePoint
framework.
Let's
take
a
look
at
some
configuration
options
that
we
have.
A
Part
property
pane
that
you
can
see
there
in
the
screenshot.
Sharepoint
pages
must
be
in
edit
mode
in
order
to
edit
these
properties
and
users
must
have
edit
rights
to
the
page
to
access
the
property
pane.
If
you
think
about
Microsoft
teams,
it
works
a
little
bit
differently
when
a
proc.
The
way
that
this
is
gonna
work
inside
Microsoft
teams
is
that
when
the
web
part
in
the
web
part
property
pane
is
gonna
be
displayed
when
a
SharePoint
framework
web
part
is
installed
as
a
tab
in
a
Microsoft
team's
team.
A
So
the
experience
you
see
on
the
on
the
right
in
the
picture
on
the
right,
that's
what
you
see
when
you
first
install
a
tab
or
a
SharePoint
framework
web
part
as
a
new
tab.
You're
gonna
click
that
little
X
in
the
title
bar
of
the
property
pane
and
then
once
you
do
that
then
you're
just
going
to
get
the
rendered
web
part
in
the
future.
A
Microsoft
team's
team
of
our
tab
and
I
can
change.
One
of
the
properties
on
can
update
the
configuration.
I
can
change
this
from
true
to
false
by
default.
That's
gonna
be
set
to
true,
but
you
can
change
it
to
false
if
you
want-
and
this
is
going
back
to
the
stuff
we
talked
about
and
earlier
in
this
in
this
screencast,
where
Microsoft
can
generate
the
manifest
file
for
me
on
the
fly
in
my
project,
but
maybe
I
want
to
go,
make
some
changes
to
it
myself
and
provide
a
custom
manifest.
A
So
I
do
that
inside
of
our
get
property,
paying
configuration
so
I'm
gonna
go
ahead
and
duplicate
this,
and
this
is
our
custom
setting
and
then
we'll
just
create
a
hard-coded
label
in
this
case
here.
So,
in
this
case,
my
hard-coded
label
is
just
going
to
be
called
custom
setting
and
we'll
save
our
changes
all
right.
So
now
everything
is
done.
We
have
our
custom,
our
custom
setting
that's
available
to
us.
A
A
So
there
we
go
another
saying
that
we
can
add
and
we're
seeing
that
show
up
right
here.
That's
exactly
how
we
would
expect
it
to
work
inside
of
a
SharePoint
framework
web
part.
Now,
let's
go
over
here
to
teams
and
let's
see
how
this
works.
I'm
gonna
come
back
over
here
to
conversations
and
let's
go
back
over
here
to
teams
and
I'm
going
to
change
the
value
or
change
the
the
select
the
option
here
to
go
into
the
settings
and
notice
that
I
have
this
settings
option
listed
here
knows
of
your
custom
settings.
A
A
Now,
if
I
go
in
and
add
the
team,
add
the
custom
tab
back,
which
you
can
see
right
here.
Here's
the
tab,
that's
available
to
us
and
I
had
save
notice
that
initially
again
we
have
our
configuration.
Experience
show
up
so
some
setting
all
right,
but
not
only
that
the
experience
is
still
available
to
me.
If
I
come
over
here
and
I
pick
the
drop-down
for
my
tab
and
I
choose
settings.
I
can
still
see
that
experience.
So
let's
see
how
we
can
block
that
from
happening.
A
And
while
that's
removing,
let's
go
back
over
here
to
our
code
base
and
what
I
have
is
over
here
in
the
manifest
file,
we
have
this
option
of
the
configurable
tabs.
I
have
an
option
here
to
can
update
the
configuration
right
now.
It's
set
to
true.
Let's
flip
this,
to
false
and
save
our
changes
all
right
now,
once
I've
done
that
I
need
to
go
in
and
recreate
my
team
app
package.
A
A
So
now
my
application
has
now
been
updated.
So
let's
see
what
impact
that's
gonna
have
so,
let's
come
over
here
to
teams
and
let's
go
add
in
to
our
my
first
team.
Let's
go
add
in
our
web
part
again,
so
I'll
go
ahead
and
hit
save
now,
just
as
we
would
expect,
we
get
the
configuration
experience
showing
up
here
so
team's
config
experience
once
I
close
this.
A
If
I
it
right
now,
it's
gonna
happen
if
I
select
the
drop
down,
but
if
I
come
off
the
tab,
just
to
be
clear
and
come
back
over
here
into
the
new
tab
and
I
select,
this
drop
down
notice.
The
Settings
button
has
now
been
removed,
so
I
don't
have
the
ability
to
modify
any
of
the
settings
after
the
tab
has
already
been
created.
A
That's
a
really
cool
little
addition
that
we've
that
we've
added
here
to
make
things
a
little
bit
easier,
and
so
in
this
experience,
what
you've
seen
is
how
we
can
work
with
the
configuration
settings.
It's
the
same
story:
we've
had
with
the
SharePoint
framework,
but
with
Microsoft
teams
we
had
the
added
ability
to
block
people
from
adding
multiple
from
modifying
the
settings
multiple
times
after
we've
had
our
initial
installation.
A
So
in
this
screencast
we
learned
a
lot
about
working
with
the
SharePoint
framework
in
Microsoft
teams.
You
understood
what
was
involved
in
creating
custom
tabs
in
Microsoft
teams
and
then
how
we
can
take
advantage
of
the
SharePoint
framework
and
use
the
web
parts
that
we
create
in
the
SharePoint
framework
and
use
those
as
custom
tabs
inside
of
Microsoft
teams.
You
also
saw
how
we
could
create
the
team's
app
manifest
file,
both
automatically
and
programmatically,
and
have
it
deployed
automatically
for
us
to
the
Microsoft
team
store
or
we
could
create
it
ourselves
and
then.
A
In
addition,
we
also
how
we
could
work
with
the
different
context
objects,
both
the
SharePoint
context,
object
and
the
team's
context
object
within
our
application
and
then
finally,
we
saw
how
we
can
modify
the
different
configuration
settings.
I've
added
some
links
here
for
some
additional
details.
If
you
want
to
learn
more
about
working
with
the
SharePoint
framework
or
in
building
Microsoft
teams
tabs
using
the
SharePoint
framework.
Thank
you
very
much
hope
you
got
a
lot
out
of
the
screencast.