►
Description
PnP Webcast around how to integrate client-side web part properties with SharePoint - Description on the covered topics and additional resources from https://dev.office.com/blogs/integrate-client-side-web-part-properties-with-sharepoint.
A
Welcome
everybody
to
the
shape
and
patterns
and
practices,
webcast
and
system,
we'll
have
a
look
on
how
to
integrate
your
client-side
web
pod
properties
on
with
SharePoint.
My
name
is
Joanna
I'm,
a
senior
program
manager
from
SharePoint
engineering
and
today's
and
the
Deemer
demo
person
will
be
baltics.
So
what
Aquila
do
the
quick
intro
as
well?
Yes,.
B
A
Excellent
so
before
we
go
to
the
actual
demo-
and
let's
see
this
one
in
practice,
it
is
actually
super
cool
demo
and
super
cool.
How
those
things
actually
wearing,
let's
quickly
kind
of
a
clarify
what
I'm
actually
talking
so
in
when
you're
writing
a
SharePoint
framework,
client-side
web
point,
you
can
actually
define
additional
metadata
for
your
client-side
web
part
properties.
A
So
those
things
which
are
configurable
within
the
property
panel
and
essentially
what
you
can
do
is
that
you
define
that
metadata
for
the
property
itself
and
then
SharePoint
knows
additional
things
about
the
property
and
can
do
additional
automation,
for
example,
remove
unsaved
HTML.
If
you
mark
that
that's
field
or
property
to
be
an
HTML
file,
it
can
do
link
fixing
and
super
cool
thing.
A
So
if,
if
you
define
that
a
certain
property
is
actually
a
link
to
a
URL
inside
of
your
sharepoint,
online
sharepoint
will
take
care
of
link
fixing
for
you
or,
if
you
want
your
texts
and
the
web
part
property
is
to
be
indexed.
You
can
actually
mark
that
to
be
with
as
a
metadata
for
your
property
as
well,
and
one
thing
to
notice
here
is
that
this
only
works
for
the
modern
SharePoint
pages,
and
this
is
due
technical,
the
technical
implementations
on
the
inside
of
the
modern
pages
versus
to
classic
pages.
A
But
basically
this
is
all
capable
all
possible
for
you
already
today
in
SharePoint
Online,
when
you're,
using
the
modern
SharePoint
pages
in
more
modern
team
sites
or
in
a
classic
theme
site.
So
really
the
kid.
The
difference
is
the
experience.
The
modern
pages
experience
couch
now.
What
what
does
it
actually
mean
from
a
configuration
perspective?
So
in
your
code
you
can
actually
use
this
overwrite,
the
properties
metadata
override
where
you
can
define
at
this
additional
metadata
for
your
properties.
So
in
the
example
which
is
in
the
slide,
you
can
see
that
we
are.
A
We
have
actually
four
different
properties,
title
intro
emits
a
URL
and
then
we
are
adding
that
metadata
information
for
specific
properties.
So
the
title
has
been
marked
as
it's
searchable
plaintext
the
intro
has
been
marked
as
an
is
HTML
string.
The
image
has
been
Marcos
is
in
image
source
and
the
URL
is
mark
as
the
link
and
the
table
actually
defines
what
it
what
it
kind
of
means
in
practice.
A
So
if
you
define
a
no
metadata
for
your
properties,
your
your
property
values
are
not
searchable,
so
you
not
find
the
page,
for
example,
with
the
web
part.
If
you
try
to
find
debate
based
on
information
which
is
given
as
a
probative
value
or
rendered
throughout
the
client-side
web
part,
the
same
apply,
the
link,
fix-up
doesn't
actually
happen
automatically
and
HTML
isn't
removed
automatically.
A
So
you
don't
have
to
fix
up
that
one
or
get
rid
of
the
unsafe
HTML
by
yourself.
The
is
image
source
right
now
doesn't
actually
have
a
significant
that
much
meaning
we're
looking
into
having
this
additional
capabilities
on
this
one
in
the
future.
Recording
this
video
on
September
2017,
so
it
slightly
depends
on
when
you're
watching
the
video.
If
there
is
already
aeration,
ok
abilities
on
this
one
and
the
last
option
is
its
link-
and
this
is
essentially,
if
you
have
a
link
or
property
which
is
defining
a
link
in
SharePoint
Online.
A
B
So
that's
a
new
thing
that
we
could
not
do
or
achieve
in
the
past
yeah
now,
with
regards
to
fixing
up
links,
as
you
said,
it's
cool
and
I'm
not
sure,
but
I
want
you
to
clarify
that
what
it
exactly
means
or
do
we
show
that
first
in
in
in
a
demo,
and
then
really
it's
right
through
that
like?
Why
is
it
really
important
for
you
you
to
have
it.
A
Let's
actually
have
to
look
on
the
demo
and
then
let's
look
at
it,
so
talk
about
the
implications
and
done
which
is
a
good
guideline
or
cute
sick
way
to
the
actual
demo
section.
So,
let's
jump
on
the
on
the
demo
and
we'll
see
what
like
actually
demonstrating
those
capabilities
in
practice
and
sharepoint
online
and
welcome
back
on
the
presentation
to
close
up
on
the
after
the
demo.
All.
B
Right
so,
let's
have
a
look
at
how
integrating
shepard
framework
client-side
web
parts
properties
with
sharepoint
works
in
practice.
Here
we
have
a
leopard
on
a
page
that
I've
built,
and
that
illustrates
demo,
so
we
have
four
properties.
Why
I
don't,
which
is
here
and
which
you
see
here
in
web
part,
there's
intro
image.
There
is
some
rich
HTML
text
here
and
there's
a
link
and
we
can
change
all
of
them
here,
as
as
we
go.
So
we
can
add
some
text
here
and
that
will
well
appear
immediately
in
web
part.
B
Here
we
have
add
some
HTML,
so
we
can
make,
for
example,
the
first
few
words
in
bold.
Let's
change
change
that
and
we
can
see
that
that
it's
being
changed
immediately.
Here
we
have
the
URL
of
the
image,
and
here
we
have
linked
to
an
our
page
right.
So
that's
a
link
and
if
we
click
that
we
will
open
the
page
in
another
tab,
I
so
all
of
that
works.
So
now,
let's
see
how
we
benefit
of
actually
the
the
meta
data
that
we
set
on
on
on
the
web
part.
B
So,
first,
let's
check
whether
this
keyword
here
comes
back
in
our
search
right,
because
title
has
been
marked
as
its
searchable
plan
plan
plan,
plaintext
all
right.
So
let's
grab
this
word
and
let's
go
to
a
search
result
page
where
we
look
for
it:
I
press
ENTER
to
get
search
results,
and
here
you
go
here.
We
get
the
result
of
the
page.
So
if
I
open
that
page,
we'll
see
that
that's
actually
the
page.
A
A
B
And
actually
you
can
see
that
that
word
comes
only
one
time
on
this
page
and
it's
only
inside
side
side,
the
web
part
all
right.
So
that's
already
proves
the
value
that
we
see
here
that
you
can
find
page
based
on
texts
that
start
inside
the
web
part,
which
is
why
you
could
you
could
have
never
done
before.
Alright.
So
that's
a
new
thing
and
it
proves
that
it
works.
Yeah.
B
And
that's
really
useful
as
well
when
you
build
a
web
part
like
here.
Imagine
that
you
want
users
to
be
able
to
enter
HTML,
and
here
it's
in
text,
but
imagine
that
you
would
overlay
that
with
a
HTML
editor
so
that
they
can
do
it
in
a
what-you-see-is-what-you-get
mode.
Now,
if
users
are
capable
enough,
they
could
also
try
to
include
a
script
like
here.
Imagine
that
I
would
like
to
include
a
script
with
alert.
B
1
and
I
mean
that
is
just
a
sample,
but
they
might
want
to
try
to
include
a
widget
or
something
else
that
you
might
not
allow
them
to.
So,
as
you
have
seen,
the
text
is
being
updated
as
I
type,
but
there
is
no
alert
here
and
let
me
show
you
the
way
it
works.
So
let
me
publish
this
page
and
now,
when
it's
saved
I
will
reopen
it
street
1.
It
could
have
been
that
yeah.
It's
it's
been
open
for
a
little
too
long,
so
publish
here.
B
Let
me
go
and
go
back
and
back
to
it
and
show
you
the
contents
of
the
HTML.
Let
me
edit
the
web
part
and
here,
if
I
scroll,
all
the
way
down
where,
where
I
entered
the
script,
the
script
is
not
there
because
I
mark
this
property,
as
is
HTML
source
SharePoint
by
itself,
removed
any
unsafe
HTML
from
it.
I
didn't
need
to
do
any
scrubbing,
checking
which
tags
are
there
parsing
rags
and
all
that
no
that's
being
done
already
by
itself
by
CMS.
B
B
What,
if
imagine-
and
that
can
be
a
totally
plausible
case-
somebody
would
rename
this
page
now.
Imagine
that
you
have
quite
a
few
of
these
these
web
parts
across
your
whole
intranet,
and
the
last
thing
you
want
to
do
is
to
have
links
that
don't
point
to
anything
right.
So
let's
illustrate
that,
let
me
say:
save
this
page
right,
so
that
I
prove
that
I'm
not
changing
anything.
If
I
click
now
on
the
link,
it
will
show
the
the
linked
page
in
a
new
tab
and
that's
the
New
York
launch
highlights
7sp
X.
B
B
B
The
last
thing
you
want
to
do
is
to
employ
somebody
to
check
everything
all
day
throughout
the
whole
internet
weather.
All
of
your
links
are
correct,
so
you
can
have
SharePoint
check
that
for
you
by
itself
and
as
you've
seen,
the
changes
are
done
immediately,
so
there
is
no
lag
in
waiting
for
process
to
scan
all
that.
A
B
It's
really
simple
right,
because
the
only
thing
that
you
have
to
do
so
here
you
see
properties
I,
have
have
in
weapo
right,
which
is
title
intro,
link
image
and
from
the
code
point
of
view,
it's
all
string
right
because
I
know
it
is
a
string.
Rich
HTML
is
string.
Link
is
a
string.
Image
is
a
string.
B
So
imagine
that
I
had
another
one
property
called
how
many
lines
of
text
you
want
to
show,
and
that
would
be
a
number
well
I,
wouldn't
want
that
number
to
be
included
in
search
process
or
anything
so
with
that.
I
would
not
need
to
include
it
here
in
this
list,
so
here
I
only
need
to
include
properties
that
I
want
to
enrich.
If
you
will
all
right
so
here,
I
have
the
searchable
plain
text:
HTML
string,
image,
source
and
link,
and
that's
it.
B
A
Maybe
one
thing
to
notice
what
you
actually
mentioned
already,
but
it's
kind
of
read
the
write
on
that
one.
Now
that
you're
adding
there
is
the
link
or
is
image
source
or
is
HTML
string
that
actually
includes.
Also
the
attribute
is
searchable
plaintext.
So
essentially
you
don't
have
to
mix
and
match
all
of
these
things,
because
if
you
use
the
link,
that
is
actually
means
that
the
information
will
be
also
indexed.
Yes,.
B
B
A
A
So
thanks
well
like
for
the
demo,
it's
great
to
see
actually
that
how
how
these
things
are
available
and
it
increases
the
productivity
of
the
developers.
So
as
a
developer,
you
do
not
need
to
worry
about
certain
things
within
your
implementation,
so
the
SharePoint
is
taking
care
of
some
of
the
automation
for
you
and
anything
what
you
want
to
come
up
with
or
as
a
summary
or
as
a
conclusion
on
this
one
right.
B
So
now
you
mentioned
only
the
developers
but
I
guess
that
the
benefits
are
even
more
because,
if
you
think
about
it
like
we
said
right,
imagine
that
you
have
big
tenant
and
you
have
web
part
that
allow
users
to
link
to
a
document
or
an
or
an
image.
The
last
thing
you
want
to
do
is
to
every
day
have
OSIS
or
a
check
that
will
go
through
all
of
all
of
the
internet
and
ensure
that
all
links
are
correct
right.
B
Yes,
so
if
you
do
it
correctly,
if
you
build
the
web
for
the
right
way,
you
will
be
able
to
benefit
of
the
power
that
CMS
already
has
and
will
do
it
for
you.
So
there
will
be
no
additional
work
from
the
operations
point
of
view,
which
is
in
a
big
tenant,
significantly
bigger
benefit
than
developer
workday
that
that
that
you
would
save.
Let's
say
you
related
to
escaping
a
HTML
I
mean
that's
a
bit
of
it
already
by
itself,
but
it
gives
the
benefit
of
managing
of
links
and
URLs.
A
Is
absolutely
that
is
a
big
thing,
no
doubt
because
it's
used
to
be
so
painful
backing
whenever,
whenever
time
frame
on
a
SharePoint
or
in
CMS
solutions
to
keep
up
those
links
or
fix
those
links
automatically
and
this
well
technically,
this
capability
has
been
in
certain
ways
in
SharePoint
for
years
already,
but
now
it's
kind
of
a
also
provided
for
client-side
web
part
or
the
developers
to
take
advantage.
What's
a
super
speaker,
yeah.
B
And
also
another
thing
that
I
guess
that
that's
it's
really
important
is
the
fact
that
in
the
past
one
you
want
to
have
some
text
on
a
page
and
be
able
to
to
allow
users
to
find
that
page
based
on
the
text.
Basically,
the
constraint
that
you
had
was
that
you
could
not
enter
that
taxing
web
part
because
it
wouldn't
come
come
come
back
hit
Search.
So
the
the
consequence
of
that
was
that
you
had
to
think
up
front
about
how
you
would
compose
a
page
of
different
elements
like
a
rich
text
and
web
parts.
A
Absolutely
absolutely
great
benefits
and
great
to
have
this
natively
supported
in
the
SharePoint
framework.
Already
at
this
stage,
because
still
a
SharePoint
framework
is
a
relatively
new
fellow
and
will
have
additional
support,
additional
metadata
support
and
additional
advantages
coming
up
on
this
area
in
the
future
as
well,
but
I
think
that
sums
up
the
webcast
so
chunk.
A
You
won't
like
for
the
great
demo
and
hopefully
you'll,
find
the
cover
topic
interesting
and
will
reference
in
the
video
notes
will
reference
all
of
the
documentation
around
just
so
big,
so
you
can
actually
learn
more
on
how
to
make
these
things
happen
for
your
web
part.
But
thank
you
Alec
and
we'll
come
up
with
a
new
webcast
sooner
or
later,
bye
bye,
all.