►
Description
This community call demo is taken from the SharePoint Framework community call recording on 9th of May 2019. In this video, Kyle Schaeffer (Spiritous) demonstrates a real customer solution build as SharePoint Framework Application Customizer.
Notice that this implementation has a dependency on DOM injection, which is not recommended patter as Microsoft cannot guarantee that the page structure remains the same as we ship new versions.
Presenter - Kyle Schaeffer (Spiritous) - @kyleschaeffer
Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-9th-of-may-2019/
You can find more details around the PnPjs library mentioned in the video from http://aka.ms/pnpjs.
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
Hey
everybody
Kyle
Schaeffer,
here
of
spíritus
last
week,
I
had
the
pleasure
of
joining
Microsoft
SharePoint
of
ecosystem
patterns
and
practices.
Call
the
community
call
that
they
run
every
week
or
every
other
week,
and
that
was
great
fun.
I
was
able
to
demo
a
quick
solution
for
everybody
on
the
call,
but
unfortunately,
the
recording
of
that
demo
failed
and
I
talked
to
Visa
from
the
Microsoft
community.
We
decided
we'd
go
ahead
and
just
rerecord
that
demo
and
I'm
gonna
share
that
out
on
YouTube.
So
you
guys
can
take
a
look
in
case.
A
Anybody
missed
it
that
wanted
to
go
ahead
and
see
that
demo.
So
that's
gonna
be
what
I'm
doing
today.
We're
gonna
take
a
quick
look
at
this
solution
that
we
have
built
and
I'm
gonna
show
you
guys
a
little
bit
of
how
it
works
and
talk
a
little
bit
about
the
development
and
the
code
that
goes
into
this.
So
this
particular
solution
was
built
as
a
set
of
three
application.
A
Customizer
extensions
built
in
SharePoint
framework
version,
1.8,
believe
it
was
built
in
version
1
by
8.1,
and
the
current
version
of
SPF
X
is
1.8
dot
2.
So
just
a
little
bit
behind,
but
I
think
it
was
mostly
just
bug,
fixes
and
stuff
in
that
version
anyway,
but
unfortunately,
I
won't
be
able
to
share
the
code
today,
just
because
this
is
a
client
solution
and
they
own
the
code
and
so
I
wanted
to
just
give
you
a
quick
demo
kind
of
how
it
works
and
I'll
try
to
do
a
quick
overview
of
the
code.
A
So
you
can
get
a
sense
as
to
how
the
application
actually
works,
but
first
of
all,
you'll
notice
that
I
have
on
the
browser
here.
I
have
my
network
panel
open
in
Chrome's
dev
tools
and
you'll
also
notice
that
we
have
three
icons,
that
you
probably
don't
recognize
from
your
own
office,
365,
environment
and,
first
of
all,
I
will
say
that
I
probably
would
not
recommend
doing
it
like
this,
like
what
we
did
in
these
application.
A
Customizers
is
during
the
design
phase
of
this
client
project
that
we
did,
as
we
just
decided
that
we
didn't
want
like
to
have
an
additional
bar
or
additional
toolbar
up
here,
because
you
can't
really
hook
into
the
the
tool
bar
right
here.
You
already
have
this
bar
that
makes
up
a
modern
team
site
or
a
modern
page
inside
of
SharePoint.
You
already
have
the
suite
bar
up
here
that
has
your
app
launcher
and
all
that
good
stuff,
and
so
we
didn't
want
to
add
an
additional
one
through
these
customizations
that
we
were
doing
so.
A
I
wouldn't
recommend
doing
this,
because
this
is
a
little
bit
dangerous,
we're
living
on
the
edge
here,
because
if
Microsoft
comes
along
and
decides
to
add
a
new
icon
next
to
their
notifications
icon,
then
obviously
it's
going
to
show
up
either
underneath
or
on
top
of
our
buttons
that
we've
added
here
and
we
basically
used
a
CSS
media
query
to
kind
of
make
sure
it
moves
out
of
the
way
like
when
the
interface
changes.
But
again
this
is
kind
of
a
dangerous
proposition.
A
If
you
will
on
really
small
screens,
we
move
it
to
its
own
bar
here,
but
I
wouldn't
recommend
that,
because
it's
not
an
officially
supported
placeholder
we're
just
kind
of
using
CSS
to
place
those
in
a
particular
position.
You'd
probably
want
to
do
something
like
have
it
fixed
to
the
screen
so
sort
of
like
the
feedback
and
the
get
mobile
app
buttons
down
here,
maybe
down
at
the
bottom
left
or
something
you
could
fix
those
buttons
to
the
screen
there.
That
would
probably
be
a
more
recommended
approach.
A
We
did
this
purely
out
of
a
design
consideration
that
came
out
of
the
project,
but
I
just
want
to
mention
that
before
anybody
yells
at
me
and
says,
wait
a
sec
that
you
shouldn't
do
that
we
we
know
we're
a
bit
living
on
the
edge
here
in
this
particular
solution,
but
that's
okay,
but
I'll
sort
of
show
you
the
functionality
now
of
these
three
extensions
and
then
we're
going
to
focus
on
one
in
particular.
So
all
three
of
the
extensions
are
using
p.m.
PJs,
which
is
an
awesome,
client-side,
JavaScript
library.
A
You
can
use
to
sort
of
abstract
the
web
service
request
that
you
make
to
your
SharePoint
environment
and
they're,
using
three
different
services.
So
we'll
start
with
this
first
one,
which
is
a
feedback
form
so
you'll
notice.
Here
it's
a
you
click
on
it
and
it
opens
up
this
little
call-out.
That
gives
you
a
feedback
form
and
I'll
also
point
out
that
all
three
of
these
extensions
are
using
the
office
UI
fabric,
so
they
follow
the
same
theme
they
fit
in
very
nicely
to
the
office.
A
365
theme
that
you
set
and
you'll
notice
that
we
have
green
buttons
and
sort
of
green
highlights
on
the
rating
stars
whenever
you
click
and
if
we
were
to
change
the
look
of
our
SharePoint
site
and
we
change
the
theme
back
to
blue,
for
example,
and
if
I
were
to
save
this,
you
will
notice
that
all
of
our
extensions
whoops,
nothing
notifications,
but
you'll
notice
that
the
blue
button
and
the
blue
star
everything
just
kind
of
updates
to
adopt
that
theme.
So
that's
a
really
nice
pattern.
A
If
you're
building
your
own
extensions
and
webparts
in
SharePoint
framework
I
would
highly
recommend
the
office
UI
fabric
as
well
as
the
office.
Ui
fabric
react
library.
So
if
you're
building
react-
which
we
did
in
this
case,
it's
just
really
great
because
it
takes
so
much
less
work
and
it
just
fits
into
the
normal
UI.
It
kind
of
feels
like
it's
part
of
the
office,
3
365,
UI
and
I
really
enjoy
working
with
that
library.
A
A
So
I
can
say
it
looks
good
and
then
let
me
clear
the
console
over
here
we'll
filter
by
lists,
so
we
can
sort
of
see
the
network
request
that
actually
gets
sent
out,
but
you'll
notice
here
when
I
hit
Send
it
just
loads
there
for
a
minute
we
get
a
little
bit
of
a
loading
spinner
and
then
what
it's
doing
behind
the
scenes
is
it's
ensuring
that
a
list
actually
exists
on
the
current
site
collection.
So
it's
a
list
called
feedback.
That's
that
first
request
and
if
it
doesn't
exist,
it'll
go
ahead
and
create
it.
A
A
So
right
here,
you'll
see
this
request:
URL
we're
getting
that
list
and
we're
posting
to
the
items
endpoint
and
then,
if
we
scroll
all
the
way
down,
you'll
see
the
payload
that
actually
gets
posted.
We
have
some
comments.
I'll
make
this
a
little
bit
bigger,
so
it's
easier
to
see,
but
you
can
see
the
comments
and
the
rating
that
was
sent.
It
also
tracks
the
current
user,
which
will
automatically
get
stored
in
the
created
by,
but
we
needed
a
title,
so
we
just
put
the
user
name
in
there.
A
Where
you
activate
this
solution,
you
can
even
tenant
deploy
this
if
you
wanted
to
to
have
it
available
on
all
SharePoint
sites,
so
it's
going
to
kind
of
work
universally
everywhere.
So
that's
the
feedback
form
that
was
the
first
one.
I'm
gonna
skip
over
this
middle
one,
because
that's
gonna
be
one
that
we
focus
on
the
most,
but
I
do
want
to
quickly.
Show
you
this
one
over
here,
a
little
bolt,
icon
and
I.
Think
this
uses
the
SVC
or
client
the
SVC
I'm
gonna.
A
Just
try
to
make
sure
the
filter
here
can
show
you
the
actual
network
request
that
comes
in,
but
this
uses
the
managed
metadata
service
yeah.
So
we're
using
the
correct
one
there.
So
what
it
is
is
it's
basically
an
additional
navigation
menu,
so
in
our
term
store
or
or
in
our
managed
metadata
service,
we
created
a
navigation
term
set,
and
that
contains
these
links.
So
the
client
can
very
easily
go
into
the
term
store.
They
can
change
the
links
that
can
reorder
them.
A
They
can
add
new
links,
and
this
is
kind
of
like
we
call
it.
I
want
to
or
a
Quick
Links
menu.
So
it's
a
very
easy
way
for
them.
As
administrators
or
content
authors
to
editorially
add
an
additional
set
of
links
that
maybe
don't
fit
into
like
a
hub
site
navigation
which
we
did
end
up
doing
on
their
intranet.
Maybe
it
doesn't
fit
into
some
other
menu,
but
we
still
want
it
available
on
all
modern
SharePoint
sites.
So
we
built
this
app
application.
A
Customizer
extension
to
basically
just
go
out
get
the
first
request
here,
gets
a
term
set,
so
you'll
see
it
comes
back
and
it
says
you
know
gives
you
all.
The
data
about
that
term
set
a
term
group
that
comes
back
and
then
the
second
request
actually
gets
the
navigation
links
themselves.
So
you'll
notice
down
here
and
the
nice
thing
is
about
using
p.m.
PJs
I,
don't
actually
have
to
parse
this
crazy
JSON
format.
A
It
gives
us
back
that
data
in
a
very
nice
easy
format,
but
you'll
notice
there's
six
links
that
were
returned
and
that
corresponds
to
the
six
links
that
appear
up
here
and
then,
of
course,
each
link
in
this
array
contains
the
actual
data
about
that
particular
navigation
item,
which
is
great,
including
under
local
custom
properties.
We
have
the
simple
link
URL,
which
you'll
notice
contains
the
link
for
each
one
of
those
that
appear
in
that
menu,
so
that
works
really
great.
A
That's
a
really
simple
extension
that
we
added
and
again
like
I,
mentioned
the
one
that
I
want
to
focus
on,
and
this
one
I
want
to
filter
by
user
profile.
Maybe
our
profile
property
user
properties.
I
forget
we'll
find
out
well
we'll
find
the
right
filter
here
in
a
second,
but
basically
what
it
does
is
when
you
open
it.
We're
calling
this
the
my
bookmarks
extension,
it's
gonna
load
for
a
moment
and
let
me
get
the
right
filter
there.
So
we
got
get
my
property
yeah
people,
manager,
I,
think
that'll
be
a
good
filter.
A
People
manager
there
we
go
so
what
it
did.
Is
it
fired
off
a
web
request
again
using
p.m.
PJs,
but
using
a
different
web
service.
This
is
using
the
user
profiles
web
service.
So
this
is
cool,
because
what
we
did
is
we
went
out
and
we
got
some
user
profile
properties,
you'll
notice.
They
come
back
in
this
big
array.
There's
a
hundred
and
six
properties.
We
created
a
custom
property
called
my
bookmarks.
A
A
Is
you
just
click
on
these
bookmarks
and
you
can
go
to
their
destination?
You
can
also
add
a
new
bookmark
using
this
button
down.
Here.
It's
going
to
pre-fill
it
with
a
current
page
URL
and
the
current
page
title
so
I
could
call
this
anything.
I
want
or
I
could
just
accept
the
defaults
and
hit
save
there
and
you'll
notice.
A
It
adds
a
new
link
to
our
bookmarks
and
what
it
did
over
here
and
the
network
is
it
called
this
endpoint
called
set
single
value,
profile,
property
and,
of
course,
it's
going
to
send
a
payload
down
here
and
if
it's
gonna
send
a
new
property
value,
which
is
the
JSON
array
of
these
bookmarks.
But
now
it
contains
that
latest
one
which
might
be
kind
of
hard
to
see
there.
But
you
can
see
at
the
very
bottom
and
the
tooltip.
A
A
You
reload
these
your
that
WPC,
that
new
bookmark
that
I
created
is
gonna,
follow
me
everywhere,
I
go
and
that
was
kind
of
the
intent
to
this
I
can
delete
bookmarks
to
kind
of
go
back
to
the
three
or
whatever,
but
the
intent
was
to
kind
of
give
users
an
additional
way
to
save
bookmarks.
That
is
gonna
stay
in
the
app
itself
within
office,
365
and
so
sort
of
similar
to
this
whole
following
thing,
but
in
this
case
the
client
wasn't
crazy
about
that.
A
A
So
that's
how
these
extensions
work
and,
like
I,
said
I'm
going
to
do
a
little
bit
of
a
dive
into
the
code
of
my
bookmarks
in
case
you're
curious,
so
we'll
jump
over
into
visual
studio
code
and
I
will
show
you
this
solution,
that
we
built
this
application,
customizer
extension
and,
of
course,
it's
a
SharePoint
framework
extension
like
I
mentioned
it
is
using
version.
Oh,
it's
actually
one
dot!
Zero,
so
it's
the
latest
vert
major
version
of
SharePoint
framework,
but
it's
a
couple
patch
updates
behind
I.
Think
it's
like
I
said:
dot.
A
2
is
the
latest
version
and
we're
also
using
react
version
16.4
and
we
are
using
office.
Ui
fabric
react
5.1
35,
so
all
of
those
are
kind
of
the
major
features
that
we're
using
in
each
of
those
three
extensions
and
then
of
course,
P
and
P.
J
s
we're
using
1.3.1
I
think
they
just
released
version
2.0.
It's
it's
currently
in
beta
I,
believe
so
excited
to
upgrade
to
that.
But
we
are
using
1.3.1
currently
to
do
the
actual
web
request.
A
So
that's
kind
of
the
major
dependencies
that
are
going
on
behind
the
scenes
and
you'll
see
if
I
dive
into
this
source.
Folder
and
extensions
here
is
our
actual
extension.
It's
called
bookmarks
application
customizer.
Let
me
scroll
the
top
here
and
we'll
just
kind
of
look
through
this
real
quick.
We
have
a
single
customizer
property.
You
can
customize
the
user
profile
property
by
passing
a
custom
property
to
hear,
but
we
default
it
to
that.
My
bookmarks
use
your
profile
property
that
you
saw
in
the
web
request
panel.
A
We
were
looking
at
this
in
the
browser
and
it's
a
pretty
simple
application:
customizer
extension,
the
extension
itself,
this
entry
file-
it
basically
just
handles
the
registering
of
the
placeholder,
so
we're
doing
this
placeholder
provider
ad,
and
then
we
have
this
custom
method
called
top
that
basically
tries
to
get
the
top
placeholder,
which
is
the
placeholder
that
appears
right,
underneath
a
sweet
bar
at
the
top
of
the
interface
and
modern
pages,
and
then
it
the
only
thing
it
does
with
that
placeholder.
Is
it
mounts
a
react
element
that
we're
calling
bookmarks?
A
So
it's
basically
just
creating
this
react
component
called
bookmarks
and
it's
sticking
it
in
to
the
top
place
order.
That's
all
that
the
extension
does
and
then
all
the
magic
all
the
fun
stuff
that
are
my
bookmarks
thing
is
handling
is
all
occurring
inside
of
this
bookmarks
component.
This
react
component.
They
were
mounting
into
the
application,
customizer
extension
here
and
we're
only
passing
it
to
props
to
that
top
level.
React
component,
so
we're
passing
it.
A
A
Bookmarks
tsx,
which
is
our
top-level
react
component,
and
then
basically
this
component.
It
has
a
little
bit
of
state.
I'll
show
you
here
when
we,
when
we
have
our
state,
we
take
a
look
at
it.
It's
basically
a
set
of
boolean
x'
that
indicate
what
you're
doing
at
any
given
time.
So
are
you
currently
loading
bookmarks?
A
Are
you
adding
or
editing,
bookmarks
and
then,
based
on
these
set
of
boolean
States,
it's
gonna
load
in
other
sort
of
child
react
components,
so
we
have
an
add
and
edit
bookmark
and
edit
list
or
a
bookmark
list
the
list
itself
when
it's
displaying
them.
It's
basically
just
you
know
this
top-level
component
is
really
not
doing
much
other
than
saying.
Oh,
are
we
currently
adding?
Oh,
in
that
case,
let's
go
and
load
in
the
add
component
into
this,
and
then,
of
course
it
is
containing
the
bookmarks
themselves.
A
So
an
array
of
bookmarks
which
we've
defined
as
an
interface,
called
a
bookmark,
and
then
it
has
some
methods
on
here.
You'll
see
here's
our
toggle
button.
The
render
method
contains
a
call
out.
So
again
this
is
the
office
UI
fabric.
So
all
three
of
these
extensions.
They
basically
function
off
of
a
toggle
button,
which
is
the
button
that
appears
in
the
suite
bar
and
then
a
call
out,
which
is
this
little
rectangle
rectangular
box
that
pops
out
from
the
from
the
button
itself.
A
So
that's
what
this
call
out
is
its
handling
kind
of
that
panel
that
overlays
the
page.
So
we
have
some
props
that
we're
passing
to
that.
But
then
all
this
stuff,
that's
specific
to
our
application,
is
right
here.
So
we
have
some
loading
spinner
error
messages
in
the
react
component.
If
we're
not
adding
or
editing
we
load
in
the
list
of
bookmarks,
if
we're
editing,
we
load
in
edit
list
you'll
see
here
and
if
we're
adding
adding
we
load
in
the
add
component.
A
So
again,
pretty
simple,
just
using
that
top-level
state
to
sort
of
control
what
appears
to
the
user,
and
then
we
also
have
down
here
a
few
methods
to
do
things
like
get
my
bookmark.
So
this
is
where
we're
actually
loading
the
bookmarks
using
p.m.
PJs,
and
what
we
did
in
this
case
is
we
actually
wrote
a
sort
of
an
abstraction
called
user
profile
service,
so
we
could
sort
of
not
have
all
that
code
shoved
into
this
top
level
component.
A
So
we
basically
called
this
user
profile
service,
and
then
we
can
do
things
like
get
my
profile
or
get
the
JSON
value
of
this
particular
profile
profile,
property,
the
same
thing
with
setting
profile,
so
we
can
just
simply
call
user
profile
service
set
profile,
property,
JSON,
and
then
we
just
give
it
our
bookmarks
State
and
it's
gonna
set
that
and
it
does
some
error
handling
and
all
that
good
stuff.
But
that's
that's
basically
it
that's
what
this
top-level
react
component
does
and
then
you
have
your
child
components.
A
That
of
course,
basically
just
are
updating
state
they're,
not
actually
calling
web
services
themselves.
So
all
they're
doing
is
you
know,
for
example,
the
ad
is
saying:
hey
whenever
you
add
a
new
bookmark
and
you
click
on
save,
let's
notify
this
top
level
component
down
here
that
you
added
a
new
bookmark
and
then
it
handles
all
of
the
web
service
stuff.
All
of
that
user
profile
property
abstraction
class
calls.
All
of
these
child
components
are
basically
just
pure
state
management.
A
That's
all
it's
doing,
and
it's
using
office
UI
fabric
to
create
like
forms
and
the
buttons
and
all
that
good
stuff,
but
they're
they're,
really
pretty
simple.
Overall,
when
you're
editing
a
bookmark
or
adding
a
bookmark,
you
can
see
sort
of
the
prop
signature
for
this
edit
bookmark
component.
It's
overall,
pretty
simple
and
then
I'll
just
give
you
a
quick
peek
at
our
user
profile
service
class,
you'll
notice.
Here,
as
we
scroll
down
it's,
we
have
this
class
called
user
profile
service
manager
and
it
has
a
set
up
method
where
we're
doing
that
p.m.
A
PJs
SP
set
up
and
we're
passing
in
the
application.
Customizer
context,
we
have
a
git
profile
method,
that's
going
to
go
out,
and
it's
going
to
use
SP
profiles
that
my
properties
dot
get
and
it's
going
to
go
out
and
get
all
of
the
users
profile
properties.
We
have
a
method
to
get
a
single
profile
property.
A
So
whenever
we
need
to
save
the
bookmarks
back
to
the
User
Profile
service,
again
we're
using
that
SP,
the
PM
pjs
abstraction
to
basically
just
run
spi
profiles
that
set
single
value
profile,
property,
I,
love
this
library
like
how
easy
is
that,
as
opposed
to
having
to
deal
with
these
complex
requests
like
look
at
all
this
stuff,
it
does
like
setting
the
account
name
and
all
these
headers,
and
then
it
deals
with
this
crazy
response
like
that.
Working
with
these
Web
Services
is
sometimes
really
complex.
A
So
I
just
love
the
abstraction
of
being
able
to
call
this,
and
it
does
all
that
stuff.
For
me,
that's
just
that's
just
great
I
love
p.m.
PJs.
It's
so
good
definitely
highly
recommend
using
that
in
your
own
solution
and
that's
pretty
much
it
if
you
want
to
learn
more
about
PM
PJs
I
will
post
a
link
to
this
in
the
video
description
down
below,
but
this
is
a
really
awesome
library.
A
Again
it
just
abstracts
all
of
those
web
services
and
those
cool
things
you
can
do
inside
of
SharePoint,
and
it
just
makes
working
with
that.
Rest
API,
so
much
easier,
so
definitely
recommend
checking
that
out
also
really
highly
recommend
office
UI
fabric
as
well
as
the
office.
You
have
fabric
react
library.
It
is
a
great
set
of
components
that
just
makes
your
development
of
your
UI
in
your
design
and
your
front-end
user
experience
so
much
easier.
A
But
if
they
put
in
so
much
effort
into
this
open
source
library-
and
you
just
essentially
drop
it
into
your
webparts
and
your
extensions
and
you
have
an
interface
up
and
running
that
looks
great-
it
works
great
and
they
have
some
really
quite
advanced
controls
and
and
widgets
and
sort
of
patterns
as
well.
You
can
drop
in,
which
is
great
and
I,
certainly
hope
you
enjoyed
this
hope.
Hopefully,
you
found
some
value
in
seeing
examples
of
what
somebody
else
is
doing
with
the
SharePoint
framework.