►
Description
In this 13-minute developer focused demo, Sébastien Levert acclimates viewers to the back-end Microsoft Graph Toolkit samples repo and the front-end UI. He highlights the connections between the universal Sample Solution Gallery and the toolkit sandbox – allows you to try out your newly found sample! There are 4 community contributed samples in the gallery today, the goal is 15 – 20 in the next 2 weeks. Can you help Séb help us? Please share what you have built using the toolkit or submit an issue with what you would like built. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 29, 2022.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Repo - Microsoft Graph Toolkit Samples & Tutorial Materials | aka.ms/mgt/samples
• Samples - Sample Solution Gallery | https://adoption.microsoft.com/sample-solution-gallery
• Repo - Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k
• Issues - MGT Issues | https://aka.ms/mgt/issues
• 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
A
A
We've
learned
a
lot
about
the
toolkit,
but
I
want
to
remind
you
what
exactly
is
a
toolkit.
A
toolkit
is
a
collection
of
reusable
framework,
agnostic
components
and
off
providers
that
allow
you
to
access
and
work
with
the
marks
of
graph.
Our
components
are
fully
functional,
they're,
entirely
customizable
and
we're
going
to
see
that
later
and
they
work
with
any
web
framework
and
on
all
modern
browsers.
So
if
you're
looking
at
capabilities
that
integrate
with
microsoft
graph
like
person,
cards
person,
components,
people,
people
picker,
the
graph
toolkit
is
your
best
friend.
A
But
why
would
you
use
a
toolkit
first?
It
definitely
cuts
on
development
time
because
you
can
easily
add
any
ui
components
to
your
app
any
type
of
web
apps
and
it
automatically
gets
access
to
microsoft,
wrap
it
can
basically
abstract
you
all
that
complexity.
So
I'm
a
very
lazy
developer.
I
love
to
to
cut
on
development
time
by
basically
sitting
on
top
of
others
and
that's
exactly
what
we
can
do
here.
It's
beautiful,
but
it's
also
very
flexible.
A
If
you
love
m365,
you're
gonna
get
the
look
out
of
the
box,
but
if
you
like
to
customize
it
you're
gonna
be
able
to
come
in
and
change
all
nubs
all
settings
to
make
sure
that
the
components
look
like
you
want
and
also
it
works
everywhere,
based
on
web
standards
and
it
works
on
any
web
frameworks
so
think
about.
If
you
want
to
make
your
apps
available
in
teams,
it's
going
to
work
over
there.
If
you
want
to
make
your
apps
available
in
the
sharepoint
framework,
it's
going
to
work
over
there.
A
We've
been
sharing
a
lot
of
these,
how
to's
in
the
last
couple
of
weeks,
but
today
what
I'd
like
is
invite
you
on
a
journey
that
brings
you
back
to
mgt
and
also
gives
you
the
opportunity
to
start
sharing
your
own
symbol.
So
today,
what
we're
going
to
do?
We
are
going
to
demo
our
microsoft
graph
toolkit
sample
repository
with
a
couple
of
the
cool
goodies
that
we
offer.
It's
gonna
be
a
little
bit
of
a
less
technical
session
today,
less
code,
but
so
much
fun.
A
So
here
you
see,
I
am
on
github.com
pnp,
slash,
mgt
dash
samples.
This
is
where
all
of
our
samples
are
starting
from.
This
is
a
very
classic
repo
that
we
build.
That
uses
the
same
capabilities
that
the
sharepoint
framework
web
parts
repo
uses
the
teams
are
do
are
using
that
the
power
platform
folks
are
also
using
so
you're
going
to
be
very
familiar
with
this
repository
right
there
in
there.
If
you
want
to
explore
what
I
invite
you
is
to
go
on
and
look
at
the
samples
folder
in
this
samples,
folder,
you
will
want.
A
You
will
find
a
series
of
different
samples
that
you
can
see
that
community
members
have
added
in
the
past
right
now.
We
have
four
samples
and
I'd
love
to
get
within
the
next
couple
of
weeks,
at
least
15
to
20
samples
that
we
can
share
with
the
community
and
make
sure
that
you
get
highlighted
by
being
the
author
or
contributor
to
these
different
samples.
I
also
strongly
invite
you
to
look
at
the
sharing
is
scaring
initiative.
A
A
Let's
look
at
one
of
these
samples
now
we're
going
into
github
we're
going
to
show
you
different
ways
later
on
how
this
can
work.
So,
let's
start
with,
for
example,
the
mgt
get
emails
well.
This
is
a
great
way
to
start
here,
you're
going
to
have
a
summary,
we're
going
to
always
define
and
explain
what
this
sample
does
with
a
nice
simple
screenshot
of
what
this
functionality
is
you're
going
to
see.
What's
the
compatibility
was
the
version
of
mgd
that
was
tested
with
this
feature
with
this
sample
how
it
applies.
A
What
it
applies
to
who
has
been
creating
the
the
the
solution
when
that
was
done,
a
couple
of
features
and
I
think,
a
really
really
really
cool
capability,
which
is
something
that
we
added
on
our
playground.
Mgd
has
a
playground
where
you
can
play
around.
Mgt
live
in
your
browser,
but
here
what
we're
doing
is
we're
connecting
the
dots
between
our
repo
between
our
samples,
repo
and
the
mgt
playground.
A
It
might
actually
be
a
small
bug
we
have
well.
We
look
like
we
have
a
bug,
but
let's
pretend
that
this
was
the
right
symbol
that
we're
using
here.
It
really
brings
a
sample
in
here,
so
you
can
not
only
see
it
in
a
screenshot,
but
you
can
start
playing
with
it.
You
can
play
around.
You
can
really
really
make
it
super
super
super
simple
for
everybody
to
use.
So
that's
a
great
thing
that
we
have
now
from
here.
You
can
even
interact
with
it.
A
For
example,
go
to
the
launch
team,
do
the
design
stuff
and
and
really
see
how
this
plays
out
over
here
it
looks
like
we're
having
some
interesting.
I
guess
it's
a
launch
time
issue
right,
we're
going
to
come
back
to
that
a
little
bit
later
on.
So
a
couple
of
things
that
I
wanted
to
mention
also
is
we
also
already
got
some
really
really
cool
contributions
from
the
community,
so,
for
example,
this
mgt
get
multiple
person
was
actually
authored
by
our
microsoft
list.
Formatting
and
everything
microsoft,
365
related
super
hero.
Andre.
A
Did
this
really
really
cool
sample?
That
kind
of
highlights
you,
how
you
can
leverage
hover
effects
in
ngt
to
bring
more
people
inside
a
shorter
or
a
smaller
area
into
your
screen?
So
how
do
you
do
that?
Well,
you
have
all
the
code
if
you
want
to
go
to
the
source
here,
you're
going
to
be
able
to
see
all
the
css
all
the
html
right
from
here,
but
you
will
also
be
able-
and
let's
see
if
we
have
a
second
demo
effect
or
not,
should
have
tested
that
before
here
you
should.
A
Oh
there
you
go
now.
It
works
flawlessly.
My
my
mistake
earlier
here
you
see
exactly
what
andrei
had
in
mind
when
he
was
building
his
sample.
He
was
using
this
and
I
can
actually
go
here
and
have
the
full
capabilities
of
all
these
really
cool
features
that
andre
built.
So
we
would
love
if
you
could
come
to
that
repo
and
start
sharing
what
you
already
built
with
the
microsoft
graph
toolkit,
but
also
what
you're,
envisioning
and
maybe
even
request
new
templates
to
be
created.
We
have
all
of
that.
A
You
can
log
in
an
issue
over
there.
You
can
start
discussion,
you
could
you
can
create
new
questions.
All
of
that
is
already
pre-configured
for
you.
Now,
let's
go
see
what
are
others
samples
that
we
already
have,
one
of
them
being
a
team's
channel
messages
which
seem
to
be
what
we
saw
a
little
bit
earlier,
but
replicating
some
of
the
team's
capabilities.
So
let's
go
and
see
how
this
was
done
and
I'm
going
to
let
you
go
into
the
very
like
nitty-gritty
details.
A
I
won't
go
into
super
deep
in
there,
but
I
want
to
show
how
powerful
this
can
be
when,
as
a
community,
we
come
all
together
and
we
really
make
sure
that
we
have
all
that
thing
played
out
just
to
make
it
on
purpose.
It
looks
like
we're
having
some
issues
today.
Oh
there
we
go
now,
it's
loaded.
I
think
it
was
a
github
issue,
I'm
going
to
put
that
on
github
today.
A
So
if
I
go
to
design
for
example,
here
I'm
gonna
have
a
load,
and
now
I
have
the
full
capabilities
of
teams
here
with
the
replies
and
all
of
that
when
I'm
using
just
a
couple
of
line
of
html,
with
some
of
the
components
that
we
already
mentioned
in
the
previous
call.
So
you're
more
than
welcome,
go
on
and
start
exploring
the
repo.
But
if
you're
more
like
me,
maybe
you
want
to
search
for
stuff
we're
happy
today
to
announce
that
we
are
also
making
available
all
of
these
samples
inside
the
simple
solution
gallery.
A
So,
for
example,
I
can
go
here
and
I
can
actually
search
for
the
microsoft
graph
toolkit
and
when
I
hit
search
in
here,
you
will
be
able
to
see
all
the
different
solutions
that
are
utilizing.
The
microsoft
graph
toolkit
and
all
their
authors,
so
you're
going
to
be
able
to
go
here,
go
and
see
I'm
very
interested
into
that
demo.
I
click
on
this
one.
A
I'm
gonna
have
the
full
page
for
that
specific
demo
and
then
afterwards
from
there
I
will
be
able
to
go
and
see
the
repository
directly
inside
github
or
I
will
be
able
to
download
the
code
right
from
here
and
also
I'm
going
to
be
able
to
see
all
the
different
components
that
have
been
used.
So
I'm
using
mgt
get
mgt
person
and
the
mgt
teams
channel
picker.
So
when
you're
looking
at
this
option,
you're
going
to
really
know
what
is
being
customized
and
how
this
solution
was
built.
A
Finally,
you
can
go
and
click
on
view
on
github,
where
you
will
be
able
to
find
again
the
link
to
bring
you
back
to
the
playground
like
this,
where
you
will
be
able
to
experience
it
live
for
you
right
from
here.
So
that's
what
I
wanted
to
showcase
today
for
the
microsoft
graph
toolkit.
Let
me
go
on
stop
sharing
and
reload
my
deck
in
just
one.
Second
just
so
we
can
finish
with
a
couple
of
links.
A
Let's
see
if
we
do
a
season
two
in
a
couple
of
weeks
when
I'm
back
at
work,
I
thought
it
would
be
a
great
moment
to
wear
my
giraffe
suit
today
to
close
that
series,
so
it
was
great
to
go
through
all
of
these
mgt
content
with
all
of
you.
If
you
have
any
comments,
any
feedback
feel
free
to
go
to
our
repo,
create
an
issue
or
just
drop
them
in
the
chat
right
here.
Let's
wait
to
see
that
brian
back
to
you.
B
Thank
you
so
much
seb.
We
really
appreciate
the
was
it
15
or
16.
That
is
an
amazing
accomplishment.
We
appreciate
all
the
time
and
planning
and
effort
that
you've
done
to
putting
this
in
and
again,
yes,
we've
got
lots
of
requests
already
for
season.
Two
do
not
worry.
Community
we've
already
talked
with
the
graph
devx
team
about
some
other
series
for
potential
futures.
So
again.