►
From YouTube: Getting started with Microsoft Graph Toolkit
Description
In this 12.5-minute developer-focused demo, Waldek Mastykarz reminds us that there is lots of data and insights available to developers via Microsoft Graph. Easily access this content using the Microsoft Graph Toolkit (MGT) with authentication providers, web components, utilities and often requiring only 1-4 lines of code! Render agendas, files, people and more in your apps courtesy of Microsoft Graph. ACTION: Visit MGT Playground at https://mgt.dev and take the Learn Microsoft Graph Learning Path. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on August 31, 2021.
Demo Presenter: Waldek Mastykarz (Microsoft) | @waldekm
Supporting materials:
• Toolkit – Microsoft Graph Toolkit | https://aka.ms/mgt
• Sandbox - Microsoft Graph Toolkit Playground | https://mgt.dev/
• Learn - Develop apps with the Microsoft Graph Toolkit | http://aka.ms/learn-mgt
• Repo – microsoft-graph-toolkit | https://github.com/microsoftgraph/microsoft-graph-toolkit
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
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
we
will
talk
about
microsoft,
graph
toolkit,
so
in
our
work
every
day
we
create
content
on
microsoft,
365,
microsoft
cloud
we
create
files,
we
create
meetings,
we
chat,
we
collaborate,
discuss,
we
meet
and
it's
not
just
us.
It's
a
lot
of
people
around
us
too
right
so
with
that
we
create
that
place
where
there's
a
lot
of
invaluable
content
and
insights
available
to
us
and
the
cool
thing
is-
is
that
all
of
the
data
and
insights
is
available
to
us.
A
If
we
want
to
extend
microsoft,
365
and
microsoft
cloud
beyond
what
what
is
available
out
of
the
box,
we
can.
We
can
build
custom,
apps
web
apps
demons
device
apps
or
we
can
also
extend
microsoft
365
within
its
extension
points,
we
can
build
teams
tabs,
we
can
build
bots,
we
can
build
web
parts,
we
can
extend
search
and
we
can,
in
these
extension
points
these
different
apps.
A
We
can
bring
together
data
and
insights
that
are
stored
in
microsoft,
365
and
combine
them
with
insights
from
our
line
of
business
apps
right,
and
we
do
all
of
that
through
the
microsoft
graph
microsoft
graph.
Api
is
the
extension
point
that
api
that
gives
us
access
to
everything
that
is
stored
in
microsoft,
365
and
it's
info
about
users
about
chats
files,
devices,
emails
and
many
many
more
endpoints
that
are
available
to
us,
because
we
work
on
microsoft
cloud.
A
A
First,
we
need
to
get
a
token
like
who
of
us
haven't
really
struggled
with
auth
right,
like
it
isn't
at
first,
it
intimidates
you
because
you
don't
know
where
to
start-
and
you
always
see
like
yeah
so
like
in
this
step,
a
token
and
you're
good.
But
how
do
you
do
that?
How
do
you
do
it
and
how
you
handle
off
in
a
safe
way
in
a
way
that
also
is
required
for
the
type
of
app
you
build.
A
Then,
when
you
have
token
there
is
also
the
next
step,
because
you
have
a
token
you
reach
out
to
graph,
you
get
the
data
back,
but
then
you
also
need
to
show
the
data
in
your
app
and
oftentimes.
It's
also
hard
right,
because
it
requires
you
to
know
css
and
it's
something
that
you
might
be
skilled
in
or
not
so
oftentimes.
A
We
heard
developers
talk
about
these
two
things,
these
two
hurdle
points
they
need
to
get
through
when
they
want
to
build
apps
on
microsoft,
365
and
actually
enrich
what
is
available
already
in
their
out
of
the
box.
And
luckily
there
is
a
cool
thing
available
to
you
today.
Already
that
solves
these
two
points
or
challenges,
and
does
many
many
more
things.
A
The
thing
is
microsoft,
graph
toolkit
what
it
is.
It's
a
collection
of
off
providers,
and
with
that
I
mean
you
can
use
it
in
virtually
any
type
of
web
technology
based
app.
You
want
you
can
build.
You
can
use
microsoft,
graph
toolkit
for
short
mgd
in
a
single
page,
app
a
web
app
a
team
step
and
sharepoint
framework
web
part.
Basically
anything
that
is
based
on
web
tech.
You
can
use
mgt
in
there
and
providers
that
are
available
in
there
for
auth
will
allow
you
to
seamlessly
use
the
context
of
all
that.
A
You
already
have
available
in
platform
of
your
choice,
whether
that's
teams,
spfx
or
a
web
app
and
put
that
into
to
basically
allow
you
to
easily
connect
to
graph
so
that
you
will
not
need
to
fiddle
with
off
by
yourself.
So
there's
like
one
major
headache,
solved
already
what's
more
in
mgt,
you
will
also
find
things
that
will
allow
you
to
really
easily
retrieve
and
show
the
data
from
microsoft
graph
in
your
app
things
like
agenda
showing
really
easily
a
list
of
events
with
just
a
single
line
of
code.
A
I
mean
I
do
not
exaggerate
right,
so
you
will
be
able
to
see
this
in
practice
with
a
single
line
of
code.
You
will
show
a
list
of
events
coming
from
graph
and
there
are
some
other
things
like
allowing
you
to
show
list
of
files
or
pick
a
channel
from
from
teams.
So
all
of
that
is
already
available
in
microsoft.
Graph
toolkit
and
the
cool
thing
is
is
that
it
evolves
so
every
month
roughly,
there
is
a
release
and
each
release
contains
new
components.
A
New
features
that
allow
you
to
do
more
using
the
same,
simple
approach
and,
what's
more
third
point,
there's
a
lot
of
added
value
available
in
mgt2
right,
because
the
data
that
it
retrieves
it's
it's
being
cached,
which
means
the
apps
you
build
work
fast
and
work.
The
way
that
users
will
like
their
the
experience,
because
you
will
not
issue
any
additional
requests
that
you
actually
do
not
need.
So
with
that.
A
I
think,
is
the
time
to
have
a
look
at
microsoft,
graph
toolkit
in
practice,
and
when
I
talk
about
mgt
microsoft,
graph
toolkit,
I
always
like
to
start
with
mgt
dev.
It's
a
great
experience
on
the
web
that
doesn't
require
you
to
install
anything
and
that
allows
you
to
experience
microsoft,
graph
toolkit
in
practice.
So
in
here
we
have
an
example
of
mgt
agenda,
which
is
one
of
the
building
blocks
that
we
have
available
in
mgt.
A
That
allows
you
to
show
a
list
of
events
coming
from
the
calendar
of
the
current
person
coming
from
graph
and
show
that
in
our
app
notice
that
this
is
our
app
in
this
case
our
app
consists
of
this
single
line
of
code.
We
have
nowhere
here
off
or
anything
else,
it's
just
this
like
there
is
no
javascript
that
we
need
extra
for
it.
There
is
no
css.
A
A
Another
thing
is,
for
example,
imagine
that
you
want
to
let
users
pick
a
file,
because
that
is
one
thing
that
we
see
a
lot
too,
is
that
many
apps
circle
around
files
right.
So
that
is
a
common
thing
that
we
see
developers
build
in
their
apps.
Well
again,
with
mgt
file
list,
you
can
show
the
list
of
files
either
from
the
whole
drive
or
a
specific
folder
of
specific
type
and
so
forth,
and
so
on.
It's
as
simple
as
that.
A
There
is
also
an
article
thing
that
we
see
applies
to
many
apps
is
people
because,
no
matter
what
type
of
app
you
build,
you
need
some
info
about
a
person
whether
that's
your
team,
your
colleague,
sign
a
ticket.
You
want
to
see
something
else
about
someone,
it's
all
about.
Other
users
in
your
org
right
so
in
here
you
have
a
simple
way
to
show
a
list
of
people
right
and-
and
this
is
just
a
default,
but
there's
also
a
way
to
apply
a
query
that
allows
you
to
show
specific
group
of
folks
now.
A
Another
cool
thing
is
that
we
see
a
lot
is
the
ability
to
show
more
info
about
a
person
and
like
by
itself.
This
is
cool,
but
let
me
show
you
a
thing
that
we
see
being
used
a
lot,
which
is
person
with
a
person
card
right.
So
in
here
you
have
additional
info
about.
You
see
the
person's
picture
name,
job
title
department,
email
telephone
number,
but
also
their
org
org
chart
some
info
about
them,
and
all
of
that
comes
actually
with
this
single
line
of
code.
A
The
additional
thing
that
we
see
here
is
meant
to
extend
the
person
card
with
additional
info
about
stuffed
animal
friends,
apparently
right.
So
it
also
shows
you
the
ability
that
you
are
not
only
bound
to
the
things
that
are
available
out
of
the
box,
but
you
can
also
adjust
it
to
your
own
needs,
and
initially
I
showed
you
the,
for
example,
mgt
agenda
showing
a
list
of
events,
but
it
doesn't
need
to
look
like
this
now.
Imagine
that
you
want
to
show
it
like
a
timeline
three
to
one
with
some
additional
work.
A
So
imagine
that
in
your
team
you
have
a
person
who
is
skilled
with
html
and
css.
They
can
easily
build
the
code,
the
markup
you
actually
need
to
have
mgt
download
for
you,
the
list
of
events
and
display
it
in
this
view,
which
is
very
rich
and
yet
simple,
because
the
cool
thing
is
nowhere
in
here
you
see
us
doing
off
getting
a
token
issuing
a
request
to
graph
parsing
response
handling
errors.
You
don't
need
to
worry
about
any
of
that
microsoft
graph
toolkit
does
all
of
that.
For
you
right.
A
The
only
thing
you
need
to
do
is
to
instruct
it
how
you
want
to
authenticate,
in
other
words,
what
type
of
app
you
build
and
then
instruct
it.
What
data
you
want
to
show
in
your
app
whether
that's
events,
whether
that's
files,
people
or
something
else
and
the
cool
thing
is-
is
that
you
can
also
have
it
like
combine
mgt
with
your
own
css.
So,
for
example,
here
I
combine
mgt
with
the
h2o
framework
and
I
show
info
about
files
as
cards
right.
So
in
here
I've
built
my
own
template.
A
I've.
I've
showed
info
about
file
and
I
have
some
extra
css
for
that
to
show
it
the
way
I
want
to
so
it's
really
flexible
in
in
the
sense,
and
it
really
allows
you
to
do
anything
you
need
well.
The
cool
thing
about
mgt
is:
is
that
it's
really
simple?
This
is
the
minimal
app,
and
it's
just
as
simple
as
that.
It
is
four
lines
of
code,
one
I
load
mgt
in
my
app
here
I
say:
hey,
I'm,
building
a
single
page
app
and
I
created
an
app
in
azure
id
right
host.
A
All
that
my
app
knows
how
to
access
microsoft
graph
in
there
I
use
msultum,
meaning
I
build
a
single
page
app
now.
If
I
wanted
to
build
spfx
web
part
or
teamstep,
I
would
authenticate
differently,
but
in
a
single
page
app
I
use
msl2,
I
use
a
login
so
that
users
will
have
iui,
and
with
that
I
want
to
show
agenda
right.
I
want
to
show
the
list
of
events
so
with
that.
A
Let's
have
a
look:
how
that
will
work
in
practice,
so
I
will
do
npm
start
to
run
this
single
file
app
in
browser
and
it's
all
live
right.
So
here
I
am
already
authenticated
as
megan,
and
I
can
see
that
I
have
access
already
to
my
events
coming
from
my
calendar
again
going
back.
This
is
the
whole
app
notice
that
there
is
no
auth
code
handling
auth
responses.
A
Caching,
tokens
issuing
requested
graph,
none
of
that.
Why?
Because
I
use
microsoft
graph
toolkit
and
it
does
all
of
these
things
for
me.
So
that
is
a
quick
overview.
Let
me
give
you
some
additional
resources
that
you
can
use
to
explore
it
more
right.
So
the
next
step
I'd
recommend
you
to
take
the
learn,
microsoft,
graph,
toolkit
learning
path.
A
Another
thing
that
you
have
seen
is
mgt
dev,
which
is
the
web
experience
that
you
can
use
to
really
easily
try
out
what
is
in
mgt,
different
options,
providers
and
so
forth,
and
so
on
right.
So
you
so
there's
a
great
way
to
try
mgt
in
browser
for
yourself
and
then
the
last
step
is
check
out
the
mgt
docs,
because
they
explain
what
is
available
in
mgt,
how
you
can
use
it.
They
show
show
samples
of
code
too
right.