►
Description
Community call demo is taken from the SharePoint Framework Special Interest Group recording on 14th of February 2019. In this video, Luis Mañez (ClearPeople) shows how to build a SharePoint Framework List View Command Set extension to change page layout of an existing page.
The demo shows how to change the existing page to be a single part app page.
Source code for the solution used in this demonstration is available from https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-command-singlepartapppage.
Presenter - Luis Mañez (ClearPeople) - @luismanez
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
Okay,
cool
yeah,
thank
you!
Well,
first
of
all
and
as
usual,
you
can
find
the
sample
in
the
gift
of
a
spirit,
effects,
extension
ripple
and
well
these
stamp
Ollie's
against
the
common
sir,
and
that
it's
gonna
configure
your
pages
single,
a
part
page
and
well,
typically
to
the
official
documentation.
A
There
are
like
three
ways
of
changing
the
layout.
You
can
run
some
javascript
in
the
browser
console
which
obviously
is
not
free
and
then
we
can
use
them
PMT
powers
of
commands
or
the
CLI
to
change
the
page
layout.
After
all,
the
only
thing
that
we
need
is
to
change
the
page
layout
type
property
of
the
list
item
and
set
it
to
single
part
updates.
So
I
thought
it'd
be
a
good
idea
to
have
the
option
to
configure
the
page
from
the
UI,
so
I
develop
an
extension
to
that.
So,
let's
do
a
quick
demo.
A
A
So,
as
you
can
see,
this
is
the
usual
lighting
out
with
the
page
header
and
via
title
alpha
and
so
on
and
there's
just
too
much
in
the
in
the
page.
So
if
we
jump
back
to
the
site
pages
library
and
select
again
the
page,
we
have
a
new
comment
button
on
here
to
single,
not
part,
and
if
we
click
on
it,
you
can
take.
The
page
is
configured
as
single
web
/
updates.
So
if
now
we
jump
back
to
the
page
and
we
refresh.
A
Yes,
you
can
see,
you
are
getting
there.
The
single-payer
part
like
I
also
very
much
is
taking
the
entire,
the
entire
main
content
in
the
in
the
page,
as
you
can
see
here.
So
if
we
take
a
quick
look
to
the
source
code,
this
is
just
an
SPF
existential
release,
build
common
set
extension
in
this
case
that
we
are
defining
just
one
command
the
button
to
convert
to
change
the
page
layout.
A
So,
basically,
we
just
need
to
do
post
requests
to
the
REST
API
surf
on
REST
API.
So
in
these
cases
can
file
a
URL
name
of
the
page
and
the
fears
of
the
of
the
list
item
its
of
course,
so
we
need
to
configure
some
headers
and
also
in
the
body,
and
we
configure
the
page
layout
type
with
this
single
web
page
value.
A
So
we
just
need
to
post
the
request
and
in
case
everything
has
to
work,
we
are
going
to
get
a
cure
for
and
responsive
status
on,
otherwise,
something
something,
but
when
wrong
so
well.
This
is
this:
is
the
code
and
again
gives
in
how
with
worth
so
that's
pretty
much
everything
from
my
sideways
I
think
you.
B
Let's
talk
about
that
one
swine
they
can
get
back
on
the
on
the
page
and
let's
pinpoint
few
things
here
so
first
of
all,
like
I,
like
I,
mentioned
on
the
on
danger,
the
end
behavior
in
the
general
availability
bill,
a
big
difference.
You
don't
have
to
programmatically
change
this
behavior.
This
is
the
preview
experience
so
that
people
can
actually
play
around
with
this.
The
the
key
question
is:
what
actually
till
is
asking
can
I
get
rid
of?
The
left.
B
Navigation
answer
is
yes,
it
is
part
of
the
page
layout,
so
you
can
actually
change
the
Bates
layout
to
be
home
page
layout.
Oh
sorry,
in
the
communication
sites
you
can
actually
get
rid
of
it
so,
and
it
is
part
of
the
the
rendering
logic
now
right
now
we're
in
a
modern
team
site
so
quite
default
in
the
modern
team
side.
The
left
navigation
is
there,
so
you
can't
get
rid
of
it.
You
can
also.
Nowadays
you
cannot
just
already
the
header
section
in
here,
so
actually
we
can.
B
B
Domestication,
so
it's
it's
just
matter
of
configuration.
What
are
we
doing
on
the
page
now?
Can
you
go
to
the
modify
the
look
and
feel
on
the
menu?
One
thing:
what
I
wanted
to
be
in
point
here,
as
well,
so
on
the
gears
menu
interesting
that
it's
not
actually
expanding?
Well,
no,
the
image
is
smaller
than
the
screen.
B
So
can
we
go
the
chance
to
look
functionality
and
in
here
a
click
header
not
all
of
to
get,
and
we
can
actually
click
compact
and
that's
going
to
reduce
then
the
SharePoint
section
on
the
on
the
front
as
well
now
we're
potentially,
if
we
do
now
apply
well,
actually
can
can
we
set
the
header
color
to
purple
and
then
do
apply.
That
gives
an
idea
how
it
will
look
like
as
well.
B
So
the
the
background
on
the
header,
yeah
I,
think
we're
don't
and
then
the
background
option
in
and
let's
put
that
one
the
background
being
purple
or
we
could
upload
an
image
as
well
later.
The
whole
point:
what
I'm
trying
to
make
here
is
that
now,
if
I
click
apply
now,
we
can
see
that
the
SharePoint
section
in
the
student
avocation
underneath
navigation
is
getting
a
smaller
and
smaller
if
needed.
B
If
you
need
to
have
a
full
scale,
rendering
of
the
web
parts
and
we're
really
having
that
kind
of
a
for
single
part
application
feeling,
if
you're
using
this
option
now
there
was
a
question
by
the
way
I
would
say:
wanna
address
right
away.
There
was
a
question
related
on.
Can
I
modify
a
custom,
modern
masturbates
answer?
It's?
No,
because
there
is
no
such
thing
as
modern
masturbate,
so
we're
not
using
masturbates
techniques
anymore.
B
In
SharePoint,
we
are
giving
you
options
on
embedding
headers
and
footers,
and
the
new
placeholders
in
the
which
are
coming,
but
you
cannot
modify
a
custom
masturbates
because
or
the
masturbates
itself,
or
introduce
our
customers
to
base,
because
that's
not
a
future
proven
way
of
modifying
sites.
So
we
need
to
have
alternative
ways
of
doing
this.
B
One
thing
what
I
wanted
to
also
pin
point
here
is
that
when,
when
you're
creating
so
in
the
GA,
so
whenever
the
1.8
comes
out,
when
you
are
actually
creating
new
pages,
when
you
click
add
a
new
page,
will
actually
introduce
in
that
selection,
then
all
of
the
web
parts
which
are
supporting
a
single
page
application,
rendering
so
you're
kind
of
a
creating
automatically.
Then
a
new
page.
So
you
don't
have
to
go
through
this
flipping
of
the
of
the
page
layout
on
section
in
the
side,
but
I
think
that's
pretty
much
it.
B
Maybe
somebody
might
be
still
thinking
on
hey,
so
will
there
be
ever
never
an
option
to
get
rid
of
the
header
completely,
which
is
now
saying
modern
team
sites
in
this
page,
which
is
a
fair
question,
because
some
people
would
like
to
get
rid
of
that
now.
It's
it's
one
of
those
things
which
are
still
under
discussion,
and
one
of
the
reasons
why
it's?
Why
this
there
is
that
if
we
would
get
rid
of
it,
what
would
be
the
shape
one?
So
where
is
then
the
SharePoint
SharePoint
would
be
completely
gone.