►
Description
In this tutorial, we will create a SharePoint Framework web part and use Microsoft Graph to get access on the user specific information - or more specifically in this scenario, we are accessing latest emails of the user.
You can find a written version of this tutorial from following location - 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
Any
framework
in
the
world
is
actually
supported
with
SharePoint
framework.
Now,
let's
actually
speed
up
the
video
after
the
disco,
folding
is
completed
and
continue
from
there
cute
and
now
our
scaffolding
is
completed,
so
let's
actually
clean
them
and
the
windows
slightly,
and
we
can
actually
start
up
the
resource
today
occurred
already,
but
before
we
actually
start
modifying
the
code,
let's
add
some
types
and
settings
available
in
the
solution.
So
let
me
actually
get
back
still
on
the
comment
line
and
then
we're
gonna
run.
A
A
Actually
at
that
install
that
one
as
part
of
the
solution
and
that's
going
to
be,
then
installing
do
needed
solutions
and
packages
and
assets
to
the
node
modules
folder
and
there
we
go
now
what's
actually
interesting
or
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
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
part
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
behind
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
heroes
and
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
encapsulates
and
well
actually,
we
we
behind
off
the
scenes,
were
also
encapsulated
in
the
craft.
Javascript
SDK
and
I'll
show
what
that
prime
means
in
practice
when
we're
chasing
the
code.
So
let
me
actually
go
back
in
here.
A
What
are
we
getting?
There
is
available
in
the
craft
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
and
so
we're
adding
there
a
div
where
we
will
be
then
embedding
the
list
of
emails
in
a
simplistic
way.
A
A
Now
you
can
see
that
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
intense.
But
let's
get
that
one
fixed
in
the
future
version.
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,
SDK
call.
A
A
So
pretty
cool
then
we're
getting
the
instance
to
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,
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,
call
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
going
to
double
check
that
I
saved.
Yes,
I
save
the
changes
and
there
will
be
a
small
marker
over
there.
A
I
have
a
bad
habit
of
doing
changes
and
then
forget
about
saving
them,
and
then
we're
wondering
why
isn't
it
working
and
probably
not
the
only
one
of
those
having
that
problem
every
now
and
then
now
gulp
baggage
solution?
Does
the
ship
is
the
other
command?
So
now
we
are
creating
the
actual
SharePoint
solution.
We
can
see
that
pop
in
the
end
in
here,
and
there
is
our
solution.
A
Graph
API
is
SDK,
which
we
can
then
install
to
our
app
catalog
and
testing
some
so
I'm
going
to
reveal
that
solution
is
predicated
file
in
Explorer
there
we
go
and
I'm
gonna
open
up
my
tenant
in
my
case
that
I've
had
it
in
my
dev
box
as
a
default
entry,
and
because
I
use
well-known
URLs
in
every
single
tenant
that
I
use
I.
Remember
that
I
know
that
I'm
kind
of
looking
is
in
Apps
URL
and
in
our
case
we
actually
have
here.
A
One
web
part
already
available
the
helloworld
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
cast
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
deploy
paper.
So
basically,
this
option
is
then
available,
so
to
make
this
solution
available
in
all
of
the
sides
of
organization.
A
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
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?
We
have
this
requirement
of
actually
approving
mailed
or
free
permission.
A
This
web
part
will
not
work
until
this
operation
has
been,
or
this
permission
has
been
granted
now.
You
could
actually
crank
these
permissions
beforehand
using
PowerShell,
so
that
was
definitely
an
opportunity,
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
its
deployed.
Everything
is
looking
good.
A
A
Now,
if
the
solution,
if
we
won't
wanted
to
have
a
isolated
solution,
where
the
permission
or
only
your
granddad,
for
that
particular
shape
on
framework
solution,
then
it
would
not
be
an
organizational
might
request.
It
would
be
a
solution.
Specific
request,
but
in
this
organization
we
have
decided
that
married
yeah,
that's
completely
fine.
We
don't
consider
that
as
a
massive
deal
and
because
it's
the
user
who's
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.
A
No,
no,
that's
not
what
it
means.
It
means
that
the
particular
user
accessing
the
signed
in
or
the
indicated
access
since
you
haven't
online,
can
read
their
own
email.
That's
what
it
actually
means
and
then
we're
gonna
do
a
proof
and
we
can
a
concern.
Approval,
react
access,
there's
the
request
and
we're
going
to
approve
and
the
permission
and
that's
going
to
then
move
and
that
permission
added
organization
or
wider
section
under
to
approve.
A
A
The
croup
side
is
just
something:
what
I
use
for
testing
always
again:
I
bad
habit
of
using
always
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
that.
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
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
the
list
of
emails
is
available
here.
They
say:
I
actually
send
it.
A
Those
emails
personality
myself,
and
so
that's
why
we're
getting
certain
set
of
duplicates
and
entries,
but
hey?
It
is
what
it
is
for
the
demo
purposes
that
list,
but
that's
it.
We
are
able
to
access
the
emails
and
the
contextual
information
of
the
particular
user
using
the
graph
API.
So
obviously,
you
can
create
much
more
sophisticated
solutions,
much
more
nicer,
rendering
much
more
accessing
all
of
the
information
which
are
available
in
the
off
graph,
so
using
the
particular
users
kind
of
identity
as
a
central
starting
point,
but
there's
so
much
more
available.
A
It's
not
just
about
the
emails,
my
stress
about
calendar
and
it's
just
about
and
the
basic
set
up.
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,
and
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.
A
I
touched
this
on
the
introduction
when
we
were
actually
approving
our
request
and
the
actual
request
of
the
permission
package
solution
at
the
mayor
wreath
permission
in
the
tenant
admin,
you
eyes,
you
will
need
to
be
a
tenant
administrator.
You
need
to
be
AK
local
administrator
to
grant
that
permission,
because
you
are
actually
operating
against
our
ad.
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.
A
No,
no
it's
around
the
fact
that
you
are
going
to
that's
a
UI,
your
crime,
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.
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.