►
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 February 27, 2020
In this 20-minute demo, Nanddeep Nachan - SharePoint, Office 365, Microsoft Azure Consultant in partnership with Smita Nachan - SharePoint, Office 365 Consultant from Pune, India, walks viewers through a multi-functional SPFx web part/sample that’s effectively a single front-end for all things related to Microsoft Office 365 group management. The web part uses Microsoft Graph to return basic information about public and private groups the user is presently or not presently affiliated. The user is then able to join or leave groups (and in the case of joining a private group, a Power Automate flow that can be triggered requesting Group Admin approval), search groups, manage group administrators, browse Microsoft Teams associated with a selected group, and finally to set up a new group. The sample is developed with SPFx 1.9.1.
Presenters:
• Nanddeep Nachan | @NanddeepNachan
• Smita Nachan | @SmitaNachan
Supporting materials:
• SPFx sample - React Manage O365 Groups | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-manage-o365-groups
• Sample: React Manage O365 Groups | https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-manage-o365-groups
• Blog: Create Office 365 Groups with SPFx | https://www.c-sharpcorner.com/article/create-office-365-groups-with-spfx/
• Blog: List out Office 365 Groups with SPFx | https://www.c-sharpcorner.com/article/list-out-office-365-groups-with-spfx/
• Blog: Calling Microsoft Graph api from Power Automate Flow | https://www.c-sharpcorner.com/article/calling-graph-api-from-power-automate-flow/
• Blog: Execute Power Automate Workflow from SPFx | https://www.c-sharpcorner.com/article/execute-power-automate-workflow-from-spfx/
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
Hello
good
morning
or
good
evening.
Firstly,
thank
you
for
this
opportunity
to
have
me
here
to
present
my
history,
of
example,
to
manage
office.
365
groups
with
SharePoint
framework
myself,
neither
did
Knutson
and
I'm
from
Pune
India
and
have
been
working
with
SharePoint
of
a
65
and
0-4
for
many
years,
and
I
have
developed
this
sample,
along
with
my
sister
Smith
Anderson,
who
is
also
working
on
SharePoint
for
many
years
now.
Thank
you
for
this
opportunity
so
that
he
siblings
got
a
chance
to
work
on
them.
One
sample.
A
So
here
are
some
social
lenders
to
get
connected
with
us.
So
the
sample
I'm
going
to
demonstrate
today
is
about
managing
your
over
65
groups.
With
the
SharePoint
framework,
the
sample
is
available
in
the
PNP
git
repository
at
this
particular
location,
along
with
all
of
the
documentation,
prerequisites
and
instructions
on
how
to
start
using
this
sample.
So
this
particular
sample
is
developed
using
react.js
and
with
SPF
X
from
version
1.9
point
one,
which
was
the
latest
available
at
the
time
of
development
of
this
sample.
A
Why
do
we
have
this
sample
and
what
are
the
driving
factors
for
it?
So
everyone
is
aware
that
of
the
65
groups
is
the
foundational
membership,
a
service
that
drives
all
teamwork
across
Microsoft
365.
So
once
we
are
part
of
office
365
group,
then
we
can
get
the
benefits
of
group
connected
services
like
shared
outlook,
shared
calendar,
SharePoint,
site
power,
bi,
Yammer,
planner
and
and
teams
during
this
demo.
A
I
am
going
to
use
two
users
when
he
is
a
global
administrator,
which
is
here
and
the
other
user
which
I
am
going
to
use,
is
just
the
sheer
pond
administrator.
So,
for
example,
if
you
want
to
see
all
of
the
groups
which
are
available
in
our
tenant,
we
can
anytime
come
to
these
groups
and
see
all
those
groups
that
great.
But
is
there
any
way
to
see
all
of
the
office
64
groups
in
a
tenant
for
other
users?
So
the
answer
is
yes,
but
but
partially
so,
for
example,
on
this
particular
user.
A
If
I
go
to
Outlook
and
click
people
here,
so
I
will
be
able
to
see
all
of
the
groups
where
I
am
or
I
am
owner,
but
still
there
might
be.
Some
other
groups
exist
in
my
organization
which
I
do
not
manage,
or
they
are
private
groups
so
which
I
might
be
interested
to
join.
So
then,
how
can
we
locate
all
those
groups
and
how
can
we
join
them?
So
this
particular
VFX
solution
goes
beyond
that
limitation
and
provides
the
functionality
using
Microsoft
graph
API.
A
So
most
of
the
key
features
with
this
samples
is
like
we
can
list
all
public,
as
well
as
private
groups,
with
some
basic
information,
like
name
description,
logo
and
the
privacy
of
course
public
or
private,
and
then
we
can
search
for
the
groups.
If
you
have
multiple
groups
being
created
in
your
organization,
you
can
quickly
search
and
go
to
the
group,
and
then
we
can
join
or
leave
the
group
from
our
SP
effects.
A
Web
part
as
well
as
we
can
join
a
private
group
with
I
approval
of
group
administrator,
and
this
is
developed
using
power,
automate
flow
and
then
even
we
can
manage
the
groups
for
administrators
and
then
we
can
browse
the
Microsoft
team
associated
with
that
particular
group
and
then
lastly,
we
can
set
up
a
new
cope.
So
there
are
few
functionalities
and
some
user
roles
also
associated
with
this
sample.
So,
for
example,
if
you
are
in
a
public
group
and
you
own
owner
rule,
in
that
case
you
can
manage
the
group.
A
If
the
group
visibility
is
public
and
you
are
a
member,
then
the
option
for
you
will
be
to
leave
the
group.
If
you
are
not
part
of
that
group,
then
you
will
be
able
to
join
the
group.
For
example,
if
the
group
visibility
is
private
and
you
are
the
owner
of
that
group
again,
you
will
be
able
to
manage
that
group.
A
If
you
are
a
member,
then
you
will
be
able
to
leave
the
group,
and
if
the
group
visibility
is
private-
and
you
are
not
part
of
that
group,
then
you
will
be
able
to
request
to
join
that
particular
group.
So
we
will
see
that
in
a
demo,
so
for
this
purpose,
I
have
my
SharePoint
page
set
up
here,
which
is
hosting
my
of
a
part
so
before
ID
going
to
the
demo,
I
will
probably
edit
this
particular
way
part
and
go
to
the
property
plane
of
this
particular
play
part.
So
here
we
have.
A
This
flow
URL,
which
is
responsible
for
having
the
flow
being
triggered
for
joining
the
private
groups,
so
I
will
discard
this
change.
Okay,
so
let's
go
go
through
the
one
by
one
functionalities.
So
here
is
a
web
part
which
lists
out
all
of
the
groups,
so
at
least
as
of
now
I
have
around
25
to
30
groups
created.
A
So
it
is
listing
all
those
with
a
scrollable
panel
and
then
from
here
we
can
filter
the
groups
based
on
the
so,
for
example,
I
can
type
the
name
or
type
the
characters
and
it
will
start
to
filter
out
the
groups
based
on
based
on
the
name
of
that
particular
group.
The
second
functionality
is,
for
example,
if
you
are
part
of
that
particular
group.
You
are
admin
of
that
public
group.
Then
here
we
have
option
to
manage
the
group.
So
once
you
click
manage
group,
it
will
take
you
to
the
office.
A
65
side
from
you
will
be
able
to
see
all
of
the
groups,
and
then
you
can
search
the
group
from
here
and
you
can
manage
the
settings.
So,
for
example,
you
can
select
the
group
and
you
can
check
the
members
and
other
things,
so
there
is
no
direct
API
available
by
which
we
can
directly
go
to
that
particular
group
setting,
but
at
least
from
here
it
will
make
you
redirect
to
the
Microsoft
365
admin
Center.
Where
we
have
listing
of
all
of
the
groups.
We
can
look
at
our
group
and
start
managing
it.
A
The
third
thing
is,
we
can
join
the
public
group
so,
for
example,
right
now
we
have
okay
before
yep,
so
we
will
have
this
group
called
as
a
rock'n'roll,
which
is
a
public
group,
but
right
now
I
am
NOT.
Part
of
that
particular
group.
So
I
can
just
click,
this
particular
icon,
and
it
will
help
me
to
join
that
particular
group.
Once
I
am
joined
to
this
particular
group.
Again,
I
can
click
this
icon
and
I
can
leave
this
particular
group.
A
So
this
is
very
much
easy
for
public
groups,
but
now
that
may
be
a
complex
thing
like
how
can
we
join
a
private
group
so
right
now,
for
this
particular
example,
I
have
one
group
here
called
as
fabulous
file
to
which
this
particular
user-
this
admin
user
is
added
me
he
can
manage
this
group.
On
the
other
hand,
I
also
have
another
user
here,
which
is
just
the
SharePoint
admin,
but
he
don't
have
access
to
this
particular
group
called
as
fabulous
file.
So
here
the
option
is
we
can
request
to
join
this
particular
group.
A
A
If
the
trigger
or
the
flow
blow
goes
well,
I
should
be
able
to
see
one
email
okay.
So
here
it
is
request
to
join
the
tea
private
group.
So
here's
the
automated
email
will
come,
which
will
say
that
this
particular
user
want
to
join
your
group,
and
in
that
case
you
can
take
2
actions
approve
or
reject,
so
probably
I
will
approve
this
and
say,
approve
and
submit.
A
So
again
the
flow
will
trigger
which
will
detect
that
this,
particularly
curse,
has
been
approved,
and
then
the
user
will
be
able
to
see
user
will
be
able
to
a
part
of
that
particular
group.
So
again
to
this
particular
user.
I
will
go
to
the
outlook,
and
here
we
can
see
the
email
has
triggered
that
you
have
been
added
to
this
particular
group
and
your
request
is
approved
so
now,
if
I
can
refresh
this
particular
window.
A
In
that
case
again,
if
I
scroll
back
to
fabulous
file,
now,
I
can
see
that
I
have
joined
this
particular
private
group
and
from
here
again
I
can
leave
the
group
if
needed
again.
One
more
thing
is:
if
you
are
a
member
or
admin.
Shuttle
of
that
particular
group
here
is
a
link
by
which
you
will
be
able
to
navigate
to
your
SharePoint
site
and
manage
the
things
from
there.
A
A
I
would
have
some
small
description
here
and
then
I
will
keep
the
visibility
as
of
public
in
the
owner.
I
will
maybe
attract
the
admin
and
again
in
the
member
I
will
tidy
of
same
user,
which
is
the
one
by
which
we
are
creating
this
particular
group.
So
once
I
click
Submit,
the
group
will
get
created.
Probably
I
will
come
back
to
this,
particularly
user.
To
show
you
that
the
group
has
been
created.
A
A
Oh
I
just
come
to
know
that
I
forgot
to
mention
one
functionality
so,
for
example,
if
your
group
is
connected
to
the
team
in
that
case,
you
will
be
able
to
see
the
teams
icon
in
front
of
it
once
you
click
that
icon,
you
will
be
taken
to
that
particular
team.
So
again,
there
is
option
whether
you
want
to
open
that
in
a
Microsoft
team
or
use
the
web
app
so
from
here
we
will
be
able
to
navigate
to
our
team.
A
So,
okay,
going
back
to
the
code,
we
have
services
here
which
are
kind
of
an
extensible
services
to
help
us
with
create
the
group
join
the
group
or
as
well
as
leave
the
group.
So
probably
I
can
walk
you
through
this
code
first,
so
we
have
first
method
called
as
gate
groups
and
we
have
the
rest
api
or
the
graph
api
here
to
get
all
of
the
groups
and
by
this
way
we
are
able
to
get
all
of
the
groups,
even
though
you
are
not
part
of
that
particular
group.
A
So
this
will
return
us
all
of
the
group
inside
your
tenant
and
again
for
that.
We
have
some
permissions
here.
We
have
this
permission
as
application
permissions
using
which
we
are
able
to
get
all
of
those
groups,
and
then
there
is
one
more
method
called
as
get
my
member
groups,
which
will
which
is
again
using
the
graph
API
to
get
groups
where
this
particular
user
is
a
member
of
then.
Thirdly,
we
have
method
called
as
get
my
owner
groups.
A
So
as
like
getting
the
member
groups,
we
don't
have
direct
API
or
graph
API
available
to
get
all
the
groups
where
I
am
the
owner,
but
as
a
as
alternative
we
can
use
in
this
particular
REST.
Api,
slash
me
slash
owned
object
and
then
we
can
filter
on
to
the
only
group.
So
we
can
use
this
particular
graph
API
to
get
the
groups
where
this
particular
user
is
the
owner,
and
then
we
have
one
more
method
to
add
a
member
to
the
groups.
A
So
whenever
someone
requests
to
join
the
group,
we
are
calling
this
particular
REST
API
the
post
method,
to
add
that
particular
user
to
the
group,
and
then
we
have
remove
member.
In
that
case,
we
are
again
using
the
REST
API
to
get
a
reference
of
that
user
using
the
user
ID,
and
then
we
are
removing
that
particular
user
and
then
the.
Lastly,
we
have
a
request
to
join
the
private
group,
which
is
the
dependent
on
to
the
Microsoft
flow
or
power
automate.
So
here
we
are
composing
the
body
in
which
we
are
passing.
A
The
group
ID
name,
URL,
name
of
the
requester
and
email
of
the
requester
who
wants
to
join
your
private
group
and
once
it
is
here,
we
are
again
calling
the
graph
not
graph
appear.
We
are
calling
that
particular
Microsoft
flow
so
that
we
can
trigger
that
Microsoft
flow
from
the
flow
URL,
which
is
in
the
properties
of
our
depart,
and
this
flow
will
take
care
of
joining
the
group
on
behalf
of
that
particular
user.
A
And
then
we
have
a
few
supporting
methods
like
get
the
group
link
which,
which
is
being
used
here,
to
show
the
link
to
the
particular
group,
and
then
we
have
great
group
thumbnail,
which
will
just
show
the
thumbnail
of
your
group.
If
you
have
said-
and
lastly,
we
have
a
method
to
create
the
group
which
is
responsible
to
create
a
new
group
instead
of
a
16-5
so
based
on
the
values
which
have
been
provided
into
the
form,
we
can
again
post
the
graph
API
to
get
this
group
created.
Ok,
so
again
to
get
the
teams.
A
We
have
this
particular
get
teams
channel
so
that
once
you
click
on
to
the
team's
icon,
it
will
take
you
to
the
first
channel
inside
your
team.
Ok,
so
that
was
about
the
extensible
service
and
on
to
the
react
component.
Mainly,
we
have
three
components:
group
list,
news
group
and
office,
65
groups
manager.
A
So
this
group
list
can
then
use
this
information
to
render
the
particular
information
for
that
particular
group.
So,
for
example,
here
we
have,
we
are
using
this
list
and
mostly
we
are
handling
all
of
the
UI
component
using
this
on
render
cell.
So,
if
I
directly
move
to
on
the
render
cell
here,
we
are
showing
all
of
the
information
based
on
the
visibility
of
that
particular
group.
A
If
it
is
connected
to
the
teams
based
on
the
visibility
as
well
as
icon,
if
the
user
role
is
a
member,
in
that
case,
we
are
showing
the
icon
to
leave
the
group.
If
the
group
visibility
is
public
and
we
don't
have
any
user
role,
in
that
case,
we
are
asking
the
user
to
join
the
group
and
the
same
way
if
the
user
or
the
group
visibility
is
private.
A
In
that
case,
we
are
asking
the
user
to
request
to
join
that
particular
group,
so
at
least
this
is
the
main
method
wherein
we
are
handling
the
visibility
of
all
the
elements
by
which
we
will
be
able
to
show
the
information
about
the
group,
and
we
can
ask
whether
to
leave
or
join
that
particular
group,
and
then
we.
Lastly,
we
have
new
group,
which
is
very
much
simple.
A
We
just
have
a
few
controls
here
to
get
the
information
about
the
group
to
be
created,
and
then
we
are
calling
the
method
from
the
extensible
service
to
get
that
group
created.
One
thing
I
want
to
mention
here
is
about
the
flow
that
has
been
created
here
so
for
that
probably
I
will
move
to
the
flow.
A
And
if
I
go
to
my
flows,
this
is
the
flow
which
is
responsible
to
join
the
or
allow
the
user
to
join
the
private
group.
So
here,
whenever
the
HTTP
request
is
being
received
from
NS
VFX
web
part
to
join
the
group,
we
are
composing
that
particular
request
and
then
again
we
are
getting
the
application
ID
directory,
ID
and
secret
from
the
app
registration
which
we
created
inside
as
well.
So
probably
even
I
can
show
you
that
very
quickly.
So,
if
I
go
to
show
all
and
then
to
the
azure
active
directory.
A
So
inside
this
arpeggiation
we
have
registered
this
app
and
to
this
app
we
have
given
the
API
permissions
so
that
it
can
read
the
group
information
as
well
as
it
will
help
to
add
the
user
to
the
group
and
again
we
have
certificates
and
secrets
so
so
from
here.
We
can
create
a
new
secret
for
one
year,
two
year
or
never
expire
and
this
particular
values
for
the
application,
ID
directory,
ID
and
secret.
A
If
it
is
rejected,
we
are
simply
sending
out
an
email
saying
that
your
request
has
been
declined.
So
this
is
how
this
solution
is
developed
and
then
I
have
few
references
here.
Probably
you
can
use
all
just
just
refer
on
how
this
component
has
been
developed.
Okay,
the
tactic,
thank
you
for
having
the
opportunity
to
demo.
This
way,
part.
B
One
I
and,
and
that
just
pinpointing
for
those
who
are
not
a
not
super
familiar.
So
this
is
the
only
thing
what
you
need
to
do
and
you
don't
have
to
worry
about
where
the
people
start
coming
from
and
do
the
queries
and
anything.
That's
it.
You
just
define
the
properties
and
things
work
and
I
think
that's
a
brilliant
example
of
the
the
controls
yeah.