►
From YouTube: Preview updates on Microsoft Graph Toolkit v3.0
Description
The next version of Toolkit is weeks away (January). In this 19-minute developer focused demo, Sébastien Levert and Gavin Barron show refreshed components with Fluent UI, multi-account support, generic picker control, disambiguation feature built-in, support for Graph JS SDK v3.0, support for sovereign clouds, support for Node 14-16, and scenario-based samples. See several updated components and disambiguation feature. Please look at the preview and share your thoughts - gaps, ideas, other feedback with the team.
This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 29, 2022.
Demo Presenters
• Sébastien Levert (Microsoft) | @sebastienlevert
• Gavin Barron (Microsoft) | @gavinbarron
Supporting materials
• Tools - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/next/pr/1964/?path=/story/overview–page
• Repo - Microsoft Graph Toolkit | aka.ms/mgt
• Documentation – Microsoft Graph Toolkit overview | aka.ms/mgt/docs
• Samples – Microsoft Graph Toolkit Samples & Tutorial Materials | aka.ms/mgt/samples
• Playground – Microsoft Graph Toolkit Playground | aka.ms/mgt/dev
• Learn – Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn
• Feedback - Feedback on our v3 release! #1966 | https://github.com/microsoftgraph/microsoft-graph-toolkit/discussions/1966
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
Foreign
well
folks,
today
we're
going
to
talk
a
little
bit
myself
and
Gavin
we're
going
to
talk
about
the
latest
on
the
Microsoft
craft
toolkit.
If
you
were
part
of
the
couple
weeks,
we
did
our
journey
around
the
graphical
okay,
we
did
a
15
sessions
on
a
toolkit.
At
the
beginning
of
this
year,
I
was
always
saying
that
we
were
going
to
a
release.
A
new
version
of
the
graph
toolkit-
well,
we
are
getting
very
very
very
close.
A
I
would
love
to
give
you
a
little
bit
of
a
hint
of
what
is
happening
and
also
use
this
session
to
gather
some
feedback,
so
we're
going
to
share
a
couple
of
links
in
the
in
the
chat
for
you
to
go
on
and
share
some
of
the
feedback
you
might
have
on
the
graph
toolkit.
So
you
can
help
us
identify,
maybe
gaps
that
we
have,
or
maybe
cool
ideas
that
you
could.
We
could
be
working
on
for
our
latest
version
of
the
graph
toolkit.
A
A
You
need
your
you
embed
them
in
your
app,
so
you
can
really
build
business
value
rather
than
building
the
controls
you've
been
asking
over
and
over
and
over.
Why
would
you
think
about
the
graph
toolkit?
First,
it
cuts
cutsanely
on
development
time,
because
it's
basically
just
a
couple
of
lines
of
code
that
you
drop
into
your
app
rather
than
building
all
the
logic.
All
this
state,
all
the
graph
management,
all
the
tokens
and
everything
we
take
care
of
the
hard
stuff,
because
it's
beautiful,
but
it
is
flexible.
A
It's
built
to
be
looking
like
an
M365
experience,
but
it's
also
fully
customizable,
so
you
can
embed
it
and
make
it
really
your
own
and
it
works
everywhere.
We're
not
shipping
your
react
or
an
angular
specific
version.
We're
shipping,
a
web
components,
version
that
you
can
add
to
any
of
your
apps
in
any
of
the
canvases
that
exist.
Is
it
on
a
web
page
in
a
teams
app
in
an
electron
app
in
a
SharePoint
framework
web
part
anywhere
you're
thinking
that
these
controls
could
land
you
could
actually
add
them
there.
A
A
So
what's
new
for
V3,
so,
first
of
all
we're
coming
with
the
fully
refreshed
components
and
we're
gonna
build
all
our
components
now
will
be
fully
built
using
fluent
UI,
which
is
the
design
language
that
a
lot
of
the
applications
here
at
Microsoft
are
leveraging,
and
these
components
are
now
available
to
see
so
I'm
going
to
show
you
a
sneak
peek
of
some
of
these
components.
We're
even
gonna
share
with
you.
A
A
I'll
I'll
see
a
couple
of
interesting
questions:
I'm
going
to
come
back
to
the
questions
afterwards,
because
these
are
cool.
One
of
the
most
anticipated
feature
of
V3
is
multi-account
support.
So
you
will
be
able
to
leverage
our
login
component
to
log
into
multiple
accounts
at
the
same
time
and
shift
from
one
identity
to
the
other.
One
like
the
rest
of
the
M365
applications,
really
really
cool
control
right
there,
generic
picker
control
we're
going
to
build
a
new
control
that
will
allow
you
to
pick
an
entity
from
graph
in
a
very
generic
way.
A
We
will
be
having
something
called
the
disembiguation
feature
that
will
be
built
in
and
you're
absolutely
right:
Gavin,
it's
not
node
16,
it's
14
and
16
for
now.
Look
at
that
changing
stuff
on
the
Fly
while
doing
a
demo.
How
great
is
that
or
this
integration
feature
will
be
built
in
and
Gavin
will
be,
showing
a
cool
demo
of
this
for
all
of
our
SharePoint
framework
developers
in
the
room.
A
This
will
be
the
feature
You're
Expecting
for
MCD
to
work
seamlessly
in
spfx
we're
going
to
come
up
with
the
support
for
graph,
the
graph
JavaScript
SDK
V3
in
our
journey
very
soon
after
potentially
to
start
having
previews
around
our
graph
JavaScript
SDK
V4.
But
that's
for
another
talk.
We're
going
to
come
back
in
the
new
year.
Talk
about!
What's
coming
up
right,
there
we're
going
to
support
Sovereign
Cloud.
A
So
well,
let's
go
and
do
some
cool
demos
I.
Think.
Let
me
go
here
open
up
the
browser
right
here
and
now
you
can
see
our
playground
and
I'm
gonna
share
the
link
to
this
playground.
If
you
want
to
play
and
just
to
show
you
that
this
is
all
real
code
running
in
a
real
environment,
we're
not
faking
anything
here.
Well,
maybe
you'll
see
if,
if
you
can
spot
it,
then
you're
great,
no
I'm!
Joking,
that's
gonna,
be
any
any
fake
here.
A
So
the
first
thing
I
wanted
to
show
is
the
ability
now
to
support
multiple
accounts
in
our
login
component,
we're
nothing
in
we're,
not
logged
into
that
storybook,
so
I'm
going
to
show
you
in
a
way.
That
is
that's
where
we're
going
to
fake
it
to
be
fairly
honest,
but
it
is
what
the
fee
I
want
to
show
you
the
feature
right
right
here.
So
when
you're
logging
in
I'm
already
logged
in
as
Megan
here
I
have
the
ability
to
actually
change.
A
Let
me
just
zoom
out
a
little
bit
here
to
change
the
account
to
Emily
brown
or
also
to
sign
in
with
a
different
account.
So
you
will
always
have
this
ability
to
have
many
accounts
connected
at
the
same
time
like
in
any
other
M365
application.
So
if
you're
building
an
app
where
you
are
controlling
the
login
experience,
I
think
this
is
going
to
be
a
great
feature
to
onboard.
This
is
due
to
us
leveraging
the
latest
around
M
Sal
I
will
be
there.
A
So
that's
really
really
cool
second
thing:
I'm
think
that
I
wanted
to
add
is
a
quick
look
at
some
of
the
refreshed
component.
So,
let's
look
at
the
agenda.
Gender
looks
like
this
you're
going
to
see.
Some
of
our
components
are
not
necessarily
very
very
different.
They
have
just
been
upgraded
right,
but
under
the
hood
there's
a
lot
of
components
that
have
significantly
changed,
so
you
can
see
here
what
our
agenda
components
looks
like
we're,
leveraging
the
fluid
the
latest
fluent
UI
v9.
A
So
to
come
back
to
all
the
question
it
is
built
on
the
latest
version
of
fluent.
So
it's
on
fluent
nine
we're
leveraging
the
icon,
the
font,
the
sizing
and,
and
all
of
this
so
really
really
cool.
Then
afterwards,
let's
go
to
see
our
file
list.
Our
file
is
here
is
also
using
the
latest
and
greatest
here
on
the
file
list.
We
were
already
using
a
lot
of
the
fluent
stuff.
So
not
a
lot
of
changes
happening
right
here.
A
Our
person
card
has
changed
significantly,
not
from
a
visual
standpoint,
but
now
we
also
bring
you
vertical
layout.
So
now,
not
only
you
have
it
on
the
horizontal
side,
but
now
we
have
it
on
the
vertical
layout.
So
now
you
have
the
ability
to
have
these
great
person
components
showing
up
in
a
vertical
way
the
person
card.
A
Let
me
show
you
a
really
cool,
interesting
capability
of
the
new
person
card,
while
I
show
the
new
layout
so
really
cool
layout,
where
I
can
now
do
inline
typing
of
your
messages,
not
only
just
opening
teams,
but
here
literally
having
a
message
that
you
can
send
to
Emily
right
from
here.
The
same
way
you
can
do
it
in
Microsoft
teams
today.
A
So
a
really
really
cool
capability
that
we're
bringing
in
to
the
the
table
and
all
of
the
latest,
all
of
the
upgraded
visuals
that
we
have
right
here
and
an
inter
an
interesting
new
capability
that
we're
bringing
is
our
picker
component.
Our
picker
component
is
in
this
case
to
Showcase
task
lists,
so
you
have
the
ability
to
select
here-
and
you
see
here
how
I
using
slash
me
slash
to
do
slash
lists
from
graph
to
show
all
the
different
tasks
lists,
but
I
could
actually
go
here
and
say.
A
Slash
me
slash
direct,
not
necessarily
all
in
caps
direct
reports
and
now
it's
going
to
automatically
refresh
and
have
predict
to
be
available,
so
you
will
be
able
to
build
interesting
capabilities
right
from
there
and
and
now
it's
really
up
to
you
to
decide
how
you
want
to
make
it
and
and
shape
it.
The
way
you
need
it
for
your
apps,
it's
very
developer,
friendly
to
simplify
that
specific
capability
of
selecting
every
Source.
A
The
last
one
I
want
to
show
you
is
our
team
Channel
bigger,
because
the
team
shell
picker,
actually
changed
a
lot
in
our
latest
release,
which
is
here
where
you
can
select
Channel
where
we're
going
to
load
the
channel,
and
here
you
see
all
the
channels
that
you
have
the
teams
that
you're
a
part
of
the
channels
that
are
available
here.
So
let's
say:
I
want
to
go
here.
I
want
to
select
General
and
now
you're
going
to
see
that
it's
selected
this
channel
there.
A
So
lots
of
improvements,
lots
of
UI
components
that
I've
changed
we're
doing
this
as
a
major
release,
so
it
might
bring
some
unexpected
changes
on
your
side.
So
there
will
be
breaking
changes
around
styling
if
you
were
studying
specific
elements
without
utilizing
some
of
our
classes,
classes
and
variables
that
we
provide
so
something
to
look
at
so
we'd
love
to
hear
your
feedback
on
some
of
these.
B
Thanks
Tim,
that
was
a
great
Whirlwind
tour
of
what
the
team's
been
working
hard
on
since
I
joined
and
before
so.
If
you
didn't
know,
I'm
new
to
the
team
since
July,
but
I'm
pretty
happy
to
have
landed
on
this
pretty
exciting
project.
One
of
the
challenges
that
we've
heard
from
the
SharePoint
developer
Community
is
that
well
to
have
multiple
Solutions
in
a
single
farm
that
use
SharePoint
framework.
At
the
moment
it
doesn't
work
so
well.
B
We've
got
to
have
this
thing
called
MGT
spfx,
which
provides
all
the
controls,
and
that
means
that
all
those
controls
are
version
locked
to
the
same
version.
So
there's
no
side-by-side
version
support
for
different
versions
of
web
Parts
using
older
or
newer
versions
of
MGT.
It's
not
so
great.
We've
been
looking
at
this
and
there's
some
challenges,
but
what
we've
come
up
is
with
a
feature
that
we
call
disambiguation
I'm
just
going
to
share
my
screen
now.
So
all
right,
so
you
should
see
my
visual
studio
code
instance.
B
What
we've
added
is
a
little
thing
single
line
of
code.
That's
easy!
That's
all!
You
need
to
do
right,
not
quite
unfortunately,
because
of
the
way
that
this
works,
you
actually
need
to
start
lazy
loading.
Some
of
the
resources
in
here
we
have
added
some
helper
functions
to
simplify
this.
This
particular
web
part
is
a
no
framework
web
part.
So
it's
just
plain
old
JavaScript
I
go
to.
B
Sorry
I
should
have
opened
this
up
ahead
of
time.
I'd
like
to
just
quickly
show
you
what's
going
on
under
the
hood
in
there
in
our
so
we're
using
Dynamic,
Imports
or
asynchronous
Imports,
which
use
a
promise
to
report
when
they're,
fully
loaded
and
then
based
on
that
being
fully
loaded,
then
we
can
actually
render
using
MGT
tags
that
have
this
disambiguation
in
them.
So
if
you
start
using
this
feature,
you
might
want
to
put
your
own
company
name
inside
here,
just
as
an
easy
way
of
doing
it
or
use
a
version
number.
B
B
Totally
fair,
we've
got
this
hat
working
over
in
react
as
well
same
approach.
We
call
this
dot
custom
element
helper
with
disambiguation
and
then
in
our
render
method
for
our
component,
we
actually
lazy
load.
The
component
that
uses
the
react
components
that
we
have
as
part
of
our
MGT
react
Library
this
MGT
demo,
you
can
see
this
is
the
place
where
we
actually
have
our
MGT
components
and
they
live
there.
B
B
Oh
you
get
out
of
the
road
there
we
go.
We
can
see
here
that
we're
using
all
of
our
tags,
so
we've
got
our
MGT
contoso
person,
tag
and
all
of
the
tags
all
the
way
down
the
tree
inside
there
use
this
contoso
disambiguation,
so
they
won't
collide
with
any
other
registered
instances
of
that
in
the
page,
this
will
mean
that
you
can
have
solutions
from
lots
of
different
versions
of
MGT
inside
the
same
SharePoint
page
without
causing
issues.
B
A
I
think
it
is
and
I
think
that's
that's
great
work.
Thank
you,
Gavin
for
sharing
this.
That's
all
coming
into
V3.
From
a
date
standpoint,
we
are
looking
at
having
a
preview
in
the
next
few
I'd
love
to
say
days,
but
I
think
we're
gonna,
say
a
couple
of
weeks
where
somewhere
early
in
the
next
year,
where
we're
gonna
have
probably
our
V3
available
so
quite
excited
about
you,
guys
to
start
trying
it
out
and
and
enjoy
the
the
future
of
of
the
graph
toolkit
quickly
quickly.
A
What's
new
around
the
community,
what
we're
going
to
come
out
with
we're
going
to
build
new
scenario-based
Simple
Solutions,
so
you
can
start
from
something
that
delivers
value
right
away,
not
just
random.
Just
simple
templates
we're
going
to
really
build
react
and
HTML
and
view
in
all
of
these
scenario
based
Simple
Solutions
I,
already
shared
in
the
in
the
chat
on
how
to
share
your
feedback.
A
So
please
use
the
link
that
I
shared
there
to
share
the
feedback
you
have
around
mgtv3
and
finally,
a
couple
of
resources
that
I'd
love
to
to
go
are
repo
our
docs,
our
samples,
our
playground,
and
if
you
want
to
do
some
of
our
Microsoft
learn
modules
more
than
happy
to
have
you
go
there.
Thank
you
for
the
opportunity
to
come.
Talk
to
you
all
we're
very
open
to
feedback
so
feel
free
to
chime
in
and
I'll
stop
sharing
and
thanks
all
thank.