►
Description
In this 14-minute developer focused demo, the third session in Sébastien Levert’s MGT series. This session focuses on the Microsoft Graph People control and options for customization. See how to use the People component to display a group of people or contacts (photos or initials). Find people trending around you, users from a group or array, show their presence, see managers and direct reports. Build a custom People component with custom templating. See code and rendering side-by-side. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 11, 2022.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Documentation - People component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/people
• Playground – People component | https://mgt.dev/?path=/story/components-mgt-people--people
• Repo – Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/MGT/docs
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn
Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December, 2021
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022
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
Folks,
today,
we
will
be
moving
on
with
our
journey
of
discovering
all
the
microsoft
graph
toolkit
components.
In
the
last
couple
of
sessions
we
did
over
the
last
four
or
five
community
calls.
We
went
through
some
of
the
components
and
today
we
will
be
continuing
with
the
people
component,
so
feel
free
to
ask
any
questions
in
the
chat
I
might
take
them
offline
after
I'm
done
quick
reminder.
What
is
the
microsoft
graph
toolkit?
The
toolkit
is
a
collection
of
reusable
framework,
agnostic
components
and
authentication
providers
that
allow
you
to
work
with
microsoft
graph.
A
So
basically,
if
you're
building
on
top
of
react,
angular
view
or
any
other
web
framework
you're
thinking
of
we
work
with
them
and
we're
providing
fully
functional
components
that
are
already
connected
to
graphs.
So
it's
not
you
don't
have
to
provide
any
of
the
data
doing
any
of
the
calls
we
do.
We
take
care
of
that
for
you.
A
Why
would
you
care
about
the
toolkit?
First?
It
really
cuts
on
your
development
time.
It
helps
you
easily
add
any
ui
components
that
would
access
microsoft
graph
to
your
app
with
just
a
very
few
lines
of
code.
It's
beautiful,
but
it's
flexible
also,
so
we
respect
the
m365
look
and
feel
being
as
fluent
as
we
can
in
the
way
that
we're
designing
our
components,
but
we're
also
allowing
you
to
bring
in
some
customizations
around
styling
templating
logic,
also
that
you
might
change
on
top
of
what
we're
shipping
and
also
we're
working
everywhere.
A
People
is
a
way
to
display
a
group
of
people
or
contacts
by
using
simply
their
photos
or
initials,
and
by
default
it
will
always
display
the
most
frequent
contacts
for
the
sign
in
user.
So
without
any
further
ado,
let's
go
on
to
some
of
the
codes.
Let
me
actually
here,
I'm
going
to
start
fresh
from
here,
so
we
have
a
simple
html
file
that
was
built.
A
That
html
file
is
the
one
we've
been
using
for
the
last
couple
of
sessions,
so
I'll
invite
you
to
go
see
some
of
our
previous
videos
that
we
did
on
this,
and
we
have
already
a
msl
provider,
the
m-style
provider.
Here
the
role
of
this
amstel
provider
is
basically
just
to
provide
authentication
to
microsoft,
graph
with
the
id
of
your
azure
active
directory
application,
the
scopes.
So
what
are
the
permissions
that
your
app
will
require
and
a
simple
login
component
to?
A
Each
components
will
have
different
set
of
scopes
or
permissions
that
it
will
require
and
the
best
way
to
figure
out
what
are
the
scopes
that
are
required.
You
can
always
go
to
our
documentation,
documentation
which
is
ak
dot.
Ms
slash
mgt,
slash
docs
and
it's
gonna
go
here,
I'm
able
to
open
the
table
of
contents
and
you
will
be
able
to
go
and
see
all
the
components.
For
example,
today
we're
going
to
talk
about
the
people
component.
A
What
we're
going
to
find
here
is
just
mgt
people
with
the
maximum
of
users
around
me
and
that's
it.
No,
nothing
specific!
Nothing
is
specified
here.
It
just
runs
with
what
we
have.
So
what
I'm
going
to
hit
save,
and
now
we
have
this
simple
people
component
right
here
and
you
see
I
have
five
persons
that
are
very
close
to
me
that
are
trending
to
my
users,
but
I
also
have
plus
five.
So
it
means
that
we
did
not
load
all
of
them.
A
I
could
go
here
and
change
it
to
eight,
for
example,
and
automatically
it's
going
to
load
the
right,
the
right
folks
right
there,
something
that
is
great.
We
have
so
little
space
in
these
avatars
that
what
we
can
have
by
default
is
when
you
hover
on
top
of
somebody
you're
going
to
get
the
full
person
card
as
built
on
top
of
it.
So
that's
really
really
cool.
A
Now.
You
might
also
want
to
do
the
same
thing
in
a
way
to
describe
people
that
live
in
a
group.
So,
for
example,
here
I'm
going
to
add
an
mgt
person
or
entity
story
entity,
people
with
a
specific
group
id
this
group
id
should
be
a
group
id
you
get
somewhere,
maybe
using
a
graph
call
or
even
going
to
your
azure
active
directory
setup
and
find
the
actual
id
of
a
group.
A
And
now
I'm
gonna
put
a
show
max
f10,
and
here,
when
I
hit
save
you're
gonna,
see
it's
gonna
go
and
find
all
the
users
that
are
in
this
specific
group.
In
this
case,
it's
our
us
sales
group.
So
here
let's
say
I
want
to
see
there's
a
max
of
10,
but
I
only
have
a
max
f3.
The
same
thing
will
happen
there,
where
you're
going
to
have
a
plus
sign
happening
right
after
now,
you
also
have
a
way
to
identify,
not
by
group
id,
but
maybe
by
user
ids.
A
What
can
we
do
also
well
something
that
is
super
useful,
especially
in
these
situations
is,
let
me
go
back
here
and
let
me
open
up
teams
of
microsoft.com
teams
is
where
your
presence
will
be
indicated,
so
it
could
be
really
useful
to
bring
in
the
presence
of
somebody
inside
these
things
to
to
know
if
they
are
available
right
now.
So
now
I'm
logged
in
as
my
own
user
here
and
in
a
couple
of
seconds
it's
going
to
lie
on
green.
A
So
now
that
I
can
go
back
here
and
add
a
new
component,
a
new
component.
Again,
I'm
going
to
paste
in
this
again
the
same
kind
of
html
around
it,
but
I'm
going
to
use
the
same
people
entity,
people
with
the
show
presence
to
true.
So
here
it's
gonna
look
around
me
all
the
users
that
are
trending
for
this
current
user,
which
is
me
and
but
show
the
presence.
If
I
hit
save
now,
you
see
that
seb
is
green.
It
means
that
that
user
is
currently
available.
A
Maybe
you
don't
want
to
have
the
the
hover
card,
because
the
hover
card
also
brings
a
lot
of
information.
So
how
do
we
want
to
limit
that?
Well,
there's
a
way
to
set
up
the
person
card
to
be
none.
So
when
I'm
going
to
hit
save
here
when
I'm
using
the
mgt
purse,
people
with
the
person
card
to
none
now
I
don't
have
anything.
But
what
shows
up
is
the
name
so
we're
all
always
making
sure
that
from
an
accessibility
standpoint,
everything
is
well
covered.
Let
me
maybe
zoom
in
a
little
bit
here.
A
A
So
what
I
did
here
is,
I
used
the
resource
property,
so
you
can
point
to
any
user
resource
endpoints
in
this
case,
slash
me
slash
direct
report,
so
what
it's
going
to
do
here?
It's
going
to
highlight
all
of
my
direct
reports
that
are
all
basically
all
reporting
to
sebastian.
So
when
I
hit
save
you're
going
to
see,
I
have
three
different
direct
report.
There's
raul
there
is
stan
and
there
is
lydia
in
this
case.
All
of
this
without
ever
really
writing
any
line
of
code
right.
A
So
you
all
have
this
part
of
the
mgt
people
stuff.
Now
something
you
might
want
to
do
also
is
do
some
code
that
would
fill
in
the
data
of
this
component.
So,
for
example,
let
me
add
this
component
here
so
here
I
have
an
mgt
people
with
an
id,
so
I
can
reference
this
people
right
there.
So
let
me
do
the
following:
I'm
going
to
go
here
and
I'm
going
to
do
a
little
bit
of
javascript
in
my
javascript,
I'm
going
to
use
a
method
called
load
manager.
A
A
A
I'm
gonna
set
the
people
on
this,
so
here
you
see
we
have
a
dot
people
property.
That
now
just
appeared
that
allows
me
to
bring
in
the
direct
reports
that
value
so
basically
what's
coming
from
back
from
graph
or
it
could
also
be
coming
not
just
from
graph
right.
It
can
come
from
any
api
that
you
have
on
a
third-party
source
or
a
public
rest
api.
Then
we're
going
to
save
on
this
automatically.
Now
you
see,
I'm
the
only
one
that
actually
reports
to
that
to
my
manager.
A
A
So
how
do
you
learn
about
it
all
of
the
documentations?
We
have
always
highlights
an
area
here
that
provides
custom
templates.
So
basically,
here
you
can
override
any
of
of
them,
including
the
default
one,
the
default.
So
it's
basically
the
list
of
person.
So
what
you
can
do
is
to
build
something
that
looks
like
this,
where
you
say
the
following.
Let
me
go
back
here
and
I'm
going
to
put
it
in
the
code
right
here.
A
You
say
that
in
my
mgtt
people
that
doesn't
have
any
and
you
could
have
any
properties
here,
my
default
template.
I
want
to
have
a
ul,
so
an
unordered
list
and
for
each
person
you
can
have
a
way
of
referencing
and
looping
through
data.
I
want
to
be
able
to
loop
in
an
mgt
person,
I'm
going
to
have
a
title.
A
If
the
display
person,
the
display
of
the
person,
is
megan,
I'm
gonna
say,
look
it's
megan
and
if
not,
I'm
just
gonna
display
the
regular
display
name,
the
job
title
and
the
department,
and
when
I
hit
save
on
this
now,
you
see
how
I
was
able
to
loop
through
all
of
these
components,
coming
directly
back
from
graph
and
build
my
own
display
on
top
of
it.
So
that's
really
one
of
the
biggest
value
of
the
graph
toolkit
where
it
provides
default
components,
but
also
customized
components
like
you'd
like
to
have
them.