►
Description
This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on March 12, 2020
In this 14-minute demo, Martin Hatch demonstrates how to use an SPFx Application Customizer to inject an additional search box into the header of each page, which uses the "Search Settings" (at either the Site Collection or Sub-Site level) to determine the redirect page. This allows the implementer to provide an integrated and branded search box to send users to a "classic" Search Center, or to a custom page, rather than to the out-of-the-box “modern search" page. The site collection scope focused JS web part is ideal for customers with extremely focused content with loads of custom metadata or for global orgs with huge groups with 1000s of pages and docs that want their own dedicated search center while not wanting to disrupt the global level search functionality.
Presenter: Martin Hatch | @MartinHatch
Supporting materials:
• Sample: sp-dev-fx-extensions | https://github.com/MartinHatch/sp-dev-fx-extensions/tree/master/samples/js-application-intranet-searchbox
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/sppnp.
A
Okay,
so
my
demo
is
for
an
application
customizer,
and
this
is
been
born
out
of
a
fairly
long-winded
process
of
migrating,
actually
from
classic
SharePoint
publishing
environment
over
to
modern
for
a
fairly
large
organization.
This
is
this
has
been
ongoing
for
a
very,
very
long
time
for
reasons
I
won't
get
into,
and
this
sample
is
actually
currently
in
the
SP
dev
effects
extensions.
It's
actually
been
there
for
10
months,
since
it
was
first
uploaded
and
moved
through
the
the
process.
A
So
this
has
already
been
in
the
samples
for
quite
a
long
time,
for
various
reasons,
I
think
me
being
too
busy
and
waiting
for
the
stars
to
align
it's
only
just
being
demoed,
but
the
codes
all
up
there
and
ready
to
take
a
poke
so
basically,
when
they
moved
over
from
classics.
The
modern
and
admittedly
this
is
also
before
microsoft,
search
got
when
Chie,
but
one
of
the
things
that
kind
of
looked
at
was
the
modern
search
experience
being
at
being
fairly
broad
and
fairly
narrow.
In
terms
of
customizations
available,
they
were
very
much
missing.
A
This
is
just
a
test
environment,
so
there's
nothing
particular
in
there,
but
that
web
part
works
great,
and
the
question
is:
how
do
you
get
people
there,
and
one
of
the
key
recommendations
tends
to
be
put
links
in
the
global
map
build
a
web
part.
They're
never
really
worked
for
me.
So
instead
I've
gone
the
route
of
the
application
customizer
and
the
other
query
tends
to
come
around
is
how
do
you
configure
it
being
an
app
customizer?
A
It
could
be
to
deploy
to
any
site
collection,
it's
difficult
from
a
code
perspective
to
say
right,
we're
going
to
store
the
settings
in
a
particular
place
in
a
way,
that's
accessible
and,
of
course,
coming
from
a
classic
project.
We
realize
that
those
settings
are
already
there.
So
if
you
go
to
search
settings
and
a
site
collection,
administrator
name
if
you've
got
the
same
things
at
the
web
level,
but
everything's
a
site
collection.
These
days
we
already
have
a
whole
bunch
of
properties.
We
can
use
to
configure
how
search
works
and
where
they
go.
A
So,
in
this
case,
I'm
set
they're
going
to
change
this
value
here
to
point
out
more
a
custom
site
collection
and
we
should
find
if
the
demo
works
is
you
know,
let's
face
it,
they
never
do
and
if
I
refresh
them,
I
now
have
a
search
box
popping
on
top,
and
this
is
what
this
is
the
after
customizer
that
runs
off
of
those
custom
properties.
So,
unlike
a
Microsoft
search
box
which
is
tenant
widen
global
this,
you
can
configure
on
any
site
collection
and
it
will
point
directly
to
whatever
you
have
configured
in
site
settings.
A
So
here
I
can
hit
that
up
hit
go,
and
it
takes
me
through
to
my
custom
site
collection,
and
that
can
be
any
page.
It
could
be
configured
in
any
way
it
doesn't
have
to
be
modern.
It
doesn't
even
have
to
be
a
SharePoint
page.
To
be
honest,
it's
it's
all.
It's
doing
it's
taking
the
URL
that
you've
provided
and
applying
the
query
string
and
the
format,
but
it's
used
to,
and,
of
course
you
can
use
the
PMP
webparts
that
are
already
there.
A
You
can
wire
them
up
and
do
everything
in
that
way,
but
this
seems
to
work
quite
well
and
the
nice
thing
about
deploying
it
in
that
way.
I
refresh
there
is
that
again,
if
you
go
back
and
remove
those
settings,
it
disappears.
So
it's
quite
an
obtrusive.
You
could
happily
deploy
this
across
your
tenant
and
it'll
only
appear
in
those
sites
where
you
have
specified
a
custom
search
center
and
in
particular,
in
the
case
of
my
client,
but
I'm,
working
with
by
removing
these
values
and
they've
already
got
custom
search
centres
quite
heavily
in
classics.
A
So
up
until
a
point
where
they
are
ready
to
migrate
over,
they
can
continue
using
the
existing
settings.
They've
already
got
and
their
old
site
collections.
They
will
continue
to
work
side
by
side
change,
the
values
and
remove
them
all
of
those
properties
go
away
and
now
the
way
that
this
is
possible
and
the
easiest
way
this
works
is
that
all
of
those
properties
actually
stored
in
the
web
property
bag.
This
is
an
absolutely
beautifully
formatted
web
properties.
That's
come
back
for
the
standard.
Api
use,
REST
API
under
scrape
the
only
website
or
properties.
A
A
Now
this
is
this
is
the
same
site,
but
before
they
made
any
changes
in
the
search
setting,
so
it's
one
thing
to
be
careful
of.
If
you
go
looking
for
these
in
an
existing
site,
where
you
haven't
actually
specified
a
search
center,
there
won't
be
any
values
there.
These
are
the
values
now
that
I've
applied
it
and
we
should
know
it
isn't
refresh
today.
Okay
demo
fail
already.
This
is
excellent.
It's
been
a
while.
That's
all
I'll
say
there
we
go
so
now.
A
A
So
you
do
need
to
do
a
double
check
in
the
code
to
make
sure
that
you're
looking
for
the
appropriate
result,
page
address
of
this
property,
and
if
you,
if
they've
reset
it
look
instead
for
something
like
an
Eric,
true
or
another
value,
because
you
can't
rely
on
this
property
to
define
whether
they've
defined
it
or
not.
So
a
very
brief
look
at
the
code.
This
is
fairly
basic.
It's
not
react.
It's
plain,
JavaScript,
it's
a
fairly
old
sample,
so
some
of
the
methods
and
practices
may
have
changed
since
this
was
initially
come
through.
A
Okay,
can
it
is
that
readable,
fine
I'll
leave
it
until
somebody
else
when
we
initially
come
in
and
there's
a
simple
method
to
get
the
search
free,
direct
page.
If
that
has
a
value
and
it's
not
blank
string,
then
we'll
register
our
placeholder
and
then
we'll
register
a
whole
bunch
of
like
events,
Martin.
A
Problem
of
the
4k
monitor,
that's
what
I'm
gonna
blame
it
on
and
so
getting
the
research
redirect
page.
This
is
effectively
where
we're
retrieving
those
web
properties,
so
SPF
X
makes
this
super
super
simple.
We
can
simply
refer
to
the
espy
HTTP
client
get
the
current
web
URL
pass
in
all
properties
and
that
wall
then
return
us
in
our
response.
A
All
of
the
web
properties
we've
got
and
we
simply
loop
through
those
create
simple
interface
to
expose
the
ones
that
were
interested
in
and
we
can
then
pull
through
these
wonderfully
named
properties
from
the
web
property
bag.
Bearing
in
mind
there'll
be
two
of
these.
If
you've
defined
it
at
the
site,
collection
and
the
site
level,
the
web
level,
one
of
them
will
end
in
site.
One
of
them
will
end
in
web
I'm.
A
In
this
example,
only
looking
for
those
site
properties
at
site,
collection
level-
you
can
see
here
we're
basically
saying
right,
get
the
inherit
value.
If
that's
equal
to
true,
then
set
it
blank
because
we
want
to
ignore
it.
Otherwise,
pull
through
that
result,
page
address
property
and
then
resolve
that,
and
literally
as
simple
as
if,
if
that
is
a
value,
then
we
go
through
and
register
the
placeholder
and
spit
that
out
I'm
not
going
to
spend
much
time.
A
Looking
at
the
placeholder
itself,
it's
a
fairly
basic
HTML,
and
this
is
pretty
boilerplate
stuff
at
this
point
in
terms
of
all
the
samples
and
demos
that
are
out
there
in
a
nutshell,
you
basically
look
for
your
placeholder.
If
it
doesn't
exist,
you
register
it
and
then
you
set
the
inner
HTML
to
a
whole
bunch
of
values.
A
We
are,
of
course,
using
custom
styles,
so
in
terms
of
gradual
string,
IDs
and
class
names
we're
using
a
sass
file
with
an
automatically
generated
code
behind
so
that
all
hooks
through,
because
this
is
typescript
and
that's
how
it
effects
and
typescript
works,
which
is
wonderful.
That
means
that
all
of
our
IDs
and
classes
are
going
to
be
unique
when
it
gets
compiled
and
deployed.
The
other
thing
we'll
be
using
in
the
sass
file
is
a
reference
to
obviously
fabric.
A
So
we
want
to
make
sure
that
this
follows
all
of
the
various
theming
that
applies
so
that
if
they
change
the
theme
of
the
site
or
implement
their
own
custom
theme,
we
pull
those
through,
and
that
means
that
things
like
the
button
colors
are
all
using
things
like
MS
collar,
the
in
primary
the
button
clear
button,
the
search
boxes
and
all
the
different
colors
are
based
on
that
theme.
So
we
don't
have
to
worry
about
re
skinning.
It
will
be
designing
it
as
we
deploy
it
and
that's
pretty
much
it
there
are.
A
There
are
a
couple
of
bugs
in
this
code
that
I
have
fixed
for
a
client
deployment
that
I
need
to
go
back
and
apply
to
this.
One
of
them
in
particular,
is
that
check
for
the
inherit
value.
So
if
you
do
use
this
sample
today,
I
will
try
and
get
this
updated
by
the
end
of
the
week,
and
but
at
the
moment,
if
you
set
a
search
property
and
then
remove
it,
it'll
disappear
completely.
A
B
A
B
Like,
like
Martin
said,
we
had
some
communicational
issues,
I
actually
forgot
to
follow
up
on
under
scheduling
the
demo,
so
Martin.
Thank
you
for
volunteering
still
doing
this
a
few
months
after
the
session
is
still
in.
So
that's
definitely
on
me
now
there
was
a
question
related
on
the
on
the
Microsoft
search.
Is
that
now
gonna
be
taking
over
then
the
whole
search
experience?
And
the
answer
is
yes,
so,
whatever
you're
saying
in
this
demo,
where
the
Microsoft
search
is
in
the
suit
navigation,
that
is
the
end
call
and
we
are
actually
heading
there
now.
B
If
you,
however,
like
in
a
Martin's
case,
you
can
actually
override
the
search
result
page
using
these
settings,
and
we
do
have
videos
on
that
one
available
as
well
by
using
the
search
heading
functionality
which
is
in
here.
That
is
a
interesting
book
related
on
the
the
base,
URL
overlapping
but
yeah.
So
the
search,
Microsoft
search,
the
top
suit
navigation
toolbar,
is
by
design
and
that's
where
we
are
heading
across
the
world
from
an
experience
perspective.
So
it
doesn't
matter.
B
A
Just
so,
my
understanding
is
that
there
are.
This
was
announced,
I
believe
that
ignite
that
there
are
customizations
coming
for
Microsoft
search
in
terms
of
being
able
to
define
the
verticals
refiners,
potentially
custom
display
and
those
kinds
of
features.
The
assumption
is
that
is
going
to
be
an
a
tenant
level.
Only
because
correct
so
to
be
clear.
The
reason
the
this
was
built
effectively
because
I
I
understand
for
smaller
organizations.
A
Absolutely
there
might
be
the
case
that
you
don't
really
need
a
custom
search
center
in
the
future,
because
Microsoft
search
can
take
care
of
all
that
and
it
can
do
all
of
those
customizations,
and
in
this
particular
example,
it
fills
one
of
two
gaps.
One
is,
if
you
have
an
extremely
focused
microsite,
for
example,
and
my
client
has
a
psyche
election
that
revolves
all
around
good
practice
articles
and
they
have
loads
of
custom
metadata.
A
specific,
focused
search
experience
for
good
practices,
only
and
that's
not
really
relevant
at
the
tenant
level.
A
So
they
don't
want
to
apply
now
that
they're
at
the
global
kind
of
search
experience
and
the
other
example
is
for
larger,
more
distributed
organizations
and
whereby
in
this
case,
it's
a
very,
very
big
global
organization
who
have,
for
obvious
reasons,
one
office365,
tenant
and
one
SharePoint
environment.
And
but
the
business
unit
that
we're
dealing
with
is
very,
very
large.
It's
thousands
of
users,
and
so
they
have
their
own
intranet
within
the
organization.
A
So
it
spectively
being
able
to
provide
a
complete
internet
experience,
including
their
own
dedicated
search
center,
because
they've
got
five
thousand
pages
and
fifteen
thousand
documents
themselves
without
disrupting
the
top
core
global
enterprise
level.
Search
that
they're
going
to
get
through
much
such
really
good.
Really.
B
Good
also
there's
a
comment
from
Frank
cournot.
Just
following
up
on
things.
The
search
settings
are
already
valid
for
the
top
search
bar.
Yes
or
no
answer
is
yes,
so
you
can
actually
the
search
headings
if
you
set
the
search
settings
to
be
using
a
custom,
results-based
and
the
microsoft
search
will
redirect
you
in
SharePoint
there.
But
it's
not
ten
onboard.
Sorry,
it's
a
site
collection,
white
setting.
So
it's
like
a
different
perspective.
Yes,.