►
Description
In this tutorial, we will continue with the web part project we created in the previous tutorial and modify that to use REST APIs for connecting information in SharePoint Online.
⬅️ This tutorial assumes that you have completed following steps - https://www.youtube.com/watch?v=6WTtjXP5yW4
➡️ Next steps are in following video - https://www.youtube.com/watch?v=FkFg32NSTM0
You can find written version of this tutorial from following location - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint?WT.mc_id=m365-15744-cxa
April 2022 version using SharePoint Framework 1.14.
• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen
SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.
Supporting materials:
• Tutorial documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint?WT.mc_id=m365-15744-cxa
• More details around SharePoint Framework - https://aka.ms/spfx
Learn more:
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp
Sharing is caring! You are awesome! 🧡
A
A
Good,
so,
let's
actually
get
moving
in
our
development,
I'm
going
to
actually
go
and
start
and
open
up
my
code
or
go
into
the
right
folder.
So
I
guess
we
used
code
folder
and
in
here
we
created
a
web
part.
So
I'm
going
to
open
up
my
resource
studio
code
from
that
folder,
so
making
sure
that
we
are
in
the
right
location.
I
do
have
the
terminal
already
here
open.
I
personally
again,
I
prefer
using
the
terminal
like
inside
of
the
wizards
to
their
code.
It's
a
matter
of
her
preference.
A
A
So
that's
basically,
then
making
sure
that
our
code
is
running
behind
the
scenes,
all
the
time
and
not
necessarily
required,
but
then,
as
we're
catching
all
of
the
updates
and
recompiling
the
code.
We
can
just
easily
come
in
here
and
do
a
refresh
and
we
can
see
how
the
code
just
changing
and
it's
always
good
to
start
by
double
checking
that,
yes,
the
code
looks
fine,
we
are
in
a
good
status
and
everything
works.
There's
no
exceptions,
it's
good
good,
good,
good
status
to
start
our
next
step
of
development.
A
A
Inside
of
the
web
part,
let's
go
to
the
render
section
and
adjust
this
setting
a
bit
so
we're
going
to
simplify
this
structure
a
bit
so
we're
going
to
conclude
of
the
sum
of
the
settings.
So
the
request
is
really
on
replacing
everything
what
we
have
here
from
the
line-
36
old,
oh
not
too
far,
not
so
far.
Let
me
do
this
in
the
keyboard.
A
And
there
we
go,
let's
get
rid
of
all
of
that
and
and
paste
in
this
piece
of
code,
so
we're
gonna
a
bit
simplified,
the
rendering
of
this
web
part
and,
more
importantly,
we
can
actually
see
the
properties
description.
But
we
have
something
really
interesting
here,
which
says
this
dot
contacts,
page
context
and
web
and
title
this
is
really
a
creating
of
the
web
parts.
Of
course
you
can
easily
access
the
context
where
you
are
so
I
can
do
this
context
and
I
can
access
information.
A
I
can
access
helper
classes,
I
can
access
microsoft,
craft
api.
I
can
access
other
things
here
as
well.
I
can
do
page
context
and
from
page
context-
and
I
can
do
and
clarify
information-
am
I
in
a
list
or
accessing
a
list
item?
Is
it
that
what
is
a
site?
What
is
a
web
site
basically
means
site,
collection
and
web
means
site.
It's
a
bit
of
a
confusing
thing
in
sharepoint,
but
historical
names,
all
the
cultural
info
as
well.
So
I
can
actually
go
and
and
figure
out
what
is
the
current
ui
culture?
A
Is
it
right
to
left
and
all
of
those?
So
a
lot
of
details
available
in
the
page
context
and
that's
what
we're
doing
there
so
on
runtime.
This
will
resolve
then
the
title
of
the
site
where
we
are
running
the
web
part.
So
that's
actually
really
really
cool
cool
thing.
So
let
me
actually
save
the
changes.
A
Let
me
put
the
terminal
a
bit
higher
and
I
will
save
the
changes
control
s.
We
can
see
that
the
static
assets
and
everything
is
getting
re-assessed
and
the
webpack
is
running
so
we're
getting
a
new
version
of
the
web
part
available,
and
that
then
means
that
if
I
come
in
here
and
if
I
do
refresh,
we
can
actually
see
a
new
version
of
our
web
part
and,
more
importantly,
we
can
see
the
updated
layout
and
it
says
loading
from
dev,
the
dev
being
the
site
where
we
are
actually
running
this
code.
A
So
let's
do
a
bit
more
complicated
thing.
So
let
me
go
to
the
dev
and
dev
has
a
title
of
death.
Well,
that's
a
bit
of
a
boring
thing:
let's
go
and
adjust
that
let's
wait
for
the
gear
to
come
in
the
top
right
corner
any
second.
Now
there
we
go,
and
now
I
can
actually
go
to
the
site
information
and
I
can
adjust
the
site
name
and
say
my
developer
site
and
the
site
can
also,
of
course,
have
a
description.
A
It
can
have
other
things
to
say:
let's
not
worry
about
that
too
much,
I'm
updating
the
title
of
the
site.
There
we
go
and
now,
if
I
go
again
in
the
online
workbench
in
the
context
of
that
site-
and
we
are
dynamically
accessing
the
information
of
the
site,
you
can
pretty
much
guess
what's
going
to
happen
here,
so
loading
from
my
developer
site,
so
the
title
has
been
updated
because
again
we
are
in
the
context
of
that
site.
A
A
What
we
actually
want
to
do
here
is
that
we
want
to
access
the
site
structure
and
then
we
want
to
list
all
of
the
lists
within
the
site.
So
we're
going
to
use
an
api
and
rest
api
to
access
that
information
in
the
site
and
that's
a
relatively
simple
thing
to
do,
but
let's
actually
start
doing
that.
Let
me
go
to
the
code.
Let
me
put
the
this
one
a
bit
down,
so
I
want
to
see
what's
happening
there.
A
So
that's
that's
why
I
actually
have
it
in
there
and
let's
go
to
our
hello
world
web
rts
file.
Let's
introduce
two
new
classes
here:
I'm
gonna
go
based
from
the
code,
so
sp
lists
and
sp
lists.
So
basically,
what
we're
looking
to
doing
is
getting
access
on
all
the
lists
within
the
site
and
then
the
title
output
in
the
title
of
all
of
the
list
within
the
site
within
the
code.
A
Now
then,
what
we
want
to
do
is
that
we
want
to
take
advantage
of
the
existing
http
helpers.
What
we
have
within
the
sharepoint
framework,
so
there's
a
separate
helpers
for
accessing
information
in
microsoft,
craft,
which
is,
of
course,
the
preferred
option
and
the
microsoft
graph
api
surface
is
so
huge.
A
But
as
this
is
a
relatively
simple
web
part,
we
can
always
use
sharepoint
rest
api,
which
simplifies
things
a
bit
as
well,
so
we're
going
to
use
now,
sp,
http
and
http
sp
http
client
takes
care
of
the
authentication
authorization
all
of
that
stuff
behind
the
scenes.
So
it
makes
our
life
super
surprising.
So
we
don't
need
to
worry
about
adding
headers
and
handlers
and
all
of
that,
as
part
of
our
rest
calls
all
of
that
is
getting
hidden
and
abstracted
from
our
calls.
A
A
And
then
we
will
add
few
more
styles.
So,
first
of
all,
I'm
double
checking,
there's
no
exceptions.
We
were
successful,
no
exceptions.
Everything
is
running,
so
that's
good
and
then
the
next
step
is
actually
add
a
few
additional
styles
so
which
we're
going
to
use
in
our
outputting
of
the
html.
So
I'm
going
to
go
to
scss
file
here,
it's
a
much
hello
world
part
module
scss
file,
which
is
basically
the
css
kind
of
the
css
definition
or
the
styling
of
the
web
part,
and
in
here
we're
going
to
paste
in
from
the
code.
A
If
two
new
styles,
three
new
styles,
two
new
styles
list
and
a
list
item-
these
are
quite
complicated,
stylings
and
and
quite
to
be
honest,
quite
ugly
layout.
But
that's
not
the
point.
You
understand
how
they're
being
then
used
in
the
code.
Okay,
we
saved,
we
didn't
have
any
exceptions
and
we
are
good
to
go
and
then
let's
go
back
in
the
web
part
site.
A
So
let
me
save
that
one
and
let's
actually
include
one
more
thing
or
a
few
more
things
actually
in
the
code.
So
let's
add
one
more
method
and
let's
have
a
look
on
that
method.
So
this
is
actually
render
method
and
it's
going
to
take
the
sb
list
array
and
then
it's
going
to
say
all
of
the
lists
in
the
sp
lists
array:
let's
output,
a
individual
line:
what
about
those
individual
items,
a
bullet
point
with
with
the
title
into
html?
So
this
is
basically
in
loop.
A
But
I'm
going
to
add
here
the
render
list
async
and
then
in
here
we
are
calling
the
getless
data
and
then
we
are
bypassing
the
response
to
the
render
list
again
matter
of
a
preference,
how
many
functions
and
methods-
and
you
want
to
use.
You
could,
of
course
have
all
of
this
code
in
a
single
method
as
well
again
matter
of
design.
A
This
is
a
matter
of
an
evolution
actually
in
our
tutorials.
Why
do
we
have
three
of
these?
But
but
again
you
would
be
able
to
combine
them
to
be
actually
one
as
well
better
for
preference.
Now
that's
render
async
is
then
responsible
of
actually
getting
the
data
and
rendering
the
data.
Now
we
just
need
to
make
sure
that
we
are
actually
rendering
or
calling
that
method
somewhere.
So
let's
go
again
to
the
render
method
and
do
a
bit
more
adjustments
in
here.
A
Does
that
sound
familiar?
Maybe
maybe
not
if
you
scroll
down,
let's
see,
where
is
that
id
actually
being
used,
and
here
we
go
sp
list
container.
So
basically,
this
html,
which
we're
doing
in
array
we're
outputting
that
inside
of
that
div
inner
html,
so
we're
setting
the
location
in
the
html
where
we
are
adding
our
that
additional
piece
of
html
and
then
we
are
calling
that
method
which
will
be
responsible
of
actually
making
that
happen.
That
should
be
is
enough.
A
So
now,
if
I
go
back
in
the
browser-
and
we
didn't
have
any
exceptions-
let's
actually
double
check
that
one-
we
should
have
actually
seen
them
already.
No,
no
exceptions,
we're
looking
really
good.
If
I
go
in
here,
if
I
do
a
refresh,
we
can
actually
see
a
completely
new
rendering
style
of
the
web
part,
and
we
can
see
that
we
access
the
list
where
we
have
five
different
lists
or
libraries.
A
We
access
them
and
we're
rendering
one
by
one
the
output
in
the
in
the
web
part
that
was
easy
enough.
So
not
a
big
deal
to
access
the
information
and
and
again
one
thing
which
we
really
really
really
didn't:
pay
that
too
much
attention
and
what
we're
doing
here
is
that
we're
accessing
the
sharepoint
rest
api
surface.
A
So
you
you're
doing
calls
to
the
api
web
lists
and
filtering
by
hidden
equals
false,
so
we're
not
going
to
take
any
hidden
lists
because
the
site
can
have
a
hidden
list
and
visible
list,
so
we're
getting
all
of
the
lists
which
are
visible
also
in
site
contents
and
then
we're
outputting
them
in
html,
but
that's
it
for
this
one.
Now
we
have
a
web
part
which
has
been
you
is
hitting
the
sharepoint
apis
and
then
outputting
information
dynamically
based
on
the
content
where
the
web
part
is
being
used.
That's
actually
really
really
cool.
A
A
There
we
go,
we
have
a
new
list
available
and
then
that
means
that
in
the
site
contents
we
have
six
items
and
now,
let's
just
double
check
in
that
everything
is
working
out,
suspecting
I'm
gonna
refresh
the
page
and
voila.
We
have
the
awesome
list
also
listed
in
here.
Everything
works
really
really
cool,
so
we
are
good
to
move
to
packaging,
actually
this
web
part
and
deploy
that
without
the
local
host
running.
So
everything
is
really
good.
It's
awesome
looking
web
parts,
so,
let's
actually
move
into
the
packaging
mode.