►
Description
In this 26-minute developer focused demo, the third session in Sébastien Levert’s MGT series. This session focuses on the Microsoft Graph Person control and many options for customization. See how to use the Person component to get profile and image information on you, on another, on a group of others, on an other’s manager, presence, and on a person outside Graph. As well see customizing for rendering (styles) and for events. See code and rendering side-by-side for each capability presented. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 4, 2022.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Tools - Microsoft Graph Toolkit Playground | https://mgt.dev/?path=/story/components-mgt-person--person
• Documentation - Person component in the Microsoft Graph Toolkit | https://docs.microsoft.com/en-us/graph/toolkit/components/person
• 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
• First session - 7 December, 2021 - Discover the Microsoft Graph Toolkit – Sébastien Levert (Microsoft) | @sebastienlevert
• Second session – 14 December 2021 - Microsoft Graph Toolkit – Using Login Component in your solutions – Sébastien Levert (Microsoft) | @sebastienlevert
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
Hi
everybody,
my
name
is
sebastian.
I
am
a
senior
program
manager
on
the
microsoft
craft
team.
Today
we
will
be
going
a
little
bit
a
little
bit
deeper
into
our
endeavor
or
journey
to
understand
all
the
different
components
that
are
creating
the
overall
experience
of
the
microsoft
graph
toolkit
before
we
go
into
the
specific
component
of
today.
A
I
want
to
do
just
a
quick
recap
of
what
is
the
microsoft
graph
toolkit
so
first,
the
graph
toolkit
is
a
collection
of
reusable
and
framework
agnostic
components,
but
also
we
provide
authentication
provider
for
accessing
and
working
with
microsoft.
Graph
think
about
the
graph
toolkit
as
a
super
easy
way
to
get
controls
dropped
into
your
web
application
that
are
automatically
bound
to
microsoft
graph.
So
you
don't
have
to
do
all
of
the
calls.
You
don't
have
to
do
any
of
the
interactions
with
graph.
We
provide
them
out
of
the
box.
A
The
components
are
fully
functional.
They
are
customizable
and
today
we're
going
to
really
really
focus
on
that
customization
story
and
they
work
with
any
framework
and
work
on
all
modern
browsers.
What
does
it
mean?
It
means
that,
if
you're
using
plain
html
you're
more
than
welcome,
if
you're
using
react,
you're
more
than
welcome
same
thing
with
angular
or
vue
or
any
other
html
or
javascript
framework,
it
also
works
on
any
type
of
modern
browsers,
like
edge
chrome,
firefox,
oprah
or
any
other
browsers,
even
the
ones
from
the
mobile.
A
So
why
would
you
use
the
toolkit
first?
It
really
cuts
your
development
time,
I'm
a
very
lazy
developer.
I
don't
like
to
code
something
that
was
already
made
a
thousand
times
before
me,
so
I
love
to
use
something
that
is
already
available
out
there.
That's
exactly
what
the
graph
toolkit
provides
by
just
adding
ui
components
to
any
of
your
web
apps,
it's
beautiful,
but
it's
also
very
flexible.
A
It
means
that,
if
you're
building
something
that
looks
like
m365
or
you
want
to
make
it
part
of
a
team's
app
and
really
have
the
look
and
feel
of
microsoft
teams
or
of
microsoft,
outlook
or
even
integrated
within
microsoft,
sharepoint.
Well,
you
can
it's
out
of
the
box.
It's
all
there.
We're
built
on
the
fluent
ui
were
built
using
the
same
standard
that
other
applications
at
microsoft.
A
But
if
you
need
it
to
be
fully
customized,
you
can
also
do
it,
so
you
can
override
all
of
our
customization
and
all
of
our
styling
to
make
it
a
little
bit
different
and
it
works
everywhere.
So
you
want
to
host
it
inside
the
web
app
you
want
to
host
it
inside
a
teams
tab.
You
want
to
host
it
inside,
even
an
electron
application.
A
You
can
do
it
anywhere
so
today,
what
are
we
going
to
talk
about
we're
going
to
last
week
we
discussed
the
login
component,
which
I
would
consider
it
our
foundation
component,
where
you
log
into
microsoft
graph.
So
that
way,
you
you
get.
You
obtain
an
access
token
that
you
can
use
to
connect
to
microsoft
graph
and
do
really
cool
things.
Today
we
will
be
focusing
on
the
mgt
person
component.
A
A
So
let
me
close
that
guy
here
and
let
me
go
right
here
in
my
code
I
have
an
index
of
html,
that's
where
we
left
the
last
time
or
approximately,
where
we
left
the
last
time
where
I
have
a
very
simple
html
and
let
me
maybe
zoom
in
a
little
bit.
I
have
a
very
simple
html
file
where
I
have
very
limited
styling
in
here.
Where
I
have
my
provider.
A
What's
the
email
address,
I'm
using
it's
great,
it
does
not
provide
a
lot
of
value.
It
provides
connectivity
to
microsoft
graph,
which
is
why
we're
here,
but
how
can
we
really
push
it
to
the
next
level?
Well,
today,
we're
going
to
talk
about
the
mgt
person
component
and
how
we
can
really
use
it
in
a
way
that
I
would
say
is
super
super
super
useful
for
everybody
to
build
an
app.
A
So
when
I
control
save
here
we're
going
to
see
the
default
experience
of
the
mgt
person,
let
me
go
here
and
actually
let
me
do
this
and
I'm
going
to
just
do
that
right
here,
so
that
way
we're
going
to
have
them
side
by
side.
So
here
you
see,
we
have
the
same
web
experience,
but
now,
just
underneath
you
have
the
user
right
here
with
my
face
when
I
hover
on
top
of
it,
there's
a
tooltip
with
my
name
also.
So
all
of
these
components
are
also
built
with
accessibility
in
mind.
A
A
So
here
I'm
going
to
use
this
example
here
we're
going
to
have
an
entity
person
where
the
person
query
will
be
alex.
Wilbur,
so
think
about
this
as
a
search
capability
where
you
can
just
drop
in
a
name
drop
in
an
email
drop
in
a
user
id
and
automatically
mgt
will
be
able
to
understand
the
context,
use
that
call
graph
to
get
the
results
back
and
then
afterwards,
when
I
hit
save
automatically,
I'm
gonna
have
alex
here
being
shown
right
here
right
there
right
now
I
have
aw.
A
It
automatically
got
the
the
letters
from
the
initials.
Actually,
if
I
do
a
hard
refresh
here,
I
should
get
at
some
point.
I'm
gonna
have
to
check
why
I
don't
get
the
pictures
here,
but
I
should
get
the
picture
also
of
alex
wilbur
in
that
case.
So
that's
a
second
example.
If
you
want
to
be
a
bit
more
specific
in
what
you
want,
you
can
actually
specifically
ask
hey.
I
want
a
person
query,
let's
say
megan
bowen
in
that
case,
but
I
don't
want
the
avatar.
I
really
just
want
the
initials.
A
I
want
to
force
it
to
be
the
initials
and
that's
why
you
can
always
use
these
attributes
to
really
customize
the
way
that
the
mgt
person
component
will
behave
in
this
situation.
So
if
I
hit
save
automatically,
megan
should
come
up
here.
It's
interesting
why
the
images
are
here,
I'm
gonna
have
to
or
they're
not
here,
gonna
have
to
check
why
this
is
not
happening,
which
is
actually
quite
interesting.
A
You
always
also
have
the
ability
now
we're
looping
in
one
single
user
at
a
time,
but
there's
always
ways
to
bring
multiple
users
at
the
same
time.
So,
for
example,
you
can
do
this
and
have
multiple
mgt
person
next
to
each
other.
We're
going
to
see
another
example
of
this
in
in
a
future
component
on
how
we
can
actually
make
it
happen
in
a
simpler
way,
but
sometimes
this
should
could
work
with
providing
the
value.
A
So
when
I'm
going
to
hit
save
you're
going
to
see
how
beautiful
this
is,
this
is
an
experience
that
we
see
a
lot
in
m365
on
a
team's
channel
or
even
in
sharepoint,
with
the
members
of
a
site.
So
you
can
really
customize
it,
and
here
we're
not
doing
any
sort
of
like
black
magic
or
whatever
we're
really
just
using
css
to
be
able
to
position
all
of
our
components
next
to
each
other.
A
In
a
little
bit
more,
I
would
say
beautiful
way
now,
there's
other
ways
that
we
can
also
work
with
the
person
component,
one
of
them
being
to
define
the
component
but
fill
it
using
javascript.
Maybe
your
data
is
coming
from
a
call
to
the
microsoft
graph
and
you
want
to,
let's
say,
display
the
manager
of
someone.
A
You
won't
be
able
to
do.
Slack
me,
slash
manager
like
this,
for
example,
that's
not
going
to
be
supported
or
yet.
So
how
would
you
do
that?
Well,
you
can
always
use
the
following,
so
let
me
place
in
an
example
right
here
from
so,
for
example,
I'm
going
to
set
an
entity
person
that
has
nothing
so
no
queries,
no
details.
No
whatever,
but
I'm
going
to
specify
an
id
of
manager.
A
So
how
will
I
actually
use
this?
Well,
what
I'm
going
to
do
is
I'm
going
to
go
at
the
bottom
of
my
page,
where
I
have
a
script
tag
in
that
script,
tag,
I'm
going
to
add
a
function
that
function
will
be
load
manager.
Let
me
just
zoom
in
a
little
bit
on
that
one,
while
we're
here
the
load
manager
function
will
validate
here.
A
Am
I
already
signed
in
if
I'm
signed
in
it
means
that
I
can
call
into
microsoft
graph,
and
here
I
will
be
able
to
grab
the
authenticated
microsoft
graph
client
from
our
javascript
sdk.
This
means
I
can
call
any
endpoints
on
graph
that
has
been
pre-authorized
and
I
can
afterwards
play
with
its
data.
So
here
what
I'm
gonna
do
I'm
gonna
call
the
api.
Slash
me,
slash
manager,
I'm
gonna
get
the
results
from
that
api
and
then,
with
the
result,
I'm
going
to
set
the
user
id
of
this
element.
This
element
here
is
our
manager.
A
Right
is
the
the
mgt
person
component.
That
is
here,
I'm
going
to
set
the
user
id.
What
is
html
elements?
Don't
have
user
ids?
Well,
usually
they
don't.
So
why
can
we
do
that
with
the
graph
toolkit?
Well,
the
graph
toolkit
creates
all
of
these
components
as
web
components,
so
we
really
enrich
the
dom
the
html
dom
of
our
page
with
new
properties,
including
user
id.
So
now
I
can
get
the
id
from
my
results.
A
In
that
case,
being
the
manager-
and
I
get
just
gonna-
set
it
to
the
user
id
and
automatically
because
there's
a
new
property
that
was
set
on
the
control
automatically
it's
going
to
reload
do
the
call
it
needs
to
the
microsoft
graph
and
afterwards
just
display
the
right
results.
So
if
I
go
here-
and
I
make
sure
that
when.
A
I'm
actually
I'm
gonna
just
put
it
in
here
just
to
make
sure
that
I'm,
when
I'm
signed
in
I'm
gonna
load
the
manager
so
automatically
I'm
gonna
load
the
manager
as
soon
as
I'm
signed
in
I'm
going
to
call
into
that
function,
I'm
going
to
hit
save
here,
you're
going
to
see
that
when
I'm
going
back
here
now
my
manager
is
megan,
so
it
found
my
manager,
it
got
the
right
user,
and
now
I
was
able
to
emit
a
call
to
microsoft
graph
to
grab
this
person
directly
from
here.
That
is
really
cool.
A
So
let
me
continue
with
another
scenario
that
we
can
do
with
the
graph
toolkit
and
the
person
component.
So
let
me
go
right
here
now.
We
have
seen
a
lot
of
examples
with
just
the
face
of
persons,
but
I
think
it's
relevant
to
do
more
than
that.
So
let's
look
at
all
the
options
that
we
have
the
first
one
being
that
I
want
to
see
a
single
line
of
information.
A
So
it
really
brings
this
experience
where
I
can
see
the
name
of
that
person,
but
I
can
also
do
you
know
what
I
want
to
see
two
different
lines
for
that
person.
So
let
me
add
another
sample
where
I
just
say
I
want
to
view
two
lines
and
now,
if
I
go
here,
I
see
my
name.
We
see
that
the
avatar
just
went
a
little
bit
bigger,
because
now,
when
we're
looking
at
two
lines,
we
want
to
maybe
use
a
little
bit
more
screen
real
estate.
A
So
in
that
case
I
can
show
the
name
and
the
the
the
email
that
was
provided.
These
are
all
defaults
in
ngt,
so
we
automatically
display
the
name
of
the
person,
the
full
name
of
the
person,
the
email
and
the
third
one,
which
is
when
we're
using
the
three
line
is
the
title
or
the
job
title
of
that
person.
A
But
let's
be
honest,
sometimes
that
information
is
not
what
you
want
to
display
to
the
users.
So
what
do
you
want
to
do?
Well,
you
want
to
use
some
of
our
properties
that
exist
natively
on
the
mgt
person
component,
for
instance,
the
line
1
property.
The
line
2
property
and
the
line
3..
So
if
you
don't
specify
any
of
them,
we're
going
to
go
back
to
defaults
and
if
you
specify
one
of
them
we're
going
to
use
them
as
a
way
to
get
access
to
the
data.
A
A
And
it's
reloading
quickly
and
now
you
see
sebastian
senior
program
manager
with
these
here.
So
you
see
how
customizable
the
component
is.
You
really
can
match
whatever
you
want,
based
on
the
properties
that
are
available
on
microsoft
graph,
but
let's
say
that
your
data
is
not
necessarily
all
available
on
microsoft
graph.
Maybe
you
want
to
do
kind
of
a
mashup
of
data
from
graph
and
data
from
somewhere
else.
Well,
how
can
you
use
this
component
to
display
data
from
a
hybrid
scenario
or
even
from
a
fully
disconnected
scenario?
A
A
A
A
So
you
know
when
you're
in
m365
and
you
hover
on
top
of
somebody's
name,
you
often
will
see
a
person
card
showing
up
well
here,
that's
exactly
what
we
provide
also
as
part
of
mgt,
and
we
see
them
really
really
sitting
next
to
each
other.
So
when
I'm
going
to
hover
on
top
of
my
face,
I
will
be
able
to
see
more
details
about
that
person
or
about
a
remote
person
to
get
who
they
are
reporting
to.
A
A
Oh
there's
a
new
thing
here,
I
have
sebastian
the
name
of
the
title
of
the
person
we
don't
show
yet
the
email
you
can
send
an
email,
so
you're
going
to
have
a
mail
too
it's
going
to
open
up
directly
in
outlook
or
whatever
the
client
you're
using.
You
can
start
a
chat.
It's
going
to
open
up
automatically
microsoft
teams,
but
also
I
can
do
this
and
now
I
can
find
information
much
more
details
about
this
person,
so
here
a
couple
of
files.
A
Now
it's
my
screen.
That
is
a
little
bit
too
zoomed
in
in
that
case,
but
you
can
go
here.
You
can
see
all
the
the
structure
who
is
reporting
to
who
the
files,
the
user
information,
all
of
them
as
part
of
that
super
simple
ways
of
just
saying,
hey,
I
want
to
have
the
person
card
we're
going
to
cover
the
person
card
in
a
future
component
spotlight,
but
I
wanted
to
show
you
how
powerful
this
is
now,
let's
talk
about
really
powerful.
A
What's
the
one
thing
you
want
to
know
when
you're
looking
at
somebody
at
somebody's
face,
you
want
to
know
if
that
person
is
currently
available
and
that's
exactly
what
you
can
do
here,
so
you
can
use
the
presence
and
automatically
we're
going
to
query
for
that
user's
presence.
So
let
me
go
here
and
let
me
go
into
team
just
to
make
sure
I'm
I'm
logged
into
microsoft
teams.
A
Oh
yeah,
that's
exactly
it!
I
it
looks
like
I'm
that
tenant
is
in
a
weird
state,
I'm
so
sorry
for
that.
That's
not
that
too
bad
for
now,
as
we're
gonna
see
it
it's
offline,
but
it
would
work
if
I
was
fully
connected.
So
let's
pretend
I'm
connected,
and
now
here
it
says
I'm
offline.
But
if
I
was
connected,
you
would
see
a
green
one.
If
you
were
busy,
you
would
see
the
the
red
dot,
so
you
will
really
be
able
to
see
that
information
in
a
super
super
super
quick
way.
A
Something
I
mentioned
earlier
with.
I,
which
I
think
is
key
to
our
story
in
mgt-
is
to
be
able
to
custom
style
our
components.
So
let
me
start
with
this,
so
I
bring
back
a
simple
entity
component
with
three
lines:
I'm
gonna
hit,
save
I'm
gonna,
go
at
the
bottom
and
now
basically
regular
component
here,
nothing
crazy,
just
the
same
thing,
but
as
you
can
see,
I'm
using
the
custom
style
class,
I
don't
have
a
custom
style
class
right
here
at
the
top.
I
I
don't
have
that.
A
So
how
do
we
do
custom
styling
with
mgt?
Well,
let
me
show
you:
you
will
always
be
able
to
use
the
following,
so
I'm
gonna
do
a
mgt
dash
person,
dot,
custom
style,
so
basically
what
it
means.
It
means
that
any
element,
any
component
called
entity
person
that
has
a
custom
style
class,
will
apply
these
styles
and
we
offer,
by
default
a
set
of
overrideable
variable
that
you
can
use
to
customize
a
style.
Let
me
show
you
a
set
of
them
right
here
and
I'm
going
to
reference
all
the
documentation.
A
Just
after
this,
or
I
can
say
you
know
what
my
avatar
I
want
it
bigger.
I
want
to
have
a
border.
I
want
to
have
a
different
radius
than
what
you
provide
the
the
initials
color.
I
want
them
to
be
green.
The
background
needs
to
be
this
one.
The
presence
color
is
different.
I
want
to
have
a
bigger
font.
I
want
to
have
a
different
line.
A
Three.
I
want
to
have
a
different
line.
Two
when
I
have
more
detail
spacing
and
when
I
hit
save
now,
you're
going
to
see
that
my
super
customized
mgt
person
is
now
very
different.
Very
christmas
themed
looks
like
it,
but
in
this
case
it
really
provides
all
the
value
that
you
need
between
having
a
very
m365,
look
and
feel,
but
also
having
whatever
you
need,
look
and
feel
for
your
application.
A
So
the
last
thing
that
I
wanted
to
mention
today
is
not
only
you
can
do
custom
styling,
but
you
can
also
add
custom
events.
If
you
want
to
code
a
little
bit
more
and
really
go
super
deep
in
the
customization
options
of
mgt
and
the
mgt
person,
you
always
have
the
ability
to
go
in
create
an
mgt
person.
In
that
case
I
specified
a
specific
id,
so
I
can
reference
it
and
now
I
can
just
say:
hey.
A
You
know
what,
in
my
javascript
I'm
going
to
go
at
the
end
of
my
javascript
here,
I'm
going
to
go,
I'm
going
to
do
a
document,
I'm
going
to
select
my
custom
events,
which
is
the
one
I
just
created
and
I
will
be
able
to
say
you
know
what,
when
someone
clicks
under
line
one
I
want
to
be
able
to.
In
that
case
I'm
logging
something
to
the
console,
but
I
could
launch
a
new
app
alert
something
go
to
the
next
screen
or
whatsoever.
So
you
can
really
customize
the
experience.
A
So
when
I
hit
save
here,
I
go
at
the
bottom
and
let
me
open
up
my
here.
That's
what
I
want
and
if
I
click
on
the
first
line,
you're
gonna,
see
here
that
I
just
pasted
in
the
information
that
I
got
from
graph
about
the
specific
person,
so
you
have
the
entire
data
that
is
coming
back
from
microsoft
graph.
A
So
I
wanted
to
stop
here
for
today.
Let
me
go
back
to
slides
just
for
a
moment.
A
couple
of
resources
are
repo
for
for
graphics,
aka,
lms
mgt.
All
our
documentation
is
available
on
ak
dot.
Ms
slash
mgt,
slash
docs,
and
if
you
want
to
look
at
the
the
samples
I'm
creating
for
this
specific
series,
you
can
always
go
to
ak
dot.
Ms
slash
mgt,
slash
sandbox.
I
hope
this
was
useful
back
to
you,
vesa
excellent.
Thank
you
seb
on
that
one.