►
Description
This tutorial will guide you on how to create field 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
this
getting
started,
SharePoint
framework
extensions,
tutorial
series
and
in
this
tutorial
we're
looking
into
how
do
we
create
on
very
first
field,
customize
or
extension
field?
Customizers
can
be
used
to
render
or
modifying
the
rendering
of
a
field
within
a
shipment
list
or
within
a
SharePoint
library,
and
you
can
then
embed
JavaScript
and
any
other
experiences
for
infusers
using
the
field
customize
extension
model.
This
video
has
been
recorded
in
February
2020
and
it's
using
SharePoint
framework
version
on
1.10.
A
So,
if
you're
watching
the
video
later
on,
there
might
be
small
adjustments
on
the
guidance
and
steps
and
and
code.
Even
so,
please
always
have
a
look
on
the
written
tutorial
formats
and
the
written
tutorial
items
which
is
always
kept
up
to
date
and
the
videos
are
updated
mass
likely
more
infrequently.
A
Now,
let's
actually
get
right
into
it
and
I'm
going
to
go
to
my
Windows
10
machine,
which
I've
been
using
across
all
of
the
tutorials
which
we
updated
for
SharePoint
framework
1.10
release,
and
let
me
actually
go
to
the
folder,
where
I'm
actually
storing
my
solutions,
so
in
my
case
I'm
using
a
C
code,
and
it
doesn't
really
matter
where
you
actually
put
in
your
solutions
and
it's
actually
start
walking
through
and
the
steps
within
the
tutorial.
So,
first
of
all,
we
are
being
requested
and
to
create
filled,
customizer,
folder
filled
extension.
A
Let
me
be
precise
and
follow
up
on
the
actual
written
guidance
and
like
where
we
just
requested
you
to
do
as
well
and
I'm
going
to
go
to
the
field
destination
folder
and
in
here
let's
actually
clean
up
something
and
execute
the
yo
microsoft
shipping.
So
the
yeoman
generator
for
SharePoint
framework
1.10
in
this
case,
because
we're
running
SharePoint
framework,
1.10
version
and
we're
going
to
create
an
scaffold,
the
basic
structure
of
the
solution.
So
with
the
point
of
default
settings
as
well.
So
we're
not
really
doing
any
big
modifications
in
here.
A
We're
gonna
use
three
form
value.
We
kind
of
target
SharePoint
Online.
Well
now,
if
we
are
creating
field
customizers,
they
are
supported
in
SharePoint
2019,
but
not
in
SharePoint
2016.
So
if
you
choose
January
1
2016,
the
extension
option
is
not
a
visible,
but
in
our
case
we're
going
to
choose
SharePoint
Online
we're
going
to
use
the
current
folder
and
we
kind
of
say
no
to
the
tenant.
A
My
deployment
option
and
we're
gonna
say
no
to
a
unique
permissions
and-
and
we
are
building
an
extension
and
we
are
building
at
field
customers
or
extension,
and
we
can
use
the
default
values
here.
So
the
hello
world
and
hello
world
description
technically
in
the
case
of
extensions,
these
are
not
really
a
visible
anywhere
within
the
UI.
A
So
there's
no
limitations
on
SharePoint
framework
on
with
SharePoint
favored
as
or
a
JavaScript
framework,
and
you
want
to
actually
use
or
not
now,
let's
again
speed
up
the
video
to
catch
up
on
the
moment
where,
just
when
the
scaffolding
is
fully
completed
and
there
we
go
now,
the
solution
structure
has
been
scuffled
and
let's
clean
up
the
folder
slightly
or
the
console
slightly
and
let's
start
our
visitors
to
their
code.
So
the
basic
structure.
Obviously
it's
exactly
the
same
like
with
any
solution
structures
within
the
SharePoint
framework.
A
So
you
can
actually
see
that
the
folder
structure
is
intact
or
looking
exactly
like.
It
is
for
web
part
as
well
for
extensions.
We
always
also
include
the
elements
XML
file
in
the
SharePoint
and
assets
folder
back
into
this
case
as
well,
because
it
helps
actually
the
provisioning
of
that
extension
to
an
existing
site.
Now
like
in
the
case
of
webparts,
we
do
obviously
have
a
manifest
file
for
our
extensions
and
manifest
file
is
defining
the
extension
identifier,
the
uniqueness
of
destination
and
then
the
component
type
and
also
the
potential
additional
settings
now.
A
All
of
this
is
looking
pretty
much
text
in
the
same
as
within
the
webparts,
but
in
the
case
of
extensions,
the
manifest
file
doesn't
really
actually
define
where
it's
being
exposed
and
where
it's
being
and
defined
or
surfaced,
it's
a
slightly
different
perspective
or
nicely
different
and
behavior.
From
that
perspective,
now,
on
the
actual
code
file,
we
can
say
that
also
we
have
the
base
rail
customizer
here,
where
we're
getting
all
of
the
basics
and
we're
extending
that
one.
The
basic
setup
is
quite
simple.
A
Actually,
we
are
just
logging
in
the
console
that
we
are
activating
our
extension.
What
a
good
thing
always
to
go
through
so
testing
the
things
that
working
properly
and
and
before
you're
packaging,
your
code
and
getting
rid
of
these
potentially
or
based
on
switches,
and
all
of
that
will
basically
modify
or
you
could
put
modify
those
things
now.
A
The
most
important
here
here,
the
most
important
thing
actually
related
on
overriding
the
rendering
of
the
field
value
in
the
read-only
mode
is
basically
on
render
cells.
So
in
here,
but
getting
the
field
value,
and
then
we
eats
up
to
us.
We
basically
have
access
on
the
event
dome
element
and
to
modify
the
rendering
and
we
can
do
whatever
we
want.
We
can.
A
We
can
include
as
complex
scenarios
and
rendering
here
as
we
want,
or
you
can
just
at
the
field
value
with
an
additional
value,
or
you
can
do
well
technically,
there's
no
limitations
on
what
you
can
do.
As
long
as
you
go
to
that
domino
element
and
modify
deathtome
element,
you
don't
actually
start
modifying
the
bates
doom
element.
You
modify
the
Dom
elements
which
are
actually
received
in
the
extension
level
now
before
we
actually
go
forward
on
doing
things.
Let's
go
to
our
site
which
we're
going
to
use
for
testing
this
stuff.
A
A
So
let
me
go
to
new
lists,
and
in
here
we
can
actually
create
a
new
list
and,
let's
give
it
a
name
orders
and
it's
pretty
pretty
pretty
big
dialog,
so
I'm
gonna
click
to
create
on
the
top
right
corner,
so
bottom
right
corner
and
in
here
we
actually
want
to
add
one
more
field.
So,
let's
our
column,
let's
add
a
column
here,
which
is
a
number
field
or
a
number
type.
A
So
let's
actually
give
this
Co
name
as
percent,
which
we
cannot
then
talk
at
our
custom
experience
and
all
of
the
other
things
we
can
leave
as
they
are.
So
it's
not
another.
Massive
lot
of
settings
in
this
case
are
not
actually
that
impactful,
let's
actually
add
few
items
here,
I'm
gonna
switch
to
quick
edit
just
for
the
sake
of
it,
and
so
I
can
more
easily
actually
render
hope
render.
There's
things.
Let's
call
that
item
item
a
and
give
it
a
value
of
10.
A
A
Now
we
want
to
test
our
extension
against
this
live
sites,
and
that's
one
thing
with
extensions:
you
cannot
back
test
them
using
the
local
experience
or
the
online
work
pen,
so
I
need
to
test
them
against
the
live
side
and
and
to
be
able
to
do
that.
There's
a
there's
a
serve
the
Chasen
and
final
within
the
solution
which
we're
gonna
use
for
the
configuration.
So
you
don't
have
to
worry
about
how
to
come
up
with
a
custom.
Debugging,
URLs
and
I
can
look
back
on
that
one
in
a
second
but
we're
gonna.
A
Take
the
URL
from
there
you're
going
to
go
back
on
the
solution
structure.
We're
gonna
go
back
on
the
config
file
open
it
up
serve
Jason,
and
we
can
see
the
default
configuration
in
here
using
the
kanto,
sir,
and
so
I'm
gonna
actually
change,
and
this
one
point
to
do
all
items
aspx
one
of
the
URL
and
then
we
can
actually
see
here
that
we
are
associating
an
extension
within
this
ID
with
the
sample
text
of
value,
but
we're
associating
this
to
a
field
called
internal
fourth
name.
A
So
let's
actually
fix
this
one
as
to
be
called
as
percent,
because
that
is
actually
the
internal
file,
a
field
name
for
that
particular
field
which
we
just
created.
So
that's
going
to
use
by
default
when
you're
creating
the
the
field
in
the
list.
The
percent
fields
I
can
get
back
in
here.
It's
going
to
use
the
same
name
as
the
internal
field
name.
A
So
I
know
that
it's
present
in
this
case
saving
the
changes,
and
that
means
that
we
can
now
test
out
things
so
I
could
actually
go
to
the
console,
obviously
or
or
I
could
actually
start
a
terminal
here
really
up
to
your
preference.
What
do
you
want
to
do
anyway?
Do
we
want
to
actually
work
with
that
with
the
console
I'm
going
to
do
capture
from
here?
You
know,
what's
going
to
now
happen?
Obviously,
probably
seeing
this
if
you
went
through
the
first
four
tutorials
on
the
extensions
series,
we
can
actually
spin
up
a
process.
A
We
kind
of
then
ask
I
assure
you
want
to
load
anti
debugging
scripts,
and-
and
in
this
case
we
do
know
what
we're
doing
and
we
are
being
at
the
developer,
so
we're
gonna
actually
load
debugging
scripts
and
what
actually
happened
here.
Yes,
then,
we
set
the
URL
of
the
proud
to
use
Deepak
manifest
file,
we're
boiling
the
localhost.
A
We
have
here
custom
query
parameters
which
are
basically
telling
the
SharePoint
at
a
SharePoint
a
load,
an
additional
JavaScript
file
from
the
local
host
on
top
of
this
existing
list,
and
that
then
make
sure
and
our
custom
code,
let's
get
back
on
our
code
and
have
a
look
on
what
our
code
is
actually
doing
the
code.
What
the
code
is
doing
is
that
we
are
getting
the
field
value.
A
We
also
are
getting
the
properties
and
sample
text,
which
is
the
properties
of
the
extension
and
we're
basically
adding
that
to
a
text
field
which
we
are
then
rendering
into
the
element.
So
what
is
that
property
is
sample
text?
Well,
that's
the
properties
of
the
extension,
so
we
do
have
a
properties
in
this
extension
called
sample
text,
and
that
means
that
we
can
actually
parameter
side.
That
instance.
So
in
here
we
are
able
to
say
properties
and
sample
text
at
equals.
Its
cobalamin
here
equals
add
value
and
the
same
way.
Where
did
that
came
from?
A
Let's
go
back
on
the
serve
to
chasten.
We
can
actually
say
that
there's
a
properties
and
sample
text
a
core
value,
so
the
kind
of
a
mimic
and
situation
where
to
use
a
custom
that
order
extension
would
be
associated
to
the
list,
given
the
property
sample
text
having
this
value
so
you're
able
to
cover
parameter
sites
the
instance
of
the
extension
in
that
field
in
a
list
and
work
it
back
on
all
of
that
later
on
on
the
tutorial
as
well
cool.
A
So
that's
how
we
actually
got
here
the
the
value
and
actually
get
that's
what
we
actually
started
there.
We
go.
So
that's
the
the
URL
without
the
query
parameters
and
we
can
say
that
the
percent
value
is
10
50
90.
But
this
is
the
with
the
query
parameters,
which
is
then
basically
loading
also
the
extension
so
unloading,
the
extension
together
with
the
out-of-the-box
experience
and
now
we're
rendering
at
the
output
with
the
value
equals
10.
So
that
was
the
text
which
we
again
created
in
the
code
in
here.
A
So
that's
where
we
actually
generated
that
combination.
So
quite
simple,
actually,
a
quite
simple
set
up.
So,
let's
actually
modify
that
experience.
Life
is
so,
let's,
let's
modify
the
fields
rendering
to
make
some
slightly
more
sense
than
just
having
a
value.
So,
let's
actually
open
up
the
module
say
in
CSS
the
styling
in
here
and
in
the
the
hello
world
inside
of
the
hello
world,
we
can
actually
modify
and
the
settings
slightly
so
I'm
gonna
use
a
cell
and
a
full
and
the
background
color
beings,
and
that
one
that
value
and
white
settings.
A
So
you
can
see
what
it
means
in
a
practice
and
on
the
render
cell.
Let
me
actually
modify
that
one
slightly
as
well,
so
we
can
modify
and
what
are
we
rendering
in
the
render
cells
and
can
actually
remove
all
of
the
stuff
from
here
and
I'm
gonna
paste
in
what
we're
doing
here.
So
we're
kind
of
a
building,
a
div
structure
and
using
the
Styles,
the
for
style
and
the
hello
world
and.
A
If
you
are
familiar
with
column,
formatting
and
list
formatting,
you
can
actually
achieve
similar
kind
of
things
using
column,
formatting
and
list
form
thing
without
coats
or
with
low
code
experience
with
Jason.
But
the
difference
with
field
customizers
with
SharePoint
framework
is
that
you
can
actually
include
JavaScript
here.
So
you
might
have
a
button
clicks.
You
might
have
actions,
you
might
have
much
more
complex
rendering
here
as
well.
So
you
might.
A
If
I
click
this
one,
you
might
open
up
more
chool,
you
might
open
up
a
panel,
you
might
open
up
something
else
and
something
else
happens
with
Jason
and
:
formatting
a
vomiting.
You
cannot
embed
custom
code
so
if
there's
no
supported
way
for
adding
scripts
and
custom
code
on
that
experience,
so
that's
really
the
main
difference
between
the
field
customizer
and
the
column
and
the
list
formatting.
Now,
let's
actually
go
through
and
deploy
this
completely.
So
we
don't
have
to
use
the
debug
manifest
file,
a
definition.
A
So
let
me
actually
break
up
and
the
rendering
here.
Let
me
go
to
the
elements.
Folder
story,
SharePoint
elements
folder
here
our
assets,
folder,
where
we
have
the
elements
XML
and
what
we're
doing
here
is
that
we
aren't
defining
a
new
field
called
SPF
X
percentage,
with
the
display
name
percentage
to
be
included
to
be
available
in
the
site
where
we
want
where
we
will
be
deploying
this
solution.
So
as
part
of
the
the
site,
the
solution
deployment,
we
are
actually
provisioning.
Also
a
field
add
to
that
site
with
this
given
values.
A
A
A
So
that's
basically
what
we're
doing
here
so
we're
automating
the
whole
process
and
packaging
all
of
the
assets
inside
of
the
SP
pkt
file,
so
I
can
send
that
file
solution
file
for
somebody
else
and
then,
whenever
that
that
person
adds
that
solution
to
their
tenant
and
it's
going
to
provision
the
same
field
and
to
be
available
to
treat
as
so,
we
are
pretty
much
ready
to
go.
So
let
me
do
a
carp
pond
or
a
dusters
ship
and
which
were
basically
packaged
the
solution
in
the
optimal
a
code.
It
will
minimize
the
code.
A
A
We
know
that
this
filled
definition
to
create
the
field
whenever
there's
replicate
a
file
is
inside
of
that
solution
as
well.
Now,
let's
actually
close
up
things
close
all
just
clean
up
before
we
go
start
off
before
we
get
start
installation.
So
let
me
actually
reveal
this
in
Explorer,
so
we
can
actually
track
and
show
up
to
our
tenant.
Let
me
go
to
our
apps.
Oh.
A
There
we
go
there's
the
first
URL
available,
so
let
me
jump
over
there.
Let
me
go
to
apps
for
SharePoint
and
let
me
track
and
drop
the
field
extension
is
pkg
file
here
you
can
see.
I
have
quite
a
lot
of
other
extensions
and
tutorial
solutions
available
here,
and
we
cannot
trust
that
it's
not
a
tenant
deployable,
so
no
checkbox
to
get
it
to
the
point
across
the
tenant
and
deploy,
and
that
means
that
it's
now
available
to
be
installed
to
any
site
collection
within
this
tenon.
So
let's
actually
do
that.
A
A
Then
we
can
actually
see
our
field
extension
to
be
available
to
be
selected,
so
in
my
case,
I
have,
as
I
said,
multiple
other
tutorials
available
as
well
in
my
industry.
On
so
don't
worry
about
those
but
field.
Extension.
Client
side
solution
is
the
one
which
we
are
installing
in
this
case
and
getting
that
one
installed
on
the
side.
So
that's
going
to
take
a
while
to
get
the
install
to
not
a
super
long
while,
but
it's
basically
making
sure
that
then
the
field
is
installed
on
the
side
as
well.
A
So
let's
wait
I'm
going
to
do
a
refresh
until
the
full
solution
is
installed
and
that
was
actually
quite
faster.
That's
pretty
cool,
so
let's
then
create
a
list
and
where
we
can
add
any
use
to
field
which
we
actually
provision.
So
let's
call
this
invoices
just
to
differentiate
that
from
the
orders
and
let
me
create
click.
The
create
and
I
wanna
go
to
this
list
settings.
A
Contents
and
in
the
invoices
tree
dots
and
settings
I
will
get
back
on
the
list
settings
the
configuration
of
the
after
of
the
list
itself
and
what
I
want
to
do
is
that
I'm,
gonna
click
the
add
from
existing
site
columns,
and
this
is
basically
showing
us
existing
site
columns
which
have
been
deployed
to
this
site
and
since,
as
part
of
this
BBK
to
final
deployment,
we
actually
included
our
custom
column
to
be
available.
We
can
now
see
the
SPS
pfx
columns,
wait.
How
did
we
know
that
it
says
pfx
columns?
A
Well,
we
actually
define
that
in
the
XML,
so
in
the
XML
file
we
actually
said
that
the
croup
name
of
this
act
at
this
group
is
SPF
X
column.
So
the
field
is
available
then
under
the
SPF
X
columns
in
here
as
well.
So
let
me
get
one
more
time:
SPF
X
columns.
You
can
define
this
any
way
you
want.
So
it's
really
up
to
you
and
in
my
case
I,
have
you
under
ones
here
as
well,
and
these
are
related
on
the
other
tutorials,
but
percentages
here.
A
I
can
add
that
one
as
a
column
to
be
added
and
okay
and
that's
now
actually
added
on
the
on
the
list
and
now,
if
everything
works
as
expected,
let's
go
to
the
invoices
list.
Let's
add
a
new
item.
Let's
call
this
item
eight
and
give
it
a
value
of
35
and
click
Save
and
as
expect
that
our
field
customizer
is
now
rendering
and
because
we
are
using
asset
packaging
again.
The
default
values
of
SharePoint
framework
solutions
is
the
asset.
Packaging
in
here
include
client-side
assets.
A
We
are
automatically
using
automatically
hosting
the
code
automatically
hosting
the
JavaScript
files
for
you,
so
you
don't
have
to
worry
about
CDN
or
external
hosting
and
all
of
that
additional
operations.
So
super
simple
thing
will
automatically
host
and/or
the
JavaScript
for
you.
If
you
also,
if
you
have
enabled
off
histories
to
five
CDN,
this
tenant,
then
we'll
serve
actually
that
choosing
to
automatically
using
CDN.
If
you
don't
have
the
seeding
enabled
we're
gonna
serve
that
true-true
outside
of
the
CDN,
so
CDN
just
improves
the
performance.
It
doesn't.
A
Actually,
it's
not
a
pretty
requirement
for
painting
of
the
SharePoint
framework
capabilities
now
just
to
follow
up
on
on
making
the
experience
look
exactly
like
it
is
in
the
tutorial
or
in
written
tutorial.
We
can
actually
test
out
few
different
values
and,
let's
add
one
more
there,
so
you
can
actually
say
that
it's
looking
exactly
like,
we
were
planning
based
on
the
written
guidance,
but
a
pretty
cool
setup
and
likes
it,
and
you
can
achieve
similar
kind
of
rendering
techniques
using
the
column
formatting
using
the
view
formatting.
A
But
in
this
case
we
didn't
go
that
far
but
shape
on
favor
and
field.
Customizers
support
you
to
actually
add
JavaScript
actionable
JavaScript.
You
could
have
buttons
clicks
actions
and
real
JavaScript
posted
in
here,
because
again,
your
tenant
administrator
is
actually
controlling.
Is
that
solution
getting
deployed
to
the
tenant
and
you
have
the
tenant
or
App
Catalog
manager
approving
the
extension
and
that's
why
we
allow
then
JavaScript
being
embedded
on
the
side.
A
So
there's
is
that
governance,
level
of
support
and
control
and
centralized
way
is
also
for
disabling
the
functionality,
if
needed,
from
the
rapke
doc.
So
that's
the
additional
governance
with
SharePoint
framework,
but
that's
it
for
the
this
tutorial.
Hopefully,
you'll
find
the
capability
interesting.
Thank
you
for
following
up.