►
From YouTube: Building a React groups and teams web part for aggregating detailed information for end users
Description
In this 12-minute developer-focused demo, Alison Collins and Sam Collins step through this handy web part that helps a logged-in user quickly find their Microsoft Teams and Microsoft 365 Groups sites/content. For a selected site, there are options to go to site, mail, calendar, or Planner. Match site color theme with one click. Filter by public, private or all Groups/Teams. The main React component is MicrosoftGroups.tsx. A brilliant code walk-through by first time presenter Alison Collins. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 6, 2021.
Demo Presenters:
• Alison Collins
• Sam Collins (Coupled Technology) | @samc148
Supporting materials:
• Alison’s Blog: Graphgod | https://graphgod.dev/
• Repo - All Microsoft 365 Groups and Teams with SPFx | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-groups-teams
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
This
is
david
and
with
me
today
is
alison
collins
and
sam
collins,
allison
and
sam
are
the
primary
developers
of
this
sample.
Allison
is
14,
so
she
is
setting
a
record
as
our
youngest
presenter
in
the
history
of
pnp,
so
this
is
going
to
be
awesome
alison.
Why
don't
you
start
out
by
telling
us
a
little
bit
about
this
sample.
B
Recently,
I
had
a
client
that
needed
to
display
the
sharepoint
groups
in
their
organization,
their
personal
groups,
as
well
as
showing
their
ms
team's
teams.
This
webpart
makes
use
of
the
sharepoint
site's
theme
for
styling
as
well.
It's
useful
for
site
managers,
admins
and
users
to
find
their
sites
and
its
information.
A
All
right
awesome,
so
let's
dive
right
in
and
take
a
look
at
what
this
sample
looks
like
on
the
page.
Now,
when
you
initially
load
this
sample,
you'll
get
these
two
buttons:
microsoft,
365
groups
and
my
teams,
both
clickable,
which
you
can
click
on
to
load
your
different
groups
and
teams.
Now
you'll
notice.
The
styling
of
this
is
matching
the
styling
of
my
theme,
so
I
can
actually
change
that.
That's
one
of
the
cool
features.
A
A
Now
you'll
notice,
the
additional
information
that
we
can
click
on
things
like
public,
all
private,
so
we're
able
to
swap
between
those
we
can
see
the
teams
if
I
click
on
that
and
the
groups
change.
As
I
click
on
that.
Additionally,
you
can
click
to
go
to
the
different
mail
properties
of
the
team
or
the
group.
You
can
click
to
go
to
the
site.
The
calendar
planner
and
you
also
have
the
visibility
identified
here.
You
can
always
click
on
the
view.
A
My
groups
as
well
and
one
of
the
cool
features
that
she
added
is
the
ability
to
see
the
description
so
a
lot
of
times.
We
want
to
include
additional
information
about
that
site
or
group
or
team
that
is
useful,
but
small
space
right.
So
we
include
the
title
but
still
give
an
opportunity
for
our
users
to
see
additional
information
about
that
team
or
group
which
is
great
because
it's
passive,
it
doesn't
overwhelm
the
user
on
the
initial
load
and
provides
that
information
in
a
way
that
is
controllable
by
the
user.
A
B
B
B
B
The
next
thing
to
notice
is
that
I
have
two
teranate
operators
further
on
in
the
render
these
both
ask
if
the
state.title
equals
their
value
and
if
so,
they
render
the
designated
voter.
For
example,
the
button
the
user
clicked
on
is
microsoft,
365
groups,
then
there
will
be
a
ternary
operator
to
check
if
that
is
true
for
the
render
of
the
microsoft
365
groups
component.
B
Now,
let's
jump
into
the
component
denmont
function
if
you're
familiar
with
spfx
development,
you
probably
often
use
the
component
did
mount,
but
I
want
to
show
you
specifically
how
we're
using
in
my
team,
scotland,
here's
the
component
of
mount
function
and
to
briefly
go
over
it.
I'm
doing
a
graph
api
call
to
get
the
user's
teams
and
then
going
through
each
of
the
teams
and
pushing
information
and
setting
that
to
my
group
results.
Next,
I
call
the
get
mail
get
planner
and
get
scene
general
functions.
B
B
Then
we
take
the
response
and
if
it
is
an
error,
we
return.
If
not,
and
we
get
back
our
response,
we
mount
through
the
result
and
take
each
group
and
push
the
group
display
name
id
description
and
visibility
into
the
variable.
Three
after
we've
mapped
through
the
results.
We
want
to
do
something
with
them.
We
set
my
group
results
and
state
to
be
the
array
of
the
fields
that
we
chose.
When
we
map
through
the
results,
then
we
call
three
functions.
B
B
B
So
here's
look
at
planner
function.
That's
the
group's
planner!
This
function,
maps
through
macro
results
and
make
a
makes
a
graph
api
call
using
the
group
id
from
the
group.
Next,
we
take
the
planner
id
from
the
results
and
you
reassign
the
current
group,
its
pass
value,
as
well
as
the
planner
url.
Let's
go
deeper
into
what
we're
doing
here.
B
First,
we
map
through
my
group
results,
and
we
have
a
try
statement
to
try
the
graph
abigail
to
get
that
group's
planner
using
the
group
id
then
after
we
get
the
response,
we
say
that
if
that
value
holds
something,
if
it's
greater
than
zero,
then
we
do
a
couple
things
we
create
variable
id
and
that,
through
the
result
value
we
got
back.
We
assign
the
variable
we
just
created
to
the
planner
id.
We
got
from
the
results.
B
Then
after
that
comes
my
favorite
part,
the
get
planner
function,
we
create
a
dynamic,
url
and
ascend
it
to
the
euro
variable
by
inputting
the
tenant
url,
the
group
id
and
the
planner
id
that
we
got
back
from
the
article
next.
We
create
a
variable
called
planner
and
assignment
and
object,
which
is
planner
and
is
assigned
the
dynamic
hero.
B
B
B
B
Moving
on,
I'm
going
to
show
you
the
code
to
get
the
team
0
for
each
team.
This
looks
very
similar
to
the
get
planner
function
we
just
went
over,
but
it's
not
in
a
try
catch
statement
because
we
don't
need
to
catch
the
areas
like
the
planner.
You
just
see
if
there
will
be
all
those
there
for
that
team
and
here's
the
get
to
control
function
and
I'll
go
over
this
briefly.
B
So,
in
the
first
part,
you
map
through
your
groups
and
do
a
graph
api
call
for
the
current
code
using
its
id
and
we
filter
the
results
to
pull
back.
Only
the
web
url
after
that
we
take
the
response,
whether
it
be
an
error
or
if
it's
a
result,
if
it's
an
error,
we
return.
But
if
it's
the
result,
yay
we
make
a
variable
called
results
and
assign
it.
The
current
groups,
value
with
the
planar
invisibility
and
such
and
also
add
in
another
object.
B
Now,
let's
go
in
the
filter
section
you
can
see
in
the
photo
that
there
are
three
buttons
that
you
can
choose
from
titled
public
all
in
private.
These
are
the
buttons
that
filter
the
items
we
display.
Let
me
show
you
how
it
works
with
the
filters
I
have
all
of
them
in
a
ternary
to
determine
which
one
is
currently
selected.
This
is
used
so
that
the
selected
filter
will
have
a
different
styling
than
the
other
buttons.
So
you
know
it's
been
selected.
B
B
B
If
the
selected
mode
is
public
or
private,
we
create
a
constant
called
switched
all
we
filter
all
group
results
filtered
to
the
current
item's
visibility
to
the
constant
we
just
created
then
go
ahead
and
set
the
state
of
all
group
results
filtered
to
the
filters
groups.
We
do
the
same
for
macro
results
and
then,
after
the
else
statement,
we
set
the
mode
to
be
the
moment
we
select.
B
Mom
I
set
both
of
them
so
that
when
you
select
a
filter
and
change
the
view
from
either
my
groups
or
groups
in
my
organization
that
filter
will
stay
applied
great
okay.
Now,
let's
go
into
the
render
section
and
go
over
how
I
use
variables
in
it.
If
you've
had
some
experience
with
the
regex,
then
you'll
see
right
away
what
I'm
doing
with
one
of
my
variables,
but
I
want
to
explain
it
and
how
I
make
the
urls
for
the
users
to
click
in
the
render.
B
B
B
C
B
I
found
through
testing
that
sometimes
the
mail,
the
name
and
the
url
could
be
different
and
using
the
email
got
the
most
consistent
results
and,
lastly,
we
want
to
talk
about
styles,
so
I
used
several
colors
from
your
theme.
Like
theme,
primary
theme
dark
and
more
so
I'm
going
to
go
over
those
to
wrap
up
in
the
microsoft
365
groups.module.scss
file.
I
call
several
colors
of
your
theme,
such
as
theme.
Primary
here
are
more
examples
of
theme
styling
and
we
have
the
light
and
theme
dark.
B
So
I
want
to
thank
the
pme
community
for
helping
me
prepare
today.
I
highly
recommend
using
the
buddy
system,
especially
if
you're
a
first
time
presenter.
It
was
really
helpful
to
have
hugo
and
david
help
us
they
collaborated
with
us
on
the
slide
deck
and
help
us
improve
our
presentation.
A
lot
you
can
get
the
cool
for
this
web
part
in
pmp
samples
and
check
out
my
new
blog
at
graphgod.net.