►
Description
This PnP guidance video, we'll take a look on how to use custom search results page in SharePoint Online with open-source SharePoint PnP search solution.
This capability is rolling out gradually world wide during January and February 2020.
- Presenter: Vesa Juvonen (Microsoft) | @vesajuvonen
Useful resources:
- Creating custom search results pages in SharePoint Online - https://techcommunity.microsoft.com/t5/microsoft-search-blog/creating-custom-search-results-pages-in-sharepoint-online/ba-p/1141515?WT.mc_id=m365-15744-cxa
- PnP Modern Search solution - https://microsoft-search.github.io/pnp-modern-search/
- PnP PowerShell - https://docs.microsoft.com/powershell/sharepoint/sharepoint-pnp/sharepoint-pnp-cmdlets?view=sharepoint-ps&WT.mc_id=m365-15744-cxa
- Set-PnPSearchConfiguration - https://docs.microsoft.com/powershell/module/sharepoint-pnp/set-pnpsearchconfiguration?view=sharepoint-ps&WT.mc_id=m365-15744-cxa
- Microsoft Search on resource center at https://aka.ms/microsoftsearch
- Microsoft Search on Twitter - https://twitter.com/MicrosoftSearch
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the Microsoft 365 and SharePoint Patterns and Practices community at: http://aka.ms/sppnp.
A
Welcome
to
the
skating
started,
video
on
using
a
custom,
modern
search,
result
page
in
SharePoint
Online.
So
pretty
recently
we
released
a
new
capability
in
SharePoint
Online,
which
gives
you
the
option
of
overriding
the
out-of-the-box
search
results
page,
so
you
can
actually
create
your
own
company's
specific
search,
results,
page
and
you're,
able
to
use
whatever
with
parts
and
experiences
on
that
search
results
page
as
well.
One
of
the
options
when
you
are
designing
and
that
page
is
to
use
our
open-source
community
driven
EMP
surgeon.
So
this
is
something
which
we
built.
A
Microsoft
has
built
together
with
community
and
MVPs,
to
enable
you
to
have
a
custom
search
results,
page
experience
in
the
SharePoint
Online.
This
video
has
been
recorded
in
January
20
funny,
and
so,
if
you're
watching
the
video
slightly
later,
some
of
the
settings
and
options
might
be
slightly
different
and
but
don't
worry
about
it.
The
basics
are
still
exactly
the
same.
A
So
if
you
go
to
the
loop
of
your
Microsoft
web
comic
address,
you
can
actually
find
multiple
different
sample
designs
and
cool-looking
portal
layouts
from
where
you
can
actually
choose,
and
there
are
more
than
10
of
these
available
already
at
this
time
and
we're
looking
into
having
more
in
the
future.
So
in
my
case,
I'm,
using
in
the
landing
and
I
already
provisioned
that
to
my
tenant,
because
I'm
a
tenant
that
administrator
and
I
can
easily
make
that
happen.
A
Now
we
can
I
use
the
landing
site
collection
as
the
demo
site
collection,
and
for
this
experience,
we're
going
to
create
a
custom
search
results
in
the
search
result
page
and
we're
going
to
modify
that
to
work
with
our
own
business
requirements
or
or
objectives
for
their
experience.
Now,
how
do
we
actually
make
that
happen?
Is
that,
let's
start
by
creating
us
the
search
results
page
so
I'm
going
to
briefly
start
by
creating
a
new
page
in
this
particular
site?
You
could
actually
do
the
custom
search
result
page
in
the
same
tenant.
A
So
you
can
actually
point
all
of
your
site
collections
to
a
one
search
result
page,
which
could
be,
for
example,
located
in
the
root
of
the
tenner.
Putting
these
gates
is
from
is
simplicity,
perspective
I'm,
going
to
just
create
a
new
page
in
the
landing
site
collection
and
to
demonstrate
how
we
can
configure
this
in
a
psycho
action
level
and
knock-back
on
how
we
could
potentially
do
that
in
a
tenant
level.
A
So
let's
publish
that
and
let's
actually
copy
that
URL
to
our
clipboard,
so
we
actually
take
it
with
us
and
because
we
cannot
use
that
as
that's
the
configuration.
Let's
get
back
on
the
Welcome
page
and
just
briefly
having
a
look
on
how
the
microsoft
search
is
being
exposed
here.
So
if
I
search,
for
example,
contoso
in
the
search
results
page
by
default,
we
are
being
redirected
to
the
underscore
layouts
1530
aspx
page,
and
if
you
are
paying
attention
on
the
address
bar
and
quite
often
people
are
not
send.
That's
completely
fine.
A
We
pay
attention
more
on
the
page,
and
from
this
page
you
can
actually
see
that
there's
no
editing
experience
and
maybe
if
the
bates
and
experience
is
not
quite
optimal
for
you
and
you
would
like
to
have
some
additional
settings
additional
search,
queries
additional
verticals
or
options
here.
You
would
like
that
to
be
available
and
that's
when
we
actually
start
create
using
then
the
custom
search
results
page
and
this
new
capability
gives
you
that
option.
So
how
do
we
do
that
in
practice?
A
So,
let's
get
back
on
the
landing
site,
let's
go
to
the
site
settings,
so
we
already
have
the
upcoming
results
based
in
the
in
the
clipboard.
So
now
we
go
to
the
site
contents
and
we
go
to
the
site,
collection,
settings,
site
settings
and
under
site
settings
we
have
the
search,
which
is
a
site
collection
of
settings.
So
if
I
go
to
the
search
settings,
I
can
I
will
actually
pasting.
A
The
results
page
in
here
and
I
will
say
that
you
know
we're
not
going
to
use
the
same
page
setting
as
my
we
actually
going
to
use
our
custom
results,
aspx
page
and
clicking
okay.
So
that's
basically
telling
in
this
nine
collection,
whenever
we
aren't
applying
on
doing
a
search,
query,
we're
being
redirected
to
that
custom
results
page
and
again
there
aren't
ways
to
tackle
this
in
a
tenant
level.
I'll
come
back
on
that
one
in
a
later
on
on
the
video.
A
A
So,
for
example,
in
this
case,
we're
still
getting
the
underscore
layers
and
15
and
certs
aspx,
but
if
I
do
another
refresh
on
the
page
and
be
loading
the
experience
few
times
sooner
or
later,
like
said,
it
might
be
really
long,
two
minutes
when
the
pointy
can
actually
say
the
setting
being
the
point
when
the
caching
has
been
gone.
Well
that
wasn't
too
bad.
Now,
when
we
do
that
in
a
search
query
like
the
contours
of
search
query,
we
can
actually
see
that
we're
landing
on
the
results
page
already,
but
there's
no
results.
A
Well,
that's
as
that
is
as
expected
because
we
didn't
add
any
web
parts
which
would
be
available
which
could
actually
read
the
search
query,
which
is
getting
provided
by
the
search
search
text
box.
Good.
Let
me
get
back
on
the
front
page
before
we
actually
start
configuring
and
their
salts
page
and
let
me
show
where
we
actually
get
started.
A
So
you
could
absolutely
potentially
write
your
own
experience
or
you
could
use
the
BMP
modern
search
solution
as
a
starting
point
and
then
extending
that
based
on
your
business
requirements
as
well,
you
can
actually
download
or
find
additional
details
related
on
this
solution.
There's
this
multiple
different
way:
parts.
There's
a
extensibility
library,
there's
different
options.
A
So
by
default
you
should
never
ever
every
random
and
it's
just
downloaded
a
SharePoint
solution,
file
from
internet
and
install
that
tenon.
So
you
need
to
trust
the
source
from
where
you're
actually
getting
this
information.
So
in
this
case
we
are
at
the
Microsoft
search
key
tap
organization,
and
this
is
a
Microsoft
coordinated,
BnB
search
results,
open
source
community
alone,
so
it's
a
safe
to
get
install
to
your
tenant,
but
in
general
you
should
be
quite
aware.
What
are
the
things?
A
What
you
install
to
turn
on
good
and
now
I
have
that
one
in
my
downloads,
folder
I
actually
have
few
different
versions
out
of
it
as
well.
So
let
me
refresh
that
one:
let's
get
rid
of
the
traditional
version,
because
I
downloaded
and
tested
two
things
earlier
as
well.
So
let
me
go
to
the
App
Catalog.
A
So
I
don't
have
to
explicitly
install
the
solution
to
a
piece
of
specific
site
collection
clicking,
deploy
and
that's
it.
The
web
parts
are
available.
So
the
way
parts
are
now
available
for
anybody
within
the
tenant,
and
that
means
that
we're
able
to
actually
start
implementing
our
custom
results
page.
So
let
me
actually
a
query
contoso
and
there's
our
search
results.
Page
now
and
let's
start
actually
modifying
this
page
scientist.
So
let
me
go
to
the
edit
mode
and
let's
get
rid
of
the
search
result
text
from
there.
So
that's
fine.
A
We
don't
actually
need
that.
So
let
me
actually
slightly
modify
the
layout
because
I
want
to
have
a
refiners
in
place
as
well,
and
then
I
want
to
actually
add
this
results.
Webpart
here
there's
the
search,
I
can
actually
search
to
search
and
so
I
will
actually
get
to
search
with
parts
available.
So
we
wanted
to
have
search
results
over
there
and
then
we
want
to
have
and
search
with
Finers
in
here
and
there's
the
search,
refiners,
a
wet
part
as
well.
A
So
just
as
well
I
know
that
I
can
actually
configure
this
almost
in
any
order.
So
I'm
going
to
say
the
the
refiners
will
be
dependent
on
the
search
results
report.
So
that's
the
connectivity
between
them
and
I
could
actually
say
refiners
in
here
and
it's
gonna
actually
update
the
text
as
a
title
in
the
search
results.
Web
part,
let's
actually
configure
that
one
as
well,
and
we
want
to
actually
tie
in
the
search
result
with
part.
A
We
want
to
connect
into
a
source
and
connecting
that
source
beings,
Bates
environment
and
the
Bates
environment
being
searched.
So,
by
taking
advantage
of
the
dynamic
data
connectivity
in
the
web
parts
and
we're
saying
that
we're
interested
on
the
search
query
which
is
coming
from
the
search
and
there
we
go
now,
we
can
actually
immediately
see
some
results
on
the
web
part
being
rendered.
So
we
get
24
results
and
there's
an
automatic
paging.
A
There
is
a
paging
Waypoint
available
as
well,
which
we
can
hooking
and
configure
to
birth
together
with
search
results,
so
I'm
going
to
go
to
the
next
page
and
we
are
able
to
then
and
connect
and
the
web
part
we're
able
to
modify
the
query
template
we're
able
to
do
additional
other
settings
like
the
editing
of
the
sort,
orders
and
sort
of
all
fields,
and
all
of
that
stuff.
I
want
to
actually
connect
this
one
to
search,
refined,
sweet
burn,
so
I'm
going
to
actually
select
that
one.
A
So
then
that
actually
enables
us
to
see
filtering
and
the
size
of
the
file
as
an
example,
and
we
can
see
the
prediction
of
how
many
files
belongs
206
and
all
of
that
self.
Let
me
get
back
on
the
configuration
of
the
actual
search
results.
Web
port
I
can
do
additional
settings.
I
can
do
synonyms,
there's
a
different
layouts,
which
we
can
actually
do
here
and
we
can
say,
search
results
as
the
title
for
that
set
and
we
can
modify
absolutely
the
rendering
in
any
way
we
want.
A
So
we
could
use
easily,
for
example,
two
tiles.
It's
a
nice,
quite
nice
rendering,
especially
if
it's
a
it's,
it's
a
document
or
a
news
article.
It
actually
uses
automatically
that
content
and
we
could
fill
the
down,
how
many
items
are
being
shown
and
a
few
other
settings
as
well.
What's
also
pretty
cool,
and
this
actually
does
support
custom
templating,
so
you're
able
to
actually
define
your
own
custom
template
the
rendered
and
the
result
in
any
way
you
want.
A
All
of
that
is
being
documented
if
you
prefer
to
do
so,
I'm
going
to
use
the
tiles
in
this
case
to
menachem
spent
too
much
time
on
the
different
settings
and
other
than
that
it
actually
looks
quite
okay.
So
let
me
close
the
search
results
and
let
me
republish
and
that's
actually
pretty
cool.
So
now
we
have
a
custom
search
results
page
and
we
could
do
something
like
mark
I
think
we
have
a
one
article
or
two
articles
created
or
Marcus.
That's
the
news
article
that's
being
shown
in
the
landing.
A
So
that
explains
why
it's
so
that's
pretty
cool
and
and
cool
settings,
but
there's
one
more
thing
which
is
slightly
bothering
here:
isn't
it
what
sputtering?
Well,
this
is
a
massive
section
and
massive
hitter.
Again
we
get
rid
of
that
header.
And
can
we
get
rid
of
that
settings
as
well?
And
the
answer
is
yes
absolutely
we
can
so
all
of
these
settings,
which
are
seeing
which
I
did
manually
here,
you
can
actually
manage
them,
also
using
the
PNP
powershell
and
what
is
BMP
powershell,
and
how
do
we
get
started
on
that?
A
One
is
that
we
go
to
our
dog
stuff
Microsoft
at
common.
We
can
find
a
BMP
powershell
and
in
this
case-
and
we
are
interested
on
installing
BMP
powershell
from
the
powershell
gallery
and
the
sharepoint
online
option.
So
let
me
actually
copy
that
one
and
I'm
gonna
actually
run
my
polish
off
in
the
admin
world
and
I'm
gonna
install
the
sharepoint
online,
how
short
the
BMP
powershell
online
and
this
machine,
and
there
we
go-
that's
been
actually
already
installed.
A
So
that's
why
it
didn't
actually
say
in
advance
additional
information
or
additional
progress
when
we
do
the
installation
now,
in
my
case,
that's
already
installed.
So
let
me
actually
open
up
the
power
show
in
the
normal
view,
and
what
we
can
do
with
the
MP
power
show
is
that
we
are
able
to
connect
doing
existing
sites
not
only
on
a
tenant
level,
but
we
were
able
to
do
things
like.
A
Let
me
actually
get
rid
of
all
this
clear,
so
we're
connecting
to
the
actual
site
collection
level,
and
in
this
case
we
actually
want
to
configure
and
the
landing.
So
let
me
actually
get
the
landing
results,
so
I'm
going
to
take
the
URL
of
the
landing
where
I'm
connecting
there
so
not
only
on
a
tenant
settings,
but
also
on
the
site
level
settings
and
when
I'm
signing
in
and
obviously
you
can
do
also
monthly.
A
Add
the
multi-factor
authentication
in
this
case
I
didn't
do
that
you
can
actually
have
a
switch
natural
units,
so
you
can
actually
have
use
web
or
is
it
there's
multiple,
multiple
different
options?
Obviously,
all
of
these
are
being
recorded,
I'm
going
to
use
the
red,
locking
the
sign
in
which
is
then
more
usable
or
understandable.
A
We
cannot
just
sign
in
for
the
for
the
PMP
session,
and
now
we
are
able
to
do
stuff
like
get
PNP
sites,
so
we
are
able
to
say
that
we're
in
that
side
we
are
able
to
do
get
the
NPL
list
and
which
is
actually
checking
all
of
the
lists
within
the
site,
because
we're
connected
on
a
site
level
not
on
a
tenant
level.
Obviously
BMP
power
sure
can
be
used
to
configure
also
cannot
level
settings.
A
But
what
we're
interested
actually
doing
here
is
that
we
are
interested
on
manipulating
the
client
side
page
and
the
identity
of
the
client
side
page
this
results
aspx.
So
that
means
that
I
can
do
I
identity,
his
results
and
then
I
can
actually
change
the
layout,
the
layout
type
dope.
Oh
sorry,
it's
get
in
besides
content,
so
I'm
actually
able
to
get
the
results
page
and
the
details
around
the
results
page,
we
can
see
additional
settings,
we
could
load
any
of
the
columns
and
any
of
the
values
of
the
of
the
results
page.
A
But
what
I
actually
want
to
do
in
here
is
that
we
want
to
set
b
and
b
client-side
page
B
implements
and
page
with
an
identity,
meaning
the
results
that
aspx
and
we
want
to
set
the
layout
type
to
be
header
or
less
search
results
so
that
we
can
actually
get
rid
of
the
additional
header
section
of
the
rendering.
So
let's
actually
do
that
and
there
we
go
we're
executing
the
PMD
PowerShell,
that's
going
to
modify
the
settings
of
the
page
and
Debates
rendering
has
been
done.
A
A
Obviously,
in
this
case,
for
whatever
reason
and
the
full
suit
navigation
didn't
render
properly
either,
but
let's
actually
see
how
it
works
if
I
go
fully
from
the
landing
landing
page
and
I'm
actually
going
to
search
the
cantos
of
text
here
and
then
we're
going
to
go
to
the
search
results
page.
So
let's
do
cantos
research
from
here
and
there
we
go
whenever
being
redirected
to
the
results
and
we're
in
the
cantos
of
results
and
there
we
can
actually
see
the
results
related
on
and
that's
search.
A
We're
able
to
filter
down,
based
on
the
refiners
which
we
configured
using
the
web
parts
which
came
from
the
DMV
a
search
result
solution
and
were
able,
for
example,
filter
down
on
the
on
the
size
of
the
page
or
in
all
of
those
settings,
and
all
of
these
are
configurable
in
the
web.
Part
results
this
way.
As
well
so
pretty
cool
setup
and
using
again
the
custom
search
result:
settings
in
the
site,
collection
level,
you're
able
to
modify
this
per
site
collection.
Now,
a
few
times
mentioned
you
can
add.
A
This
is
a
site
collection
level
setting
the
only
way
you
can
actually
control
this
in
a
site
in
a
tenant
level
is
first
of
all,
and
you
actually
control
and
automate
and
for
the
existing
site
collection.
You
would
actually
apply
the
setting
to
a
central
search
result
page
if
you're
looking
into
having
at
one
central
a
search
result
page
and
then
you
would
actually
take
advantage
of
the
default
site,
designs,
SharePoint
default
site
design
and
provisioning.
Let's
actually
have
a
look
on
that
one
and
that's
the
documentation.
A
So
the
key
point
here
is
that
if
you
actually
define
a
custom
default
site
design
or
you
define
a
default
site,
design
which
is
is
default
tree
you're
able
to
define
a
scientist
sign
which
is
applied
whenever
a
new
site
collection
is
getting
created
using
any
way
in
your
tenant.
So
it
doesn't
matter
if
it's
greater
to
a
crew
or
a
team's
or
whatever
reason,
and
this
site
designs
in
site,
design
and
site
scripts
are
automatically
applied
and
InDesign
scripts.
A
You
are
in
then
able
to,
for
example,
execute
inertia
function
where
you
then
define
and
do
needed
settings,
for
example
before
for
setting
the
results
page
for
all
of
the
new
site
collections,
not
necessarily
a
quite
optimal
situation
and
requires
some
level
of
a
thinking
and
automation.
But
the
key
point
here
is
that
you
can
actually
do
that
in
the
enterprise
level.
So
all
of
the
site
collections
which
are
getting
created
can
be
pointed
out
and
configured,
for
example,
using
a
one
specific
resource
page.
A
So
you
don't
have
to
go
one
by
one
and
update
the
setting
per
every
single
site
collection
as
such,
and
also
please
give
us
feedback
around
these
settings
and
options.
So
it
might
be
that
there
will
be
for
further
site
or
tenant
level
options
in
the
future,
based
on
the
input
which
is
valuable,
which
you
will
give
us.
So
that's
it
for
the
custom
search
result
page
we
went
through.
How
do
we
actually
set
the
custom
search
result
page
in
a
site,
collection
level?
We
created
the
search
result
page.
A
We
also
took
advantage
of
the
PMP
search
with
parts
of
the
search
solution,
and
then
we
use
the
empty
partial
to
further
configure
the
experience
to
be
optimal
from
end
user
perspective.
Please
note
that
there's
multiple
different
webparts
available
in
the
in
the
PNP
modern
search
options.
If
you
have
feedback
ideas,
what's
missing,
please
let
us
know,
and
you
can
actually
build
quite
comprehensive
solutions,
and
here
all
of
these
are
also
open
source,
they're,
MIT
license
and
so
you're
able
to
take
advantage
of
this
if
needed,
but
that's
it
for
this
video.