►
From YouTube: Site User and Group Information Web Part
Description
In this 14-minute Developer - focused demo, Daniel Watford shows viewers how to use this Users and Groups Web part to ascertain relationships between users and groups in SharePoint and in Azure Active Directory for purposes of making informed access control decisions. User and group information from AAD is retrieved through the Microsoft Graph API and from SP via PnPjs calls to the SharePoint API. Easily determine if user is a member of SharePoint site groups. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 8, 2020.
Demo Presenter: Daniel Watford (Watford Consulting Ltd) | @danwatford
Supporting materials:
• Blog Post - The multiple identities of a SharePoint site user | https://www.watfordconsulting.com/2020/10/02/the-multiple-identities-of-a-sharepoint-user/
• Repo - Site User and Group Information | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-sp-site-user-groups
• Document - User profile synchronization | https://docs.microsoft.com/en-us/sharepoint/user-profile-sync
• Web-based Tool - json2table | http://json2table.com/
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
Hello:
everyone,
my
name,
is
daniel
watford,
I'm
a
software
consultant
in
the
uk
with
my
company
watford
consulting.
We
provide
software
development
and
system
integration
services
to
help
customers,
modernize
processes.
I've
been
building
software
for
about
20
years
in
embedded
and
enterprise
systems,
but
only
came
to
sharepoint
about
five
years
ago.
I
really
quite
liked
how
it
took
care
of
a
lot
of
busy
work.
A
Things
like
access,
control,
storage
and
search
all
ready
to
go
come
forward
a
few
more
years
and
I
find
sharepoint
has
just
got
easier
to
work
with
with
sharepoint
online
the
framework
and
pmpjs
helping
us
with
solution
development.
So
today,
I'd
like
to
demonstrate
the
a
web
part
I've
created
for
the
sharepoint
framework,
which
will
help
explore
the
relationship
between
users
and
groups
in
sharepoint
and
the
azure
active
directory.
A
So
as
an
example
of
where
we
might
want
to
better
understand
users
and
groups
and
sharepoint,
we
can
take
a
look
at
a
simple
solution
to
process
purchase.
Orders
in
this
list
we'll
create
rules
specifying
the
maximum
purchase
order,
value
that
a
member
of
staff
is
allowed
to
approve
if
a
staff
member
submits
a
purchase
order
with
a
higher
value
than
the
solution
value.
The
solution
will
then
pass
the
purchase
order
up
the
management
chain
as
an
approval
request.
A
Once
the
purchase
order
is
approved,
relevant
notifications
can
be
automatically
sent
to
other
departments
such
as
finance
and
purchasing.
Each
rule
applies
to
multiple
users
and
groups
specified
using
a
person
or
group
column
for
display
purposes.
I've
added
an
additional
column
to
the
list,
with
some
formatting
to
show
the
ids
for
those
users
and
groups
that
have
been
selected.
These
are
the
site,
users
and
site
group
ids
that
we'll
explore
in
this
talk.
A
So
what
are
sharepoint
site
users
and
site
groups?
So
here
we
have
two
users:
aad
user
1
and
ad
user
2,
along
with
2
groups,
aad
group,
1
and
aad
group
2..
Normally,
we
think
of
users
and
groups
at
the
organizational
level
managed
using
tools
like
azure
ad,
like
the
azure
ad
portal
or
the
microsoft
365
admin
center.
A
These
same
organization,
users
and
groups
are
available
in
the
sharepoint
site,
where
we
can
refer
to
them
in
people
or
group
columns
or
assign
roles
to
them,
but
once
the
site
needs
to
refer
to
a
user
or
group,
it
doesn't
continue
to
reference
it
by
any
sort
of
azure
ad
identifier.
Instead,
it
maintains
its
own
list
of
site
users
mapped
from
those
azure
ad
security
principles.
A
Sharepoint
site
groups
are
created
and
managed
on
a
sharepoint
site
site
users
in
including
those
mapped
ad
groups
can
be
assigned
as
members
of
a
site
group.
Here
I
have
a
bunch
of
users.
This
diagram
shows
the
users
and
security
groups
defined
in
my
azure
ad
for
my
tenant.
The
arrows
indicate
that
diego
alex
adele
and
azaya
are
members
of
some
security
groups
within
the
same
tenant.
A
On
my
demo
sharepoint
site,
I
have
the
have
defined
two
sharepoint
site
groups,
sp
group,
one
and
sp
group,
two
grady
and
ad
group,
one
and
ad
group
two
have
been
assigned
as
members
of
those
site
groups
assigning
those
memberships,
as
course
creation
of
ad
group.
One
ad
group,
two
and
great
grady
site
users,
adele
henrietta
and
ad
group
four
have
been
assigned,
read
permissions
on
the
site
directly,
causing
the
creation
of
their
corresponding
site
users.
A
So
note
that
alex
diego
and
isaiah
do
not
have
corresponding
sharepoint
site
users.
Their
only
relation
to
the
sharepoint
site
is
through
their
direct
or
indirect
relationship
of
ad
group
memberships
of
ad
group
1
and
ad
group
4..
So
let's
take
a
look
at
how
these
users
and
group
memberships
can
be
surfaced
by
the
user
and
group
information
web
parts
over
to
the
demo.
A
So
here
we
are
at
the
home
page
of
my
demo
sharepoint
site
where,
on
the
sharepoint
site
we
have
the
user
and
group
information
web
part
already
installed.
The
web
part
defaults
to
displaying
information
for
the
current
user.
So
here
we
can
see
my
users
as
your
ad
information
from
the
graph
api
and
my
sharepoint
site
user
information
from
the
sharepoint
api,
both
retrieve
using
pmpjs.
A
A
Under
group
information
we
can
see
that
adele
is
known
to
the
sharepoint
site
as
the
adele
vance
principal,
which
has
a
principal
type
of
user.
A
dell
site
user
is
not
a
member
of
any
sharepoint
site
groups.
We
also
see
that
adele
is
a
member
of
active
directory
groups.
One
and
group
two,
the
site
users
represented
these
organization
level
groups,
have
the
security
group
principle
type
and
are
the
sales
members
of
sharepoint
site
group,
1
and
sharepoint
site
group
2..
A
Let's
have
another
look
at
grady,
so
grady
is
recognized
by
the
grady
archie
user
principle
type
and
that
user
principle
is
a
member
of
the
sharepoint
sp
group,
one
side
group
rather
than
selecting
from
existing
sites
a
user
and
group
information.
Webpart
can
also
search
for
users
defined
in
active
directory.
So
we
can
give
this
a
try
by
searching
for
diego.
A
Since
diego
is
not
a
site
user
I'll,
just
always
back
here
since
he's
not
a
site
user,
there
is
no
sharepoint
site
user
information
to
display.
However,
he
can
still
be
identified
by
the
site
as
a
member
of
ad
group,
one
with
the
security
group
principle
type
and
also
via
the
ad
groups,
membership
of
site
group
sp
group,
one
now
we'll
take
a
look
at
alex.
A
So
like
diego,
we
can
see
that
alex
is
not
a
site.
User
alex
can
be
recognized
by
the
site
as
ad
group,
one
with
a
security
group
principle
type.
Even
though
he's
not
a
direct
member
of
that
organizational
group.
So
here
we
see
that
alex
is
a
member
of
ad
group
three,
which
is
a
nested
member
of
ad
group.
One
sharepoint
is
not
not
aware
of
ad
group.
Three
at
all
now
we'll
have
a
look
at
isaiah.
A
In
asia's
case,
in
aziz
case,
we
see
that
is
only
recognized
by
the
site
due
to
his
membership
of
ad
group
four,
we
can
also
use
the
user
and
group
info
web
part
to
look
at
user
and
group
profile
information.
So
if
we
go
back
to
adele,
we
can
click
on
the
various
ids
principal
names
and
site
groups,
access
our
profile
pages
so,
for
instance,
we'll
click
on
adele's
user
principle
we'll
get
taken
to
her
delve
profile.
A
If
we
click
on
one
of
our
ad
groups
will
get
taken
to
a
user
information
page.
So
this,
I
think,
hopefully
demonstrates
that
we're
actually
looking
at
a
site
user
rather
than
a
site
group
in
the
case
of
active
directory
groups
and
then,
if
we
go
and
click
on
the
sharepoint
site
group
we'll
go
and
see
the
members
list
for
that
site
group.
A
The
user
and
group
information
webpart
is
implemented
using
a
react
framework.
Its
top
level
react
component
is
a
function
called
user
and
group
info,
which
holds
the
top
level
state
for
the
web
part.
This
state
consists
of
references
to
two
lookup
services,
one
for
accessing
azure
id
and
one
for
access
accessing
sharepoint.
A
It
also
stores
a
state
for
the
currently
selected
user's
email
address
and
or
site
id,
and
then
it
also
tracks
whether
users
currently
selected
at
all
the
only
place
that
state
is
updated
is
in
the
on
selected
user,
changed
callback
in
response
to
selection
of
a
site,
user
or
searching
for
an
organization
user
lead.
State
changes
will
cause
components
to
be
re-rendered
with
new
data,
user
and
group
information
is
rendered
using
child
components,
user
info
and
user
group
memberships.
A
You
can
see
down
here
in
the
left.
This
is
the
area
of
the
screen.
That's
going
to
be
rendered
by
by
those
components.
Both
child
components
also
take
the
web
parts
context,
but
this
is
only
used
for
populating
those
links.
We
saw
that
took
us
to
the
delve
profile
or
to
the
group
membership
profile
pages.
We
looked
at
at
the
end
of
the
demo.
You
use
the
selection
component
rendered
at
the
top
of
page
takes
the
web
parts
context,
the
sharepoint
user
group
lookup
service
and
the
callback
that's
down
here.
A
A
Moving
on
to
the
user
info
component,
the
user
info
component
is
a
react.
Functional
component,
which
includes
two
promises
in
its
properties,
returned
from
the
sharepoint
and
azure
ad
lookup
services,
as
each
of
these
promises
resolve
the
two
sections
user
users
azure
and
ad
information
and
sharepoint
site
user
information
will
be
rendered
just
about
here
as
each
of
the
promises.
The
azure
ad
promise
is
created
by
the
azure
ad
lookup
services
get
aad
user
function.
A
A
The
sharepoint
user
group
lookup
service
enables
us
to
retrieve
site
user
information
for
a
site
with
the
given
site
user
id,
although
not
needed
for
rendering
the
user
info
component.
The
lookup
service
also
goes
and
retrieves
group
information
for
the
site
user.
We
do
that
so
that
we
can
cache
it
for
use
later,
while
we're
rendering
the
bottom
part
of
the
screen.
A
Its
properties
include
a
promise
to
return
an
array
of
sp
group
membership
objects.
These
objects
define
a
relationship
between
a
site
group
and
a
site
user.
By
permitting
the
site
group's
details
to
be
undefined
in
these
objects,
we
can
represent
cases
where
a
user
is
known
to
sharepoint,
but
their
user
principle
is
not
a
member
of
any
site
groups.
A
Here
we
can
see
the
get
user
memberships
function
from
the
sharepoint
user
group
lookup
service,
which
returns
the
promise
of
sp
group
membership
objects.
We
saw
in
a
previous
slide
using
the
given
site
user
id.
This
function
will
retrieve
the
sp
group.
Membership
objects
that
describe
the
given
site
users,
membership
of
site
groups,
then
any
azure
ad
groups,
the
user
is
a
member
of
a
retrieved
by
this
next
line,
maps
to
the
corresponding
site
users
and
then
check
for
membership
for
site
groups
as
well.
A
A
First
of
all,
the
function
calls
and
awaits
the
get
sp
user
and
ksp
user
and
members
group
promise,
which
we
saw
earlier
this
retrieves
the
site
user
information
based
on
the
given
site
user
id
along
with
the
site
group
membership
information
that
we
cached
you
can
see.
I've
had
to
do
a
little
bit
of
casting
here
to
try
and
get
access
to
the
eyesight
group
info
array.
A
And
now
we
look
at
how
the
azure
ad
groups
are
mapped
to
site
users
and
checks
for
site
group
memberships.
This
logic
is
handled
by
the
populate
aad
groups
as
sp
users
function,
which,
using
the
given
email
address,
retrieves
the
guides
of
the
azure
ad
groups
that
the
user
is
a
member
of.
So
here
we
can
see
we're
calling
graph
dot
users
get
by
id
and
we'll
return
an
array
of
guides.
A
So
now
we
get
back
to
the
original
problem
for
the
purchase
order
solution.
Using
this
last
piece
of
code,
we
can
now
retrieve
an
array
of
all
the
site,
user
and
group
ids
for
remember
staff.
So
armed
with
these
ids,
it's
now
possible
to
examine
the
rules
in
the
purchase,
order,
limits
list
and
filter
those
which
apply
to
a
particular
staff
member.
A
So
that
concludes
this
demonstration
on
the
user
and
group
information
web
part
at
this
linked.
I
mentioned
some
properties
about
site,
user
and
site
group
ids
and
how
it
appears
they
might
be
stored
in
a
single
list
on
the
site,
but
for
now
thanks
for
watching
and
please
feel
free
to
get
in
touch
with
me.
If
you
have
any
questions.