►
From YouTube: Transforming solution from JSOM to modern APIs and SDKs
Description
This module introduces you to the development of SharePoint Online client-side solutions, built with SharePoint Framework, using the SharePoint Online REST APIs, Microsoft Graph, and PnPjs as a modern replacement for SharePoint JavaScript Object Model (JSOM).
This video is part of a series in a playlist about "Transform SharePoint Add-in model solutions to modern development pattern": https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe
➡️ Next video on this series - https://www.youtube.com/watch?v=q-FolBYQDMM&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=7
⬅️ Previous video on this series - https://www.youtube.com/watch?v=HuQemEUWydM&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=5
#Microsoft365 #AzureAD #MicrosoftGraph #PnPjs #JSOM #SharePointOnline
In this video, you will learn about
- Upgrading from JSOM to client-side code in SPFx
- Understanding how to consume SharePoint Online REST APIs in SPFx
- Understanding how to consume Microsoft Graph in SPFx
- Understanding how to use PnPjs library
📖 All guidance content including code samples can be found here: http://aka.ms/sp/add-in/modernize/samples
✨ Presenter
• Paolo Pialorsi (PiaSys.com)
📃 Agenda
0:00 Introduction
2:40 Demo
4:20 Consuming SharePoint Online data with SPFx via SPO REST APIs
6:50 Consuming SharePoint Online data with Microsoft Graph
9:00 Working with PnPjs
10:47 Using PnPjs in a React component
12:22 Using PnPjs in a React component with centralized initialization
📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe
• Connect to SharePoint APIs - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/connect-to-sharepoint
• Use the MSGraphClientV3 to connect to Microsoft Graph - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-msgraph
• PnPjs - https://pnp.github.io/pnpjs/
💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home
Sharing is caring! You are awesome! 🧡
A
A
From
JavaScript
object
model
to
the
modern
development
techniques
and
pmp.js,
let
me
set
the
context
initial
Point,
adding
model.
We
were
used
to
use
the
Json
or
JavaScript
object
model
library
to
consume
SharePoint
online
data,
and
when
doing
that,
we
were
able
to
consume
either
data
in
the
up
site
of
the
application
that
we
created
with
the
sharepointery
model
or
the
host
site
data
of
the
site
that
was
hosting
the
SharePoint
add-in
that
we
created
and
specifically
when
we
used
to
consume
the
SharePoint
host
data.
It
was
a
task
that
required
quite
an
effort.
A
In
fact,
we
needed
to
rely
on
the
SP
dot,
request,
executor
type
and
JavaScript
library
in
order
to
being
able
to
make
cross-domain
calls
between
the
upside
and
the
SharePoint
compose
side
or
from
the
provided
or
setup
to
the
SharePoint
online
host
site.
Nowadays,
with
the
modern
development
techniques
that
we
have
in
SharePoint
framework,
our
life
as
developers
is
definitely
easier
than
before.
In
fact,
we
have
the
ASP
HTTP
client
object
available
out
of
the
box
in
SharePoint
framework,
and
we
can
use
it
to
easily
consume
SharePoint
online
data.
A
What
really
makes
a
difference
is
that
when
you
are
in
SharePoint
framework,
you
don't
have
any
more
all
the
complexities
of
The
Upside
host
side,
cross
domain
course
and
stuff
like
that,
because
your
call
your
code
will
be
executed
inside
the
page
that
is
running
a
SharePoint
online
and
is
hosting
your
your
client-side
modern
solution.
So
let
me
move
to
the
demo
environment
and
let
me
show
you
how
to
rely
on
these
new
functionalities
in
SharePoint
framework.
A
Imagine
that
you
want
to
transform
a
solution
built
with
the
SharePoint
editing
model
and
using
the
JavaScript
object
model
of
SharePoint
into
a
SharePoint
framework,
modern
solution
using
the
new
and
modern
development
techniques.
So,
let's
start
having
a
look
at
the
existing
solution
like,
for
example,
here
we
have
a
Javascript
file
in
which
inside
the
SharePoint
add-in
model
solution,
we
retrieve
the
host
web
URL
and
the
app
web
URL
from
the
query
string.
A
We
make
a
query,
camel
query
for
all
the
items
and
we
get
the
items
in
that
Library.
Once
we've
done,
that
we'd
execute
query:
sync:
we
used
to
get
the
successful
result
and
browsing
through
JavaScript
through
all
of
the
items
returned
by
the
execution
of
the
query
asynchronously
or
to
provide
an
error
message
to
the
user.
In
case
of
any
failure,
that
was
the
development
approach
in
the
sharepointed
model,
with
JavaScript
SharePoint
client
object
model.
Now,
let's
see
how
we
should
behave
with
SharePoint
framework.
A
First
of
all,
you
should
create
a
SharePoint
framework
solution,
and
in
order
to
do
that,
you
can
find
detailed
information
in
the
article
associated
with
this
video.
Here
we
already
have
a
SharePoint
framework
solution
with
a
couple
of
web
bars.
The
first
one
relies
on
the
SharePoint
data
using
the
SP
HTTP
client
object
provided
out
of
the
box
by
SharePoint
framework,
so
we
have
a
very
basic
web
part
implemented
in
SharePoint
framework
which,
in
edit
from
the
base
client
side
web
part
in
the
render
method
we
simply
render
inside
the
div
with
HTML.
A
Only
the
content
of
a
list
of
documents
that
we
have
in
a
library
is
like
we
did
in
the
SharePoint
edit
model
solution
and
in
the
on
init
method
of
this
webpart.
We
invoke
the
get
documents
function
which
internally
relies
on
the
context
of
SharePoint
framework
and
specifically
on
the
SP
HTTP
client
property
of
the
context,
which
is
a
client
for
the
SharePoint
interest
apis.
A
Library
with
title
documents
using
the
SharePoint
rest
apis.
This
HP
HTTP
client
object
and
the
get
method
of
that
object
will
make
an
HTTP
get
request
and
will
give
us
back
in
the
response.
Asynchronously
a
Json
object,
which
will
represent
the
collection
of
documents,
which
is
something
that
we
use
then
to
build
our
actual
output
and
in
fact,
the
year
we
get
the
list
of
documents
as
Json
and
then
we
parse
them
and
we
output
them
in
the
rendering
of
the
web
part.
And
if
I
switch
to
my
browser.
A
I
can
show
you
that
here
we
have
the
list
of
documents
in
the
actual
document
library
and
using
the
workbench
of
SharePoint
framework.
We
can
see
the
output
of
the
web
part
that
we
have
just
seen
where
this
one
is
the
general
folder
we
saw
before
okay,
so
here
I
can
get
the
list
of
documents
using
the
SP
HTTP
client
object,
but
we
can
do
the
same
also
using
the
micrograph
client
that
we
have
out
of
the
box
in
SharePoint
framework.
This
is
yet
another
web
part
still
built
within
the
same
SharePoint
framework
solution.
A
Here
in
the
on
init
method.
We
have
a
different
implementation
of
the
get
documents
function.
You
get
documents
here
relies
on
this
context,
still
as
like
as
before,
but
on
the
MS
graph
client
Factory
object,
which
will
give
us
a
client
for
or
Microsoft
graph,
then
through
the
client
for
Microsoft
graph,
that
we
get
back
from
this
method
invocation.
A
We
can
make
an
API
query
with
a
fluent
syntax,
so
we
make
an
API
query
for
the
collection
of
size
in
Microsoft
graph,
for
the
specific
site
in
which
we
are
based
on
the
context
of
European
framework
and
now
the
page
context,
and
then
we
get
the
children
of
the
root
folder
of
the
drive,
the
default
Drive
of
that
site
and
in
micrographer
the
default
Drive
is
the
documents
document
library.
Then
we
make
the
get
request
and
the
result
will
still
be
a
Json
object
with
the
list
of
documents
that
we
are
interested
in.
A
But
in
this
scenario
we
also
have
an
interface.
This
ISP
list
items
that
we
defined
right
here,
which
is
made
of
an
array
of
list
item
where
every
single
item
is
made
of
a
name
and
of
NAD,
so
that
when
we
do
the
output,
we
can
simply
bind
that
array
of
I
list
items
in
the
output
of
the
web
part
and
again
we
can
check
the
results.
A
So
let
me
remove
this
one
and,
let
me
add
the
other
one,
and
here
we
can
see
still
the
list
of
items,
and
here
we
also
have
a
good
name
for
the
general
folder
for
the
micrograph.
So
we
can
easily
use
native
objects
inside
sharpen
framework
and
through
the
context
of
spfx,
to
get
access
to
the
SharePoint
rest
API
and
to
my
actual
graph,
but
we
can
even
do
more
if
we
want
to
have
a
really
modern
approach
to
the
development
of
our
Solutions.
A
We
can
also
rely
on
the
pmp.js
library
provided
by
the
micro,
3605
and
Power
Platform
community.
So
if
we
go
to
the
browser
first
of
all-
and
we
have
a
look-
we
can
see
that
pmpjs
is
a
library
provided
as
an
open
source
effort
on
the
internet,
and
from
here
you
can
find
all
of
the
information
you
need
to
dig
into
the
pmpjs
library.
Here.
We
also
have
a
solution,
a
SharePoint
framework
solution,
in
which
we
have
three
different
flavors
about
how
to
use
pmp.js
better
and
better.
A
So,
let's
start
from
the
basics,
if
you
want
to
use
pmpjs
yeah,
first
of
all
to
reference
the
pmp.js
packages
in
your
solution
and
right
here
we
have
PMP
at
PMP,
spmp
logging
at
PMP,
slash
graph.
These
are
the
three
modules
that
we
are
using
in
this
sample
solution.
Then
the
very
basic
sample
is
a
sample
based
on
HTML,
it's
like
as
it
was
before,
with
as
phdp
client
and
graph
and
here
in
the
web
part
in
the
on
initi
method.
A
We
still
have
the
got
document,
but
now
the
get
documents
will
rely
on
the
factory
interface
of
pmp.js
for
SharePoint
and
using
the
context
of
SharePoint
framework.
We
get
back
an
SP
object
which
we
can
use
with
a
fluent
API
to
say
from
this
SP
object.
Give
me
the
web
in
which
I
am
give
me.
The
collection
on
list
give
me
a
specific
list
with
title
documents
and
give
me
the
items.
A
As
you
can
see,
this
syntax
is
way
better
than
working
at
low
level,
with
the
URL
of
the
rest
request
or
with
the
URL
of
the
graph
request
and
at
the
very
end
we
will
still
get
back
an
array
of
list
items,
the
items
and
so
the
documents
in
the
document
library
and
we
can
render
them
in
the
output.
However,
this
is
a
very
basic
one
where
we
simply
work
with
HTML
at
low
level.
What,
if
you
want
to
use
a
rear
component
in
your
wordpad?
Well,
here
we
have
another
example
in
this
one.
A
So,
first
of
all
in
the
component,
the
amount
of
the
react
component
we
load
still
using
pmp.js
the
list
of
items
in
the
document.
Library
called
document
in
the
current
web.
But
in
order
to
have
this
object
inside
our
react
component,
we
need
first
of
all
in
the
web
part
to
provide
in
the
render
method
of
the
web
part
that
SharePoint
object
to
the
react
component
and
these
dot
underscore
SP
is
nothing
more
than
one
more
time.
A
That's
why
I'm
going
to
show
you
a
third
option
which
is
I
would
say
the
best
one
in
which
we
still
have
a
web
part
built
with
SharePoint
framework
in
this
work
part
we
render
area
component,
but,
as
you
can
see,
we
do
not
provide
any
custom
and
complex
object
of
the
pmp.js,
but
actually
in
the
on
init
method
of
these
react-based
web
part.
We
have
this
get
SP
method,
providing
the
context
of
SharePoint
framework.
A
That's
what
we
are
doing
right
here
so,
rather
than
providing
vpnpgs
object
to
the
react
component
through
a
property,
we
just
rely
on
a
function
which
will
be
an
initializer
of
the
pmpjs
object
that
we
can
share
across
multiple
components,
and
then
the
syntax
is
exactly
the
same
as
before.
So
we
use
the
SP
object,
we
use
the
fluency
API
to
access
the
web,
the
collection
of
lists
and
so
on
so
forth,
and
then
we
do
the
actual
rendering
of
the
list.
A
So
we
can
run
this
solution
as
well
and
see
the
output
just
so
for
the
sake
of
completeness.
So
let
me
run
gulp
server
for
this
web
part
and
it
will
take
a
while
to
build
and
make
it
available,
and
then
we
can
play
with
it.
So
let
me
run
it,
and
here
it
is
ready,
so
we
can
go
back
to
our
workbench,
and
here
we
can
say
that
we
want
to
remove
this
one.
We
refresh
the
page
to
get
the
new
manifest
and
we
want
to
add
our
web
part.
A
So
the
minimal
one
still
showing
all
of
the
items
is
the
one
that
simply
creates
the
tmpgs
on
the
Fly.
Then
we
have
the
one
with
the
react
component,
which
will
rely
on
the
pmp.js
object,
provided
as
a
property
to
delete
component,
and
then
we
have
the
third
one
with
the
initialization
function,
which
can
be
shared
across
multiple
react
components
here
you
can
find
additional
links.
If
you
want
to
dig
into
the
topics
that
we
covered
and
like
always
thank
you
for
watching
this
video
foreign.