►
From YouTube: Community Demo - SPFx Microsoft Teams tab using Microsoft Graph to manage team membership
Description
This community call demo is taken from the SharePoint General Development Special Interest Group recording on 14th of March 2019. In this video, Laura Kokkarinen (Sulava) demonstrates how to build a SharePoint Framework web part which lists Microsoft Teams teams which user is not part of. The solution uses Microsoft Graph to get access on Teams information and web part can be exposed also as a Microsoft Teams tab.
Presenter - Laura Kokkarinen (Sulava)
Code sample available from https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/js-public-unjoined-teams
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
My
name's
Lauren
and
today
I'm
presenting
to
you
this
public
teams,
I
am
NOT
a
member
or
web
part
which
I
contributed
to
the
SPF
examples.
A
little
woke
up
and
I
originally
implemented
this
as
a
conference
demo
for
ESPC,
2018
and
I
got
this
idea
from
a
colleague
of
mine
and
basically
the
situation
wins.
She
was
having
conversation
on
a
team's
channel
about
a
certain
topic
and
then
under
under
the
person,
comes
in
and
says
you
know:
we've
been
talking
about
the
same
thing
in
another
team.
So
how
about
you
come
over
there?
A
Let's
convene
to
chat
over
there
and
she
was
like
yeah
sure,
but
how
I
wasn't
able
aware
of
this
team
before
this
moment
like?
Is
there
someplace,
where
I
could
see
all
the
public
teams
that
aren't
in
our
tenants?
Because
if
we
go
to
teams
and
click,
this
join
our
create
team
when
we
get
here
are
just
recommendations,
this
doesn't
list
all
teams
in
the
terms.
A
So,
of
course,
you
can
go
on
for
a
simple
start
searching
for
a
team,
and
then
it
returns
something
to
you,
but
on
the
box
there
is
no
place
where
you
could
see
a
list
of
all
public
teams
in
a
tenant.
So,
for
example,
if
you
would
be
interested
in
marketing,
you
will
know
that
there's
a
team
where
you
can
join
and
discuss
about
that
territory,
but
that
web
part
allows
you
to
do
that.
A
Yeah
it
added
me
and
then,
if
we
refresh
this
page,
we
naturally
don't
get
the
team
here
anymore,
because
we're
a
member
of
that-
and
this
were
part
users
graph
for
fetching
the
teams
and
also
for
adding
the
person
into
the
team
and,
let's
take
a
look
at
the
code
in
the
end-
is
a
very,
very
simple
web
part.
There's
like
132
lines
code,
it's
very
simple
here.
A
In
the
beginning,
we
referenced
Amos
craft
client
for
:
graph
and
I've
implemented
some
helper
methods
down
here
for
both
get
and
post
requests
and
they
use
this
kaurav
effort,
fat,
free
toaster
response
and
the
requests
art
undercroft
synchronously,
because
we
need
the
response
before
can
do
stuff
with
it
and
for
the
web
part
we
need
to
assign
permissions
to
craft.
So
these
are
three
permissions
that
are
needed.
So
when
you
deploy,
this
were
part
to
the
app
catalog.
A
A
But
let's
take
a
look
at
this
logic,
so
in
this
render
method,
we
first
of
course
need
to
get
the
team's.
Their
user
is
not
a
member
of
before
we
can
render
the
list,
and
that
happens
in
this
function,
and
we
can't
get
that
caramel
is
directly
from
craft.
We
need
to
first
get
the
team's
that
the
user
is
a
member
of,
and
then
all
the
teams
and
then
make
a
difference
between
these
two
arrays,
and
we
also
need
to
filter
team
space.
A
All
the
public
visibility
property
because
crafters
are,
are
you
to
do
that
correctly?
How
come
back
to
these
two
rows
in
a
bit
and
when
we
have
this
missing
team
IDs
or
the
IDS
of
the
teams
that
the
user
is
not
yet
a
member
of
we
create
this
chase,
an
object
that
contains
the
team
objects
of
those
teams,
because
we
might
want
to
use
all
the
values
all
the
properties
of
those
teams
as
well.
In
addition
to
the
ID,
for
example,
the
display
name,
so
it
can
display
it
in
the
wear
pattern.
A
So
we
get
the
container
element
and
then
we
also
get
the
user
ID
from
graph
for
the
current
developing
user.
Because
not
sure
we
need
that
if
we
want
to
add
the
user
to
the
team's
and
for
each
of
the
teams
that
we
did
used,
that
the
user
doesn't
belong
sure.
Yet
we
create
a
row
for
each
of
them,
then
add
a
button
to
the
beginning
of
the
row
and
we
save
this
team
ID
as
the
button
ID.
A
You
could
just
pass
this
as
a
parameter
later
on
as
well,
but
I
figured
my
self
storage
here,
because
we
need
to
use
the
button
element,
relation
1
or
2
and
then
change
the
button
text.
And
here
we
add
this-
add
member
event
handler
to
the
onclick
listener
at
the
bottom,
a
button
which
is
satisfied
and
that
contains
the
team
participating
and
in
is
own
handler.
We
get
the
sauce,
which
is
the
button
that
the
user
clicks
and
then
the
user
ID
and
we
disable
the
button.
A
So
the
user
can't
click
several
times
because
the
use
of
such
a
click
and
then
we
changed
the
ear
texture
joins.
Something
feel
like
yes,
I
did
something
useful,
I
click
in
the
bottom,
and
then
we
built
the
body
for
the
Kraft
request.
That
is
basically
a
reference
to
the
here's
I'll
check
and
then
make
a
post.
How
do
we
get
the
team
ID
from
that?
A
What
an
ID-
because
it's
saying-
because
we
have
just
in
here
and
that's
basically,
everything
that
is
worth
bought
us
and
I-
promise
to
come
back
to
these
two
laws
ago,
so
yeah,
like
I,
mentioned
unfortunately
crafters
and
hours,
to
build
a
groups
based
on
visibility.
So
you
can't,
at
this
old
data,
filter
visibility,
equals
public
here
and
only
receive
public
teams.
A
What
this
line
actually
does
it
returns
all
teams,
I'm
gonna,
say
all
teams
I
mean
all
teams,
including
private
teams,
that
the
user
is
not
a
member
of
so
you
might
want
to
discuss
it
plan
on
using
this
in
the
customer
environment.
What
we'll
discuss
with
them?
It's!
Okay,
like
are
your
users,
very
tech
savvy.
You
do
they
have
pitler,
because
if
they
have
people
up
and
running
and
they
refresh
the
page,
they
can
see
the
requests
going
on
and
the
response
contains
display
names
for
all
the
priorities
intent.