►
From YouTube: SharePoint Framework Extensions Tutorial 2 - Using page placeholders from Application Customizer
Description
This tutorial will guide you on how to use page placeholders from Application Customizer extension using the SharePoint Framework version version 1.10 from February 2020.
You can find a written version of this tutorial from following location - https://dev.office.com/sharepoint/docs/spfx/extensions/get-started/using-page-placeholder-with-extensions.
January 2020 version using SharePoint Framework 1.10.
More details around SharePoint Framework from http://aka.ms/spfx
Get involved on the SharePoint & Microsoft 365 Patterns and Practices - reusable controls, components, open-source projects, community calls and much more. See more details from http://aka.ms/sppnp
Sharing is caring!
A
Welcome
to
this
getting
started,
achievement
framework
extensions,
tutorial
series,
and
in
this
tutorial
we
kinda
have
a
look
on
how
we
use
the
placeholders
and
Bates
placeholders
in
the
application
customizer.
So
we
continue
by
extending
the
hello
world
solution
which
we
graded
in
the
hello
world,
part
1
tutorial
by
adding
actual
placeholders
or
taking
reference
to
an
placeholders
on
the
modern
page
and
then
injecting
additional
content
on
those
placeholders.
This
video
has
been
recorded
in
January
2020
and
it's
using
SharePoint
framework
1.10.
A
If
you
are
using
a
newer
version
of
SharePoint
framework,
there
might
be
small
changes
here
and
there,
and
so
please
follow
up
on
the
documentation
which
is
always
kept
up
to
date
and
related
on
these
things.
So
let's
actually
get
right
into
it
and
let's
jump
back
on
our
computer,
where
we
are
where
we
left
off
with
a
part
1
of
the
of
the
hello
world
of
the
urban
framework
extensions.
Now,
let's
actually
close
up
that
dialog
and
let's
go
back
on
our
console.
A
A
So
as
part
of
the
work
1,
we
only
got
the
default
structure
and
different
behavior
as
part
of
the
solution.
But
now
what
we're
starting
to
doing
here
is
modifying
the
existing
code
to
take
advantage
of
associating
the
existing
placeholders
on
a
page
and
placeholders
or
something
with
SAR
currenty
to
exist
on
the
page,
so
we're
able
to
basically
inject
your
own
extensibility
on
those
placeholders.
A
So
as
part
of
the
the
1.10
time
frame,
we
do
have
two
different
placeholders
on
a
page,
so
we
have
a
header
placeholder
and
a
button
placeholder,
and
but
there
are
additional
placeholders
there
in
the
roadmap
or
in
the
pipeline
as
well,
but
before
we
actually
get
moving
in
here,
let's
actually
install
a
one
more
package,
so
office,
SP
office,
UI
fabric
core
package
and
to
get
some
of
our
styling
definitions
as
to
be
included
in
our
solutions.
We're
going
to
use
these
stylings
in
our
styles
and
value
settings
in
the
solution.
A
So
let's
go
to
our
console
and
execute
NPM
install
at
Microsoft
/sb
of
sui
fabric
core.
So
that's
going
to
install
the
latest
style
sort
of
be
available
in
our
solution,
so
there
we
go
now.
The
package
has
been
installed
and
let's
continue
by
adding
a
new
file
in
the
same
structure
and
our
same
folder,
where
we
have
our
existing
application.
A
We
are
referencing
background
color,
based
on
a
dynamic
mapping
of
the
themes,
which
is
something
what
the
the
SP
SP
office
your
fabric
or
is
actually
giving
us
as
a
as
an
option.
These
are
quite
convenient
ways
of
actually
referencing
dynamically.
The
theme
color,
which
is
being
used
on
a
site
rather
than
explicitly
setting
the
color
of
the
application
customizer
to
a
specific
color,
but
then
is
the
same.
Color
of
the
site
is
changed.
A
Is
your
you
exchanged
as
well,
so
you
can
using
the
office
in
your
fabric
or
style,
so
you
can
actually
make
all
of
that
automatically
adjust
that
now,
let's
get
back
on
our
actual
application,
customizer
and
let's
start
modifying
this
one
as
well.
So,
first
of
all,
let's
actually
add
few
more
imports
on
and
the
base
import
in
here
so
I'm
gonna
actually
add
a
comma
there
and
we
can
ahead.
A
Add
an
placeholder
content
and
a
placeholder
name
object
to
be
imported
from
the
base
components
to
our
solution
and
I'm
gonna,
add
and
the
soil
import.
So
let's
actually
add
those
there
as
well
and
an
escape
import
as
well.
So
we're
going
to
take
advantage
of
this
in
the
case
and
that's
referencing,
the
styles
on
the
file
which
we
just
created
now
we're
not
going
to
actually
modify
too
much
the
the
things.
A
The
next
thing
is
whatever:
what
we're
going
to
do
is
that
let's
actually
create
two
new
place:
internal
variables
inside
of
our
class,
which
are
gonna,
be
used
for
the
placeholders,
so
we're
able
to
then
get
a
reference
to
the
placeholders.
If
those
exists
on
the
page
and
then
we
need
to
include
an
on
init
method,
I'm,
sorry,
updating
the
own
enemy
in
admitted
slightly,
so
let's
actually
get
rid
of
dalila
dialog
entry
and
all
of
that
and
let's
modify
the
their
own
init
method
slightly
and
let's
have
a
look
on.
A
What
are
we
actually
on
doing
here?
So
let
me
actually
do
that
one
day
over
there,
so
we
are
adding
this
change
event
and
basically
we
are
saying
that
whenever
this
our
event
changes
or
reloading
of
the
page
or
the
navigation
transitions,
and
this
method
should
be
executed
so
making
sure
that
we
redraw
our
placeholders
if
we
are
moving
all
around
between
the
the
structure
and
the
navigation
on
the
site.
Now
we
also
need
to
include
our
new
private
method,
which
is
called
the
render
placeholder.
A
So
let's
actually
get
some
space
on
that
one
in
the
class
and
paste
in
the
code
which
we're
gonna
use
there,
and
let's
go
this
to
one
by
one.
So
we
know
what's
actually
happening
within
its
based
a
piece
of
code
so
render
placeholders
looking
some
additional
information,
which
is
good
practice.
Obviously,
so
you
know,
especially
during
development
time
once
actually
want
pieces
of
code
are
being
executed
available.
Placeholders.
You
can
actually
check
what
other
place
available
placeholders
on
a
page
so
which
is
a
good
practice
you
always
wanna
double
check
is
the
top
placeholder.
A
Here
is
the
bottom
placeholder
there
and
if
it
exists,
then
let's
take
an
instance
on
it.
What
we're
doing
here
is
basically,
we
aren't
taking
an
instance
on
the
top
placeholder
and
then,
by
the
way,
we're
adding
a
on
dispose
method
there
as
well,
making
sure
that
we're
cleaning
memory
whenever
we'll
be
moving
along
within
the
page.
A
So
basically,
this
way
we
can
parameterize
the
individual
instance
on
that
particular
site
to
actually
provide
us
a
specific
text,
so
just
to
demonstrate
how
things
actually
can
be
done
now,
let's
actually
test
out
things
so
making
sure
that
we,
we
actually
think
some
working.
We
are
still
missing
the
own
disposed.
So
let's
actually
get
that
one
included
on
the
class
as
well.
Here
we
can
actually
see
a
button,
placeholder
references
as
well,
so
that's
getting
there
and
now
I
need
to
actually
double
check.
A
Where
are
we
on
the
function?
That
seems
to
be
the
inside
of
the?
If
that's
the
inside
of
the
function?
So
here
we
are
adding
actually
the
additional
function
and
that
should
actually
work
out
fine,
so
saving
changes
we
have
the
own
dispersed
available.
Now
we
do
need
to
change
also
the
serve
slightly
because
we
modified
that
the
properties
of
that
application
customizer.
A
A
And
bottom,
and
we
can
then
do
here,
modify
that
based
on
the
documentation
like
top
or
we
are
aware
of
the
page,
and
then
you
can
pretty
much
guess
once
we're
gonna
have
on
the
bottom
area
of
the
page.
So
that's
actually
there
as
well,
and
there
we
go
now.
We
have
updated
the
properties
to
match
our
properties
in
the
application
customers
that
once
again,
let's
go
to
the
interface.
We
can
see
a
top
and
bottom
over
there
and
those
are
basically
referenced
as
the
properties
to
that
one.
A
So,
in
the
cart
serve
sorry
in
the
serve
to
chasten,
we
can
now
configure
those
to
have
default
values
when
we
aren't
debugging
and
verifying
that
everything
is
working
properly.
So,
let's
get
back
on
our
console,
let's
do
again
call
observe
so
that
they
start
things
within
the
URL
which
we
have
on
the
serf
that
JSON
file.
A
As
expect
that
we're
loading
things
based
on
the
query
parameter
so
therefore,
let's
load
to
debug
scripts
and
there
we
go
now.
We
can
actually
see
the
top
area
after
dates
placeholder.
So
that's
the
top
placeholder
and
we
injected
some
additional
text
on
it,
and
you
can
actually
see
the
default
settings
which
we
had
in
the
serve
dot.
Json
in
here
insert
adjacent
with
the
top
area
of
debate
and
a
bottom
area
of
the
page,
those
texts
we
can
actually
see
those
in
a
query
parameter.
A
If
you're
wondering
where
the
color
is
coming
from,
that's
not
coming
from
the
default
theme
of
the
page.
So
if
we
actually
modify
the
theme
of
the
site,
it
is
actually
getting
reflected
as
well.
So
in
this
case
the
default
primary
color
is
actually
prone,
which
we
can
see
from
this
edit
button
me
here
and
that's
why
the
the
the
sections
are
brown
as
well,
and
that
was
because
in
the
Styles
files
we
actually
define
and
that
to
be
the
theme
primary.
A
So
that's
how
we
actually
control,
then
the
themes
by
the
theme
coloring
automatically
as
part
of
these
settings
as
well,
and
that's
basically
it
for
the
tutorial
hello
world
/
tutorial.
So
once
again,
we
are
serving
the
files
we
use
to
serve
the
Chasen.
We
use
the
two
different
properties,
top
property
and
bottom
property
to
actually
define
those
settings,
and
now
we
can
actually
see
the
header
properties
over
there
and
a
button
properties
there
getting
in
check
that
maybe
I
one
thing
to
notice
around
the
bottom
area
over
to
page.
A
This
is
so
to
say,
let's
say
sticky
footer,
which
means
that
it
actually
stays
on
top
of
the
page.
There
is
a
separate
and
the
footer
options
are
in
trans
as
well
to
come,
which
are
more
on
the
content
of
the
page.
So
but
by
default,
the
bottom
placeholder
is
actually
sticky
and
it
will
be
always
visible
on
top
of
the
page,
so
to
say,
but
that's
it
for
the
part
2
2
and
in
part
3.