►
Description
In this 18-minute developer-focused demo, Waldek Mastykarz dives into a new feature (extension) introduced in SPFx v1.15 for customizing the form experience of a list. Focus on 3 behaviors – create, view, and edit items in a list. Render one or more behaviors on a form. Starting with required tools, create a SPFx extension project, review provisioned components/code, 2 MUST use methods, overriding behaviors, creation and rendering options and finally deploying a form to production. Call REST to add or update items. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on August 25, 2022.
Demo Presenter
• Waldek Mastykarz (Microsoft) | @waldekm
Supporting materials
• Documentation - Build your first Form Customizer extension (preview) | https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
All
right
so
for
the
next
15
to
20
minutes,
I'd
like
to
show
you
the
new
feature
that
has
been
introduced
in
sharepoint
framework
version
115,
which
gives
you
the
ability
to
customize
list
forms
right.
So
when
you
think
about
a
list
right,
you
have
three
forms
in
there.
You
have
a
form
to
create
new
item
in
a
list
to
view
an
item
that
is
already
in
a
list
and
to
edit
an
item
right
and
with
the
sharepoint
framework
115.
A
We
got
the
ability
to
override
these
forms,
so
you
can
create
your
own
experiences.
On
top
of
that,
maybe
even
to
the
point
where
you
know
you
want
to
build
a
simple
app
experience
that
is,
buy
the
data
from
a
list.
So
let's
walk
through
it.
How
that
works
step
by
step
now,
the
first
things
prerequisite
is:
you
have
to
have
installed
node
and
for
sharepoint
framework
115.
A
You
need
to
have
at
least
installed
node
version
14.17.x
right.
So
that
is
something
what
you
see
here
on
my
screen,
then
the
next
ingredient.
The
key
ingredient,
is
microsoft,
generator
sharepoint
version
at
least
one
fifteen.
Oh,
I
have
installed
now
here
on
the
screen
115.2,
which
is
the
latest
version
available
as
of
now
and
then
for
the
rest
of
the
tool
chain:
gulp
cli,
not
gulp,
golf
cli,
which
will
then
use
gulp,
install
that
is
inside
the
project
and
yo
so
that
we
can
run
so
so
that
we
can
create
the
project.
A
So,
let's
do
that,
let's
create
a
new
sharepoint
framework
project
with
a
form
extension,
but
with
one
thing
to
avoid
that
we
wait
too
long
and
you
all
watch
me
install
npm
packages.
Let's
get
that
part
because
for
the
first
part
it
is
not
important
right.
So,
let's
create
a
project
that
will
allow
us
to
create
that
customizer
of
a
form
of
a
list
three
to
one
yo
needs
to
wake
up.
A
A
A
So
here
we
go
into
extension
and
from
here
from
the
different
types
of
extensions
that
we
have
available.
We
go
all
the
way
down
and
pick
a
form
customizer,
so
that
form
allows
us
or
that
type
of
extension
allows
us
to
customize
the
form
experience
of
a
list
we
use
the
default
name
will
not
do
anything
with
that
and
to
keep
things
simple
and
accessible
to
everybody.
Let's
not
use
react
yet
right.
A
Three
to
one
a
project
is
done
so,
let's
see
what
we
have
in
place
when
we
go
to
source
and
extension.
So
this
is
the
project
that
we
got
from
the
generator
right
and
in
here
we
can
see
the
hello
world
form
customizer
that
we
have
just
created
what
is
in
there.
Let
me
move
that
aside.
It
is
just
an
extension.
A
So,
like
any
other
extension
in
spfx,
it
has
properties
which
you
can
pass
to
basically
make
it
configurable
across
instances
so
that
you
can
reuse
it
across
different
size,
use
cases
and
so
forth
and
so
on.
Next,
you
have
the
same
on
init
method
that
you
have
in
web
parts
and
extension.
You
have
the
render,
because
there's
a
ui
part
to
it.
You
want
to
build
a
form
customizer
that
has
a
ui
to
it,
so
you
need
to
have
a
render
so
that
you
can
render
on
the
page
the
html
that
you
want
to
show.
A
This
part
is
exactly
the
same,
and
then
we
arrive
at
two
form:
customizer,
specific
methods
that
we
have
and
which
you
must
you
must
you
must
use.
So
when
you
save
an
item,
imagine
that
you
build
a
new
form
or
an
added
form,
and
you
change
the
item.
You
need
to
call
this
form
save
method,
because
that
then
autofiles
spfx
and
the
runtime
of
the
page
that
that
form
was
saved.
The
item
was
saved,
the
form
was
set
and
it
will
then
handle
that
behavior,
probably
on
the
page.
A
The
same
thing
goes
for
a
close,
because
if
you
view
an
item
or
or
edit
an
item
or
create
an
item-
and
you
cancel-
there's
also
a
behavior
attached
to
it.
This
is
exactly
why
you
need
to
ensure
that,
whatever
code
you
add
on
this
page
in
this
component,
you
also
need
to
call
these
two
methods
that
are
tied
into
spfx
runtime
right.
So
this
is
a
key
key
part
all
right.
So
this
is.
A
This
is
a
very
bare
bones
thing
like
there
is
really
not
much
specific
to
it
and
one
more
thing
that
we
get.
If
you
go
to
config
and
serve,
we
get
a
different
configs
to
run
or
to
serve
this
component
in
debug
mode
right
because,
like
it's
a
form
of
a
list
and
as
I
said,
there
are
three
behaviors
that
you
can
implement
right,
so
you
can
implement
a
new
form
view
form
or
an
edit
form
and
to
make
it
really
easy
for
you
to
debug
them.
A
We
get
from
spfx
to
configs
for
new
form,
added
form
and
viewform,
with
exactly
the
right
components,
id
and
page
type
parameters,
ids
and
so
forth,
and
so
on.
So
that
the
only
thing
left
for
you
is
to
run
gulp
serve
with
one
of
these
and
then
you
will
be
able
to
preview
that
instantly
in
your
site
on
your
list
without
having
to
manually
build
that
by
yourself
right.
Another
thing
important
for
you
to
keep
in
mind
is
that
well,
a
list
has
three
behaviors.
A
It
has
the
new
edit
and
view,
and
you
can
choose
to
override
either
all
three
of
them
or
one
or
two.
So
that
is
up
to
you
one.
Another
thing
is
you
can
choose
whether
you
want
to
implement
all
three
views?
Then
you
added
any
view
within
one
component
in
spfx,
or
maybe
you
want
to
build
three
separate
because
they
are
so
different
or
you
want
to
separate
things
and
so
forth
and
so
on.
A
So
you
have
that
ability
to
choose
between
whether
you
want
to
put
everything
into
one
or
you
want
to
have
three
components
that
are
separate
and
and
each
one
serves
only
one
view
and
the
way
it
works
like
we
will
go
eventually
into
detail
like
how
do
you
associate
that
on
runtime
right?
But
that's
important
thing
for
you
to
keep
in
mind
all
right,
so
these
are
the
basics.
This
is
what
you
get
when
you
create
new
form
customizer
with
spfx115.
The
next
step
is,
let's
see
one
in
action.
What
do
these
things
actually
do?
A
A
So
this
is
my
view
form
now,
let's
go
to
another
form
right,
so
we
will
change
the
page
type
to
six,
and
here,
if
we
go
back
to
config
serve,
we
can
see
that
page
type
6
corresponds
to
an
address
form,
so
we
will
be
able
to
edit
an
item
all
right.
I've
changed
it
to
6,
3,
2
1,
and
now
we
have
a
title
field
with
an
input
box.
A
So
in
here
we
can
add
the
value
and
cancel
or
save
the
item
and
that
will
actually
change
the
item
in
the
list
attached
to
it
right
and
then.
Finally,
we
also
have
the
eight,
which
is
the
new
form
right.
So
in
here
we
don't
edit
an
item,
which
is
why
the
input
box
is
empty
because
we're
creating
new
item
and
again
save
cancel
to
either
create
the
item
or
abort
it
right.
So
how
is
this
implemented?
A
You've
seen
already
right
that
we
get
the
basics
extension
with
the
basics
in
there
right.
Let
me
close
that
for
you
and
move
this
aside,
just
to
give
you
a
little
bit
overview
of
you
right.
So
in
this
case
I
chose
to
implement
the
all
the
different
states,
so
the
new
view
and
added
into
one
form
a
stone
stone,
stone,
systemized
right,
and
that
is
exactly
why
I
need
to
handle
all
of
them
right.
So
what
do
we
do?
First?
A
A
There
is
nothing
for
us
to
load
because
we're
creating
a
new
item,
but
you
can
imagine
that
if
you
have
imagine
that
you
are,
you
want
to
create
new
order
from,
and
that
is
related
to
a
customer
in
crm
or
something
right.
In
that
case,
you
would
here
still
need
to
load
the
data
that
you
want
to
associate
it
with.
There's
just
no
item
data
to
load
for
you
because
you're
creating
a
new
item
in
the
list
right
so
for
a
new
form.
A
In
this
case
we
don't
do
anything
we
return
early
now,
if
we
have
anything
else
so
either
view
or
edit.
We
need
to
load
the
item
that
we
want
to
work
with
right.
So
in
this
case
we
use
the
sp
http
client
so
that
we
have
authenticated
call
and
then
we
use
rest
in
this
case
to
get
our
list
get
by
title.
The
context
list
right.
So
basically
the
list
on
which
we
currently
work
and
then
also
item,
so
these
properties
are
exposed
to
us
directly
in
the
context
right.
A
So
there
is
nothing
for
us
like
we
don't
need
to
parse
urls
or
do
anything
else.
We
can
just
grab
the
data
directly
from
from
there
and
get
the
item
right
and
then
also
an
additional
thing.
If
you
want
to
edit
an
item,
you
also
need
to
get
the
e
tag.
So
etag
allows
you
to
ensure
integrity
of
the
item
that
basically,
in
other
words,
that
nobody
else
has
changed
that
and
you
will
not
override
their
changes
right.
A
So
that
is
exactly
the
thing
you
have
to
have
and
then
you
need
to
start
that
something
in
the
class
right.
So
we
have
the
e
tag
that
we
store,
and
then
we
store
the
item
right,
which
we
get
from
the
response
and
e
that
we
get
from
the
headers
and
then
the
last
thing
left
is
the
rendering
right
so
as
you've
seen
depending
on
the
different
views
like
in
the
display
mode.
We
don't
show
input
box
because
there
is
nothing
to
edit,
so
we
only
want
to
show
things.
A
So,
in
this
case,
we
have
a
basic
div
with
a
label
and
basically
the
value
of
the
field,
and
the
only
option
that
we
have
for
interaction
is
to
close
the
form
to
which
we
then
also
associate
event
right,
so
that
on
click,
that
thing
will
do
something,
and
that
is
on
our
close.
If
we
look
at
that
right,
you
will
see
that
that
will
then
close
internally
the
form
close,
the
the
behavior.
That
is
again
ties
tied
to
the
runtime
in
spfx
in
another
case
right.
A
So
if
we
have
new
added
form
in
this
case,
we
make
it
very
simple
in
a
way
that
well,
we
always
show
the
input
box,
and
the
only
difference
is
whether
we
fill
the
title
or
we
put
in
there
an
empty
string
right.
So
that
is
the
only
difference
for
a
rendering
again.
That
will
depend
very
much
on
your
case
and
it
can
get
very
elaborate
depending
on
what
you
want
to
build
right
and
the
same
case.
A
We
also
associate
behavior
to
our
save
and
close
events
that,
for
which
we
will
have
two
buttons
on
the
page
and
then
beyond
that
we
call
rest
to
either
create
new
item
or
update
the
item
that
we
currently
have,
and
that
will
then
end
up
to
this
behavior
that
you've
seen
with
the
new
edit
and
view
forms
important
part
right.
So
imagine
you've
built
that.
How
do
you
deploy
that
to
production?
A
Well,
the
way
it
works
is
that
you
associate
form
customizer
with
a
content
type
right
and
in
every
list
you
have
at
least
two
you
have
you
have
the
item,
one
and
folder
right,
so
you
would
basically
using-
and
you
can
do
that
through
csum
rest
powershell.
You
will
be
able
to
do
that
with
cli
too
right.
You
need
to
get
a
reference
to
content
type
and
on
content
type.
A
You
have
a
pair
of
properties
for
each
type
of
forms
right,
so
you
have
display
form
client,
site
component
id,
which
is
very
long
name,
but
it's
extremely
clear
what
it
wants.
It
wants.
The
id
of
the
component
that
you
use
to
render
display
form
of
the
content
type
right
and
that
basically
will
match
from
the
manifest
to
this
guide
here.
So
it
needs
to
be
this
and
then
another
one
you
have
that
belongs
to
this
pair
are
properties
that
you
want
to
pass.
A
As
I
said
you
can
you
can
build
it
in
a
way
that
you
set
things
up
and
it
can
you
you
can
set
it
up
with
column
names
with
locale
with
anything
you
can
imagine
that's
relevant
to
your
code
right.
So
that
is
one
pair
well,
you
have
them
the
same
pair
with
content
type
for
edit
form,
client-side
component
id.
Thank
you
co-pilot,
and
then
you
will
have
component
properties
there
you
go.
I
don't
need
to
type
anything,
then
you
have
also
a
new
form
right
component
id
and
new
form,
client-side
component
properties.
A
A
So
this
is
a
very
simple
type
of
ad
that
you
could
build
on
top
of
a
list
that
gives
you
a
specific
behavior
and
ux
relevant
to
this
case,
but
doesn't
require
really
a
fully
fledged
app
on
azure,
with
storage
and
so
forth,
and
so
on
right.
So
these
are
kind
of
the
options
you
have
here.
I
will
pass
it
back
to
vesa
and
if
there
is
anything
anybody
wants
to
ask,
we
can
go
through
that
or
we
can
close
up
so
a.
B
Few
things
just
to
recap
on
things,
because
just
making
sure
that
you
can
understand
that
we
we're
explaining
this
in
the
right
way.
You
were
doing
really
awesome
job
there.
The
the
properties
is
currently
the
way
of
deploying
these
in
the
production.
So,
as
said,
you
will
need
to
run
some
code
or
the
code
could
be
running
as
part
of
a
vip
part,
or
it
could
be
running
as
an
external
thing
which
is
associating
those
properties
they
are
actually
also
in
a
feature
framework.
B
So
technically
you
could
have
a
list
provisioning
as
part
of
the
solution
getting
installed
on
a
site
level
which
have
all
of
these
properties
in
place
and
associated
to
the
right
component
type.
Nowadays,
though,
we
see
more
and
more
solutions
and
sharepoint
framework
solutions
to
be
deployed
in
term
scopes
rather
than
in
a
site
scope,
and
that
means
that
that's
not
an
option
necessarily
now
we
do
have
a
lot
of
engineering
people
actually
in
this
call.
B
So
if
people
have
good
ideas
on
how
we
can
improve
this
and
suggestions-
and
those
are
more
than
welcome-
because
that's
super
super
valuable
for
us
to
understand-
how
can
we
make
this
easier
for
you
on
these
things,
comment
on
chimp,
which
is
less
and
less
of
the
feature
framework?
That
is
absolutely
the
intention.
Now
we
do
have
the
option
of
using
the
classic
feature
framework
as
part
of
the
provisioning
of
assets
in
the
sharepoint
framework
solutions,
because
it
does
exist
in
the
sharepoint
now.
Is
it
something
which
you
should
be
using?
B
Now
we
are
also
looking
into,
for
example.
If
can
you
go
back
on
the
wallet?
Can
you
go
to
a
list
an
example
list
just
in
a
list
in
here
so
right
now,
as
you
saw
from
wildex
demo,
as
you
are
creating
a
new
item
or
if
this
association
does
exist,
we
are
always
redirected
away
from
the
context
of
the
list
and
the
interesting
discussion
points
alex
just
put
the
link
on
the
on
the
chat
as
well.
This
is
almost
like
scripted.
Thank
you
alex
is
that
is
this
good
enough?
C
So
I
believe
what
what
he
was
saying.
First
of
all
and
that's
the
same
question
I
see
in
the
in
the
chat.
So
yes
right
now,
we
are
redirecting
you
to
the
separate
page.
If
you
can
see
it's
layout,
15
speed,
this
form
dot,
spx
page
and
yes,
we
are
considering
on
providing
the
same
functionality
in
the
panel,
so
how
you
have
the
out
of
the
box
forms.
So
when
you
click
on
the
item
or
new,
you
just
see
the
panel
opened
and
you
can
modify
or
create
your
item
right
from
there.