►
From YouTube: Discover the Microsoft Graph Toolkit
Description
In this 21-minute developer focused demo, Sébastien Levert shares the first of several sessions on the Microsoft Graph Toolkit (MGT). What is MGT and why use it? Step through 12 major components – purpose and how invoked. Each component brings a wealth of information securely to your app. Look at developer resources – Repo, documentation, Playground, and training. Subsequent sessions to go deeper into components and settings; customization with styles, templates and caching; and integrations with React, SPFx, and providers. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 7, 2021.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Repo – Microsoft Graph Toolkit | https://aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://aka.ms/MGT/docs
• Sandbox - Microsoft Graph Toolkit Playground | https://aka.ms/MGT/Dev
• Learn - Develop apps with the Microsoft Graph Toolkit | https://aka.ms/mgt/learn
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,
everybody,
my
name
is
sebastian.
I
am
a
senior
program
manager
on
the
microsoft
graph
team
and
today
is
going
to
be
the
first
of
a
a
couple.
We
don't
know
exactly
how
many,
but
we
want
to
go
through
some
of
the
all
of
the
features
that
one
of
the
tools
we
offer
as
part
of
the
microsoft
graph
program,
which
is
called
the
microsoft
graph
toolkit.
A
So
today,
what
we're
going
to
do
is
we're
going
to
get
started
with
the
microsoft
graph
toolkit
we're
going
to
look
at
some
resources
that
we
have
some
of
our
documentation,
our
playground,
a
high
level
review
of
all
the
different
components
and
then
afterwards,
the
next
couple
of
sessions
we're
going
to
go
a
little
bit
deeper
in
each
of
these
components,
the
providers
and
all
of
that.
So,
let's
start
with
potentially
the
question
you're
asking
yourself
is:
why
do
I
see
a
giraffe
on
my
screen
right
now?
A
So,
let's
go
a
little
bit
deeper
and
talk
to
you
about
what
is
the
microsoft
craft
toolkit
microsoft.
Graph
toolkit
is
a
collection
of
reusable
framework,
agnostic
components
and
authentication
providers
for
accessing
and
working
with
microsoft
graph.
The
components
are
fully
functional
customizable
and
they
work
with
any
web
framework
on
all
modern
browsers.
A
So
what
does
it
mean
exactly?
It
means
that
the
toolkit
is
for
you
a
super
simple
way
to
get
access
to
data
that
lives
inside
microsoft,
graph
and
glue
that
data
or
pin
that
data
inside
your
web
applications.
You
might
be
using
angular,
you
might
be
using
react.
You
may
be
using
any
type
of
html
framework.
We
work
with
all
of
them.
You
might
be
using
your
own
web
app,
you
might
be
using
your
own
themes,
application
or
even
spfx
framework
web
part,
and
you
want
to
bring
some
of
that
data.
A
Well,
we
work
with
all
of
them.
So
during
the
couple
of
next
weeks,
we're
going
to
really
cover
all
the
breadth
and
depth
of
the
microsoft
graph
toolkit
something
really
important.
It
works
everywhere
as
long
as
you're
on
the
web.
You
are
good
to
go
and
you're
fully
covered,
but
why
would
you
use
the
microsoft
graph
toolkit?
A
First
of
all,
if
you
are
like
me-
and
I
love
to
say
that-
and
I
don't
mean
this
in
a
in
a
in
a
mean
way,
but
I'm
lazy,
I'm
a
developer
and
I'm
lazy.
I
don't
want
to
build
and
rebuild
and
rebuild
again
and
rebuild
again
the
same
components
over
and
over.
I
want
to
be
able
to
leverage
a
library
of
controls
that
delivers
the
value
that
I'm
expecting,
but
also
that
brings
all
the
fully
functional
value
out
of
it.
A
So,
for
example,
in
the
case
of
the
microsoft
graph
toolkit,
I
just
want
to
add
some
ui
components
in
just
a
few
line
of
code.
I
don't
want
to
go
and
start
building
it
caring
about
performance,
caching,
batching
authentication.
All
of
that.
No,
I
just
want
to
bring
the
the
ui
components
and
work
with
them
right
of
the
bat.
A
I
also
want
to
build
something
that
is
beautiful,
but
it's
flexible
and
then
again,
I'm
very
lazy
and
on
top
of
that,
as
a
developer,
I'm
not
the
best
designer
in
the
world.
So
when
I'm
using
the
microsoft
graph
toolkit
I'm
using
a
library
of
controls
that
look
like
exactly
the
microsoft
365
experience,
so
when
I
have
the
microsoft
365
experience
in
my
app,
it
means
that
my
users
are
used
to.
These
experiences
are
used
to
the
behaviors
that
underpin
these
components,
but
sometimes
like
any
app.
A
I
want
to
customize
just
a
little
bit
or
I
want
to
fully
customize
the
entire
experience.
So
what
does
it
mean?
Well,
it
means
now
that
you
can
have
the
basic
experience,
the
basic
m365
experience
as
part
of
the
toolkit,
but
also
where
you
can
add
your
own
css
and
your
own
templating
on
top
of
what
we
provide.
A
The
graph
toolkit
is
based
on
web
standards,
we're
not
specifically
using
one
ui
framework
like
react
or
angular
or
any
other.
We
are
using
web
components
which
are
part
of
the
web
standards.
It
works
on
any
modern
browser
with
any
modern
frameworks,
and
what
does
it
provide?
You
is
the
fact
that
you
can
use
it
in
any
type
of
apps
that
you're
already
building,
so
you
don't
have
to
relearn
a
new
framework.
You
don't
have
to
migrate
your
entire
app
to
a
framework
to
be
able
to
leverage
just
these
parts
of
the
microsoft
graph
toolkit.
A
A
The
login
component
is
just
an
html
tag,
as
you
can
see
at
the
bottom
mgt
dash
component-
that
is
a
simple
button,
also
offers
a
fly-out
to
know
who's
the
user.
That
is
connected.
What
is
maybe
the
role
of
that
user,
and
this
is
where
the
magic
starts.
It
automatically
facilitate
all
the
microsoft
identity
platform
authentication.
So
this
is
where
you're
going
to
go
in
and
log
in
to
your
underlying
back-end
system.
In
that
case,
which
will
be
microsoft,
graph
is
secured
by
the
microsoft
identity
platform.
A
So
that's
the
first
component
that
we
offer
the
second
component
that
we
offer
is
the
person
component.
The
person
component
really
brings
the
data
about
either
the
currently
connected
user
or
any
other
user,
and
it
displays
their
photos.
Their
email
address
and
a
bunch
of
other
person
details
the
the
title
of
that
person
and
it
could
even
be
customized
information
right
there
again.
A
This
should
be
a
good
scenario
for
you
or
you
want
to
see
all
the
persons
in
your
organization.
Well,
you
can
just
add
a
group
or
even
the
entire
org,
to
see
all
of
them
right
there
very
customizable.
You
can
use
the
mgt
dash
people
component,
you
drop
it
in
and
automatically
you
can
work
with
this.
A
The
person
card
the
person
card
is
for
me
the
most
significant
usage
in
in
of
the
microsoft
graph
toolkit
because
of
the
value
it
provides
everywhere
when
you're
in
m365.
You
always
have
that
super
rich
person
card
where
you
can
see
who
that
person
reports
to
maybe
the
current
files
they're
working
on
the
emails
you
have
with
that
person,
some
information
about
their
profile.
Well,
here
you
can
actually
do
this
here.
A
You
can
bring
that
person
and
have
the
full
expanded
experience
where
you
can
see
the
contact,
the
phone
number,
the
location
who
they
report
to
their
files,
their
skills,
their
experience
by
just
dropping
that
super
simple
mgd
person
card
to
your
screen
or
to
your
app.
So
the
mgt
dash
person
dash
card
component
is,
I
think,
one
of
the
easiest
way
to
deliver
value
right
in
there
into
any
of
your
app,
and
I
see
some
some
questions.
A
You
can
be
for
a
specific
group
or
for
a
set
of
groups,
maybe
you're
the
people
that
are
around
you
and
here
you'll
be
able
to
pick
these
people
think
about.
Maybe
you
want
to
start
or
you
want
to
invite
people
to
a
meeting
and
you're
using
that
control
to
identify
all
the
people
you
want
to
have
in
the
meeting
and
automatically
create
the
meaning
by
a
graph
or
you
want
to
start
a
site
and
automatically
create
a
site
based
on
these
people.
A
So
we
provide
the
search
experience,
but
also
all
the
fly
out
that
enables
you
to
search
with
the
type
ahead
automatically
in
there,
the
team's
channel
picker.
You
might
want
to
have
an
app
and
you
want
to
select
where
you
want
to
send
a
message,
or
maybe
you
want
to
add
a
tab
to
a
channel
via
graph
or
you
want
to
do
any
type
of
channel
related
operation.
A
But
here
we
offer
you
the
way
to
bring
a
team's
channel
picker
within
your
application
and
where
you're
gonna
be
able
to
take
that
information
and
share
it
and
send
it
to
that
the
channel
who
doesn't
live
within
their
agenda,
so
we
offer
a
way
to
see
an
agenda
in
a
very
visual
way.
What
are
the
meetings
times?
Who
are
the
in
the
attendees
of
that
meeting,
and
you
can
even
provide
extra
information
and
even
redefine
the
templates
to
make
it
look
exactly
like
you
want
it
to
be.
A
You
can
also
change
your
query
to
bring
your
entire
day
or
just
your
next
agenda
item
lots
of
different
configurations
that
can
happen
right
there,
planner
tasks.
Panel
tasks
are
great.
We
have
an
mgt
task
component
that
enables
the
users
not
only
to
view
but
also
to
act
on
task
by
adding
removing
completing
or
even
editing
tasks
for
microsoft,
planner.
So
you
can
just
drop
that
component
right
there
you're
going
to
be
able
to
add
tasks,
specify
to
which
plan
you
want
to
add
this
task
and
automatically.
A
It
would
be
great
to
have
it
in
your
app
right
there
and
we
have
the
exact
same
component
that
lives
within
the
to-do
task.
That
brings
it
exactly
within
the
microsoft.
Do
so
that's
a
very
personal
component,
so
it
only
works
on
the
user,
but
it
provides
that
richness
to
have
a
task
management
component
that
you
can
drop
on
any
type
of
surface
on
the
web.
A
The
file
component
file
component
is
used
to
represent
files
that
save
either
in
sharepoint
or
onedrive,
and
we
can
display
a
lot
of
the
information
like
the
file
name,
the
date,
the
author,
you
can
even
customize,
which
information
you
want
to
see
there,
the
icon
of
the
file.
You
can
also
do
this
with
folders.
You
can
also
use
the
expanded
version
of
the
mgt
file,
which
is
called
file
list,
which
brings
a
lot
of
files
together
in
a
single
pane
like
the
following.
A
The
mgt
file
list
is
basically
draw
allowing
you
to
browse
files
right
in
there
and
since
our
latest
release,
you
even
have
the
ability
to
upload
files
by
dragging
and
dropping
straight
onto
that
canvas
and
automatically
upload
the
file
in
the
corresponding
folder.
That
is
serving
these
files.
So
really
really
really
rich
experience
with
the
file
and
the
file
list.
A
A
The
get
component
allows
you
to
get
literally
any
type
of
data
within
microsoft,
graph
with
a
microsoft
graph.
So,
for
example,
you
see
we
don't
have
a
messages
or
an
inbox
type
of
component.
Well,
you
can
build
it.
So
we
have
this
entire
templating
engine
that
you
can
use
to
say.
Okay,
I
want
to
get
this
resource
within
graph.
In
that
case,
slash
me
slash
messages.
A
I
will
need
mail.read,
so
I
will
need
some
scopes
and
some
contents
to
that
specific
scope,
and
I
want
to
iterate
through
all
of
my
emails
and
show
them
right
in
the
ui
like
this.
So
how
great
is
this?
How
powerful
can
this
component
be?
We
believe
this
is
the
way
to
work.
You
can
build
your
own
and
even
if
you
are
building
your
this
within
react,
you
can
even
add
your
own
react
components
to
actually
serve
the
rendering
of
that
git
component.
Let
the
get
component.
A
Do
the
authentication
the
call
to
graph
the
caching
and
all
of
that
and
afterwards
passing
the
data
to
your
react
component,
we're
going
to
come
back
to
that
in
a
future
videos
right
there.
So
I
see
a
lot
of
pcf
comments
in
the
chat.
This
is
amazing
feedback
by
the
way.
Folks,
I'm
happy
to
hear
this.
A
It's
something
that
we
have
that
we
have
in
mind
the
back
of
our
mind
around
pcf
on
how
we
can
bring
the
craft
toolkit
there,
so
you
can
leverage
it
inside
your
own
power
apps
over
there.
It's
something
we
have
in
mind
I'll,
be
happy
to
share
more
when
we
have
something
specific,
but
I'm
happy
to
hear
that
there's
a
real
need
for
your
application,
so
that's
really
really
cool.
A
Let
me
show
you
something
very
quickly
before
we
jump
on
to
the
next
presenter,
I
want
to
be
respectful
of
their
time.
So
let
me
go
here
and
show
you
some
of
this
right
here.
So
now,
I'm
bringing
a
browser,
a
couple
of
really
powerful
tools
that
we
have
on
the
graph
toolkit
is
first
of
all.
Where
do
we
start?
A
A
Well,
it
means
that
you
can
use
your
own
skills
and
if
you
want
to
build
some
of
our
components,
you're
more
than
welcome
to
join
our
community
on
github
you're
also
welcome
to
log
in
any
of
the
issues
that
you're
going
through
and
if
you
want
to
bring
code
to
ourself.
I
I
like
bug,
fixes
or
whatsoever
you
can
absolutely
do
that,
so
that's
really
kind
of
our
home
base
for
the
graph
toolkit.
The
second
thing
you
might
want
to
do
is
aka
dot.
Ms
slash
mgt,
slash
docs.
A
This
is
our
full
documentation
on
our
microsoft
graph
toolkit.
That's
where
you're
going
to
know
how
to
use
the
components.
What
are
the
different
attributes
for
different
events?
How
you
want
to
do
advanced,
styling,
customizing,
the
templating
all
of
this
you're
going
to
have
all
of
this
like
how
to
get
started
with
toolkit
for
react
and
toolkit
for
spfx
build
your
first
app,
the
different
providers.
A
A
This
is
our
let's
call
it
our
playground.
This
is
where
you
can
start
and
really
play
around
with
our
components.
So,
let's
go
and
let's
look
at,
for
example,
the
mgt
person
component
that
we
have
so
here
you
have
a
visual
representation
of
all
the
components
right
on
the
left.
You
can
see
all
of
them.
You
can
see
different
ways,
for
example
all
the
person.
Maybe
you
wanted,
you
were
living
in
a
right
to
left
environment.
We
both
provide
these
two,
so
you
can
play
around,
but
here
which
is
really
cool.
A
This
is
like
a
full
playground
where
you
can
play
around,
so
I
can
say:
hey
you
know
what
here
I
want
to
have
two
lines.
I
want
to
have
three
lines
and
now
automatically
this
is
going
to
get
updated,
and
now
I
see
a
third
line
in
this
case.
It's
going
to
be
the
title
of
the
person
that
will
show
up
right
there.
A
When
you
want
to
go,
you
can
click
on
docs
and
automatically
you're
going
to
see
all
the
different
attributes
that
you
can
use.
So,
for
example,
here
I
see
show
presents
that's
really
cool.
So
let's
go
back
here.
Let's
go
back
to
our
canvas
and
I'm
going
to
add,
show,
presents
and
now
well.
It
looks
like
we
might
have
a
an
issue
here
around
our
my
user,
but
you
see
it
adds
automatically
a
present
if
the
user
was
connected.
In
this
case,
the
user
is
offline.
A
If
the
user
was
connected,
it
would
automatically
get
that
user
to
be
green
or
red
or
yellow
or
away
or
whatsoever.
So
you
can
really
play
around
with
this
and
even
totally
change
the
way
that
you
want
to
build
your
application.
So
this
is
a
great
example
of
how
you
can
get
started
with
the
microsoft
graph
2
kit,
because
you
don't
have
to
install
anything,
you
don't
have
to
get
anything
in
any
apps,
any
connections,
any
content
any
admins
or
whatsoever.
A
We
have
we're
going
to
go
and
talk
about
advanced
topics
where
we're
going
to
customize
with
styles
or
templating.
Caching,
capabilities
within
the
microsoft
graph
toolkit
and
finally,
we're
going
to
talk
about
integrations.
So
we're
going
to
talk
about
react.
We're
going
to
talk
about
sharepoint
framework
teams,
effects,
multiple
providers
that
can
be
hosted
inside
electron
inside
microsoft
teams
and
all
of
these
really
rich
capabilities
that
really
make
your
app
feel
supernatural
for
the
user
that
is
consuming
them.
A
So
a
couple
of
references,
our
repo,
the
playground,
our
docs
and
also
our
learn
module
so
aka
dot.
Ms
slash
mgt
slash,
learn
where
you
can
start
today
to
learn
about
the
microsoft
graph
toolkit
where
we
have
a
full
example
of
building
an
app
from
a
to
z
using
our
microsoft,
docs
and
microsoft
learn
modules.
So
I
hope
this
was
useful
hope
this
excites
you
for
the
next
couple
of
sessions
that
we're
going
to
do
all
together.
A
I'm
happy
to
see
that
there's
a
a
good
reaction
from
from
all
of
you
in
the
chat,
I'm
very
happy
and
I'm
going
to
go
through
some
of
their
comments
and
and
answer
them
right
away.
I'm
going
to
take
one
question
that
I
see
that
is
relevant
around
the
playground.
So
can
you
have
the
playground
inside
your
tenant?
You
can
build
it.
Basically,
you
can
go,
take
our
code
and
run
it
inside
your
tenant.
A
If
you
want
to
we're
also
working
into
integrating
it
with
one
of
our
most
used
tools
for
microsoft,
graph,
which
is
the
microsoft
graph
explorer,
where
you're
going
to
be
able
to
connect
to
your
own
tenant
and
be
able
to
play
with
the
ui
elements,
that's
going
to
come
a
little
bit
later
next
year.
But
it's
something
that
we
have
in
mind.