►
From YouTube: SharePoint Framework Tutorial - Using Microsoft Graph in your SharePoint Framework solutions
Description
Video showing in practice how to get started on using Microsoft Graph within your SharePoint Framework solutions. Performs steps defined in https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis
January 2020 version using SharePoint Framework 1.10.
More details around SharePoint Framework from http://aka.ms/spfx
Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp
Sharing is caring!
A
Welcome
to
this
getting
started
with
SharePoint
framework
tutorial
series,
and
in
this
tutorial
we
can
create
a
new
web
part
which
will
use
the
Microsoft
graph
API
to
access
the
relevant
contextual
information
about
the
user.
So
in
this
case
we
can
actually
access
the
latest
emails.
What
the
user
has
received
in
his
or
her
Outlook
I
would
look
out
the
business
email
now.
This
is
January
2020
edition.
We
are
using
SharePoint
framework
1.10.
So
if
you're
watching
this
video
later
on,
it
might
be
slightly
changed.
So
please
have
a
look
on
the
documentation.
A
The
latest
documentation,
the
documentation
is
always
kept
a
more
up-to-date
than
the
videos,
so
the
documentation
obviously
is
a
link
in
the
video
description
as
well.
Now,
let's
actually
get
started
on
moving
on
with
the
tutorial.
So,
first
of
all,
we
kind
of
use
our
Windows
10
environment,
which
is
a
clean
set
up.
There's
nothing
really
special
here.
We're
gonna
use
a
niche,
there's
H,
chrome
being
installed
and
visitors
to
their
code,
install
in
here
and
but
first
we're
going
to
do.
We
need
to
create
our
solution.
Folders.
A
Let
me
actually
go
to
the
location
which
I'm
just
using
a
C
code
folder
for
all
of
the
solutions
with
which
we
are
creating.
So
you
can
see
some
of
the
old
solutions
available
here
as
well,
so
let's
actually
clean
up
and
let's
follow
up
on
the
tutorials,
so
we're
first
thing
requested
to
create
a
folder
and
we're
going
to
actually
then
store
our
solutions.
So
let's
do
that
so
see.
A
The
graph
API
is
now
we're
in
the
solution
and
then
we
kind
of
execute
and
the
yeoman
generator
in
the
solution
and
to
start
the
creation
of
the
SharePoint
framework
solution.
So
Bhosle
the
basic
flow
is
exactly
the
same.
Regardless
are
we
using
the
REST,
API
or
graph
API?
Is
we
kind
of
execute
the
OMA
generator
and
then
create
the
solution
and
modify
the
requirements,
our
the
solution
structure
based
on
our
business
requirements?
A
Now,
let's
actually
use
the
default
solution.
Name,
we
kind
of
target
SharePoint
Online,
Microsoft
graph,
API
so
not
available
in
on-premises,
because
it
is
a
cloud
dependent
capabilities
of
cantana
shipment
online.
From
that
perspective,
technically,
you
could
actually
use
an
older
versions
as
well,
and
then
access
to
the
API
is,
but
it
can
get
slightly
messy.
So
let's
not
actually
worried
about
that.
Much
too
much
we're
going
to
use
the
current
folder
as
the
solution
structure
and
we
kind
of
actually
say
yes
and
that
we
kind
of
deploy
the
solution.
A
Our
the
web
part
crossed
the
whole
ten
and
immediately
so
just
super
convenient
way
of
making
sure
that
the
web
part
is
available
across
the
whole
tenant,
rather
than
requiring
that
to
be
installed
one
by
one
on
every
single
sign
for
the
api's
permissions.
We're
not
going
to
actually
require
a
unique
permissions.
A
This
basically
means
they
in
isolation
and
off
the
web
part
and
which
might
be
kind
of
irrelevant
to
if
you're
accessing
a
lot
of
the
graph
scopes
and
permissions,
because
you
want
to
really
make
sure
that
another
web
part
can
not
access
the
access
tokens
on
the
craft
on
the
graph
API
switch.
Another
web
part
is
using
and
then
potentially
you
might
use
the
new
yes
in
here
now
in
general,
all
of
the
bit
parts
are
being
installed
by
a
tenant
administrator.
A
So
we
definitely
recommend
that
you
understand
what
those
web
parts
are
and
you
can
trust
the
developers
of
the
web
part.
So
all
of
your
code
has
been
reviewed,
so
you
don't
have
to
have
this
full
level
of
an
isolation
but
again
depending
on
a
company
policies,
and
answering
here
might
be
yes
or
no,
and
in
our
case
we're
kind
of
you
know,
and
we
are
targeting
a
web
part.
A
So
that's
the
whole
point
of
using
SharePoint
framework
for
these
kind
of
a
UX
operations,
because
it's
really
really
convenient
and
that
we
are
able
to
use
to
graph
api's
without
a
requirement
to
go
to
the
other
ad
and
request
permissions
and
all
that
stuff.
So
to
be
fair,
you
still
need
to
be
a
tenant.
A
Administrator
administrator
need
to
recant
donated
permissions
which
were
requesting,
but
let's
actually
go
through
that
process
slightly
later
on
the
tutorial
so
which
frame
recur,
but
can
I
use
we're
going
to
use
no
JavaScript
framework
as
the
default
scaffolding
option,
which
will
then
create
and
the
default
solution
for
us
without
any
specific
JavaScript
framework
being
used
again
any
framework
in
the
world.
It
can
be
used
pretty
much
on
on
the
SharePoint
framework.
There
is
no
limitation,
so
any
this
doesn't
mean
that
it's
only
reactant,
knockout
being
supported
and
I
know.
A
So
let's
actually
make
that
one
happen.
So
it
doesn't
it
too
long
actually
at
that
install
that
one
as
part
of
the
solution
and
that's
going
to
be
done
installing
do
needed
solutions
and
packages
and
assets
to
the
node
modules
folder
and
there
we
go
now
what's
actually
interesting
and
what
we
need
to
do
next
is
really
concentrate
on
the
configuration
of
the
solution.
So,
first
of
all,
we
are
looking
into
creating
creating
and
web
part,
which
is
listing
some
emails.
A
So
basically
the
package
solution-
Jason
is
the
one
with
this
package
to
cater
with
SP
pkg
for
the
actual
solution
with
consent
contains
two
assets
and
JavaScript
files,
and
then,
when
you
install
that
on
the
tenant,
we
actually,
for
example,
grant
or
request
the
granted
permissions
around
the
craft
for
web
baby
or
a
custom.
Api
is
that's
an
example,
so
you
can
definitely
also
it's
not
just
about
the
craft.
You
can
call
a
insecurely
a
custom
web
api
with
the
sourced
and
in
russia,
and
so
you
can
get
business
relevant
information
for
you.
A
A
Now,
if
we
would
use
the
domain
isolated
option,
we
would
only
create
a
dynamically
an
application
and
grant
only
permissions
for
that
particular
web
part
or
that
particular
solution.
So
that's
it
one
interesting
option
to
consider:
let's
not
worry
about
that
much
too
much
in
this
tutorial
and
there
is
additional
documentation
available
what
it
means
in
practice,
if
you're
not
quite
up
to
date
on
all
of
those
options,
but
in
this
case
let's
concentrate
on
actually
getting
to
top
five
or
latest
emails
from
the
user.
A
So
we
can
actually
request
scope,
mail,
the
treat
because
we're
looking
into
reading
and
the
email
of
the
particular
user.
Now
then
we're
going
to
go
to
our
web
port
code.
Relieve
simple
web
part,
so
we're
not
going
to
make
this
super
super,
pretty
not
the
Stiles
to
actual
actually
web
barcode,
and
in
here
we
can
include
two
different
inputs.
A
So
we
can
include
here
import
for
our
SB
HTTP,
because
we're
going
to
use
the
Microsoft
craft
client,
which
again
is
super
convenient
object
which
actually
takes
care
of
the
the
header
settings
and
access
tokens
and
everything
in
behind-the-scene.
So
you
as
a
developer,
you
don't
need
to
worry
about.
Where
do
I
get
the
token?
A
How
do
I
set
that
that
token,
to
the
to
the
rest,
API
calls
and
Harrison
settings,
and
all
of
that
everything
is
abstracted
from
you,
so
you're
able
to
just
say
myself,
craft
client
give
me
all
of
these
laws
and
then
we
can
operate
from
there
and
what
it
also
does
it
encapsulate
and
well
actually,
we
we
behind
off
the
scenes,
we're
also
encapsulated
in
the
craft,
JavaScript,
SDK
and
I'll
show
what
that
means
in
practice
when
we're
chasing
the
code.
So
let
me
actually
go
back
in
here.
A
A
What
are
we
getting?
There
is
available
in
the
graph
and
documentation,
so
I'm
not
gonna,
again
deep
dive
on
all
of
those
assets.
But
basically,
what
we're
saying
here
is
that
give
me
two
five
messages
or
if
I
received
a
time
desk,
so
the
latest
five
emails
which
I
have
in
my
inbox
and
then
we're
rendering
some
entry
here
and
we
have
this
list
container
available,
so
we're
adding
there
a
div
where
we
will
be
then
embedding
the
list
of
emails
in
a
simplest.
A
A
Now
you
can
see
that
at
the
render
email
list
is
currently
still
missing.
So
let's
actually
include
that
function
in
the
in
the
web
part-
and
here
we
go
and
base
that
one
in
this
interesting
intent
problem
with
that
one
as
well,
apparently
part
of
the
SharePoint
framework,
1.10
widows,
a
small
things
on
the
intends,
but
let's
get
that
one
fixed
in
the
future
versions.
Now,
let's
concentrate
what
we
do
here
render
email
list
which
is
called
from
render.
We
are
getting
basically
the
list
of
messages
which
we
are
actually
getting
from
this
craft.
A
A
So
pretty
cool
then
we're
getting
the
instance
that
the
SBA
list
container-
that
was
basically
that
deep
over
there
and
then
we're
injecting
that
HTML,
which
we
created
here
as
part
of
the
inner
HTML
of
that
div,
which
hopefully
makes
sense
out.
We
are
now
extending
dynamically.
The
Dom
structure
of
that
particular
web
part
good
and
that's
actually
for
making
the
needed
change.
There's
a
super
simple
thing.
So,
let's
actually
get
back
on
our
console.
Let's
do
a
full
full
round-trip.
A
So
let
me
actually
clear
this
one:
a
full
round-trip
or
full
installation
by
running
a
call
up
and
bundle
and
that's
the
ship,
so
I
don't
actually
have
to
have
anything
running
in
my
local
host
and
that's
gonna
bundle.
The
way
part
I'm,
just
gonna
double
check
that
I
saved.
Yes,
I
save
the
changes
and
there
would
be
a
small
marker
over
there.
A
I
have
a
bad
habit
of
doing
changes
and
then
forget
about
saving
them
and
then
you're
wondering
why
isn't
it
working
and
probably
not
the
only
one
of
those
having
that
problem
every
now
and
then
now
go
up
baggage
solution?
Does
that
ship
is
the
other
command?
So
now
we
are
creating
the
actual
SharePoint
solution.
A
Remember
that
I
know
that
catalog
gain
is
in
Apps
URL
and
in
our
case
we
actually
have
here.
One
web
part
already
available
hello
world
web
part
from
the
previous
tutorials,
which
we've
been
playing
around
and
testing
and
within
this
environment,
but
hey
we
can
have
as
many
web
parts
in
the
app
catalog
as
needed,
so
I'm
going
to
try
conjure
up
the
craft
ApS
in
and
then
we
have
additional
things
which
we
need
to
consider
now
few
things
to
notice
here,
and
we
wanted
this
to
be
a
10
on
deployed
waiver.
A
So
basically,
this
option
is
then
available,
so
to
make
this
solution
available
in
all
the
sides
of
organization.
So
let's
actually
click
that
one.
More
importantly.
Actually
there
is
the
please
go
to
a
planets
and
pay
to
approve
pending
permissions.
There
are
permissions
that
need
to
be
reviewed,
Microsoft
graph,
email
read
so
basically
the
setting
in
our
visual
studio
or
a
packet
solution.
Jason,
let's
get
back
in
here
and
on
the
config
file.
I
mean
here
this
one
in
here
is:
where
is
starting
the
process
inside
of
SharePoint
Online
that
a
well?
A
We
have
this
requirement
of
actually
approving
mailed
or
free
permission.
This
web
part
will
not
work
until
this
operation
has
been,
or
this
permission
have
been
granted
now.
You
could
actually
crank
these
permissions
beforehand
using
PowerShell,
so
that's
definitely
an
option,
so
you
don't
have
to
wait
until
the
solution
gets
in
to
go
to
the
admin
UI,
but
okay,
let's
nail
that
one
click
deploy
and
double
check
that
we
don't
have
any
exceptions.
Looking
good,
no
errors,
it's
they're
not
deployed
it's
deployed.
Everything
is
looking
good.
A
What
did
I
do
it?
Let's
actually
get
back
in
here,
I
added
in
one
additional
zero
there
OOP.
So
let's
go
admin
and
that's
gonna
then
redirect
us
to
the
SharePoint
add
in
center
in
that
messenger.
If
we
extend
in
the
advanced
option
and
we
go
to
the
app
manage
and
when
we
can
actually
then
see
the
pending
approvals
of
those
requests
that
permissions,
which
have
not
yet
been
approved,
there's
few
settings
here
and
two
different
options
which
again,
depending
on
your
turn
on
status.
A
We
are
right
now
asking
organizational
wide
emissions
to
married,
and
this
means
that
any
shipment
framework
solution
using
the
craft
object
will
be
able
to
access
that
kind
of
a
scope.
Now,
if
the
solution,
if
we
won't
wanted
to
have
a
isolated
solution,
where
the
permission
are
only
of
cran,
that,
for
that
particular
shape
and
framework
solution,
then
it
would
not
be
an
organizational
white
request.
It
would
be
a
solution.
Specific
request,
but
in
this
organization
we
have
decided
that
married
yeah,
that's
completely
fine.
A
We
don't
consider
that
as
a
massive
deal
and
because
it's
the
user,
who
is
anyway
accessing
and
it's
the
particular
users
permission.
So
it's
a
delegated
permission.
It's
not
that
you
can
read
everybody's
email
in
the
organization.
No,
no,
that's
not
what
it
means.
It
means
that
the
particular
user
accessing
the
signed
in
authenticated
access
in
SharePoint
Online
can
read
their
own
email.
A
That's
what
it
actually
means
and
then
we're
gonna
do
a
proof
and
we're
gonna
concern
approval,
react
access,
there's
the
request
and
we're
going
to
approve
that
the
permission
and
that's
going
to
then
move
and
that
permission
added
organization
or
wider
section
under
the
approve.
So
we
can
actually
say
that
the
mail
read
has
been
approved,
and
this
means
that
we
can
actually
test
out
how
our
web
part
will
work
in
practice.
So
let's
actually
do
that.
So
let
me
get
back
in
here.
Let
me
go,
for
example,
the
croup
site.
A
The
group
site
is
just
something:
what
I
use
for
testing
always
again:
I
have
a
bad
habit
of
using
or
was
the
same
URLs
but
for
me
helps
on
remembering
what
are
the
things
which
are
always
available
in
my
tenants
now.
Let's
use
this,
the
name
could
be
craf
api's
and
because
again
we
use
the
tenant
my
deployment
option.
Our
web
part
is
available
across
the
whole
tenant,
and
that
means
that
if
I
go
here
and
write
craf,
we
can
say
the
web
part
in
the
web
parts
list.
A
It
is
using
the
default
icons
and
all
of
that
we
didn't
change
them.
Getting
that
one
visible
there,
then
we
can
actually
see
the
list
of
emails
which
we
have
actually
coming
from
the
inbox
so
from
the
users
inbox
in
the
Microsoft
craft,
sorry
in
the
Outlook-
and
we
can
actually
double
check
that
one
as
well
and
that
if
I
go
here
and
if
I
go
to
my
Outlook,
we
can
set
the
list
of
emails
is
available
here.
A
A
We
are
able
to
access
the
emails
and
the
contextual
information
of
the
particular
user
using
the
graph
API
and
obviously
you
can
create
much
more
sophisticated
solutions,
much
more
nicer,
rendering
much
more
accessing
all
of
the
information
which
are
available
in
the
Microsoft
graph,
so
using
the
particular
users
kind
of
identity
as
a
central
starting
point,
but
there's
so
much
more
available.
It's
not
just
about
the
emails,
not
just
about
calendar,
and
it's
just
about
and
the
basic
set
up.
A
There's
a
lot
of
API
is
available
and
you
can
access
the
tasks
you
can
manage
the
tasks
or
but
also
there's
out-of-the-box
task
management
as
well.
You
can
combine
multiple
different
information
using
the
graph
API
and
it's
all
really
easily
available
for
you
when
you're
implementing
your
solutions
using
Microsoft
crafts.
Maybe
at
one
point
to
remember.
I
touched
this
on
the
introduction.
When
we
were
actually
approving
our
request
and
the
actual
request
of
the
permission
package
solution
and
the
married
permission
in
the
tenant
admin.
You
eyes,
you
will
need
to
be
a
tenant
administrator.
A
You
need
to
be
AK
local
administrator
to
grant
that
permission,
because
you
aren't
actually
operating
against
Archer
80.
Now
it's
a
one-time
operation,
it
doesn't
mean
that
and
the
user
who's
actually
using
the
web
part
has
to
be
an
administrator.
No,
no
it's
around
the
fact
that
you
are
going
do
nuts
and
UI
you
cram
the
permission
and
then
you're
good
to
go
it's
a
one-time
operation
for
making
things
happen,
but
that's
it
for
this
particular
tutorial.
Talking
about
options
really
easy
we're
using
the
JavaScript
SDK
for
craf
accessing
the
information.
A
You
can
really
easily
access
any
of
the
scopes.
As
long
as
you
request
the
Scopes
beforehand,
you
can
isolate
to
request
if
needed
as
well
and
there's
plenty
of
additional
documentation
around
the
Microsoft
craft
and
using
that
in
our
documentation
as
well.
If
something
is
missing,
please
do
let
us
know.
Thank
you.