►
Description
Web cast on SharePoint Framework and how to implement validation around the property pane property values. More details around the covered topics from http://dev.office.com/blogs
A
Welcome
everybody:
this
is
sharepoint
balance
and
practices
webcast
at
this
time.
We're
going
to
talk
about
the
validation
of
the
SharePoint
framework,
client
side,
of
wit,
part
property
values,
and
what
that
means
is
that
whenever
somebody
is
actually
using
the
property
pain
to
configure
your
client
side,
wit
port,
how
do
they
make
sure
that
input
is
validated
based
on
your
assumption,
so
that
the
end
user
cannot
assign
their
whatever
they
want?
We
rather
validate
the
entry
based
on
the
use
case
of
the
web
part.
A
B
A
A
Descriptive
title
of
the
author
web
test
as
well
now
and
before
we
actually
go
to
the
to
go
to
the
actual,
slides
and
a
demos
and
well,
the
key
is
going
to
do
a
live
demo.
We're
going
to
build
to
web
port
and
validation
a
lie
for
you
in
the
demo
section.
So
you
get
those
steps
as
well
and
and
just
a
kind
of
an
additional
note
on
that
one.
A
We
provide
code
samples,
guidance,
augmentation
community
calls
case
studies,
these
webcasts
and
a
lot
of
additional
assets
for
you
as
well.
The
themes
are
in
SharePoint
framework
shipment
data
model.
Much
subscribe
for
the
traces
5ap
is
lot
of.
That
seems
to
be
more
the
sharepoint
online
site,
but
no
doubt
there's
a
lot
of
guidance
in
our
existing
efforts.
Also
for
on-premises
and
shipment
framework
is
going
to
land
on
a
SharePoint
2016
on
primitives
as
well
AKA.
Ms
sharepoint
PMP
is
the
address
to
remember
now.
A
A
So
it
might
be
that
it
in
your
particular
case
and
what
part
doesn't
matter
in
for
the
in
certain
cases
might
be
useful
to
validate
and
that
the
if
you're,
requesting
specific
values
from
the
or
options
from
the
end
user,
they
are
giving
you
what
is
expected.
How
we
do
this
is
that
we
hook
in
the
validation
to
probably
depend
control
properties.
So
in
the
code
where
we
have
the
the
method
which
is
responsible
of
defining
the
proper
design
controls,
we
essentially
hooking
the
validation
in
the
specific
controls
over
there.
A
There's
two
approaches
which
are
available
so
there's
the
inland
validation,
essentially
meaning
that
we're
validating
the
chick
validating
to
input
directly
in
the
code,
or
we
can
also
do
remote,
api-based
validation.
As
an
example
you're
requesting.
Let's
say
that
you
discuss
what
we're
going
to
do
today
or
in
the
sample
scenario,
your
Valley
a
requesting
a
list
name
from
the
site,
and
then,
if
the
user
of
writing
that
writing
that
list
name
to
the
web
properties,
you
can
actually
validate,
is
just
list
accessed
on
the
side,
not
to
be
fair.
For
that
particular
use
case.
A
Maybe
a
truck
down
which
is
showing
the
available
list
from
this
light
would
be
better,
but
I
think
it
validates
their
or
it's
a
good
scenario
for
showing
how
the
scenario
can
be
achieved
and
whenever
you
are
doing
this
validation,
especially
for
the
remote
api's.
You
actually
want
to
consider
the
delay
on
the
validation
execution,
so
you
don't
actually
start
validating
the
entry
immediately.
A
Tell
you
to
use
it.
This
is
a
this
isn't
actually
super
super
complex
topics
right.
It's
no
doubt
something
what's
quite
often
needs
to
be
done
when
you're
doing
a
client-side
development,
so
let's
actually
have
a
coot
example,
and
what
does
it
actually
mean?
So,
on
the
left
side
on
the
top,
you
can
see
the
property
paint
text
field.
A
A
Well.
Obviously,
in
this
case,
it
could
be
something
like
you're
asking
an
input.
What
is
shown
in
the
width
part-
and
you
don't
want
that
to
be
too
wide,
for
example,
in
a
web
part
from
a
styling
perspective,
could
be
a
one
use
case,
any
other
use
cases.
Well,
they
come
this
side
as
an
example
for
thinking
through
the
scenarios
of
validating.
Obviously,
if
you're
asking
a
number,
you
can
actually
do
this
kind
of
a
check
up
for
a
number
as
an
example.
Yes,.
B
A
Absolutely
absolutely
that's
a
good
point
good
and
then
the
slightly
more
complex
scenario
and
the
slide
actually
is
slightly
more
complex,
and
we
do
know
that
the
script
order,
the
presentation,
what
gets
really
small
but
will
link
the
tutorials
for
you
in
the
video
record
video
description
as
well
so
in
here.
What
they're
doing
is
that
they're
using
a
remote
API
to
check
up
on
the
given
value.
A
So
again,
we
are
using
the
on
get
error,
message
and
validate
oldest
name
and
in
dual
validate
list
name
code
such
as
to
be
clear
and
that
1
the
function.
What
we're
seeing
the
full
code
isn't
actually
visible
there,
but
the
key
parts
are
so
first
of
all
checking
that
the
list
at
the
value
is
given
when
the
value
is
given
where
we
are
then
using
the
SB.
Http
client
actually
call
against
that
particular
the
list
checking
if
the
list
exists
on
the
site
and
if
we,
if
the
response
is
ok,
the
list
exists.
A
B
Yes
and
the
one
thing
that
essential
here
is
that
when
you
look
at
the
line
when
we,
where
we
bind
the
matter
to
the
on
get
error
message
event,
you
think
that
we
use
the
constructed
this
validate
list.
Name,
don't
bind
this
yeah
and
the
reason
for
that
is
that
if
we
didn't
do
it,
then
the
value
of
this
inside
side.
The
promise
where
we
call
this
contact,
sbac,
tgp
e
client.
The
value
of
this
there
in
that
place
would
be
actually
the
promise
and
not
not
web
part.
B
A
Absolutely
and
then
we're
able
to
access
the
context
and
everything
else.
What
is
available
in
the
webpart
object?
Absolutely
yeah.
That's
a
good
point,
good
point
good.
So
that's
kind
of
a
high
level
thinking
on
the
on
the
validating
options
and
let's,
let's
have
a
look
on
this
one
in
practice.
So
what
it's
going
to
show
you
at
this
one
in
practice
as
well,
in
the
tutorials
which
are
available
in
the
depth
of
subconscious
SharePoint,
and
we
have
a
tutorial
for
this
validation.
A
The
tutorial
itself
shows
these
two
options
as
well,
so
the
first
one
on
the
left
is
the
the
inline
validation,
where
we
are
checking
that
the
description
field
value
is
based
on
our
assumption
and
then
the
tour
the
picture
on
the
right
is
for
checking
industrialist
accessed
on
the
side.
Maybe
once
again
may
be
there
for
the
scenarios
sake
when
you
are
dependent
on
a
list
in
the
site,
maybe
I
drop
down
and
showing
the
options
of
the
lists
in
the
site.
A
We've
been
better
but
but
the
whole
point
being
on
the
fact
that
you
are
dependent
on
an
external
API
call-
and
this
is
just
an
easy
use
case-
to
show
the
scenario
for
you
and
it
could
be
something
like
validating:
an
inch
user
name
against
user
profile
or
something
else
as
well.
So
you
actually
have
at
that
remote
API
call
as
part
of
the
validation
but
I
think
that's
it
for
my
scenario
perspective.
So
let's
actually
have
a
look
on
this
one.
A
B
A
B
That's
correct,
so
the
word
range
is
their
edges
already
open.
Here
I
can
add
the
webpart
hello
world.
I
can
open
its
properties
and
they're
just
stare
work.
So
first
thing
that
I
want
to
show.
You
is
how
you
can
validate
the
value
of
this
property
in
line,
so
we
will
do
two
checks.
We
will
first
check
whether
the
value
is
there,
so
assuming
that
you
would
have
valued
that's
required
and
then
anything
that
we
will
check
is
whether
it
does
not
exceed
personal
angle.
B
So
with
that,
let's
add
these
two
checks.
So
we
start
by
let's
collab
this
one.
Let's
collapse
this
one
to
make
it
a
bit
more
eatable
and
then
we
add
new
method,
called
private,
validate
description
and
parameter.
For
that
one
is
tell
you
a
five
string
and
we
return
back
as
a
string
and
string
that
we
return
is
the
error
message
that
occurs.
If
the
value
is
invalid,
if
it
is
a
valid
one,
then
we
return
an
empty
string.
That's
the
way
it
works
in
SPF
X.
B
B
B
Otherwise
we
return
an
empty
string
right.
So
with
that
we
have
our
simple
a-line
check
and
for
just
to
work.
We
have
to
hook
it
up
with
the
text
field
thousand
that
we
have
for
our
program
pub
property
here.
So
here
we
associate
it
to
the
on
get
error
message:
event
that
occurs
whenever
the
user
changes
the
value
of
the
sexual,
and
here
we
say
this
validate
description
bind
this
and
in
this
case
we
could
as
well
just
do
this.
We
could
just
call
the
method
right,
because
we
here
we
don't
rember.
B
Well,
we
don't
don't
refer
to
the
this
keyword,
so
we
actually
don't
use
anything
of
all
weapons
class.
But
if
you
did,
then
it
would
mess
up
the
scope.
So
in
this
sense
it
is
always
easier
to
remember
just
use
this
use
the
bind,
helm
or
use
bind
to
bind
the
function
so
that
you
will
retain
the
scope
of
the
web
part
within
method
right,
because
here,
if
we
use
this,
then
it
would
be.
It
would
mean
something
else.
B
So
with
that
we
have
our
code
in
place,
let's
save
and
then
the
bill
passed
should
pick
it
up.
So
we
are
rebuilding
the
project
already
it
detected
that
we
did
a
change
in
a
code
and
now,
if
we
go
back
to
edge
and
the
pages
already
refreshed,
if
we
go
back
to
the
web
part
and
we
remove
the
action
so
now
you
can
see
our
first
check
right.
We
didn't
enter
any
text
so
first
we
have
an
error.
B
Description
is
invalid
and
also
see
that
whenever
there
is
an
error,
the
web
part
won't
update
itself.
So
here
we
still
see
the
old
value
that
we
had
and
now
if
we
enter
some
text
now
we
see
the
text
met
right
and
then
and
if
we
now
remove
it,
we
will
see
that
the
a
stays
here,
because
the
web
part
does
not
update
itself
whenever
there
is
Error
invalidation.
B
B
B
And
that's
not
long
enough,
so
now
this
there
you
go
so
now
we
exited
and
now,
if
we
would
type
more
text
there,
you
go
right.
So
it
keeps
saying
that
the
text
is
too
long.
It
won't
update
the
web
part.
So
with
that
we
have
really
easy
check
implemented
in
a
line
and,
as
we
said,
you
can
implement
this
approach
whenever
you
want
to
check
for
easy
things,
like
required
properties,
length,
simple
patterns
like
zip
codes,
telephone
numbers,
emails,
everything
that
you
can
quite
easily
check
by
yourself
in
code
right.
B
B
So
we
go
to
our
manifest,
and
here
we
add
new
property
called
listening
and
initially
we
will
just
leave
it
empty
right
because
we
don't
want
to
get
anything
up
front
about
the
name
of
the
list
that
the
user
would
like
to
use.
So
we
will
keep
this
empty
here.
We
go
to
our
I
hello,
world
web
part,
props
interface,
that
describes
properties
used
within
the
web
part,
and
we
added
here
as
well
listening
and
it
will
be
of
type
string.
B
Now
we
go
back
to
web
part,
and
here
we
add
a
new
property
for
the
property,
plain
text
field
right.
So
here
we
say
listening.
Let's
remove
this
one!
For
now
and
here
we
will
say
listening
whew
right,
so
we
include
label
and
we
have
to
edit
here
in
walk.
So
here
we
go
to
the
my
screen,
GCS
and
here
we
say
less
name,
field
label
of
type
string,
and
then
we
also
include
this
street
here
where
we
say
this
guy
will
be
listening.
B
So
with
that
to
verify
that
everything
works
at
extractable,
let's
go
back,
let's
rebuild
the
project
will
say:
gulp
serve,
but
this
time
no
browser
because
we
want
to
eventually
what
we
want
to
do.
Is
you
want
to
be
able
to
check,
compare
the
name
of
the
list
with
a
current
site,
and
you
cannot
do
that
inward
wedge,
that
you
host
oakley,
because
that
does
not
have
access
to
a
site
right.
That's
only
the
local
orange.
So
with
that
we
will
use
the
host
at
work
orange
in
a
tenant
that
we
already
have.
B
B
So,
first
again,
we
will
start
with
adding
new
method
that
we
will
use
for
the
check.
So
we
will
say
private
validate
listening.
We
will
have
the
value
as
the
name
of
the
list,
but
here
will
give
back
promise
of
string,
and
the
reason
for
that
is
that,
because
we
reach
out
to
an
API,
it's
not
immediate
advance
might
take
a
moment
for
us
to
perform
the
check
and
with
that
we
don't
want
to
look.
Do
you
why?
And
we
also
want
to
do
it
in
a
way
that
the
framework
can
pick
it
up.
B
So
with
that,
we
resolve
a
promise
or
returns
a
promise,
and
now
we
have
to
return
a
new
promise,
and
this
call
is
bit
long
right,
because
there
are
quite
a
few
things
that
you
have
to
do
here.
So
if
you
look
at
how
it
works,
let's
start
with
this
one
there's
the
void,
because
that's
a
method
basically
and
the
method
has
two
parameters
so
there's
the
results
which
is
of
type.
B
So
this
is
a
bit
long,
but
as
you
work
with
promises,
you
will
get
used
to
typing
this
and
how
it
works
right.
So
here
the
first
thing
that
we're
going
to
do
is
going
to
be
able
to
call
to
the
API.
So
we
will
say
this
context:
SP
HTTP,
client,
yet,
and
then
we
will
call
so
we
want
to
reach
out
to
the
rest
api
within
the
context
of
the
current
site
and
checks
check
if
the
list
that
we
have
at
exists.
B
So
we
will
say,
select
ID
to
make
it
simple
and
also
another
thing:
that's
good
right,
because
the
value
that
you
get
here
is
the
value
that
we,
that,
as
user
type
and
the
one
thing
that
you
don't
want
to
do,
is
to
take
it
raw,
because
if
someone
would
enter
there
a
script,
it
could
eventually
break
the
whole
page.
So
you
want
to
escape
it
and
one
easy
way
to
do
that
is
to
import
the
escape
function,
that's
already
available
with
an
SPF
X.
B
So
here
we
can
say
import
this
case
and
we
do
that
from
the
microsoft
/,
SB,
lodash,
subset,
I.
Think
that's
kool!
Is
that
correct?
That's
correct
so
with
that
we
can
now
call
here
escape
and
that
will
escape
the
value
of
any
characters
that
are
invalid
or
that
are
that
might
potentially
in
in
the
script.
B
Close,
what
what's
that
landscape?
Yes,
okay,
yeah,
okay,
SS
class
at
the
s
escape
already
yeah
right,
so
yeah,
and
then
an
hour
parameter
that
you
have
to
do
whenever
you
want
to
call
the
SP
httpclient
get.
Is
the
SP
SP,
HTTP
client,
config,
SI
expression
that
instructs
the
client?
How
to
execute
the
call?
And
you
don't
need
to
do
it
by
yourself?
That's
actually
an
easy
way
to
do
it,
so
you
can
go
to
SP
or
this
context.
Sp
HTTP
clients
configure
owner
essentially
is
a
static,
so
we
have
to
import
it
from
here.
B
Sp
HTTP
I
think
that's
the
module,
and
here
we
say
SP
HTTP
client
configurations
you
want
so
that's
the
default
set
that
in
instruction
client
how
to
run
the
call,
and
then
we
say
okay.
So
this
is
a
synchronous
call,
so
we
say
then
so
when
we
have
the
call,
we
get
back
a
response
and
that's
of
type
sv,
HTTP
client
response
that
we
have
here.
So
we
have
to
also
import
it
to
get
the
Taipings
back.
B
So
we
say
SP
HTTP,
hawaiians
response,
which
is
here
and
then
we
can
just
copy
paste
that
and
we
say
so
here
then
is
we
will
get
respond
back
of
type
response
and
actually
here
we
don't
need
to
return
anything.
So
we
just
say
avoid
sorry
incorrect.
Will
this
return
void,
and
here
we
will
check
if
response
is
okay
right.
So
if
the
list
exists,
if
we
can
get
get
the
list,
then
we
resolve
the
promise,
which
is
the
one
here.
B
Listen
up
g
string
and
here
we
say,
return
right,
so
we
we
won't
run
any
other
code
because
the
result
is
only
calls
the
function
but
does
not
stop
here
to
coast.
Low,
so
we
have
to
do
a
return
here.
Otherwise,
if
we
couldn't
find
the
list,
we
will
have
an
error
right
and
one
way
to
check
that
is
response
test
Pettis.
So
if
the
list
is
in
there
we
will
get
a
404.
So
in
this
case
we
can
say
something
like
list
with
names.
B
So
how
about
we
print
the
name
on
the
screen
and
once
again
we
escape
it
with
the
main
doesn't
exist
in
this
site
and
we
also
return
it.
So
we
stopped
the
flow,
but
it
also
could
be
the
case
that
we
will
get
a
network
error.
The
API
will
be
block,
throttled
anything
right,
so
we
could
just
get
some
other
error.
So
we'll
just
say
else,
and
here
we
will
say,
resolve
an
error
occurred.
B
Please
try
again
like
just
that
error
here
doesn't
have
anything
to
do
with
the
value
that
we
provided
it
just
error
code,
you
ETA
p.
I
right
here
will
return
that
as
well
and
then
optionally.
What
what
you
also
can
do
is
to
have
generic
catch.
If
something
would
go
wrong,
then
we
won't
have
error
any
that
will
be
also
avoid,
and
he
will
also
say,
resolve
and
error
has
occurred.
B
Please
try
again
and
return
so
with
that.
We
have
our
check
in
place
right.
So
now
we
need
to
hook
it
up
to
our
view
and
again
we
do
it
exactly
the
same
way.
So
here
we
say
on
get
error
message
and
this
validate.
Let's
name
bind
this,
and
this
is
exactly
the
case
where
the
blind
is
essential.
You
need
this
here,
because
if
we
didn't
do
this,
if
we
just
pointed
to
the
method,
we
would
not
be
able
to
use
the
disc
keyword
here
within
the
context
of
of
the
web
part.
B
So
with
that,
we
should
have
everything
in
place.
We
can
go
back
to
our
browser
and
see
if
things
work,
let's
say:
yes,
we
still
run.
All
of
that
is
ok.
We
had
somewhere
an
error
saying
that
we
missed
a
semi
con
I
just
have
a
look
at
where
it
was
line.
95
11
that
just
played
correctly
XO
here,
semi
column.
There
you
go,
we
rebuild
the
code,
no
warnings
all
should
be
well
now
right
manifest.
So
we
packaged
build
a
code.
We
refresh
the
page.
B
We
go
back
to
the
hosted
wherein
we
reload
the
page.
Now
when
we
open
the
web
part
properties,
you
see
that
will
get
initially
error
right
because
we
so
we
actually
don't
check.
We
require
a
name,
but
we
didn't
include
it
in
our
check.
So
how
about
we
accept
our
check-in
in
here?
So
first
we'll
say:
ok,
if
value
is
now
or
value
trim
length
is
0,
we
will
say
resolve
with
error.
Please
provide
listening
and
here
we'll
say,
return
right,
so
we
won't
do
any
other
check
if
there
is
no
no
txt
enter.
B
So,
let's
save,
let's
wait
a
second
for
the
code
to
rebuild
if
their
pages
refresh,
let's
refresh
the
workbench,
open
web
properties-
and
he
will
say,
see
now
correct
error
right.
So
we
didn't
enter
any
text
and
we
want
to
see
it
first.
So
here
let's
enter
my
list
and
will
say
list
with
name.
My
list
does
not
exist
in
this
site.
So
how
about
we
try
to
enter
a
name
of
the
list
at
their
documents
and
that
we
don't
get
any
error.
B
So
that
means
that
our
list
works
and
when
you
work
with
remote,
api's
there's
one
thing
to
take
into
account
and
let's
have
a
look
at
this.
So
let
me
open
developer
tools
and
let's
have
a
look
at
via
the
network
stack
as
I
type
in
this
field.
So
I
will
say
documents-
and
here
you
can
see
that
if
I
don't
type
fast
enough,
we
will
check
every
single
value
that
we
have
so
here
you
can
see
errors
that
we
had
document
document
document.
So
basically
every
single
piece
stroke.
B
B
Between
keystrokes
right,
if
there
is
no
change,
it
will
execute
the
check.
If
there
is,
it
will
will
wait
again
right,
but
that
might
be
too
short
so
an
easy
way
to
change
that.
If
you
go
to
the
property
here-
and
here
is
another
property
that
you
can
use
called
the
firm
validation
time
and
you
can
set
that
to
500.
B
A
I
think
this
is
a
highly
valuable
I
with
cast
as
well,
because
people
quite
often
need
to
do
the
validations,
so
you
might
have
some
sort
of
a
rules
from
the
length
or
the
format
of
the
of
the
entry,
and
this
really
shows
in
the
simple
the
quay
how
to
get
started
on
doing
the
validation
within
your
client
side.
Work
of
the
things
we
absolutely
encourage
people
to
go
through
the
tutorial
walk
through
the
steps
and
the
tutorial
itself
is
a
great
one.
B
You
just
talked
about
encouraging
folks
to
check
out
the
sample
tutorial.
You
talked
about
why
we
so
Perez
don
t
that
I
can
add
is
that
if
you
compare
that
to
the
past
it
it's
way
easier
now
to
implement
checking
the
problems
of
yes.
The
value
is
directly
within
the
web
part,
and
it's
a
thing
that
you
definitely
should
do,
because
it
helps
the
users
to
to
set
up
the
webpart
properly
right.
B
A
Actually
a
good
point,
so
let's
actually
spend
a
slightly
odd
time
on
that
one.
So
if
you
think
about
the
classic,
let's
say
a
service
by
the
way
part
fun
solution,
wet
pods,
even
with
those,
this
kind
of
validation
was
relatively
hard
to
complete
and
well.
Obviously,
you
had
a
more
flexibility
and
for
my
API
perspective,
but
still
the
implementation
of
dance.
You
have
to
actually
take
care
of
the
whole
validation
scheme
and
everything
else
by
yourself.
A
The
other
kind
of
a
thinking
point
is
that
what
about
script
editor
web
part
based-
let's
say
modifications
with
those
you
actually
don't-
have
even
a
property
pain
so
having
this
kind
of
validation,
making
sure
that
the
end
user
is
guided
true,
they
give
the
right
values
if
the
super
easy
thing
to
do
with
client-side
web
parts,
which
is
no
doubt
one
of
the
benefits
of
the
client-side
web
parts
as
a
platform
to
do
customizations,
but
I.
Think
that
sums
up
the
whipped
ass.
So
thank
you
Wallach
for
joining
me
once
again.