►
From YouTube: Introduction to Microsoft Graph Toolkit v3
Description
In this 32-minute developer focused demo, Sébastien Levert shares all that’s new in MGT v3.0.0-RC.3? Check out these infrastructure updates (support for Graph JS SDK v3.0, sovereign clouds and Node 14-16), styling updates (refreshed 100% components with Fluent UI), improved SPFx development (built-in disambiguation), new scenarios (theme toggle support, generic picker component, taxonomy picker, search box and search components), and improved scenarios (multi-account support, in-context (person card) sending messages). Try out the v3.0 capabilities in the updated Microsoft Graph Toolkit Playground.
This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 20, 2023.
Demo Presenter
• Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials
• Tool - Microsoft Graph Toolkit Playground – v3 | https://mgt.dev/next/v3/?path=/story/overview--page
• Toolkit - aka.ms/mgt/ (click the Latest button under Releases in Right sidebar).
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
A
So
we're
excited
scared,
but
excited
to
be
here
today.
We're
gonna
present
all
the
new
capabilities.
There's
a
lot
since
the
last
time
we
came
here
so
I
would
love
to
show
all
of
that
to
you
all
I,
don't
know
if
I'll
be
able
to
fill
all
the
time,
but
I'm
gonna
be
able
to
feel
more
time
than
than
needed.
A
Looking
inside
your
applications,
how
many
times
have
you
been
asked
to
build
a
people
bigger
or
a
an
avatar
component,
or
that
you
wanted
to
build
I
know
a
some
sort
of
a
themes,
Channel
picker,
to
be
able
to
share
document
like
this
happened
a
lot
in
the
past
where
people
were
Reinventing
the
wheel.
Well,
the
graph
toolkit
is
there
to
provide
you
Wheels
every
time
you
need
them,
because
we
all
have
these
components.
A
And
then
you
can
go
to
your
management
and
say:
hey
look
what
I
built
and
you
can
just
use
a
graph,
still
get
behind
the
scenes,
and
you
don't
tell
anybody
that
you
are
using
these
amazing
components.
The
components
are
fully
functional,
so
you
just
need
to
drop
them
on
your
app
and
they
work.
You
don't
need
to
build
anything
on
top
of
them.
A
They're
fully
customizable,
though
so,
if
you
want
them
to
be
different,
if
you
want
them
to
be
to
behave
in
other
ways,
if
you
want
them
to
look
different,
you
can
always
customize
them
and
they
work
with
any
web
framework.
You
don't
have
to
use
react.
You
don't
have
to
use
angular,
you
don't
have
to
use
view.
You
can
use
all
of
them.
So
all
the
components
are
available
throughout
the
entire
web
ecosystem
as
we
are
building
them
as
web
components
and
not
as
framework
specific
components.
A
We
offer
some
wrappers
for
well-known
Frameworks,
namely
react
in
this
case,
and
one
of
the
demos
I'm
going
to
do
today
will
be
fully
react
and
yeah
that
will
100
work
with
react.
Looking
at
the
chat,
any
web
framework
does,
this
include,
say:
SP
effects
100,
not
only
it
includes
spfx,
but
we
even
have
some
helpers
to
make.
You
really
really
quickly
be
successful
with
spfx
and
MGT,
so
you
don't
have
to
rebuild
authentication.
You
don't
have
to
rebuild
any
of
that.
A
It's
all
built
within
the
tool
chain
that
the
SharePoint
framework
is
same
thing
with
teamsfx.
We
also
have
the
same
capabilities
with
teamsfx,
for
instance.
So,
let's
move
on.
Why
would
you
use
it
like?
Okay,
we
offer
these
really
beautiful
functional
components.
But
first,
you
should
be
using
it
because
it
cuts
on
development
time
where
you
can
really
focus
on
your
added
value
rather
than
building
the
same
component
over
and
over,
and
it's
literally
just
a
couple
lines
of
code
and
for
some
of
our
components,
a
majority
of
our
components.
A
It's
actually
one
line
of
code,
they're
beautiful
but
they're
flexible.
They
look
a
lot
like
like
M365.
So
if
you
build
apps
that
are
integrated
in
one
of
our
hubs,
think
about
Outlook
office.com
teams
SharePoint,
they
will
look
pretty
much
the
same
way
that
the
rest
of
the
suite
looks
like.
But
if
you
want
to
bring
this
experience
inside
your
app
well,
you
can
customize
it
and
make
it
look
really
how
you
need
it
to
be.
A
Finally,
it
works
everywhere,
we're
based
on
web
standards,
so
you
can
use
it
in
the
browser
you
can
use
it
on
a
mobile
device.
You
can
even
use
it.
We
even
have
providers
for
electron
right.
Electron
is
something
that
can
allow
you
to
build
web
applications.
That's
why
application
but
desktop
applications
with
web
technology,
so
that
is
actually
pretty
pretty
cool.
So
now,
what
is
you
I'm?
A
A
A
We're
also
now
supporting
node,
14
and
node
16,
as
our
base
we're
waiting
for
spfx
to
support
node
18
to
fully
switch
to
16
and
18.
If
we're
going
to
wait
for
spfx
to
do
that,
so
we
can
live
in
the
same
ecosystem.
That
spfx
is
working
with
planning
updates
all
of
our
components.
A
hundred
percent
of
our
components
went
through
a
refreshed
UI
entirely.
It
was
all
redone
and
now
we're
all
fluent
UI
capabilities.
A
Basically,
the
same
look
and
feel
also
improving
a
lot
of
the
SharePoint
framework
development,
one
of
the
key
signals
or
feedback
that
we
got
from
the
community
on
the
MGT
plus
spfx
story
was
it's
worked
amazingly
well,
when
you
were
the
only
web
part
on
a
page
that
was
using
the
graph
toolkit
in
some
cases
it
are
actually
the
majority
of
cases.
That
was
the
case
right
now.
A
Beauty
is
you
don't
have
to
think
about
this?
We
have
this
ambiguation.
That's
a
feature
I'm
going
to
talk
about
that.
That
is
built
in
that
building
capability
allows
every
single
web
part
to
register
their
own
names,
and
that
way
there
is
no
Collision.
So
that
way,
there
is
no
to
MGT
agenda.
On
the
same
page,
there's
going
to
be
an
mgc
contoso
agenda
and
an
MGT
fabricam
agenda
that
way
we're
you're
not
going
to
have
to
collide.
A
It
also
improves
our
distribution
capabilities,
because
now
you
don't
have
to
provide
the
library
component
that
was
helping
with
some
of
that
in
MGT.
You
just
need
to
drop
in
your
your
webpart
package,
and
that
is
it.
You
don't
have
to
have
another
package.
So
if
you're
delivering
apps
via
the
store
way
way
way
way
better
experience,
so
that's
our
kind
of
infrastructure.
A
So
let
me
go
through
the
text.
There
are
a
couple
questions
I
think
I
answered
the
question
around
MGD
and
spfx,
which
is
great,
and
you
plan
something
for
the
energy
framework
to
be
linked
on
the
fluent
UI
site.
That's
a
good
question.
I'll
have
to
to
think
into
it.
That
is
a
good!
That's
a
good
point
to
Showcase
one
of
the
realization
of
fluent
UI
I'll
have
a
look
into
this
thanks
Paul
for
that.
A
A
That's
going
to
help
a
lot
with
theming
and
making
sure,
for
example,
in
Microsoft
teams
that
you
stay
in
sync
with
the
theming
that
exists
in
Microsoft
teams,
for
example,
we're
bringing
a
new
picker
component,
which
is
a
generic
picker,
basically
think
about
it
as
a
picker
that
can
select
any
entity
from
any
collections
on
graph.
It
could
be
users,
it
can
be,
tasks
can
be,
sites
can
be
a
list.
Items
can
be
document.
A
A
I'm
gonna
do
this:
there
you
go,
how
it's
cool,
to
be
able
to
be
able
to
do
live.
Editing
of
PowerPoint
right
Beauty
here
is
that
MGT
is
a
fully
open
source
project
and
we
built
a
really
really
successful
Community
around
it
and
Anew
from
from
the
community,
which
is
an
MVP,
came
to
us
and
said
I
think
the
toolkit
would
deserve
a
taxonomy
picker
and
it's
built
on
the
tax
only
apis
on
Microsoft
graph.
A
So
with
the
noob
we
designed
it
together,
we
had
some
sessions
to
make
sure
that
we
could
brainstorm
or
how
this
could
work
and
you
build
the
design
build
the
spec
built.
Even
the
control
did
a
PR
to
us,
and
now
it's
going
to
be
part
of
our
V3
of
of
the
graph
toolkit,
so
not
only
this
is
extremely
cool.
A
A
We
now
also
have
a
a
set
of
components,
the
search
and
the
search
search
box
and
the
search
results,
components
that
are
now
added
to
the
mix
of
all
the
components
from
E3
in
V3.
For
this
one,
it's
going
to
be
marked
in
preview,
so
it's
still
in
the
progress
of
being
I,
wouldn't
say
fleshed
out,
but
there
we're
still
identifying
some
scenario
that
we
want
or
don't
do
not
want
to
support,
but
we're
really
excited
to
bring
search
capabilities
and
we're
going
to
do
a
little
bit
of
a
demo
on
that.
A
A
We're
gonna
ensure
that
our
our
tokens
are
the
right
ones,
you're,
really
getting
the
data
you
need,
and
finally,
we're
going
to
do
in
our
person
card
some
in
context
of
sending
messages
so
the
same
way
in
to
use
you
can
hover
on
somebody
and
send
them
a
quick
chat
straight
from
that
card,
we're
bringing
that
to
our
person
card.
So
why
don't
we
look
at
the
components
that
we
have?
Let
me
go
here:
I
have
my
VM
right
there
on
me
log
into
here,
and
I
can
actually
share
with
all
of
you.
A
I'm
gonna
do
that
and
go
in
and
hack
around.
This
is
our
release
candidate
that
is
out
there
that
is
available.
You
can
play
with
it.
You
can
hack
with
it.
You
can
understand
how
the
graph
toolkit
works
today.
So
first
control
that
I
mentioned
was
the
theming
control
right.
So
let
me
go
to
our
theme
control
here
and
now
you
see
first
thing
that
is
really
cool.
A
Is
we
not
only
support
setting
it
dark
or
light,
but
we
also
allow
you
to
set
it
based
on
user
preference
in
the
browser
so
automatically
you
have
the
ability
to
automatically
select
dark
or
light
based
on
the
user
preference,
but
I
can
just
override
it
and
say
hey,
you
know
what
I
want
it
light
or
I
want
it
dark
and
every
single
component
within
a
scope?
Is
it
the
page?
Is
it
an
area
of
a
page?
Is
it
a
specific
component?
A
You
decide,
will
automatically
turn
light
or
dark
based
on
this,
so
you're
going
to
see
that
now
all
of
our
stories
we
have
in
our
storybook
have
this
component
top
right,
so
you
can
see
them
in
both
dark
and
live
mode
all
the
time.
Well,
that's
really
what
it
does.
The
beauty,
though,
is
you
can
not
only
do
it
with
the
component,
but
you
can
do
it
without
the
toggle
right.
A
How
do
you
do
that
right?
So
we
have
the
ability
to.
We
are
exporting
a
function
from
from
the
toolkit
that
allows
you
to
apply
a
theme
to
a
specific
selector
or
to
the
entire
page.
So,
for
example,
this
is
my
I
got
my
second
login.
If
I
look
at
the
HTML
here,
it's
three
login
components,
one
which
is
like
this
one,
which
I
don't
see
my
name
right,
because
it's
like
the
background
is
white.
A
A
Oh
there,
yeah
100
Paul
there's
a
ton
of
things
we
learned
throughout
this.
It's
really
really
cool.
So
second
component
that
I
wanted
to
Showcase
is
our
generic
picker
component.
So
let's
go
here.
For
example,
we
have
a
picture
right
there,
so
here
let
me
do
this,
so
it's
easier
for
everybody
to
see.
The
Picker
component
really
plays
a
role
similar
to
the
rmgt
get
component
which
allows
us
to
display
any
resource
on
graph
and
you
handle
the
entire
HTML
here.
A
A
These
are
the
Scopes
that
I
need.
If
I
need
tasks,
dot,
read
and
tasks
read
write
to
get
access
to
it
so
automatically.
If
I,
don't
already
consented
to
these
Scopes
I'll
be
prompted
to
go
in
here's,
the
placeholder
and
the
key
name.
So
what
do
I
want
to
show
here
as
the
title
of
the
of
the
item?
So,
for
example,
I
can
go
here
and
now
you
see
and
it
automatically
got
from
the
to-do
list
here.
A
A
A
There
you
go
so
now,
for
example,
I
can
set
select
the
message
right
from
here.
Would
you
select
the
message
in
a
control
like
that?
I
don't
know,
but
it's
up
to
your
scenario
to
Define.
If
it's
something
you
want
to
do
so
that's
the
second
one
and
think
about
how
the
different
entities
that
exist
on
graph,
for
example,
you
could
even
do
me.
Slash
join
teams.
A
A
I
like
so
here
now,
I
just
switched,
and
now
you
can
select
the
team
so
think
about
all
the
scenarios
where
you
want
to
select
something
from
graph.
This
is
all
baked
and
we
support
caching,
we
support
throttling
management.
All
of
that
is
baked
into
it
and
just
to
prove
it
also.
Something
really
cool
is
all
the
the
dark
mode
is
also
supported.
Now
you
see
all
of
that
color
mode
that
is
injected
in
all
of
our
stories
by
default.
A
A
Yes,
it
does
work.
So
now
you
see
here
we
have
a
long
list
of
terms,
so
let's
say
you're,
building
a
form
where
you
want
to
tag
something
based
on
a
term
set
or
based
on
a
term.
Well,
you
will
be
able
to
do
that
and
what
is
really
really
cool.
Is
you
actually
have
the
ability
to
set
the
term
set
ID,
but
also
the
term
ID?
A
So
if
you
want
to
go
down-
and
you
also
can
by
default-
select
an
ID
so
when
you're
building
a
form,
for
example,
it's
going
to
be
back
and
the
default
capabilities
will
be
there
and
it's
going
to
be
already
selected.
So
this
is
also
built
using
our
MGD
picker
capabilities.
So
when
a
noob
came
to
us
is
our
our
latest
release
saw
that
the
mhd
Picker
was
a
great
scenario
to
build
a
specialized
figure
for
the
taxonomy
picker.
That's
how
we
built
it
now.
A
I
want
to
show
you
something
else
which
is
around
our
search
capability,
so
you're
going
to
find
that
here
in
the
preview
section
we
have
on
storybook
here
we
have
our
search
box.
Purge
box
is
not
the
most
exciting
capability.
We
have
guys.
It
is
a
search
box
right
now
there
is
no
graph
connections
to
your
search
box.
You
can
think
that
in
your
future,
when
I'm
going
to
click
in
the
search
box,
you're
going
to
be
able
to
actually
see
a
list
of
maybe
my
latest
consumer
resources.
A
My
latest
I've
documents
latest
versions
I've
been
talking
with,
but
for
now
it's
not
so.
Basically
now
it's
just
a
search
box
that
emits
a
search
term.
Somebody
typed
in
something
here's
the
value,
it's
all
controllable.
So,
for
example,
I
can
go
here
and
say:
Hey
I
want
the
message
to
automatically
be
limited
after
a
thousand
milliseconds
or
one
second.
So
when
you're
thinking
about
some
sort
of
autocomplete
scenarios,
where
you
want
to
just
type
in
not
do
enter
this
also
supports
it.
A
You
can
also
preset
the
the
search
term
as
part
of
this,
so
I
would
say
it's
a
fairly
simple
component,
but
that
drives
the
second
one,
which
is
our
MGD
search
results
component
and
the
energy
search
results
component.
Is
this
one
so
think
about
here
where
I
want
to
showcase
all
documents,
which
is
an
type
of
Drive
item?
I
want
to
be
able
to
fetch
the
thumbnail
and
my
query:
string
AKA,
my
search
term
is
contoso
and
now
automatically
we're
building
for
you,
an
entire
capability
or
an
entire
UI
for
search
capabilities.
A
All
built
in
this
can
be
embedded
in
any
of
the
app
that
you're
Building
inside
SharePoint
outside
of
SharePoint.
That's
really
where
the
most
of
the
value
here
is
so
when
you're
thinking
potentially.
How
does
that
compare
to
the
PNP
modern
search?
Well,
this
is
basically
a
very
similar
capability
using
the
same
apis,
but
that
allows
you
to
do
these
kind
of
things,
not
just
in
SharePoint
but
outside
of
SharePoint
in
any
type
of
SAS,
apps
or
line
of
business
applications.
A
So
let's
go
to
my
MGT
login
here
and
let's
do
multi
accounts
right
here
here,
we're
faking
it
because
I'm
not
logged
in
we're
actually
using
a
Sandbox
environment
that
provides
it
over
here
in
the
back
end,
we're
actually
providing
some
sort
of
multiple
signed
in
accounts
and
faking
a
lot
of
it.
But
the
result
is
the
following.
Here,
look
at
that
now.
You
see
that
you
have
a
couple
of
accounts
that
are
logged
in
I,
can
switch
from
one
to
the
other.
I
can
sign
out
from
just
a
login
account.
A
I
can
also
go
here
and
sign
with
a
third
or
a
fourth
or
a
fifth
account
right
there.
All
the
calls
that
are
happening
on
the
page
to
graph
are
always
based
on
the
currently
logged
in
user,
which
is
really
important.
We
don't
want
to
mix
data
from
one
cache
to
the
next
and
everything,
so
that
was
a
big
project
for
us,
but
it's
super
super
powerful
when
used
in
some
scenario,
so
that
was
one
of
our
biggest
apps.
We
got
from
Partners
building
apps
that
are
living
outside
of
spfx.
A
The
spfx
needs
to
live
within
the
context
of
the
current
user,
but
other
scenarios
might
not.
So
that's
what
we
wanted
to
build
here,
so
something
that
is
coming
is
while
that
is
there
now
is
that
multi-account
support
the
last
one
is
our
in
context
of
sending
messages.
So,
for
example,
now,
if
I
go
to
my
person
card,
and
so
this
will
showcase
my
own
personal
card,
so
I'm
Megan,
if
I
go
here,
I'm
just
going
to
load
some
of
the
added
capabilities,
I
will
not
find
a
send
message
function
here.
Why?
A
Because
I'm
Megan
I,
don't
send
myself
messages,
even
if
sometimes
I
actually
do
send
myself
messages,
but
in
our
case
here,
let's
say
and
I'm
going
to
set
the
user
ID
here
where
we're
going
to
actually
have
Emily
here,
where
I
will
be
able
to
send
a
quick
message
to
Emily.
Okay
Emily
thanks
for
your
help,
but
I'm
just
going
to
send
that
in
automatically
Emily
will
receive
the
message
on
our
end
and
we're
going
to
able
to
initiate
a
conversation
via
team.
A
A
So
this
is
this
app.
It's
part
of
our
repo.
It
really
showcases
a
lot
of
the
ways
to
do
things.
A
lot
of
the
best
practices
all
of
our
theming
capabilities
are
part
of
it.
So
it's
something
that
is
coming
up
in
the
next
version
of
V3,
where
you
will
find
actually
a
couple
of
components.
So
let
me
do
a
tour
of
all
the
components
we
have
there
and
then
afterwards,
I'm
going
to
be
done
with
that
demo.
The
first
here
is
our
search
component
that
is
shared
across
all
of
our
different
tabs.
A
A
We
have
here
a
dashboard
that
dashboard
is
using
our
to-do
component.
That
allows
you
to
go
from
one
task
list
to
the
next.
Interestingly
enough,
we
are
using,
as
part
of
this
components,
we're
using
our
mhd
picker,
so
you
see
how
these
things
are
working
right,
we're
always
using
capabilities
that
could
be.
That
is
available
as
part
of
our
thing,
so
we
are
using
the
MGD
picker
as
our
selection
for
our
task
component.
Here
we
have
a
get
component
or
a
default,
get
component
that
that's
called
to
a
SharePoint
list.
A
That's
your
point
list
here
has
a
couple
of
columns
and
these
kind
of
things-
and
here
we
have
the
support
of
our
person
card
with
all
the
data
our
org
chart
works
with,
and
all
these
kind
of
things
right
from
here
we
have
our
mailing
calendar.
Mail
is
not
a
component.
We
offer
by
default
the
toolkit,
but
this
is
basically
a
maybe
15
to
20
lines
of
code
to
actually
make
it
happen
with
our
get
component.
That's
an
example
of
using
our
get
component
in
a
really
really
interesting
scenario
on
the
right.
A
We
have
our
agenda
component
that
allows
you
to
see.
What's
coming
up
in
the
next
few
days,
we
have
our
files
component.
Something
we're
working
on
right
now
is
a
renewed
version
of
our
fast
component.
You
see
here,
which
is
a
fully
grid
based
file
component.
That
allows
you
to
go,
for
example,
from
one
folder
to
the
next.
It
offers
breadcrumbs
navigation,
which
is
not
there
by
default
in
our
components,
are
equal.
A
It
also
allows
for
creating
shareable
links,
either
editable
or
read-only
renaming,
deleting
or
downloading
all
of
these
files,
so
pretty
cool
capabilities
that
are
coming
right
here.
A
good
example
here
is
the
use
of
our
picker.
This
is
our
MGD
picker
that
allows
you
to
select,
for
example,
a
list
or
a
document
Library,
where
we
can
dynamically
load
the
data
right
from
here
we
have
our
Channel
file,
which
is
our
Channel
picker.
A
Let
me
do
that
loading
or
it's
not
I,
don't
know
why
a
little
hiccup
during
the
demo
that
had
to
happen,
and
finally,
we
have
our
search
components
where
we
can
go
in
here
and
take
a
photo
so,
for
example,
it
automatically
being
redirected
straight
here
and
we're
going
to
talk
about
this
specific
component
next
week.
So
that's
what
I
wanted
to
showcase
for
V3.
How
do
you
get
V3?
How
do
you
get
started
with
all
of
this?
It's
fairly
simple.
A
Let
me
go
to
again
MGP,
where
you're
going
to
find
all
of
our
releases
right
here
and
you're,
going
to
find
the
entire
there
you
go.
That's
what
I
was
that's
the
dot
that
I
was
missing,
I'm
going
to
have
all
the
how
to
install
the
the
release
candidate
and
Stay
Stay
aware
there
might
be
a
blog
post
coming
up
this
week
that
we're
going
full
GA
either
end
of
this
week
or
very
early
next
week,
we're
in
the
last
phases
of
doing
that.
A
So
we're
really
really
excited
so
I
really
invite
all
of
you
to
go.
Try
it
out
figure
out
if
that
fits
your
needs
internally.
That
fits
the
needs
of
your
customers
and
the
partners
you
work
with,
and
we're
really
excited
to
finally
get
this
one
done,
so
we
can
go
back
to
building
even
more
awesome
capabilities
on
on
the
graph
toolkit,
so
I'm
gonna
go
back
and
see
if
there
was
some
question.
I
saw
that
Bo
you've
been
absolutely
incredible.
A
Answering
some
of
that
Jim.
This
is
the
taxonomy,
because
the
ERG
hierarchy
of
the
terms
or
just
a
flat
list-
it
is
a
flight
list
that
you
can
build
in
a
cascading
way,
so
it
doesn't
show
the
the
tree
it
really
it's
every
level.
So
it's
really
cascading
the
list
of
teams.
The
Picker
was
on
sorted
absolutely
and
the
reason
why
it
was
unsorted
is
because
the
query
that
I
asked
to
graph
was
unsorted,
so
I
could
actually
do
a
sort
on
the
endpoint
that
I'm
using
to
get
that
done.