►
From YouTube: PnPjs v2: Understanding Library Extensions
Description
In this video David Warner discusses the new extension feature in PnPjs v2. This new capability allows you to easily add your custom functionality directly into the fluent API.
Video demonstrates following different core scenarios:
- What is the extension capability and how does it work?
- How do I add my own extensions?
- How to augment the TypeScript typings to ensure my extensions appear in the fluent chain
Presenter: David Warner (Catapult Systems) @davidwarnerii
You can find additional documentation and other details around the PnPjs from following resource:
- https://aka.ms/pnpjs
- PnPjs GitHub repository - https://github.com/pnp/pnpjs/
If you ran into any issues on using this library, please do let us know at the the GitHub issue list - https://github.com/pnp/pnpjs/issues
Learn more about the SharePoint developer community at: http://aka.ms/sppnp.
A
A
There's
a
couple
ways
to
find
the
docs
for
library,
extensions,
so
I'll
show
you
both
of
them,
so
you
can
use
what
works
best
for
you
and
then
finally,
we'll
discuss
an
overview
of
the
library
extension
choices
and
registration
options
that
are
available
to
us
and,
after
that
overview,
we'll
dive
into
a
demo
of
how
to
utilize
named
extensions
combined
with
a
factory
registration.
Let's
begin
by
first
taking
a
look
at
why
we
might
want
to
use
extensions
within
p.m.
A
PJs,
while
there
are
likely
many
many
use
cases
for
extensions,
a
few
we're
going
to
cover
here.
The
first
is
that
I
might
want
a
method
or
a
property
that
doesn't
exist
yet
in
the
library.
One
example
of
this
is
perhaps
we're
working
on
a
new
feature
contribution
for
p.m.
PJs.
We
can
use
extensions
to
provide
that
functionality
until
our
contribution
is
complete
or
we
might
need
functionality
that
is
unique
to
our
organization
or
solution
that
is
unlikely
to
become
default
to
the
library.
A
Extensions,
allow
us
to
write
the
code
for
that
functionality
once
and
then
use
it
throughout
our
solution.
Lastly,
we
may
find
that
there's
a
bug
in
the
library
that
we
can
create
a
local
workaround
for
until
the
official
fix
is
available.
Now
that
we've
covered
a
few
reasons
why
we
might
want
to
take
advantage
of
p.m.
PJs
extensions.
The
next
question
is:
how
can
I
take
advantage
of
this
new
feature?
The
first
and
best
place
to
look
when
wanting
to
learn
new
features
about
p.m.
PJs
is
at
the
updated
documentation.
A
You
can
always
access
the
most
up-to-date
documentation
by
visiting
a
kms,
/pn
PJs.
So,
let's
jump
over
to
a
browser
and
I'll
show
you
where
you
can
find
the
documentation
for
library.
Extensions
well
begin
with
a
blank
browser
and
go
ahead
and
navigate
to
the
AKMs
/pn
PJs,
once
you're
on
the
pn
PJs
documentation
landing
page,
you
can
find
library,
extensions
by
selecting
packages,
o
data
and
extending
a
no
data
library.
You
can
also
utilize
the
search
functionality
from
anywhere
within
the
documentation.
A
You
simply
click
into
the
search
bar
and
start
typing
extensions,
and
you
can
see
it's
found
all
the
extension
documentation
within
the
table
of
contents
here
on.
The
right
is
where
you
can
find
the
different
types
of
extensions
that
are
available,
as
well
as
the
registration
options.
If
you
click
through
each
of
the
sections
in
the
table
of
contents,
you'll
find
a
description
as
well
as
a
sample
for
each
of
the
type
of
extensions.
A
You'll
also
find
a
description
and
a
sample
for
each
of
the
registration
options
as
well,
because
this
is
an
introductory
video
for
PNP
j/s
extensions.
We
won't
be
diving
deep
into
the
details
of
each
extension
and
registration
option,
but
let's
take
a
look
at
a
slide
that
provides
some
clarity
on
how
the
three
types
of
extensions
can
be
connected
to
the
three
types
of
registration
options.
A
Let's
begin
with
the
three
types
of
extensions
that
are
available
to
us
function
named
and
proxy
Handler,
all
three
of
these
extension
choices
empower
us
as
developers
to
extend
the
functionality
of
PN
PGS
that
might
not
exist
out
of
the
box.
As
mentioned
in
the
use
case
section
of
our
video,
we
may
have
a
very
specific
scenario
to
our
organization.
That
needs
to
be
part
of
every
solution.
A
For
example,
maybe
when
we
make
a
request
for
lists,
we
always
need
them
to
be
ordered
in
a
specific
way
within
the
PNP
jeaious
extensions
is
where
we
can
include
reusable
code
that
would
make
it
easy
to
ensure
that
sort
order
requirement
is
always
met,
creating
custom
functionality
using
one
of
these
three
types
of
extensions,
though,
is
only
half
the
story.
We
need
to
establish
the
Taipings
of
our
extension
as
well,
so
that
they're
available
within
our
solution.
A
The
three
different
registration
options
available-
forests
are
global,
Factory
and
instance,
and
they
each
provide
a
different
level
of
scope
to
where
our
custom
extensions
are
available
when
using
PN
pjs,
including
other
benefits
such
as
making
our
custom
extensions
available
within
intellisense.
Now
it's
important
to
note
that
all
of
our
extension
choices
can
be
used
with
any
of
the
registration
options.
There
is
no
unique
scenario
where
only
one
extension
choice
will
work
with
only
one
registration
option.
A
The
point
here
is
that
there
is
no
limitations
imposed
on
us
when
choosing
which
extension
type
and
which
extension
registration
option
combination
that
works
best
for
our
solution.
So
now
that
we've
covered
some
use
cases
as
well
as
what
extension
types
and
registration
options
are
available
to
us.
Let's
look
at
a
demo
in
this
demo
we're
going
to
show
how
to
use
a
named
extension
with
a
factory
registration.
This
is
a
combination
scenario.
A
We
feel
that
might
be
the
most
common
for
this
demo,
we'll
be
using
an
out-of-the-box
web
part
which
I've
already
created,
and
you
can
see
here
I've
also
already
installed
the
latest
version
of
PN
pjs
version
2.0.
While
this
demo
solution
only
includes
a
single
web
part,
it's
possible
that
our
solution
could
also
grow
in
the
future
to
include
more
web
parts
or
SharePoint
framework
extensions,
and
we
can
plan
for
that
possible
scenario
by
using
a
PNP
j/s
preset
to
store
our
new
named
extension
functionality.
A
Now,
if
you're
not
yet
familiar
with
PN
pjs
presets,
you
can
learn
more
about
them
in
the
pn
p
JS
video
on
selective
imports
or
you
can
check
out
the
pn
pjs
documentation
because
we
want
our
new
pn
p
JS
named
extension,
preset
to
be
available
to
all
future
webparts
or
SharePoint
framework.
Extensions
added
to
this
solution
will
place
the
preset
file
here
at
the
source,
folder
level,
we'll
call
it
P
and
pjs
named
extension
TS.
A
The
first
thing
we'll
do
is
paste
in
some
import
statements
that
are
necessary
for
our
named
extension
and
we'll
briefly
review
what
each
of
them
is
for.
The
first
is
the
extend
Factory,
which
is
what
allows
us
to
provide
that
extended
functionality
for
P
and
pjs.
The
second
is
the
SP
rest
object.
This
allows
us
to
export
the
SP
constant
from
this
preset.
So
that's
available
to
the
rest
of
our
solution.
A
The
rest
are
some
ambient
features,
we'll
need
for
this
particular
example,
and
since
we
know
that
ultimately
we'll
be
needing
to
export
that
SP
rest
object,
we'll
go
ahead
and
add
that
in
now
now
at
this
point
we
have
a
fully
working
preset
that
would
allow
us
to
access
list
data.
So
let's
jump
over
into
our
web
part
typescript
file
and
set
up
the
necessary
imports
to
use
this
preset
file.
A
A
So
let's
paste
in
that
functionality
now
and
while
this
is
completely
valid
and
functional,
remember
that
the
requirement
was
that
all
lists
be
ordered
by
created
date
descending
and
only
including
the
top
10,
it's
highly
possible
that
someone
could
mistakenly
include
a
true
value
on
the
order
by
which
would
make
it
ascending
or
provide
the
wrong
top
value
number.
So,
while
this
is
a
very
simple
PN,
pjs
request
example,
it's
also
a
perfect
example
of
how
named
extensions
in
PN
pjs
version.
2
can
be
used.
A
So,
let's
jump
back
over
to
our
preset
tight
script
file
and
let's
look
at
the
code,
that's
necessary
to
set
up
that
specific
functionality
into
a
named
extension.
The
first
thing
we'll
do
is
take
advantage
of
the
extend
Factory,
which
is
something
we
had
imported
when
we
originally
set
up
our
preset.
But
as
you
can
see,
we
have
yet
to
use
let's
go
ahead
and
paste
in
some
code
that
allows
us
to
utilize
that
extend
Factory.
A
Essentially,
what
we're
doing
is
we're
using
the
extend
factory
function
to
create
a
custom
method
called
lists
order
created
descending.
This
allows
us
to
identify
that
exact
order
by
and
top
value
in,
a
single
method.
So
let's
save
that
jump
back
over
to
our
web
part
file
and
try
to
utilize
our
method
name,
so
we'll
go
ahead
and
click
on
our
web
part
we'll
come
in
and
we'll
look
to
replace
our
lists
with
the
wedded
name.
But
we
see
there's
an
error.
A
Why
is
that
it
tells
us
it
does
not
exist
and
that's
because,
as
we
reviewed
earlier,
there
are
two
parts
to
the
pnp
J's
library
extension
story.
While
we
created
the
functionality
for
our
library
extension,
we
haven't
established
the
Taipings.
So,
let's
go
ahead
and
paste
in
the
code
necessary
for
establishing
the
Taipings
in
our
extension
and
making
it
available
to
the
rest
of
our
solution.
Essentially,
what
we're
doing
is
we're
extending
the
I
web
interface
to
include
the
name
of
our
new
method,
as
seen
here.
A
This
not
only
ensures
that
the
types
are
set
up
correctly
for
importing
our
extension
throughout
our
solution.
It
also
allows
for
our
custom
method
to
be
used
within
intellisense.
So
if
we
save
this
and
go
over
to
our
web
part
typescript
file,
we
see
the
error
is
now
gone.
In
fact,
if
we
delete
our
method
altogether
and
engage
in
tell
a
sense,
we
can
see
that
our
method
is
here
available
for
us
to
utilize
and
again.
A
While
this
is
a
very
simple
example,
the
use
of
the
PNP
j/s
extension
ensures
that
the
correct
order
by
and
top
values
are
used
in
a
very
reliable
and
repeatable
way.
Now,
let's
take
a
look
at
another
scenario
that
is
slightly
changing
the
requirements
we've
talked
about
so
far,
which
has
been
to
return
the
top
10
lists
most
recently
created,
but
specifically
for
the
current
web.
But
what
if
we
wanted
to
use
a
named
extension
to
be
able
to
identify
the
current
web
or
the
route
site
collection?
A
Well,
then,
you're
going
to
love
this
next
example,
because
we
can
create
parameterised
named
extensions
instead
of
adding
our
functionality
to
the
extend
Factory
first,
as
we
did
in
our
previous
example,
let's
begin
by
establishing
the
Taipings
of
our
extension
by
extending
the
I
web
interface,
this
will
include
the
name
of
our
custom
method,
as
well
as
the
parameters
that
are
going
to
be
available
to
it.
Now
that
we've
set
up
the
registration
for
our
functionality,
let's
go
ahead
and
add
in
the
custom
method
that
makes
everything
work
in
this
very
simple
method.
A
We
check
to
see
if
our
string
parameter
is
equal
to
root.
If
it
is,
then
we
make
a
connection
to
the
root
site,
collection
and
return
the
lists
collection.
If
not,
we
simply
look
at
the
current
site
collection.
So,
let's
go
ahead
and
save
and
jump
over
to
our
web
part
to
see
how
we
can
utilize
this
new
functionality,
which
is
really
no
different
from
how
we
executed
the
method.
In
our
first
example,
we
engage
intel
isense,
which
allows
us
to
find
our
custom
function.
A
We
see
that
it
is
accepting
a
parameter
of
string,
so
we'll
set
up
route
and
then
we'll
go
ahead
and
execute
it.
Using
the
new
in
vocables
feature,
that's
part
of
P
and
PJs
version
to
no
doubt
you
can
see
that
having
the
option
to
parameterize
your
library
extension
functionality
provides
enormous
flexibility.
A
Hopefully
these
two
demo
examples
have
given
you
a
glimpse
of
the
incredible
power
that
can
be
achieved
using
library
extensions.
We
also
encourage
you
to
try
out
the
other
library
extension
options
available
and
you
can
always
learn
more
about
them
and
all
of
the
PNP
J's
features
by
referencing,
the
most
up-to-date
documentation
available
at
aka,
MS,
/pn
PJs.