►
From YouTube: Getting started with Microsoft Graph Toolkit
Description
In this 20-minute Developer-focused demo, Beth Pan starts off by creating a basic html page then she incorporates Microsoft Graph Toolkit (MGT) components into it. All components are found at the mgt.dev - Microsoft Graph Toolkit Playground site - an environment to view, build/customize objects, test components and access reference documentation. Toolkit components also can be accessed directly from Graph Explorer. This demo shows the ease of using simple components to build complex solutions. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on October 1, 2020.
Demo Presenter: Beth Pan (Microsoft) | @beth_panx
Supporting materials:
• Documentation - Microsoft Graph Toolkit: Web Components powered by Microsoft Graph | http://aka.ms/mgt-docs
• VS Marketplace – Live Server | https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
• Microsoft Graph Toolkit Playground – MGT.Dev site | http://mgt.dev/
• Graph Explorer | https://developer.microsoft.com/en-us/graph/graph-explorer
• Conference Video - Integrate Microsoft Graph in your solutions with MS Graph Toolkit – PnP Virtual |
https://www.youtube.com/watch?v=lRHFxPkvNs8&list=PLR9nK3mnD-OVtYPolswzDjun3g78jN8OE&index=4
• Video - Build live coding session – MGT + React + Teams Tab |
https://www.youtube.com/playlist?list=PLWZJrkeLOrbYL7tFQJ-HY6Q9FZGmqSldH
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
Today,
I'm
going
to
show
you
a
little
bit
about
what's
microsoft,
graph
toolkit
and
some
of
the
features
that
we
have
a
little
peek
on.
You
know
the
new
features
that
we
have,
such
as
the
new
person
card
redesign
and
we'll
go
from
there
here
you
see,
I
just
have
an
empty
folder,
I'm
going
to
go
into
the
simple
sample
just
to
get
started
from
you
know
a
brand
new
html
page
and
see
how
how
we
would
add
the
graph
toolkit
components
into
it,
there's
nothing
in
it.
A
A
If
I
scroll
down,
you
can
find
where
our
mgt
script
is
that's
ready
for
you
to
drop
on
your
page.
You
can
also
import
this
directly
in
your
javascript
by
using
the
microsoft,
slash
mgt
package
in
npm
and
coming
back
to
this
file,
I'm
going
to
add
it
right
after
the
body,
and
now
it's
added
the
after
you
like,
we
already
imported
the
mgt
script.
What
we
need
to
do
to
enable
this
page
to
connect
to
the
graph.
You
only
need
two
lines
of
code:
the
first
one
we're
going
to
need
a
mgtm
cell
provider.
A
This
client
id
comes
from
your
azure
aad
app
registration.
I
don't
think
I
have
time
to
show
that
today
and
I'm
I'm
just
going
to
assume
a
lot
of
people
already
know
how
to
do
that
in
this
call,
if
you
don't
feel
free
to
reach
out,
I
can
point
you
to
the
right,
documentations
or
videos
where
I
can
show
you
one-on-one
all
of
those
are
available.
A
So
since
I'm
not
going
to
show
that
process,
you
know
I'm
just
going
to
go
ahead
and
grab
a
client
id
right
here
and
replace
that
with
the
client
id
and
the
other
thing
that,
after
that
I
imported
the
mso
provider
is,
I
will
add,
a
login
component
and
here
shortly
I'll
show
you
what
are
all
the
components
that's
available
and
how
you
can
explore.
It
go
live
right
here
at
the
bottom
right
in
visual
studio
code.
A
If
you
want
to
learn
more
about
that,
just
let
me
know
and
ta-da
here
it
is
a
logging
component
already
on
your
screen,
because
my
browser
is
signed
in
as
a
megan,
so
this
is
signing
as
a
megan
and
there's
some
quick
functionalities.
When
you
click
on
it,
you
can
see
a
little
bit
of
detail
and
sign
out
of
the
account
if
you
wish.
A
So
that
is
how
quickly
that
we
can
start
with
the
microsoft
graph
toolkit
in
a
html
file,
and
I
said
that
I
was
going
to
show
you
guys
where
to
explore
all
these
components.
So
if
you
go
to
mgt.dev,
this
is
the
playground
that
we
built
on
top
of
something
called
storybook,
and
it
is
a
well-known
community
project
that
showcases,
you
know,
web
components
or
other
frameworks,
components
or
help
you
test
and
build
and
isolate
components
along
the
ways
as
well.
A
A
So
another
thing
that
I
wanted
to
show
you
guys
within
the
playground
is
on
the
right
side.
Here
is
a
code
editor
that
you
can
just
immediately.
You
know
explore
some
of
the
functionalities
in
or
for
the
components.
For
example,
if
I
wanted
to
customize
this
person
object
and
some
of
the
ways
or
if
I
needed
more
information-
is
right
here,
there's
the
canvas
tab
in
the
doc
docs
tab
scrolling
down
on
the
docs
tab.
A
So
I'm
actually
not
going
to
go
too
deep
into
that,
but
a
good
place
to
try
and
you
know,
look
at
how
to
use
a
more
advanced
way.
I
guess
of
connecting
to
the
graph
when
there
is
not
a
component,
that's
bound
to
a
specific
api.
Is
you
can
use
the
mgt
get
and
they'll
supply
a
resource,
giving
it
a
graph
version
and
the
scope?
A
A
A
A
If
you
want
to
know
more,
let
me
know-
or
if
you
have
suggestions,
let
me
know
and
about
recently
I've
gotten
some
community
feedback
saying
like
you
know,
every
time
you
show
us
the
graph
toolkit,
it
always
seems
like
it's
super
simple,
but
I'm
kind
of
worried
that
it's
not
going
to
fit
into
my
project
because
it
goes
into
details
about
a
lot
of
things.
So
I'm
actually
going
to
go
into
a
little
details
today
on
customizing,
one
of
the
or
some
of
the
components
to
show
you
know.
A
A
All
I
have
you
know
other
than
what
I
just
showed
you
with
the
mso
provider
and
login.
It's
all
the
fluff
that
I
pre-set
up
so
that
I
don't
have
to
write
css
and
javascript
on
spot
and
the
javascript
file
actually
don't
have
a
lot.
It's
just
like
a
converting
time
from
one
format
into
the
other
and
I'm
loading
the
mgt
script
directly
from
a
preview
version
of
our
own
repo,
so
that
you
can
see.
What's
the
newest
thing,
that's
coming.
So,
if
I
do
a
yarn
start.
A
Those
examples
right
there,
so
I'm
actually
going
to
show
you
just
a
little
bit
more
of
an
example
of
you
know
what
you
can
do
with
the
graph
toolkit,
where
I'm
introducing
you
to
a
scenario
where
almost
all
the
companies
or
enterprise
will
run
into
which
is
employee,
onboarding,
and
you
can
see
on
this
page.
This
is
just
an
image
to
make
it
look
better
and
there's
a
logging
component
that
we
just
talked
about
that
megan
has
already
signed
in
some
artwork
and
then
three
columns
with
preset
css.
A
A
Where
the
person
query
equals
me,
which
is
whoever
is
going
to
sign
into
this
application
and
then
a
really
cool
thing
that
we
have
is
we
have
a
lot
of
templates
within
each
components
that
we
have?
If
you
go
to
again
documentation,
you
can
find
all
the
available
templates
and
the
data
objects
that's
passed
down
for
each
template
by
default.
A
This
template
is
going
to
give
me
a
person
object
and
what
I
can
do
is
wrap
it
up
in
a
div
using
we're
kind
of
following
some
of
the
well-known
syntax
of
using
it
or
passing
down.
Data
objects,
double
curly
brackets
and
in
the
person
object.
I
wanted
to
show
megan's,
given
name
and
I'm
just
going
to
say,
welcome
to
pax
megan,
maybe
I'll
edit,
a
little
emoji
and
save
that
and
come
back
here.
A
A
And
then
here
we're
going
to
use
the
mgt
to
do
components.
Luis
has
been
asking
for
this.
I
remember
on
twitter
to
separate
the
apis
between
mtd2
and
mtt
tasks.
We
actually
did
that
in
the
2.0
preview.
Now
the
to-do
api
connects
directly
to
the
graph
to
the
or
the
mg2
component,
connected
directly
to
the
mgt
or
graph
to
do
api.
A
Maybe
so
early,
I'm
slurring
my
words,
I'm
also
going
to
add
mgc
people.
Here,
here's
going
to
connect
to
a
list
of
people
that
you
are
you
know
most
work
worked
with.
So
here
you
got
a
kind
of
a
view
of
you
know,
megan's
first
day,
here's
everything
that
she
needs
to
do.
Here's
all
the
checklists
that
she
needed
to
worry
about
checklist
items
and
then
here's
everybody
that
she
may
or
may
not
want
to
reach
out
to.
A
You
know
to
talk
about
the
new
role
and
I'm
going
to
go
a
little
bit
deeper
into
one
of
the
components,
and
this
is
kind
of
coming
from
a
community
request
and
it
got
tweaked
later
on
for
requirements,
but
I
think
it
might
be
interesting
because
people
are
saying
like
what.
If,
when
I'm
showing
a
list
of
people,
you
know
I
actually
want
to
show
want
to
put
different
kinds
of
data
in
it.
A
A
The
people
template
by
default
pass
down
the
people
object,
and
I
wanted
to
loop
through
everybody
in
this
object,
so
I
can
just
say
a
person
in
people
and
I
come
down
and
say
give
it
another
div
and
I
wanted
to
only
show
the
like
real
people
objects
versus
there's.
Some
system
accounts
that
mixed
together
with
this
object.
A
So
in
this
one
I'm
going
to
say,
if
person
actually
has
a
user
principal
name,
then
I'm
going
to
show
it
but
then
coming
down
in
the
pupil
object.
What
we're
going
to
show
is
elicit
mgt
person
the
reason
that
I'm
actually
specifying
this
is
because
I
wanted
to
show
some
different
property-
let's
just
start
from
here
and
see
what
it
got,
how
it
goes.
So,
I'm
going
to
say
everybody
in
this
component,
I'm
going
to
show
them.
Oh,
I
need
to
give
it
a
person.
Query!
A
That's
why
so
in
the
person
query,
I'm
going
to
say
for
all
the
person
for
everybody
in
this
people
objects,
I
want
to
show
their
user
principal
name
or
I
want
to
use
their
user
principal
name
as
going
to
the
graph
to
fetch
their
data.
Here
it
is
here's
like
everybody's
little
bubble,
the
reason
that
it
only
shows
a
bubble
because
the
person
component
by
default
only
the
view
only
shows
like
no
name
or
anything
only
as
a
picture.
So
how
do
we
further
customize?
A
That
is
when
you,
if
you
remember
that
I'm
saying
that
there's
a
lot
of
attributes
and
javascript
properties
that
you
can
tweak
to
change,
how
your
htmls
look
and
feel
if
I
go
property
first
line
proper
t
equals
display
name
and
I'm
going
to
say
the
line.
2
property
equals
job
title,
and
I
also
wanted
a
default
back
to
mail
address.
If
this
person
doesn't
have
a
job
title
and
when
I'm
setting
up
the
view,
I
want
it
to
have
two
lines.
A
Of
information-
and
you
can
also
set
it
to
be
one
line
or
default,
and
I
also
wanted
to
show
a
person
card-
yeah
live
typing-
is
hard,
there's
hover
and
click,
both
options
that
you
can
use
in
order
to
enable
a
person
card
with
mgd
persons.
Now
that
I
come
back
here,
this
is
actually
a
little
did.
I
spell
something
I
think
that's
the.
A
A
A
You
can
see
you
know
more
details
about
how
to
contact
those
people,
send
them
a
message
directly
from
this
card
showing
off
their
organizational
charts,
showing
the
emails
between
you
and
this
person,
or
both
of
you
participated
in
if
this,
if
miriam
or
whoever
this
is,
has
more
information
on
their
linkedin
information
and
they
authorized
us
to
show
them
that
you
can
see
more
of
their
personal
data
as
well.
So
that's
part
of
the
2.0
mgd
person
card
redesign
and
the
reason
again.
A
More
app
is
because
a
lot
of
people
has
been
asking
for
you
know:
can
you
show
us
more
of
a
complicated
sample,
so
I'm
just
going
to
copy
the
rest
of
my
code
and
paste
it
in
here,
because
I
don't
think
I
would
have
time
to
do
all
of
it,
but
the
sample
is
available
in
our
repo.
If
you
want
to
go
check
it
out
right
here,
you
know
I
can
show
a
timeline
view
versus
a
email
or
just
a
calendar
event
view.
A
I
could
show
only
the
important
data
of
to-do
list
that
I
wanted
to
talk
about
and
so
far
and
so
forth,
and
that's
that
I
also
wanted
to
point
out
two
resources
for
people
who
wanted
to
use
more
or
who
wanted
to
build
applications
with
mgt
and
enable
it
in
your
team's
tab
or
sharepoint
environment.
We
have
a
list
of
providers,
that's
out
there.
That
will
enable
you
to
add
your
application
and
then
doing
the
authentication.
A
A
Here's
another
one
tattoo
of
our
awesome
community
members
who
helped
me
so
much
for
the
project
as
well.
David
and
hugo.
Had
this
presentation.
I
know
they've
been
doing
this
a
lot
in
different
conferences
to
enable
mgt
components
in
your
sharepoint
environment.
So
this
is
an
awesome
resource
for
people
who
wanted
to
do
it
within
sharepoint.
If
you
want
to
go
check
it
out,
I
can
also
share
this.
I
think
they
did
this
during
the
pmp
call
as
well.