►
Description
This community call demo is taken from the SharePoint development monthly community call recording on 11th of June 2019. In this video, Nikola Metulev (Microsoft) demonstrates usage of Microsoft Graph Toolkit in single page applications and in SharePoint Framework solutions. At the time of the recording, Microsoft Graph Toolkit is in preview status and should not be used in production.
Presenter - Nikola Metulev (Microsoft) - @metulev
More details on the Microsoft Graph Toolkit is available from https://github.com/microsoftgraph/microsoft-graph-toolkit
Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-june-2019-monthly-community-call-recording/
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
So
our
goal
is
to
just
make
it
very
simple
to
to
build
graph
experiences
with
only
few
lines
of
HTML
code
or
or
JavaScript
code,
so
for
developers
who
are
just
starting
to
work
with
the
graph
or
just
want
to
get
started,
building
some
experience
and
just
testing
things
out.
This
is
one
of
the
best
ways
to
kind
of
get
a
feel
for
for
what
is
possible,
and
now
we
start
building
a
few
controls.
A
A
We
have
providers
that
work
with
on
the
web
or
progressive
web
apps
works
with
SharePoint
and
works
with
teams,
and
we're
also
looking
to
add
support
for
office
and
in
frameworks
that
somebody
might
need
to
use
and
it
works
with
any
web
framework.
If
you
are
not
using
web
framework,
if
you're
going
vanilla,
it
works
great,
but
if
using
react
or
angular
or
view
or
even
jQuery,
any
web
framework
out
there.
That
should
work,
because
we
all
fully
support
depending
on
web
standards.
A
As
long
as
the
browser
supports
the
web
standards
or
using
the
polyfills
for
web
standards,
the
components
will
work.
So
the
best
way
to
get
started
is
to
just
go
to
our
github
page,
which
is
at
github
home
/,
Microsoft
graph,
slash,
Microsoft,
crap
toolkit
or
shortcut
lattice,
AKMs,
/,
mgt
and
then
you'll
have
just
getting
started
guide
how
to
get
started
and
start
playing
around
with
this
I'll.
Do
a
quick
demo
just
to
get
a
feel
for
for
what
this
is.
So,
for
example,
here
I
have
an
HTML
page.
A
So,
if
I
just
open
this
in
I'm,
not
in
the
browser,
let
me
just
open
up
in
private
mode,
but
this
side
by
side
here,
I'm
actually
running
a
web
server.
Right
now,
it's
running
on
an
extension
I
have
for
a
visual
studio
code.
Called
browser.
I
forgot
what
it
is
called,
doesn't
matter,
I'm
just
running
on
localhost
3000,
so
you
can
see
here
with
this
MVC
login
component.
We
just
have
a
sign-in
button
that
I'm
trying
to
click
it,
but
it
doesn't
really
do
anything
yet,
but
it
does
render
as
a
sign-in
button.
A
So
one
way
that
we've
or
the
best
way,
we
found
that
to
make
this
super
easy
for
developers
to
get
started
and
to
kind
of
add
authentication
to
this.
Is
we
built
these
providers
that
a
lot
of
offers
to
kind
of
specify
how
they
want
these
components
to
authenticate
and
then
use
the
max
or
graph?
The
one
point
that
you
would
use
on
the
browser,
L
suspect,
is
the
MSL
provider.
A
This
uses
MSL
Jeff's
in
the
background
9
background,
but
it
amends
I'm,
Sol,
Jes
and
kind
of
writes
all
the
methods
and
everything
is
for
all
this
components
to
work.
I,
say
question
of
browser
support,
so
this
right
now
works
on
any
browser.
We
provide
polyfills.
That
goes
all
the
way
down
to
ie
11,
so
you
will
be
able
to
use
this
in
any
browser,
including
edge
I
11,
Chrome
Firefox
we've
been
testing
with
all
those
in
our
in
our
development.
A
So
if
I,
not
that
I've
added
the
MSL
provider
here
now,
this
will
give
context
to
all
the
components
to
use
this
provider
to
authenticate
and
for
the
provider
purchase
ID
of
the
client
ID
that
I've
generated
through
the
azure
portal,
and
so
now
that
I
click
sign-in.
It
allows
me
to
authenticate
immediately
tend
to
get
here.
A
And
there
this
noun
signed
in
to
ad
and
I'm,
using
the
I'm,
calling
the
Microsoft
graph
to
kind
of
get
the
data
immediately
from
the
graph,
and
now
that
we've
authenticated,
we
can
start
using
some
more
components
that
we've
added.
So,
for
example,
one
of
the
most
common
components
that
we've
created
is
the
person
component,
which
just
allows
you
to
connect
query
a
person
from
the
graph
and
display
their
details.
So,
for
example,
if
I
do
a
personal
inquiry,
I
have
a
test
account
on
this
tenant,
so
I'm
just
gonna
great
for
test.
A
This
will
go
directly
to
the
graph
and
try
to
find
the
first
person
with
the
query
test
kind
of
displayed
operation.
So
you
can
see
here
on
the
side
that
it's
not
a
person
test.
I
gotta
show
their
name,
and
this
will
show
their
name.
I
can
also
do
things
like
show
email,
also
kind
of
customize
it.
What
I
want
to
show,
and
it
will
customize
customize
that
component,
so
we've
tried
to
kind
of
make
it
easy
to
customize
and
kind
of
play
around
yes,
wife,
Sarah,
correct.
A
Sorry,
that's
the
extension
that
I'm
using
his
life
server
for
via
scope
to
be
able
deserve
Thank
You
Stephen.
Then
we
also
have
some
other
components
such
as:
let's
see
mgt
tasks,
for
example,
for
examine,
do
data
source
equals
what
you
do
and
this
works
with
Microsoft
did
you.
It
goes
to
your
mind
to
do
tasks
and
dispose
them
out,
so
I
can
complete
them
here.
I
can
switch
between
different
folders
in
my
tasks,
for
my
stuff,
to
do,
I
can
add
new
tasks
etc.
A
Since
releases
you
do
that
or
if
I
want
to
work
with
Microsoft
planner
tasks,
I
can
just
remove
the
data
source
and
this
will
go
and
fetch
the
Microsoft
planner
really
really
quickly,
and
this
allows
me
to
go
through
all
the
different
planners.
A
half
on
my
tenant
and
that's
gonna
have
tasks
on
switch
between
buckets,
etc.
I
cannot
play
around
with
this
and
at
etc.
So
for
adding
a
to-do
list
on
my
site
or
my
web
part,
it's
really
really
easy
to
do
that
with
just
a
timesheet
as
a
planner.
A
A
A
Yes,
I'll,
move
on
to
SharePoint
framework,
just
in
just
a
second
and
then
just
one
last
thing,
I
want
to
show
here
before
I
do
that
is
we've
kind
of
started
experimenting
with
things
such
as
templating,
for
example,
I,
can
change
the
template
of
how
I
want
this
to
look
like.
If
you
don't
want
to
use
the
default
a
look
and
feel
of
these
components,
we
change
them.
A
You
can
either
use
CSS
and
just
provide
you
on
CSS
and
disor
right
everything
we're
done
or
you
can
provide
you
on
template
for
what
you
want
things
to
look
like.
So,
for
example,
I
provide
an
event
template
here.
I
can
change
how
each
event
is
rendered,
so
I
can
say
and
then
the
subject
I
can
just
putting
different
things
here
and
then
do
a
vendor
things
differently.
However,
I
want
that
you
cannot
render
and
provide
my
own
one
template
so
kind
of
make
it
more
extensible.
A
Our
goal
has
been
to
make
it
easy
for
developers
to
kind
of
use
these
and
pick
them
up
and
kind
of
adjust
to
the
way
developers
are
used
to
building
components,
not
to
ask
developers
to
kind
of
build
components,
a
certain
way
that
we
want
them
to
do
so.
Now,
speaking
of
SharePoint
I
showed
you
the
MSL
provider,
and
as
as
Alex
mentioned,
we
also
have
a
SharePoint
provider.
A
So,
for
example,
here
I
am
in
a
blank
new
ship
on
what
part
build
would
reacts
is
using
react.
I
just
did
I
did
the
human
generator
to
generate
a
new
SharePoint
provider.
I
did
npm
install
on
the
package,
so
the
package
here
is
installed.
It's
microsoft's
/mg
team.
They
install
from
npm
directly
and
at
this
point
I've
also
had
to
make
sure
that
I'm
using
typescript
3
3
plus
because
the
toolkit
does
require
that
3
plus
typescript.
A
So
I'm
not
going
to
do
this
divest
occupy
3.3
here
to
make
sure
that
that
works,
and
then
once
I've
done
that
work.
Now
I
can
start
using
the
toolkit
inside
of
the
sharepoint
web
part,
so
here
in
the
the
web
part
which
I've
imported
the
providers
and
the
ship
one
provider
from
the
microsoft,
the
graph
toolkit
and
then
once
the
provider
once
the
that
web
part
is
initialized.
I
just
set
the
global
provider
to
a
new
SharePoint
provider
where
I
just
passed
the
context
and
then
the
context
has
all
information.
A
I
need
to
be
able
to
kind
of
start
calling
the
graph
on
behalf
of
the
user
and
then
inside
of
us
the
specific
component.
All
of
them
is
just
added
the
agenda
component
in
there,
and
then
this
should
just
work
out
of
the
box.
I'm
already
actually
Adam
gulp
surface
is
already
serving
this
component
and
when
I
go
to
my
workbench.
A
This
I
can
add
this
webpart
demo
and
there
it
is
it
just
loads
the
agenda,
just
as
it
would
on
on
side
of
the
web
page.
So
it's
really
easy
to
kind
of
start.
Adding
these,
including
them
inside
of
your
web
part
or
whatever
frame
where
you
kinda,
using
or
whatever
language
you're
using
I
showed
this
with
typescript
and
react
works
with
this.
Imagine
angular
works
with
view
or
anything
else
out
there
and
it's
all
based
on
on
all
web
components.
So
that's
that's
pretty
much
it.
A
That's
all
I
wanted
to
share
I
do
want
to
make
sure
that
you
guys
are
aware
of
over
github
repo.
If
you
have
any
questions
or
suggestions
or
comments,
we
do
encourage
you
to
kind
of
make
sure
that
go
to
our
issues
and
just
start
submitting
issues
or
if
you
have
an
idea
of
a
component,
just
put
a
suggestion
of
a
component.
A
We
should
build
on
there
if
you,
if
this
one,
that's
on
someone,
suggested
just
make
sure
you
upload
that
or
+1
that
if
you
do
want
to
contribute,
we
also
have
many
issues
out
there
that
we
are
open
to
the
community
to
kind
of
contribute
and
we're
trying
to
work
with
the
communities.
We
do
everything
in
the
open,
so
all
of
our
planning
is
done
in
projects
on
github.
A
So
you
kind
of
take
a
look
at
our
roadmap
and
see
what's
coming
up
a
couple,
more
new
components
that
we're
working
on
our
people,
picker
that
it's
been
one
of
the
most
requested
components
as
well
as
a
person
card.
So
that
way,
once
you
kind
of
hover
or
a
person,
you
can
get
more
details
about
the
person
etc,
can
never
use
that
across
components
and
then,
as
well
as
make
improving
the
agenda
component,
to
make
it
more
of
a
calendar
as
well
and
kind
of
moving
on
to
other
components
in
terms
of
providers.
A
We're
making
a
lot
of
improvements
to
the
team's
provider
to
make
the
team's
provider
work
great.
On
teams
tabs,
as
well
as
adding
a
new
provider
for
office
add-ins,
so
you
can
use
the
same
components
office
add-ons
and
if
there's
any
places
that
we
haven't
thought
of
that
these
components
might
should
work
to
leverage
the
graph
I.
Also,
please
submit
an
issue,
and
let
us
know
what
those
what
the
framework
should
be.
A
There
there's
a
question
on
localized
labels
they
formats,
so
we
haven't
done
that
work,
one
of
the
because
we're
still
in
preview
and
the
reason
why
is
because
we
haven't
figured
out
some
of
those
things
such
as
localization,
accessibility,
etc.
So
we're
one
of
the
focuses
before
we
can
actually
go
to
a
1.0
is
trying
to
figure
out.
How
do
we
do
localization?
How
do
we
do
accessibility
and
how
do
we
make
these
components
be
very
useable
and
you
know
make
sure
that
they
can
be
used
by
anybody.
A
B
For
me,
Thank
You
Nikolai,
so
before
you
close
and
before
you
stop
sharing,
can
you
actually
go
to
the
config,
folder
and
open
the
package
solution?
Json
file,
just
to
pinpoint
that
one
from
the
shipment
framework
perspective,
because
you
still
have
obviously
the
centralized
control
the
packet
solution
target
solution
here,
so
the
permissions
are
still
needed
to
be
approved
in
the
SharePoint
Online
context.
So
this
is
basically
the
IT
enterprise-level
governance
with
SharePoint
framework
is
providing
on
top
of
the
the
things.
B
A
Correct,
yes,
you
have
to
before
to
access
the
APS.
You
still
have
to
do
right
now.
This
is
not
magic.
We're
gonna
give
you
access
to
give
you
permissions
to
use
those
so
to
get
this
to
work.
I
have
to
package
my
packages,
webpart
upload
it
to
my
SharePoint
and
approve
those
permission
as
an
administrator.
In
order
for
this,
the
what
to
them
I
showed
you
to
work
so
I
kind
of
forgot
to
mention
the
core.
So
thank
you
number.
B
A
B
A
Yeah,
you
just
pass
the
context
and
then
because
we
have
this
global
Pro,
this
provider
interface.
It
just
actually
just
takes
that
context
and
just
knows
how
to
talk
to
the
graph
once
you've.
Given
those
permissions,
if
you're
using
different
type
of
authentication,
we
also
provide
interfaces
that
you
can
extend,
so
you
can
make
your
own
provider
and
just
set
the
global
provider
to
Jung
personal
provider,
and
then
we'll
use
your
authentication.
So
you
don't
even
have
to
use
our
providers.
B
B
A
B
Absolutely
or
some
stuff,
Thank
You
Nicola
I'll
flip
the
slides.
Thank
you.
Thank
you.
You
will
definitely
follow
up
on
on
this
journey
as
well.
So
we'll
probably
schedule
a
new
one,
then
in
the
autumn
timeframe,
when
we,
when
there's
some
more
variations
and
functionalities
available,
because
I
think
it's
highly
beneficial.
To
recap
these
things
as
well,
because
it's
up
like
this
always
the
same
people
in
this
course.