►
Description
This tutorial will guide you on how to create ListView Command Set customizer using the SharePoint Framework 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/building-simple-field-customizer.
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
disconnect
artificial
pond
framework
extensions,
tutorial
series,
and
in
this
tutorial
we
are
building
our
first
ListView
command
set
extension.
You
can
use
to
these
three
concepts
to
add
buttons
and
menu
items
in
any
lists
and
libraries
in
SharePoint,
and
then,
when
you
click
the
button,
you
can
actually
control
what
happens
then.
So
you
can
have
a
really
complicated
scenarios
using
panels
and
and
modal
dialogues
and
complex
dialogs,
if
you
prefer-
or
it
might
be
more
simplified
scenarios
as
well.
A
But
main
point
here
is
that
with
ListView
quonset
extensions
is
that
you
are
able
to
add
those
buttons
in
toolbar
or
in
the
menu
items
of
the
optimizer
libraries.
Now
this
video
has
been
recorded
in
February
2020
and
it's
using
SharePoint
frame.
Recreation
1.10,
if
you
are
using
a
newer
version,
always
have
a
look
on
the
written
tutorial
guidance
of
these
videos.
So
there's
a
always
a
written
documentation
available
as
well,
which
is
more
up
to
date,
so
the
videos
are
not
updated
as
frequently
as
the
documentation,
but
let's
dump,
let's
jump
right
into
it.
A
So
let
me
actually
go
to
my
Windows
10
machine
here,
we're
going
to
then
start
creating
our
solution.
So
let
me
start
my
comment
line.
I'm
gonna
use
PowerShell
just
from
the
simplicity
perspective,
and
let
me
go
to
the
typical
location,
where
I'm
actually
putting
all
of
my
code,
so
I
have
quite
a
few
tutorials
structures
already
here
available
and
all
being
credit
created
in
2020
on
January
or
in
February.
A
In
this
case
we
kind
of
use
the
current
folder
and
we
want
to
install
this
X
connected
to
a
site.
So
we're
not
going
to
use
10
on
deployment
option
and
same
applies
for
the
required
permission.
So,
let's
not
actually
use
that
either
we
kind
of
target
or
we're
going
to
create
an
extension,
and
in
this
case
we
are
creating
a
list
view
command
set,
so
we're
adding
a
toolbar
buttons
and
menu
buttons
to
a
list
and
let's
use
the
default
values
just
to
get
started
on
things
again.
A
So
it
is
basically
the
one
on
one
option,
which
is
a
non
chava
script
framework
option,
and
then
you
could
potentially
absolutely
use
react
angularjs
number,
whatever
handlebars
with
this
as
well,
just
by
adding
the
needed
packages
on
top
of
the
defaults
call
that
solution,
but,
let's
say
already
a
slightly
advanced
scenario
in
this
case-
we're
going
to
just
extend
the
default
scaffolding
to
add
some
additional
dialogues
or
whenever
the
button
is
actually
being
clicked.
But
let's
speed
up
the
video
first
to
skip
to
the
moment
when
the
scaffolding
is
fully
completed.
A
Now,
here
we
go
so
the
solution.
Scaffolding
is
completed,
let's
clean
up
slightly
the
folder
or
the
console,
and
against
our
our
visual
studio
code
to
have
a
look
on
how
the
structure
actually
look
like
and
then,
as
you
can
guess,
and
the
basic
structure
is
exactly
the
same
for
all
of
the
SharePoint
framework
solutions.
So
you
can.
A
So
these
are
basically
defining
what
are
the
buttons
which
we
actually
have
and
what
we
want
to
expose
in
the
UX.
So
what
kind
of
settings
and
what
kind
of
buttons
will
be
available
in
the
Urich
side,
and
then
we
do
define
and
the
location
of
the
common
one
and
a
comment
too
in
a
slightly
different
location
log
back
on
that
one
in
the
tutorial
slightly
later.
But
these
are
basically
I
have
a
button
or
a
menu
item.
A
A
Now
let
me
actually
go
to
the
comment
at
the
actual
code
we
can
see
about
the
base
classes
are
available
and
we
inherit
our
implementation
from
there
that
we
support
to
pick
our
properties
settings
and
the
default
setting
was
that
we
have
two
different
comments,
so
we
have
a
sample
test
one
and
two
and
again
it's
really
up
to
you
what
kind
of
properties
and
settings-
and
you
actually
want
to
want
to
use
in
here
now
on
list
one
list
updated.
Basically,
so
the
view
is
changing,
you
can
actually
decide
that.
A
A
If
we
want
to
do
that
now,
let's
actually
do
some
debugging
and
to
make
sure
that
the
default
setup
is
working
properly.
So,
let's,
let's
again
go
back
on
the
surf
JSON
file
that
this
might
be
familiar
for
you,
if
you
have
done
the
field,
customizer
extension
demo
or
a
tutorial
or
the
application
customizer
tutorial
so
really
in
here.
We
want
to
make
sure
that
we're
using
a
mallet
URL
and,
in
my
case,
let's
actually
go
and
start
the
process
I
want
to
use.
A
We
want
to
make
sure
that
we're
using
a
1
list
in
here
so
just
for
the
sake
of
it
I
have
an
existing
list,
which
is
called
groups
which
I
created
as
part
of
the
field
tutorial
field
customized
a
tutorial
so
I'm
going
to
use
that
one.
You
can
definitely
create
whatever
lists
and
library
and
to
do
a
available
to
for
your
testing
as
well,
so
I'm
going
to
copy
the
URL
of
the
list.
A
We're
gonna
paste
that
one
back
on
there
serve
to
chasten
and
in
here
we're
basically
seeing
what
happens
behind
of
the
scenes.
So
on
that
URL
we're
going
to
load
custom
action
with
is
this
unique
custom
action
and
the
location
will
be
clients
our
destination
list?
Your
comments
at
common
poor,
so
we're
adding
comments
to
the
command
bar
and
let's
use
these
two
properties
for
the
setup.
A
So
that's
basically
what
I
wanted
to
be
here
now,
let's
get
back
on
the
on
the
console
or
I
prefer
actually
using
the
inline
terminal,
so
you
can
actually
get
two
terminal
available
individual
studio
code.
It
is
really
up
to
your
preference,
and
so
in
here,
I'm
now
doing
call
observe
and
that's
going
to
then
start
a
browser
within
this
configuration
option.
A
Given
these
values
which
we
provide
here-
and
it
is
actually
warning
us
for
the
fact
that
we
are
loading
debug
scripts
and
because
we're
developers,
we
know
what
we're
doing
so,
let's
actually
click
load
to
debug
scripts
and
after
a
while,
we
can
actually
say
that
they're,
the
common
two
is
now
visible
in
the
in
the
list.
I
can
absolutely
check
it
out
so
and
we
were
using
those
dialogues
and
if
I
select
two
items
in
here,
we
can
say
the
common
OH
or
a
one
item.
Excuse
me
and
select
the
one
item.
A
We
can
actually
say
that
there's
two
items
available
and
visible,
so
the
other
one,
the
setting
I
actually
said
it
wrong.
So
the
setting
for
the
common
one
was
that
as
long
as
there's
an
item
selected
in
the
code,
let's
actually
go
back
on
the
code
and
double
check
that
one,
because
I
actually
did
tell
that
in
a
wrong
way.
If
selected
growth
selected
rows,
a
length
equals
one.
A
So
if
there
is
a
one
row
selected
as
stated
clearly
in
the
code,
then
the
visibility
of
that
command
is
actually
true,
so
that
that's
a
pretty
well-defined
how
it's
designed
to
work
and
we
can
actually
see
it
in
the
UX
as
well.
So
if
we
don't
have
any
item
selected,
we
can
only
stay
common
to.
If
we
have
one
item
selected,
we
can
say
the
common
one
as
well.
If
we
have
multiple
commands
of
selected,
we
can
only
say
the
comma
two
again
depending
on
your
business
scenario.
A
You
might
design
whatever
kind
of
experience
in
here
based
on
your
design
and
business
requirements.
Now
let's
actually
go
back
on
our
source
code
and
let's
do
some
modifications
here.
So
let
me
let's
actually
change
the
own,
execute
slightly
and
I'm
going
to
copy
the
code
directly
from
the
written
tutorial.
So
I
get
it
right
and
I
will
basically
replace
and
the
switch
and
let's
see
what
we're
actually
doing
here.
A
So
we
are
basically
taking
advantage
of
dialog
prompt
where
we
are
asking
an
input
from
the
end
user,
which
is
demonstrating
at
one
of
the
capabilities
with
dialogues
and
dialogue
framework.
So
and
then
we
are
actually
providing
that
value
which
the
user
provided
as
an
alert
as
well
then
for
the
command
to
now.
In
our
case,
the
gulp
serve
is
already
running,
so
we
don't
have
to
restart
that
if
you
did
stop
the
cough
sir
and
you
can
actually
restart
the
call
sir
call
observe
in
here.
Let
me
go
back
on
the
browser.
A
Let's
request
the
page
again,
we
want
to
load
the
debug
scripts,
basically
debug
manifest
file,
pointing
that
is
it
a
bit
localhost
and
now
we
can
say
that
we
have
the
comment
to
available
in
here.
Let's
click
the
comment
to
and
we
can
actually
see
a
prompt
rather
than
just
an
alert
of
the
value
and
let's
provide
value
to
dialogue
in
tree
as
the
esta
value
and
okay,
and
actually
we
can
say
that
that
was
the
entry.
A
What
we
were
requesting
from
the
inducer
so
quite
simple
scenario,
quite
simple
thing,
but
we're
taking
advantage
of
the
dialog
framework
which
is
natively
available
within
a
SharePoint
framework
or
inside
of
SharePoint
Online
as
well
off
ship
on
the
general
SharePoint,
Online
ship
and
2019,
just
to
be
super
precise,
okay.
So
that's
working.
So
how
do
we
packets
things
up?
So
let's
actually
go
back
in
back
in
our
solution
and
let's
actually
pause
our
console.
Let's
go
in
the
visual
studio
code
side.
A
There
we
go
so
let's
go
back
on
and
have
a
look
on
the
packaging
of
things.
So
how
do
we,
packets
extensions,
the
same
thing
as
filled
filled
customizers,
we're
using
elements
XML
file?
In
this
case
we
are
using
and
the
site
installed
specific
model.
So
you
need
to
install
solution
to
a
site
and
then,
as
part
of
that
installation,
we
are
adding
a
one
custom
action
with
sis
then
pointing
out
to
the
client-side
component
ID
and
given
these
properties.
A
So
whenever
we
are
creating
a
new
list,
it
will
actually
have
this
experience
as
well
future.
So
quite
simple,
quite
simple
scenario:
you
could
actually
modify
the
setting
slightly,
so
we
can
actually
pinpoint
this
to
have
two
different
center
entries,
so
we
could
actually
have
and
an
additional
custom
action
here
to
a
registration
ID
of
101
and
that
would
actually
be
then
a
library,
so
we're
basically
library
type.
A
So
that
would
then
enable
this
scenario
and
excitation
also
in
a
normal
library.
The
other
thing,
maybe
the
notice
here,
is
the
location
which
we're
explaining
in
the
in
the
written
tutorial
as
well,
so
in
here
we're
basically
defining
and
that
it's
a
common
bar
button
but-
and
there
are
multiple
different
options,
so
you
are
able
to
say.
Is
it
a
context
menu?
Is
it
a
common
part
or
if
I
get
rid
of
the
content
filtering,
it
will
be
actually
both.
So
it
will
be
a
common
poor
and
a
context.
A
Menu
of
the
item,
context,
menu,
meaning
that
when
you're
selecting
the
item
and
there's
the
context,
menu
selection
and
then
the
item
is
selected
order,
the
command
is
visible
in
the
context
menu.
In
our
case,
let's
just
keep
the
common
part
there
and
to
make
things
simple.
Now
the
clients
are
the
instance.
A
Xml
here
is
basically
their
if
we
want
to
take
advantage
of
ten
Android
deployment
option,
and
this
is
really
there
to
indicate
for
sharepoint
that
hey
we
want
to
have-
and
this
particular
component
extensions
available
across
the
whole
tenant
immediately
when
it's
installed
to
the
to
the
catalog.
So
that's
a
critical
option
which
you
can
take
advantage
in
this
case.
We
we
did
as
part
of
the
solution
configuration.
We
actually
did
say
that
we
don't
want
to
use
the
tenant
for
deployment
option,
so
this
setting
does
not
have
an
impact.
A
So
there's
no
no
value
or
no
no
impact
of
this
configuration,
but
it
is
a
great
option,
even
when
a
for
example
target
an
application,
customizer
or
a
ListView
command
set
to
all
of
the
libraries
and
or
after
or
all
of
the
custom
lists
within
a
tenant.
So
definitely
something
to
check
good
good.
So,
let's
actually
close
that
one.
We're
not
gonna
actually
take
advantage
of
that
one,
and
let's
close
that
one
as
well:
let's
go
to
the
source
code,
let's
go
to
serve
Jason
and
we
want
to
go
to
the
package
solution
again.
A
This
is
the
one
which
is
telling
SharePoint
order
just
rip
a
yeoman
generator,
and
how
do
we
package
our
stuff
and
we
can
actually
say
the
elements
XML
on
client-side
instance
XML
available
in
here.
We
could
actually
get
rid
of
the
client-side
instance
XML.
No,
because
it
doesn't
really
have
an
impact
because
we
are,
we
are
not
they're
doing
a
tenant
by
deployment
with
this
capability,
but
again
debatable.
A
A
There
we
go
and
then
we
want
mornings
with
icons.
You
can
actually
package
icons
inside
of
the
solution
as
well,
and
these
those
can
be
served
automatically
and
dynamically
from
the
solution.
So
that's
that's
a
pretty
cool
capability
as
well.
Now,
let's
actually
do
a
call
back
its
solution
and
just
a
ship,
so
the
packaging
and
the
solution
properly
amp.
A
And
there
we
go
and
I'm
gonna
actually
do
Explorer
and
dot
so
I'm
just
open
up
an
explorer
going
to
the
SharePoint
folder,
a
solution,
folder
there's
our
solution,
and
then
we
want
to
install
that
to
our
app
catalog
I'm
gonna
open.
So
let
me
actually
open
the
app
catalog
from
here.
Let's
go
to
apps
for
SharePoint.
Let
me
track
in
trough
the
common
destination
in
and
it
is
a
site-specific
deployment.
So
the
checkbox
for
doing
a
ten
on
wide
deployment
is
not
another
name
of
it
enabled
here
deploy.
A
So
that's
now
available
to
be
installed
on
a
site
level,
and
let's
actually
do
that.
So,
let's
let's
go
back
and
let
me
close
that
one
and
that's
the
orders
and
the
list
in
here.
So
let's
actually
go
back
on
the
site
contents.
Let's
install
that
solution
explicitly
to
this
side,
so
it's
not
enabled
to
cross
the
tenant
automatically,
which
is
absolutely
an
option
as
well
and
but
I
want
the
solution
to
be
explicitly
available
only
on
this
site
collection
or
a
few
site
collections.
A
A
The
most
important
thing
to
realize
is
that
we
don't
have
observe
running.
We
don't
have
anything
running
it
console,
so
it's
fully
independent,
now
being
executed
from
add
catalog
served
from
the
App
Catalog
or
if
you
have
office,
register
5
CD
and
enable
serve
automatically
from
CD
and
even
with
even
better
performance,
and
we
can
double
check
that
functionalities
working
fine.
We
click
the
comment
to
add.
Let's
give
it
a
value,
it
worked.
Of
course
it
worked
in
I
I.
Did
it
awesome?
A
What's
it's
always
great
to
actually
be
able
to
finalize
tutorials,
and
we
can
actually
see
the
message
SharePoint
actually
gives
us
back,
so
it
is
truly
working
properly
and
you
were
able
to
achieve,
hopefully
by
yourself
also
the
outcome
of
this
tutorial.
But
that's
it.
What
we're
going
to
do
in
the
ListView
command
set
to
add
tutorial
quite
simple
scenario,
but
super
super
powerful
with
a
lot
of
lot
of
extensibility
being
introduced
by
using
a
delicious
to
your
common
sets
because,
again
clicking
the
button
you
own.
A
What's
going
to
happen,
it
might
actually
open
up
a
panel.
It
might
be
open
up
a
things.
It
might
actually
do
migrations
controls
copying
panels,
whatever
you
you
own,
the
whole
rendering
experience.
So
the
opportunities
and
options
are
infinite,
so
it's
really
up
to
the
business
requirements
and
up
to
your
your
innovation,
what
you
want,
but
you
can
actually
achieve
with
the
clear
common
sets
on
the
menu
items
and
by
the
way,
the
context
menu.