►
Description
In this PnP Webcast we concentrated on covering how to perform typical CRUD (Create, Read, Update, Delete) operations with different JavaScript framework with SharePoint Framework client-side web parts. Webcast concentrates on covering considerations and practices on performing basic operations without any framework, with Angular 1.x, with React or with PnP JS Core library. You can find related sample code from SharePoint Framework client-side web part sample repository, which is also open for community contributions.
Read more around the webcast from http://dev.office.com/blogs
A
B
A
Excellent,
thank
you
well
length.
So
what
like
is
going
to
do
the
demo?
We
will
have
a
chat
and
discussions
around
the
webcast,
like
typically
before
we
go
to
the
actual
content.
Just
a
quick
reminder:
there's
always
new
people
watching
this
video,
so
it's
TTP,
akms,
SP,
P
and
P,
or
SharePoint,
P
and
P.
Either
way
you
learn
to
the
PNP
a
landing
page
and
from
there
you
can
find
code
samples,
guidance
document,
ations,
a
lot
of
additional
insights
videos
and
all
of
that
stuff
around
the
PNP
German
PNP
is
for
getting
started.
A
It's
for
helping
you
to
understand
how
to
do
stuff
in
a
shipment
adding
model,
but
also
how
to
how
to
do
stuff
in
the
in
the
future,
shape
and
framework
capabilities,
but
I
think
that's
it
for
the
introduction.
So
let's
actually
move
into
the
context
of
today's
webcast.
So
like
mentioned,
we
want
to
show
you
how
to
do
simplistic
as
simplistic
HUD
recruit
operations,
using
as
simplistic
examples
as
possible,
and
these
are
really
meant
to
be
a
stepping
stones.
A
So
if
you
have
at,
for
example,
previous
and
knowledge
about
angular,
this
will
help
you
to
understand
how
to
get
your
the
basic
operations
included
in
the
SharePoint
framework
or
if
you
have
a
previous
and
knowledge
on
react,
or
you
want
to
learn
how
to
use
react.
This
these
samples
will
show
how
to
do
the
basic
operations
to
watch
SharePoint
list
from
your
client-side
web
part.
We
have
four
different
web
parts
in
the
solution.
One
of
them
is
not
using
any
framework,
so
it's
it's
essentially
using
the
native
SharePoint
framework
capabilities.
A
One
of
them
is
using
angular.
One
of
them
is
using
react
and
the
fourth
one
is
using
the
BMP
javascript
core
component,
which
is
by
the
way
in
a
world
JavaScript
core
library,
I,
would
say,
which
is,
by
the
way,
a
super
supe,
interesting
library
as
well
helping
you
on
accessing
the
SharePoint
data
using
kind
of
a
fluent
API
model,
and
we
can
show
all
of
these
in
practice
within
the
demo.
So,
let's
actually
jump
on
the
demo,
the
most
are
always
nice
and
we
can
actually
see
the
code
what's
being
done.
A
B
So
the
solution
that
we
have
contains
for
wet
wet
head
parts
and
each
one
of
them
illustrates
another
framework
and
they
work.
They
all
work
exactly
the
same.
So
here
I
have
the
one
that's
built
in
react,
but,
for
example,
if
I
click
+
to
add
another
one
and
I
would
pick
the
one
in
angular.
It
looks
exactly
the
same
right.
So,
let's
walk
through
one
of
them.
B
A
Thing
what
I
want
to
quickly
just
jump
in
on
this
one?
Obviously,
the
UI
design
here
we
intentionally
wanted
to
keep
it
as
simple
as
possible.
So
this
is
really
for
showing
the
getting
started
and
steps
for
people
using
this
framework
and
and
accessing
the
data
from
a
share
point
of
context,
so
so
not
concentrate
on
the
UI
design.
Even
though,
while
like
you've
done
an
awesome
job
on
and
designing.
B
Ideas,
what's
also,
actually,
you
will
see
on
the
jasc
you
wouldn't
deploy
that
in
production.
Yes,.
B
B
What
part
works
so
the
first
thing
that
we
have
to
do
when
when
we
add
the
web
part
of
the
page-
and
that
is
exactly
the
same
for
any
of
them-
is
if
you
go
to
headings
you
have
to
specify
the
name
of
your
list
right,
so
that
can
be
just
any
list
in
your
side
and
just
enter
its
name
so
that
the
web
part
knows
where
to
get
the
items
from
and
where
to
update
and
manage
them.
So
with
that,
we
can
do
that
first
thing
and
create
an
item.
B
So
here
you
will
see
that
it
will
create
new
item
and
it's
done
and
it
will
show
its
title
and
ID.
So
then
we
can
read
the
info
from
this
item
and
then
we
can
see
that
confirm
that
the
last
item
that
we
added
is
the
item
with
a
ID.
In
this
case
65
and
with
the
current
date,
then
we
can
also
read
all
items
in
a
list
and
then
show
them
in
a
list.
B
Another
thing
that
we
can
do
is
add
the
less
item
that
we
created,
so
it
will
just
update,
is
idle,
which
also
in
includes
the
current
date
and
time.
So
with
that,
if
we
read
again,
we
can
see
that
our
items-
is-is-is
xt5,
has
now
modified
date
and
then.
Finally,
as
the
last
step,
we
can
remove
the
item
from
the
list.
B
So
now
we
are
deleting
the
item
with
IDs
665
and
we
confirm
that
that
yes,
we
want
to
get
get
move
out
of
it
and
then,
when
we
get
all
the
items
from
from
the
list,
we
can
see
that
items
65
is
not
not
among
them
anymore.
So
that
is
a
simple
crowd
overview
operations
and
you
will
see
exactly
the
same
ui/ux
even
across
the
all
webparts
that
we
have
so
react,
angular,
node
framework
at
all
and
then
the
p.m.
PJ
score
and.
A
A
one
comment
on
this
one:
so
really
when
you
think
of
it,
when
we
work
with
SharePoint
on
a
SharePoint
list
data,
we
always
it's
just
combination
of
all
of
this
operation.
Isn't
it
so
you're
accessing
the
information
from
a
list
or
you're
creating
items
in
a
list
or-
and
you
are
deleting
or
updating
items
in
lists,
and
that's
really
the
purpose
of
this
tutorial
or
those
samples
is
to
give
you
that
let's
say
that
the
building
blocks
and
understanding
how
would
I
actually
do
them
in
that
particular
library?
So
simplistic,
no
doubt.
A
B
And,
and
if
you
wait
a
moment,
you
will
see
that
there
are
actually
quite
a
few
things
that
you
should
take
into
account
in
order
to
do
it
correctly
right,
because
there
are
a
few
things
that
you
might
not
think
of
or
or
yet
with
this
sample,
you
will
get
easy
code
to
follow
to
read
through
and
you
can
even
implement
it
as,
as
is
just
just
just
just
just
to
be
sure
that
you
don't
miss
anything
that
that
you
have
everything
in
place
to
do
it
the
right
way.
B
So
with
that,
let
me
switch
to
code,
and
here
is
the
project
that
will
be
soon
available
to
you
as
well.
So
all
of
the
source
that
you
see
here,
you
will
be
able
to
go
through
as
well
and
you'll
have
exactly
the
same
source
right
so
you'll.
It
will
be
available
on
getting
it
up
and
when
you
grab
the
source,
build
or
add
dependencies
and
build
the
project,
you
will
see
exactly
the
site.
B
B
Yes,
yes,
so
if
you
know
angular,
you
will
see
that
most
of
the
best
parts
are
familiar.
There
are
one
two
things
that
you
have
to
take
into
account,
but
other
than
that
is
just
rest
operations
against
the
SharePoint
REST
API
right.
So
here
here's
the
web
part
and
from
the
web
part
we
define
template,
and
here
we
actually
boost
up
our
application
and
our
angular
app
on
this
of
the
module,
which
is
really
simple.
In
this
case
we
have
one
controller
and
one
service
that
actually
performs
the
crud
operations.
B
So
in
our
service,
if
we
go
here,
we
have
operations
for
creating
an
item.
Reading
an
item
getting
the
latest
item,
I
ID,
which
we
need
for
the
simplistic
operation
to
read,
update
and
delete
an
item.
Because
if
you
look
back
at
UI,
you
don't
have
any
entry
field
or
choice
list
to
pick
an
item.
So
the
way
we
work
on
around
it
to
keep
it
really
simple,
is
to
get
the
last
item
from
the
list
and
operate
on
that
right
and
if
there
is
none,
you
will
get
an
error
right.
B
So
here
you
can,
for
example,
see
how
we
do
that.
So
whenever
we
want
to
create
an
item
in
a
list,
there
are
actually
quite
a
few
things
that
you
have
to
take
into
account
right.
So
first
you
have
to
get
the
list
item,
entity
type
name
right.
So
let
let
me
show
you
how
it
works.
If
I,
open
the
developer
tools
and
I
will
click
create
item.
B
Let
me
actually
refresh
the
page,
because
that
in
information
here
is
already
cached,
but
if
I
create
an
item
you
will
see
actually
that
the
first
call
here
is
the
call
to
the
list
to
get
it
list
item
entity
type,
full
name
and
that's
the
type
which
is
in
this
case.
Sp
data
to
do
list
item
is
a
a
string.
That's
basically
build
from
your
the
name
of
your
list
and
then
to
it.
B
You
have
to
prepend
SP
dot
data
dot
and
then
you
have
to
add
append
list
item,
and
there
are
quite
a
few
things
that
yesterday
take
into
account
for
the
name
of
your
list,
because
that
just
that's
not
the
name
of
your
list,
as
is
there,
are
some
rules
that
apply
to
it
like
it
has
to
be
capitalized.
It
has
to
be.
If
there
is
a
space
in
the
name
of
your
list,
it
has
has
to
be
removed.
B
All
of
that
so
well,
it
could
do
it
by
yourself
is
just
easier
here
to
request
it
using
the
API
right.
So
that's
the
first
code
that
we
do.
We
request
that
type
from
the
list
and
you
will
get
the
exact
string
the
way
it's
need
to
be
from
change.
You
should
point
write
another
thing
that
that
we
have
to
do
before.
We
can
add
an
item.
Is
we
have
to
get
the
request?
I
just
token,
which
is
the
guy
here,
which
is
2
the
token
here.
B
That's
basically
a
way
to
enforce
security,
that
you're
not
high
change,
again
request
and
you
are
actually
on
the
page.
You
have
a
valid
request.
Right,
so
it's
oh
and
you
need
that
for
any
post
operation.
So
forget
you
don't
need
that
buffer
for
any
post.
Like
create
new
item
update,
an
item
delete
an
item.
You
need
this
token,
so
you
so
that's
another
call
that
we
have
to
do
in
angular
by
ourselves
to
get
the
token
first
and
then
finally,
using
both
the
token
and
the
list
item
entity,
type,
full
name.
B
We
construct
our
payload
for
creating
an
item.
So
here
are
the
response.
Headers
request,
headers
and
here
is
actually
payload
that
we
create.
So
that's
the
underscore
underscore
meta
data
type
where
we
specify
the
list
item,
entity,
type,
full
name
and
then
title
of
our
item-
and
we
do
all
of
that
in
code.
So
here
first
we
do
and
post
for
you
or
get
requests
using
rest
to
get
the
list
item
entity
type
name.
So
that
request
is
here
and
that
just
a
call
to
underscore
API,
which
is
the
SharePoint
REST
API
web
list.
B
That
allows
us
to
test
anger,
apps
and
to
actually
use
the
dependency
injection
that
we
have
in
angular.
But
the
downside
is
that
it
doesn't
do
anything
for
us
right.
So
when,
when
when
we
will
talk
about
react
and
no
J's
framework
at
all
the
SP
PMP,
you
will
see
that
they
make
it
a
bit
easier
right
because
they
do
some
things
for
us.
But
here,
in
this
case,
we
have
to
do
all
of
that
by
by
ourselves
right.
B
One
thing
that
that
you
might
have
seen
is
that
the
requests
that
we
issue,
we
actually
say
the
we
set
the
accept
header
to
application,
slash
Jason,
o
data.
No
metadata
and
the
reason
we
do,
that
is
to
optimize
the
payload
that
we
get
from
the
API.
So
in
other
words,
what
we
say
is
the
only
thing
that
we
want
to
get
is
exactly
the
thing
we
request.
So
we
don't
want
to
get
any
old
data
metadata.
B
B
Another
thing
that
you
you
can
see
here
on
the
screen
is
that,
in
order
to
create
an
item
we
have
to
request
with,
we
have
to
actually
issue
a
few
requests
right.
So
there's
one
for
the
list:
item
entity,
type
name,
there's
one
for
request,
digest,
there's
one
for
actually
the
creation
of
the
item
and
one
way
to
do
that
would
be
to
use
callbacks
right.
So
you
would
just
nest,
function
and
function
in
function
and
when
one
function
is
done,
you
would
call
another
with
three
requests.
B
It
would
be
already
complex
to
read,
if
you
can
imagine
so.
Some
operations
take
I
could
actually
move
or
calls
three.
So
that
would
make
your
code
really
hard
to
fall
and
read
and
an
easier
way
to
work
around.
It
is
to
use
promises
which
in
this
case,
we
use
pom
promises
that
are
available
in
angular
and
then
in
order
there.
What
happens
that
we
have?
We
will
use
the
ACMA
script.
Six
promises
shim
that
that's
available
together
with
a
framework.
B
In
a
way,
no
matter
which
promises
type
you
use,
the
basic
principle
is
exactly
the
same.
You
chain
promises
in
a
flat
list,
so
you
say
issue
this
synchronous
operations.
When
it's
done
do
this
and
then
when
that's
done,
do
this
and
then
do
this
so
that
way
you
can
have
a
really
flat
list
of
your
code,
because
you
can
see
that
all
of
these
operations
are
just
in
one
level.
It's
just
one
chain
of
a
synchronous
operations
that
fire
one
after
another
right.
B
One
thing
with
that
that
you
have
to
take
into
account:
what
do
you
do
if
one
of
these
operation
breaks
so,
for
example,
you
would
try
to
read
an
item
when
it's
not
in
the
list,
or
you
would
like
to
access
a
list
and
the
list
isn't
there
right,
so
you
wouldn't
be
able
to
complete
the
whole
chain
right.
So
imagine
it's
somewhere
in
the
chain.
B
There
is
an
error
you
would
like
to
handle
it
and
when
you
change
promises,
the
thing
is
that,
even
though
each
promise
so
each
then
Clause
could
have
its
own
error
handling.
If
you
would
do
that,
you
would
actually
handle
the
error
of
this
of
that
deathclaws,
but
the
chain
would
actually
go
on
alright,
so
you
wouldn't
stop
the
chain
because
it's
each
chain
is
a
function.
B
Another
thing
that's
interesting
to
see,
for
example,
is
that
whenever
you
want
to
update
an
item
the
way
it
works,
is
you
get
an
item
from
the
list?
You
change
it
and
then
you
update
it,
but
how
can
you
be
sure
that
the
item
hasn't
changed
between
the
time
you
got
it
and
you
edited
it
all
right
and
with
rest.
One
way
we
could
do
that
is
to
leverage
the
e-tag
so
think
of
each
egg
as
an
property
of
your
item,
similar
to
a
version
number.
B
When
you
get
an
item
from
SharePoint
using
REST
API,
you
will
get
also
one
of
the
things
that
you
will
get
is
the
e
tag
and
eat
egg
basically
says
this
item
is
now
version
1
when
you
work
with
your
item
and
update
it
and
then,
when
you
issue
a
post
request
to
update
it.
So
this
is
how
we
do
it.
We
say
the
method
of
request
is
post,
but
here
we
say
the
ex
HTTP
method
is
merge,
so
merge
says:
do
not
overwrite.
B
We
only
want
to
change
this
one
field,
so
we
do
that
by
saying
year,
X
HTTP,
metin's
editors,
merge
and
then
what
we
can
do
additionally
to
and
ensure
that
the
item
that
we
are
about
to
update
it
is
still
exactly
the
same
item
that
we
got
initially
is
to
add
the
header
of,
if
match,
and
to
specify
our
tag,
and
the
way
it
works
is
that
if
the
e-tag
of
the
item
on
the
server
will
match
this
request,
it
will
update.
Otherwise
it
will
fail.
B
It
will
fail,
saying
that
the
item
has
changed
since
the
last
time.
You
time
you
got
it
and
you
cannot
update
it
because
you
have
old
info
right
and
the
one
way
to
work
around
it.
If
you,
you
didn't
do
it
so
if
you
would
either
omit
the
whole
header
or
you
would
here
say
and
an
asterisk,
so
you
would
do
this.
That
basically
means
Oh
overwrite.
B
A
B
B
And
trying
to
figure
out
if
we
got
it
somewhere
yeah,
we
probably
have
it's
more
anyways.
You
can
get
it
from
the
headers
in,
for
example,
when,
when
we
work
with
other
approaches
you
you
can
get
it
from
the
old
data
metadata
that's
available
within
the
request,
and
we
will
see
that
approach
when
we
work
with
the
SVP
MPs
library
right
and
working
with
the
e-tag
applies
to
both
update
and
delete
of
an
item.
So
if
we
go,
for
example,
to
aid,
a
delete
operation,
you'll
see
exactly
the
same.
That
here
we
have.
B
B
Yes,
and
with
that
that
actually
revs
the
part
in
the
service,
another
interesting
thing
is
that,
for
example,
when
you
see
here,
is
that
we
pass
every
single
time
on
every
call.
We
pass
the
web
URL
and
name
of
the
list
around,
so
why
couldn't
we,
for
example,
injected
here
once
well?
It
has
to
do
to
do
with
the
thing
that
your
application,
when
it's
used
in
a
web
part,
is
boot
strip
only
once
so.
B
That
means
you'll
have
only
one
instance
of
this
data
service,
and
if
you
would
injected
here,
you
wouldn't
be
able
to
update
it.
So
if,
for
example,
someone
would
add
the
web
part
to
the
page
set
to
work
it
with
analysts,
and
then
we
change
the
name
of
the
list
afterwards,
uuuugh
actually
would
not
be
able
to
push
that
that
new
name
of
the
list
all
the
way
down
down
here.
So
the
way
we
work
around.
That
is
because
it's
just
think
about
it.
B
We
set
properties
on
the
web
part
in
the
web
part
itself,
but
we
actually
need
the
values
all
the
way
down
in
angular
right
and
our
angular
app
doesn't
really
know
that
it's
it
actually
works
inside
a
web
part.
So
how
do
we
tell?
How
do
we
pass
the
values
that
users
can
set
in
prep
above
hauser
in
web
part,
all
the
way
down
to
angular
and
one
approach
to
do
that
is
to
issue
an
an
event
on
the
root
scope.
B
So
so
that
way
we
do
that
in
via
the
render
function
here
and
the
render
function
runs
every
single
time.
Someone
would
change
something
in
web
part.
So
if
you
would
go
back
to
web
part-
and
we
would
change
something
here
to
do-
one
there
is
render
if
we
remove
that
the
leopard
will
be
rendered
so
basically
on
every
property
change,
the
render
function
runs
and
what
we
do,
then,
is
we
issue
an
event
here,
and
we
pass
to
do
that
event.
B
B
In
our
services
we
always
have
access
to
the
latest
URL
the
site
and
the
name
of
the
list
right
because
we
pass
them
using
the
event
from
the
web
part
to
our
clunker
controller
and
then
on
every
call
here
we
actually
pass
them
the
URL
of
the
side
and
the
name
of
the
list.
We
actually
pass
that
to
our
service
right,
so
we
don't
depend
on
the
singleton
instance
of
our
service
that
we
have
injected
here.
B
Alright,
so
that
concludes
angular
part.
Let's
move,
for
example,
to
react,
so
in
react.
We
have
exactly
the
same
approach.
We
have
exactly
the
same
UI
and
UX.
The
only
difference
is
that
we're
an
angular.
We
use
the
angular
zone
HTTP
service.
Here
in
angular
we
use
the
HTTP
client
that
we
have
available
from
the
web
part
and
already
there.
The
first
challenge
arises.
Ok,
so
the
web
part
is
where
the
HTTP
client
is
available,
but
actually
all
of
the
operations
are
performed
in
our
react.
B
B
So
here
we
have
already
list
name
and
then,
on
top
of
that
we
define
the
HTTP
client
and
site
URL,
and
if
we
would,
for
example,
compare
the
operations
of
creating
an
item.
We
have
exactly
the
same
approach,
so
we
still
need
to
get
the
item
entity
that
I've
named
ourselves,
but
the
one
thing
that
we
don't
need
to
do
is
we
don't
need
to
get
the
request
I
just
ourselves,
because
the
HTTP
client
does
that
for
us.
B
So,
even
though
there
are
still
things-
and
actually
here-
I
see
oh
yeah
here
you-
you
can
see
the
heck
approach
to
the
code
right.
So
this
is
what
you
could
do
initially,
if
you
wanted
to
do
it
by
yourself,
which
might
work
or
might
not
work,
whereas
better
approach
would
be
to
actually
use
the
name.
B
I
passed
here
right,
so
in
a
code
that
you'll
get,
you
will
see
that
all
of
the
body
actually
makes
use
of
this
string
here,
the
type
that
we
get
from
the
list
and
not
the
one
that
we
try
to
build
ourselves
and
even
though
the
HTTP
client
that
we
get
from
the
web
part
does
some
work
for
us,
I
like
to
get
the
the
request
I
jest.
We
still
have
to
get,
for
example,
things
like
name.
B
We
still
have
to
build
the
body
ourselves
and
we
still
have
to
post
all
of
that
to
SharePoint
one
thing
that
you
have
to
take
into
account.
There
is
that
by
default,
the
HTTP
client-
this
is
the
header
of
OData
version
4,
and
if
you
keep
that
it
will
break,
you
won't
be
able
to
call
the
API.
You
will
get
an
error,
so
one
way
to
work
around
it
for
it,
I'm
being
now,
it's
actually
just
added
to
empty.
B
So
that
way
the
rest
API
will
work
other
than
that
is
just
exactly
the
same
approach
for
every
item.
You
still
see
exactly
the
same
item
and
you
can
see
exactly
the
same
way
we
chained
promises,
even
though
here
we
actually
work
with
promises
with
the
ACMA
script.
6
shim
promises
all
right,
so
they're,
not
exactly
the
same,
and
one
difference,
for
example
here.
Is
that
what
you
get
that
back
from
the
HTTP
client
is
a
response
and
in
order,
for
example,
to
get
change,
hasten
that's
another
promise.
B
B
With
that
and
let's
move
to
the
no
framework
approach
that
we
have
here
and
that
just
uses
exactly
the
same
HTTP
client
that
we
use
in
react,
the
only
difference
is
that
we
do
everything
within
the
web
part.
So
we
have
no
additional
class
components
or
any
of
that
we
do
all
the
operations
directly
within
the
web
part.
So
so
we
can
just
use
all
the
approach
or
all
the
info
like
list
name
URL
of
the
side,
HTTP
client
directly
from
within
the
web
part,
because
all
of
that
info
is
available.
B
2,
+,
1,
+
here
so
here
you,
you
can
see
that
we
call
directly
this
context:
8
HTTP
client.
Yet
we
get
the
URL
of
the
web
from
the
page
context,
input
that
we
have
available
and
we
get
the
name
of
the
list
directly
from
web
part
properties,
because
we
are
directly
in
the
list
and
the
one
thing
that
one
more
thing
that
I
wanted
to
show.
You
is
how
you
would,
for
example,
perform
crud
operations
using
the
SharePoint
PNP
JavaScript
library.
So
that's
a
new
library,
that's
being
in
development.
B
Currently,
if
I
recall
that
correctly,
we
are
in
version
1.0
0.4,
which
works
surprisingly
well.
So,
for
example,
let
me
display
that
side-by-side.
So,
on
the
right
hand,
side,
we
will
see
the
same
operation
if
we
didn't
use
any
framework
at
all
and
for
comparison.
Let
use
update,
which
I
hope
well
doesn't
really
even
fit
on
a
screen
there.
There
you
go.
There
is
so
much
stuff
going
on
there
that
it
doesn't
really
even
fit
on
the
screen
and
then,
on
the
left
hand,
side.
B
Let's
actually
show
exactly
the
same
operation
using
the
SharePoint,
PMV,
GS,
Lite
library,
so
update
either
here
and
it
still
doesn't
well,
it
fits
it
fits
on
a
screen
exactly
in
spring
yeah.
It
just
fits
on
a
screen.
So,
for
example,
here
on
the
right
hand,
side.
The
first
thing
that
that
we
have
to
get
is
the
list
item
entity
type
them.
So
that's
the
type
name
that
we
have
to
include
within
the
body
right,
which
is
all
the
way
down
down
here.
B
If
you
look
at
the
SP
PMP
library
approach,
we
don't
need
to
do
that,
because
that
library
does
that
for
us
by
itself
right.
So
the
only
thing
that
we
have
to
do,
then,
is
to
get
the
idea
of
the
item
that
we
have
now
that
we
have
to
update.
Well,
we
have
to
do
that
because
that's
our
own
load
object
right.
B
So
we
chose
ourselves
not
to
start
the
idea
of
the
latest
item
we
added
to
the
list,
but
to
actually
get
it
from
the
list
directly
right
and
here,
for
example,
to
do
that
with
R
or
s.
We
have
to
build
the
whole
URL
of
API
web
list.
Get
the
list
items
get
the
less
I
do
actually,
so
we
have
to
actually
have
it
implemented
here.
Let's
compare
that
which
is
the
one
here.
B
So
we
get
all
items
then
we
order
them
descending
by
ID
with
top
one,
and
we
only
want
to
select
the
ID
right
with
SV
PMP.
You
can
do
it
in
a
more
fluent
and
less
prone
approach,
because
it
just
objects
so
think
a
bit
like
link,
we
say:
return
PM,
PSP
web
lists
from
let's
go
and
get
one
by
title,
which
is
that
this
property
list
name
from
there.
We
want
to
have
items
we
want
to
get.
Actually,
let's
compare
exactly
the
same
edits.
So
that's
the
one
here
so
here
yeah
you
can
see.
B
B
So
the
only
strings
here
are
the
name
of
the
fields
by
which
we
sort
and
which
we
want
to
get,
whereas
here
the
whole
URL
and
imagine
you
can
make
a
typo
in
any
of
this
to
mention
these
quotes
and
and
all
that,
so
that
is
way
easier,
not
to
mention
it
saves
you
a
lot
of
typing
right
because
on
this,
if
you
would
make
a
typo
you
you,
you
would
get
directly
an
error
because
that
object.
Doesn't
it
at
and
and
and
exist.
B
Where's
here
it
is
a
URL,
is
just
a
string
right,
so
it's
way
more
error-prone
to
do
it
manually,
then
to
use
the
SP
PM
in
SP
p.m.
peaches
Lyle
how
hi
Barry
I'm
going
back
to
our
update,
which
is
here
and
which
is
here
so
once
we
have
the
update.
We
want
to
update
it
well
on
a
we,
so
here
we
need
to
do
additional
step
right.
We
need
to
get
the
item
to
get
the
attack
and
for
here
we
actually
get
the
item
again.
B
That's
that's
that's
the
way
it
is
done,
but,
for
example,
one
of
the
things
that
you
don't
have
in
the
PMP,
a
library
is
access
to
headers.
So
so,
whenever
you
issue
a
rest
call-
and
you
get
a
response,
there
is
no
way-
or
at
least
not
that
I
know
of
to
get
the
headers
from
from
every
response
where,
for
example,
the
eat
eat
egg
it.
So
here
you
can
see
that
in
the
raw
approach
we
can
just
get
response,
there's
get
right
and
and
from
there
we
get
attack
in
PMP.
B
You
get
directly
an
item,
so
you
don't
have
the
response.
So
one
way
to
work
around
it
is
to
override
the
the
set
of
metadata
that
you
get
back
to
actually
increase
it
and
then
get
the
eat
egg
from
the
old
data
and
have
a
data
that
you
get
along
with
the
items
and
another
thing
worth
noting
is
that
we're
in
the
raw
approach
on
every
single
request
we
have
to
say,
except
no
metadata
so
to
say,
to
transfer
actually
optimize
the
response
that
we
get
in
PMP.
B
You
can
do
it
once
so
here
all
the
way
in
constructs
a
strap
structure.
You
can
say
PMP
setup
at
our
student
this
and
with
this
approach,
every
single
request
that
you
issue
will
have
this
header
added
and
you
can
specify
there
whatever
you
you
want
right.
So
all
of
that
will
be
added
to
every
single
call
you
make
so
that
you
don't
have
to
do
it
every
single
time
over
and
over
again,
which
simplifies,
building
your
your
code
and
makes
it
more
constant.
B
Alright,
so
that's
another
thing
that
you
get
and
based
on
that
we
can
get
a
tag
that
we
then
pass
in
our
update.
So,
for
example,
here
when
we're,
we
do
an
update
in
the
raw
approach.
We
have
to
once
again
build
the
body
ourselves
build
the
URL
set
the
headers
past
etag,
whereas
here
in
PMP
is
just
one
line
of
code.
You
get
the
list,
you
get
items
you
get
the
out
in
the
item
and
you
say
update,
and
then
you
pass
a
tag
and
that's
it.
B
So
you
can
really
easily
see
how
much
easier
it
is
to
actually
use
PMP
well
Highbury
and
is
fluent
API,
then
to
build
all
all
of
the
requests
by
ourselves.
Right
and
the
library
is
still
new.
So
there
is
no
chance
that
not
operations
might
be
there.
The
great
thing
is
it's
open
source.
So
if
there's
a
bug-
or
there
are
features
that
are
not
there,
please
help
out
submit
PR
and
it's
really
easy.
B
A
B
All
right,
so,
as
you
have
seen,
we
performed
open
crud
operations
using
angular
react
no
favor
at
all
and
the
new
SharePoint
P
MPGs
library.
B
The
thing
is
that
no
matter
which
M
work
you
use
you'll
be
always
able
to
communicate
with
ish
our
SharePoint
using
rest,
and
it's
up
to
you
to
choose
whether
you
want
to
use
the
client
that's
available
both
within
the
web
part.
What
do
you
want
to
use
the
SGP
MPGs
la
highbury
or
whether
you
love
to
go
through
the
additional
mile
and
build
all
the
raw
rest?
Because
yourself,
that's.
B
Yeah
and
then
interesting
thing
is
that,
for
example,
for
react.
There
is
the
office
UI
febrile
react
object
that
makes
it
really
easy
to
implement
the
office
UI
fabric
UX
within
the
webparts.
Similarly,
in
angular,
there's
community
initiative
called
ng
off
sui
fabric,
which
is
again
an
open
source
project
that
implemented
obviously
white
fabric
as
directives
for
angular
v1.
So
with
that,
if
you
like
to
work
in
angular,
it's
really
easy
for
you
to
build
build
web
parts
that
look
the
same
way
as
the
rest
of
SharePoint
and
office
and.
A
I
still
remember
to
do.
I
would
even
go
to
the
level
of
saying
that
that
well
I
wouldn't
say
that
that's
a
best
practice,
because
I
hate
the
term
best
practice.
No
doubt
we
want
people
to
actually
use
the
office
UI
fabric,
it
is
there
for
consistency.
Perspective
we
within
Microsoft
and
engineering
are
using
that
to
render
all
of
our
components.
So
we
would
like
to
have
the
client-side
web
parts
customizations.
Also
using
that
so
there's
a
consistency
from
a
UI
perspective.