►
Description
In this 19-minute developer-focused demo, Paolo Pialorsi shows the ease of customizing forms using the new SPFx React FormCustomizer component extension delivered in SPFx v1.15. Form enables add, edit and display items. Customize using modern JavaScript tools and libraries. Works with lists, libraries, Document Sets, and PnP DynamicForm (control). Perfectly suited for enterprise-level custom solutions. In demo, scaffold the FormCustomizer using Yeoman Generator. Extend/override the BaseFormCustomizer. code and debug your Form Customizer, step through form item editing capabilities, package and deploy using PowerShell. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on July 28, 2022.
Demo Presenter
• Paolo Pialorsi (PiaSys.com) | @paolopia
Supporting materials
• Documentation - Build your first Form Customizer extension (preview) | https://docs.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-form-customizer
• SPFx Controls - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• SPFx Controls - Dynamic Form | https://pnp.github.io/sp-dev-fx-controls-react/controls/DynamicForm/
• Samples - spfx-list-forms | https://github.com/PiaSys/Conferences-Samples/tree/master/spfx-list-forms
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
When
we
create
such
extensions,
we
can
configure
the
extensions
to
render
just
one
of
those
or
one
or
more
of
those
forms.
So,
for
example,
you
can
create
an
extension
which
will
just
customize
the
edit
and
new
experience,
but
you
don't
necessarily
need
to
customize
the
display
experience
or
the
other
way
around,
because
when
you
register
your
extension,
you
can
choose
what
kind
of
page
type
you
want
to
customize
and
you
have
a
nice
enumeration.
A
You
can
configure
the
view
the
edit
and
the
new
page
type,
and
what
is
really
cool
in
my
opinion,
is
that
this
new
functionality
works
with
lists.
Libraries
and
document
sets
inside
libraries,
which
I
really
love.
It
works
really
well
also,
together
with
the
dynamic
form,
control
that
we
have
in
the
pmp
reactor
usable
controls,
and
it
makes
really
easy
and
simple
to
create
the
custom
form
in
literally
a
matter
of
minutes.
A
My
opinion.
This
is
a
really
useful
functionality,
especially
for
enterprise
level,
solutions
where
customers
want
to
have
additional
level
of
control
of
the
fields
in
the
ui
or
they
want
to
bind
some
of
the
fields
to
external
apis,
rest,
apis
or
stuff
like
that,
and
they
eventually
don't
want
to
rely
on
power
apps
to
create
the
ui.
But
they
want
to
have
a
completely
customizable
solution
built
with
hpfx.
A
You
can
do
that,
as
I
said,
for
the
new
display
and
edit
form
independently,
and
you
can
then
save
the
settings
of
the
content
type
and
make
it
happen
for
real.
Nowadays
you
can
use,
or
you
can
easily
use
the
client-side
object
model
and
vip
powershell
to
configure
those
properties
on
a
content
type
and
in
the
near
future.
I'm
saying
near
because
we
are
working
on
it
in
the
near
future.
A
It
will
be
possible
to
export
and
import
through
the
pmp
provisioning
engine,
these
settings
so
that,
if
you
are
creating
a
custom
solution,
you
are
an
isv
or
whatever
else,
and
you
are
building
your
own
solution
and
you
want
to
do
pnp
provisioning
of
that
solution,
including
the
custom
forms.
You
will
be
able
to
do
that
using
the
provisioning
engine.
A
So
that
said,
and
now
that
we
are
all
on
the
same
page,
let
me
switch
to
the
demo
and
let
me
show
you
how
you
can
create
such
kind
of
extensions
and
what
you
can
do
to
develop
your
custom
forms.
So
I'm
gonna
switch
to
first
of
all,
the
common
prompt
just
to
show
you
how
the
human
generator
for
sharepoint
will.
Let
us
create
a
custom
form
customizer.
A
So
here
just
for
the
sake
of
simplicity,
I've
already
executed
the
human
generator
for
sharepoint
in
a
completely
random
folder
and
I'm
going
to
create
a
solution
which
will
have
this
nice
name
now.
When
you
have
to
select
what
kind
of
component
you
want
to
create,
you
can
select
to
create
an
extension
and
now,
in
sharepoint
framework
115,
you
can
select
to
create
a
form
customizer,
which
is
the
new
extension
that
we
have
by
selecting
this
one.
A
You
will
have
to
provide
a
name
whatever
you
like,
because
I
don't
really
care
about
this
one
which
will
be
just
dropped
into
the
trash
right
after
I
will
execute
it,
but
just
to
show
you
the
ui
and
then
you
can
choose
if
you
want
to
use
no
framework
or
if
you
want
to
use
react
as
like,
as
it
happens
for
most
of
the
components
that
we
create
using
sharepoint
framework.
I
already
did
it
for
another,
really
basic
form
customizer,
which
is
the
one
I'm
going
to
show
you
right
now.
A
Once
you
have
done
that
aside
from
the
initialization
code
in
which
you
can
eventually
initialize
stuff
and
do
whatever
you
need
to
do
in
order
to
prepare
your
extension,
you
have
the
render
method
and
in
the
render
method,
if
you
use
the
react
component,
you
can
simply
rely
on
a
rear
component
which
will
do
the
actual
rendering
of
your
form.
What
is
it,
what
is
important
to
know
is
that
whenever
you
create
a
form
customizer,
you
have
to
take
care
of
a
couple
of
actions
when
the
user
will
click
on
the
save
button.
A
These
two
methods
will
report
back
to
the
sharepoint
online
infrastructure
and
will
save
or
simply
skip
the
saving
of
the
item
and
will
tell
the
backend
infrastructure
to
go
back
to
the
list
to
show
the
list
of
items
by
closing
the
actual
form
customizer.
So,
for
example,
in
this
really
basic
sample,
we
have
a
react
component.
This
is
the
one
just
automatically
generated
by
the
scaffolding
tool
in
the
rear
component.
We
simply
have
the
render
method
of
direct
component,
and
here
we
can
do
whatever
we
like.
A
So
you
can
build
your
fully
customized
ui,
using
your
own
real
components.
You
can
rely
on
the
pmp
controls
you
can
use,
as
I
told
you
before,
the
dynamic
form
control
and
the
only
important
information
that
you
need
to
know
is
that
you
will
have,
through
the
context
of
a
sharepoint
framework
access
to
the
item
and
to
the
list
id
so
that
you
can
target
the
specific
item
you
want
to
use
and
you
want
to
edit
display
or
if
it
will
be
a
new
item
that
you
are
going
to
add.
A
Of
course
you
will
not
have
the
item
id,
but
you
will
still
have
the
list
id
so
now
that
I
showed
you
the
basic
automatically
generated
one.
Let
me
switch
to
a
real
one
and
let
me
show
first
of
all
the
form
customizer
in
action.
So
let
me
go
to
my
browser,
and
here
we
have
a
demo
list
which
I
already
configured
to
have
a
custom,
a
customized
form.
A
So,
for
example,
if
I
will
select
this
item
or
either
way
this
one,
I
will
see
in
the
ui,
not
the
out-of-the-box
form,
but
a
custom
one
which
I've
built
using
sharpen
framework.
As
you
can
see
here
now,
I'm
showing
I'm
using
the
edit
form,
so
I
can
change
the
values
of
this
item.
I
can
change,
for
example
the
taxonomy
and
go
to
I
don't
know
sharepoint
online
and
save
it,
and
I
will
go
back
to
the
list
of
items
and
my
item
will
be
updated.
A
I
can
add
a
new
item
and
still
I
will
be
able
to
see
my
custom
form
because
I
decided
to
associate
my
form
to
all
of
the
flavors
available
just
to
show
you
the
power
of
this
new
capability.
So
this
will
be
the
viva
sig
call
and
the
item
will
be
100
and
just
because
I
called
it
the
viva
one.
I
will
select
microsoft
viva
as
the
taxonomy
field.
I
can
save
it.
A
That
will
have
my
new
item
available,
so
really
simple
and
straightforward,
and
I
can
use
it
to
build
the
custom
ui
of
a
form
for
my
items
using
a
sharepoint
framework.
How
did
I
build
this
customizer
as
like,
as
before?
I
used
the
human
generator
to
build
the
initial
scaffolding,
but
then,
in
my
custom
form
customizer,
I
decided
to
rely
on
my
react
component
using
the
dynamic
form
that
we
have
in
the
pmp
rear
controls
family.
So
you
need
to
add
to
the
packages
of
your
solution.
A
A
The
list
id
and
the
list
item
id
for
the
item
that
you
want
to
edit
or
to
display-
and
you
have
the
capability
to
define
some
custom
events
on
the
dynamic
form
so
that,
for
example,
when
the
user
will
click
on
the
cancel
button,
you
will
have
a
custom
event.
When
the
user
will
click
on
the
save
button,
you
will
have
a
before
submit
where
you
can
do
eventually,
some
custom
validation
logic,
and
then
you
can
say:
okay,
all
good.
I
don't
want
to
cancel
the
submission,
or
you
can
say
true-
can
sell
the
submission.
A
When
I
create
the
riyadh
component,
I
provide
the
unsave
and
the
on
close
events,
relying
on
the
corresponding
methods
in
my
form
customizer.
So
here
on
save
I
will
notify
to
the
sharepoint
framework
for
customizer
infrastructure
that
the
user
saved
the
item.
On
close,
of
course,
I
will
notify
that
the
user
just
closed
without
saving
so
that
on
the
actual
dynamic
form,
when
the
user
will
say,
okay
oops
go
away.
Okay,
uncanceled,
oh,
come
on
on
cancelled.
A
I
will
rely
on
the
on
close
method
defined
in
the
properties
of
my
react
component,
and
the
same
applies
for
the
unsubmitted,
where
I
rely
on
the
on
save
property,
which
maps
to
my
save
method.
You
see
here
in
the
properties,
I
define
those
two
methods
so
really
really
simple
again
and
mainly
because
we
have
this
wonderful
control,
dynamic
form,
control
which
makes
our
life
really
really
easy.
A
A
This
is
the
information
we
need
to
provide
whenever
we
want
to
configure
our
form
customizer
onto
a
target
content
type,
and
if
we
want
to
debug
it
locally
within
visual
studio
code,
we
can
just
rely
on
the
serve.json
file,
and
here
we
can
configure
as
many
configuration
sections
as
we
like.
So,
for
example,
we
have
a
default
one,
but
we
can
configure
as
many
as
we
like,
and
here
I
configured
my
form
customizer
here.
A
Well,
we
simply
need
to
do
gulp
server
dash
dash
configure
and
we
provide
the
name
of
the
configuration
or
if
we
will
do
just
gulp
server,
we
will
fall
back
to
the
default
one.
So
let's
say
that
we
want
to
play
with
the
configuration
to
actually
let
me
move
from
the
list
to
the
library
I
have
a
library
in
my
site.
Let
me
show
you:
I
have
this
demo
library
in
which
I
have
one
document.
A
I
can
start
the
new
form
or
the
edit
form,
for
example,
for
this
library.
As
you
can
see,
this
is
the
root
folder
of
my
library.
This
will
be
the
configuration
that
I'm
going
to
use.
I
will
run
gulp
server
with
this
configuration
and
it
will
start
this
page
and
let
me
debug
my
component
targeting
that
library
and
that
item
oops,
not
what
I
was
looking
for.
Gulp
server
is
better
than
server.
Sorry,
typo!
A
Okay,
I
don't
know,
I
always
make
this
mistake.
I
don't
know
if
you
do
the
same,
but
I
always
do
that
serve
server,
my
fault,
okay.
So
when
you
run
it
in
debug,
you
have
to
accept
that
you
want
to
load
the
debug
scripts,
so
you
click
on
load,
debug
scripts.
It
will
take
a
while
and
after
a
bit
of
a
wait,
we
will
be
able
to
see
our
form
running
and
editing.
A
The
item
the
item
with
id
number
one
in
the
target
library-
hopefully,
okay,
it
is
loading
now
taking
longer
than
expected,
but
it
will
work
last
world
famous
words.
No,
it
should
just
a
matter
of
waiting
and
as
soon
as
it
will
be
ready,
we
will
see
the
dynamic
form
loading
and
we
will
see
all
of
the
fields
rendering
in
the
ui
of
our
custom
page,
and
you
can
do
that
for,
as
I
said,
a
list
item
a
document
or
a
document
set.
A
A
A
Okay,
most
of
us
believe
you,
it
will
work.
Yes,
but
you
know,
I
don't
believe
myself
so,
okay,
so
let's
wait
a
bit
and
in
the
meantime
I
just
want
to
show
you
that
from
a
document
set
point
of
view,
it
is
exactly
the
same
story
as
before
and
while
it
is
loading-
and
I
really
don't
know
why
it
is
taking
so
long-
I
want
to
show
you
a
little
piece
of
powershell
script
that
I
use
to
register
my
solution.
A
You
connect
to
the
target
site
and
you
get
the
target
content
type
you
are
targeting
and
then
you
can
simply
configure
the
display,
form,
client,
side,
component
id
and
eventually
the
properties,
and
the
same
applies
for
the
new
and
for
the
edit
form
you
update
the
content
type.
You
invoke
vmp
query
and
you
are
done.
You
have
custom
your
custom
form
configured
for
your
target
content
type
in
your
target
list
and
library.