►
Description
This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on November 21, 2019.
In this 6-minute video, Zach Roberts shows a SPFx webpart “React My Groups” that uses Microsoft Graph to grab Office 365 groups the current user is a member and returns a list of links to each group’s SharePoint site.
Presenter: Zach Roberts | @ZachSPODev
Supporting materials:
• Blog post: https://spodev.com/my-365-groups-webpart/
• GitHub: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-my-groups
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
quick
introduction
about
myself:
it's
been
working
with
SharePoint
for
about
three
or
four
years
now,
I
kind
of
got
pulled
in
as
a
SharePoint
new,
my
company
working
as
a
man
and
then
recently
started
working
in
the
SharePoint
framework
working
on
solutions
in
my
company,
so
I've
created
this
webpart
react
my
groups
a
couple
of
my
users.
You
know
they
usually
kind
of
get
lost
and
Sharaf.
A
We
don't
have
an
intranet
yeah
and
our
SharePoint
we're
working
towards
it,
but
they
are
trying
to
find
one
site
they're
trying
to
get
to,
and
so
they
kind
of
an
issue
there.
So
I've
come
a
couple
of
this
webpart
to
just
list
all
the
365
groups
that
they
are
part
of
just
uses,
Microsoft
graph,
which
will
go
out,
pull
the
group
and
then
pull
in
there.
The
group
link
to
the
URL
on
the
SharePoint
site
and
then
the
group's
thumbnail
give
you
guys
a
quick
overview
of
the
web
pie
right
here.
A
So
I'll
refresh
this
page,
just
yell
load.
So
it's
going
to
pull
in
the
group.
So
all
for
the
current
user,
which
myself
and
just
a
couple
groups
I
have
right
here
if
I
click
on
a
group,
it
will
take
me
to
that
SharePoint
page
to
the
group
right
there
we
jump
over
to
the
code
real
quick,
and
so
we
have
the
webparts
es
file
right
here
and
so
we're
doing
an
on
in
it.
We
are
setting
up
this
group
service,
we're
passing
in
the
context
there,
and
so
in
that
file.
A
This
is
where
we
are
creating
the
the
call
so
Microsoft
graft.
So
we
have
three
calls
in
here:
one
for
getting
groups
getting
group
links
and
getting
the
group
thumbnails
they
get
groups.
We
are
calling
the
API
this
right
here.
This
is
so
the
current
user
number
of
Microsoft
graph
group
and
it's
going
to
filter
it
for
this
filter
right
here
will
go
to
any
365
groups
across
us
to
looking
at
the
Microsoft
graph
documentation
and
so
on.
A
The
gate
groups
links
we're
passing
in
this
API
right
here,
which,
when
I
pass
in
the
group's
ID
as
a
parameter
and
grab
back
pull
back
the
or
and
the
sort
of
thumbnails.
We
were
passing
an
idea
again
requesting
that
groups
photo
so
if
they
have
a
profile
photo
set
for
the
group,
it'll
pull
that
back
48
by
48
size
and
it
was
refine
it
as
a
blob
which
we're
going
to
create
to
a
image
URL.
So
if
we
jump
over
to
the
main
web
part,
this
is
the
main
kind
of
our
container.
A
So
on
our
render
method,
we're
just
rendering
a
title
right
here.
This
is
the
group
list
which
is
going
to
render
all
the
the
groups
in
that
list,
format
that
we
see,
and
so,
when
the
component
mounts
we're
calling
get
groups
get
groups
is
going
to
use
the
group
service
and
then
on
each
of
the
groups.
It's
going
to
set
our
States
of
the
groups
and
then
call
next
to
get
groups
links
passing
in
the
groups
that
we
just
grabbed
and
then
we're
going
to
kind
of
do
a
for
each
here.
A
So,
where,
where
our
corner
gets
service,
a
group
service
again
and
we're
passing
in
the
our
group
item
or
a
group
to
get
the
group
aerial
for
there
and
those
so
we're
going
to
set
our
state
again
or
kind
of
update
our
state
for
a
group
state,
so
we're
taking
the
previous
state.
We're
gonna
map
that
out
all
the
groups
and
we're
trying
to
find
the
one
where
the
group
ID
matches
the
one
that
we're
currently
working
on
we're
gonna.
A
Do
the
spread
operator
to
add
a
property
into
that
that
group
right
there
on
the
object
and
give
it
a
value
of
the
URL
that
we
returned.
And
after
this
we
are
going
to
call
our
group
thumbnails.
So
this
is
right.
Now
is
updating
the
state,
and
so
the
titles
are
loading
in
the
links
loading
in
and
then
the
the
thumbnails
loading
ants.
We're
getting
a
doing
kind
of
the
same
thing
above
where
we
are
calling
the
group
service
we're
coming
back
from
the
the.
A
Updating
their
state,
where
the
group
ID
matches
the
item,
an
ID
that
we're
grabbing
right
now
and
then
passing
in
the
thumbnail.
So
then,
on
our
group
list,
this
is
getting
us
props,
it's
getting
the
groups
and
then
on
render
is
passing
in
this
proper
here
was
just
call
back
to
this
render
item
method.
So
if
we
look
on
here,
we
have
a
SharePoint
officer
fabric
control
over
list,
we're
passing
in
our
groups
from
the
props.
A
We
have
the
item,
count
page
for
the
page,
height
and
column
height
and
then
on
our
render
cell,
which
is
how
we
kind
of
render
that
kind
of
document
card
layout.
We
call
this
method
down
here
which
passes
it
back
to
returning
a
JSX
element
for
each
item
and
we
do
a
call
back
right
here
to
the
main
component
to
render
those
items
you're,
gonna,
passing
in
the
item
and
then
an
index
for
it.
So
we
go
back
to
this
guy
down.
A
Here
we
have
our
on
render
method
which
we're
getting
the
item,
we're
using
the
document
card
control
and
so
we're
pet.
Do
it
setting
off
the
the
image
right
here
for
the
thumbnail,
sending
it
to
the
center
48
by
48?
Is
this
picture
size
that
we're
expecting
and
then
we're
returning
this
to
our
component
or
the
groups
list
component?
Is
a
document
card
we're
passing
in
the
type
where's?
A
The
compact
make
sure
that
nice
little
compact
component
props
for
it,
which
is
the
image
right
here
and
then
the
URL
we're
just
adding
in
a
tag
in
there
and
the
title,
which
is
faster
than
se
and
the
properties
on
those
group
items
that
we
get,
which
generates
that
that
list
for
us,
which
we
see
on
this
page,
that's
about
all
I,
have
sorry
want
to
go
over
that
little
quick,
but
I'll
answer
any
questions.
If
there
are
no.