►
Description
Introduction to SharePoint Framework Extension webcast. Concentration on the creating, debugging and deployment of SharePoint Framework Extensions for SharePoint Online. More details around the webcast available from http://dev.office.com/blogs.
A
Welcome
everybody,
this
your
SharePoint
patterns
and
practices
of
webcast,
and
this
time
we
wanted
to
have
a
look
on
the
chiffon
framework,
extensions
which
are
in
depth
preview
and
starting
from
the
early
June
2017,
so
depending
obviously
on
when
you're
watching
the
video
and
it
might
be
already
g8
or
as
well.
My
name
is
Erin
and
I'm
a
senior
program
manager
from
SharePoint
engineering
and
with
me
today,
asking
hard
questions
and
and
difficult
questions
is
well
deck
master
cards
from
rancor,
so
Wallach
that
we
do
the
quick
intros
as
well.
Yes,.
B
A
Sounds
good
sounds
good,
so
I'll
be
driving
the
the
presentation
today,
including
the
demo
and
light
nation.
Well,
that's
going
to
interrupt
me
every
now
and
then
with
random
questions.
What's
popped
on
his
mind,
but
let's
actually
get
on
going
on
this
one.
So
we
wanted
to
talk
about
the
SharePoint
favorite'
stations.
A
But
these
are
the
first
three
which
are
available,
so
we
have
application,
customizer
and
application
customizer
is
there
to
extend
the
UI
for
well-known
locations
in
the
UI
or,
alternatively,
embed
JavaScript,
which
might
not
be
visible
in
the
UI
as
well.
So
on
the
picture
which
are
seeing
on
the
slide,
that's
the
the
header
section,
which
is
now
the
application
customers,
there's
writing
a
custom
header.
It
could
be
a
make
a
menu,
it
could
be
buttons.
It
could
be
actions
which
it's
whatever
you
want,
we
have
in
the
preview.
A
You
can
choose
if
you
want
these
buttons
to
be
in
the
toolbar
or
in
the
context,
menu
of
an
item
and
you're,
going
to
absolutely
have
additional
logic
that
the
buttons
will
be
visible,
for
example,
only
when
multiple
items
has
been
selected
or
they're
being
hidden
if
multiple
items
are
being
selected
and
so
on,
and
then
the
last
thing
is
the
field
customizer,
which
is
there
to
modify
the
rendering
of
a
field
in
the
dev
preview.
But
this
is
only
for
the
read-only
mode.
A
So
when
we
are
presenting
the
field
value,
you
can
actually
overwrite
that
any
way
you
want
will
absolutely
looking
into
extending
that
to
edit
experience
as
well,
so
you're
able
to
overwrite
and
the
full
UX
of
a
field
when
it's
being
rendered
for
the
end
users
will
walk
through
all
of
the
scenarios
on
what
they
actually
mean
in
slightly
more
detail
than
the
upcoming
slides.
But
before
we
get
there
just
quickly,
explaining
if
you're
not
super
familiar
of
the
of
the
SharePoint
framework,
the
SharePoint
framework
extensions
work
exactly
the
same
way
as
client-side
web
pots.
A
So
as
part
of
the
packets
which
were
deploying
the
SharePoint
Online
will
only
add
the
definition
of
the
customization,
like
the
extensions
for
client
side
with
one,
and
then
we
pinpoint
a
location
where
the
actual
manifests
or
what
a
bundle
is
being
hosted,
and
that's
essentially
means
that
we're
loading
that
javascript
file
from
a
CDN
it
could
be
of
a
365
CDN,
archa
CDN.
Technically
it
can
be
a
library
or
folder
also
in
your
SharePoint
365
tenant.
So
it
don't
have
to
use
a
CDN
to
host
its
assets.
A
So
essentially,
if
you
associate
your
application,
customers
and
a
site
collection
scope,
then
anywhere
in
the
site,
all
of
the
pages
or
lists
and
libraries
site
contents
menu
and
so
on.
Your
extension
will
be
executed
if
you're
doing
that
on
a
site
level.
It's
in
a
society.
You
can
also
do
that
in
a
list
level
as
well
and
then
the
in
practice.
B
A
Excellent
question
so
there's
multiple
ways
of
doing
this.
So
right
now
in
the
def
previous
status,
you
actually
need
to
install
a
basic
solution
to
the
site,
to
get
it
visible
as
part
of
the
the
installation
of
the
solution
which,
in
the
future
can
be
fully
automatic
automated
and
there
will
be
alternative
options
as
well.
You
can,
for
example,
execute
feature
xml
which
then
automatically
being
executed
and
applied
that,
for
example,
flight
use,
a
custom
action
collection.
A
B
A
Technically,
if
you
use
to
remove
provisioning
techniques
for
creating
the
site,
yes
as
part
of
that
remote
provisioning
process,
you
would
associate
that,
but
if
you're
looking
into
doing
an
out-of-the-box
going
through
a
data,
bus
provisioning
flow
right
now
currently
today,
when
we're
recording
this
video,
there's
no
extensibility
points
for
that.
So
you
cannot
actually
get
that
association
to
be
available
automatically,
but
we're
looking
into
having
those
extensibility
points
within
the
native
provisioning
as
well
and.
B
A
Good
question
as
well,
so
they
would
be
actually
expect
so
we're
not
overriding
the
other
extensions.
So
if
you,
if
you're
taking
advantage
of
this
placeholders
and
you're
adding
another
placeholder
for
me,
it's
going
to
be
stacked
on
the
on
the
place
or
the
section
of
the
place
holder.
So
you
can
have
multiple
extensions.
You
can
have
multiple
widgets
and
in
the
placeholders
as
well.
A
It's
not
meant
to
so
it's
designed,
essentially,
especially
if
you
talk
about
the
UX
and
adding
those
functionalities
on
a
page,
will
give
you
an
extensive,
led
point
to
get
access
on
the
header
and
folder
to
start
with
any
future
additional
points
as
well.
But
we
are
except
well
we're
asking
people
to
then
modify
within
that
extensibility
point.
A
You
should
not
use,
let's
say
the
dome
structure
way
of
modifying
the
sign,
so
you
should
not
embed
a
JavaScript
using
the
application
customizer
and
then
use
that
to
access
to
HTML,
dome
and
then
modify,
for
example,
left
menu.
That's
not
what
is
intended
to
do,
because
we
can't
guarantee
that
the
left
menu
will
remain
intact
or
there
won't
be
any
HTML
modifications
on
that
one.
A
In
the
future,
we
will
give
you
distance
ability,
points
additional
extensibility
points
and
placeholders
in
the
beta's
in
the
future,
and
that
should
absolutely
unblock
those
kind
of
scenarios
as
well.
Cool
good,
the
next
kind
of
customizer
or
next
extension,
which
we
talked
about,
is
the
field
customizing.
So
the
field
customizer
is
really
there
to
overwrite
the
native
field,
presentation,
experience
and
the
easiest
way
to
kind
of
a
show
that
is
probably
from
a
picture
as
well.
A
So
there
there
is
a
percentage
field
and
within
the
percentage
field
we
were
overridden
the
presentations
using
a
field
customizer,
which
is
now
indicating
the
percentage
in
in
a
bar,
and
this
can
be
used
with
side
columns
or
directly
for
a
field
in
the
list,
potentially
meaning
that
you
spot
a
field
provisioning
as
part
of
your
let's
say,
adding
a
solution
brackets
on
a
site,
and
you
can,
for
example,
create
a
custom
field.
We
has
the
needed,
client-side
component,
ID
associated
and
then
anywhere
within
a
site
collection
or
within
a
site
within
site
right
now.
A
A
This
one
works
only
in
the
modern
list,
at
least
for
now,
and
most
likely
the
classic
experience.
The
classic
list
will
not
support.
If
there's
extensions
and
that's
because
in
the
classic
list,
you
can
always
fall
back
on
the
chase
link
way
of
doing
the
overriding
of
the
presentation,
and
we
don't
want
to
kind
of
over
complex
things
and
having
too
many
things
to
support
as
well.
So
it's
mainly
designed
for
the
modern
experience
right.
B
B
A
Right
now
it's
it's
designed
to
be
accessing
a
single
cell
in
the
field
you
can
access
within
your
code.
You
can
do
logic.
This
is
based
on
hey
this
item
and
this
IDs
fields
and
these
properties
and
these
columns
within
this
item
and
then
you'll
figure
out.
What
are
you
want
to
present,
as
you
can
access
the
data
but
overriding
the
experience
it
is
designed
for
the
field
cell,
so
you'll
have
full
flexibility.
A
What
do
you
want
to
do,
but
only
within
the
field
so
we're
looking
again
adding
additional
customizers
in
the
future,
and
maybe
there
will
be
a
row
customizer
or
a
list
view
customizer
most
likely
it
is
in
a
these.
Things
are
absolutely
in
our
backlog.
Will
we
deliver
them
and
when
that's
a
different
discussion
that
and
one
thing
to
notice
on
this
one
as
well?
This
currently
is
designed
only
for
the
read-only
experience.
A
And
then
the
third
fellow
which
came
live
as
part
of
the
dev
preview
is
the
listview
common
sets,
and
this
is
really
fought
there
to
add
those
action
buttons
to
the
list.
So
you
can
add
buttons
to
the
toolbar
or
the
context
menu
on
the
on
the
picture,
which
is
showing
a
scenario
where
there's
two
common
one
uncommon
to
and
when
you
click
one
of
the
buttons
it's
it
can
obviously
pop
up
by
a
dialogue.
A
It
can
do
whatever
you
want
to
do
within
the
from
a
implementation
perspective,
and
this
one
is
associated
using
the
user
custom
action
collection
as
well.
There's
multiple
different
scenarios
of
doing
this,
but
you
can
associate
the
list
view
command
sets,
for
example,
in
a
site
level
in
a
way
that
for
every
list
or
library
which
is
getting
created
in
a
site,
your
extensions
will
be
lighting
up.
A
So
you
can
define
the
type
of
the
site
using
the
classic
SharePoint
logic,
so
you're
able
to
say
type
of
the
list.
Sorry
type
of
the
list
would
be
101,
which
means
the
document
library,
and
that
means
that
if
somebody
creates
a
new
document
library
within
a
site,
your
extension
will
be
associated
to
it
automatically
and.
A
A
B
Well,
so
I
wanted
work
well
whether
it
would
be
doable.
So
imagine
that
you
had
a
more
advanced
scenario
where
you
would
want
to
often
for
a
number
of
options,
but
you
would
not
add
them
next
to
each
other
to
clutter
the
UI.
But
you
would
have
single
menu
option
and
then,
when
you
open
that
it
drop
down
on.
A
Makes
sense
good
point
good
one
good
so
moving
on
on
things.
So
how
do
we
actually
create
this
and
how
do
we
do
debugging?
So,
although
the
creation
of
these
fellows
is
happening
with
a
a
new
version
of
the
yeoman
templates,
so
the
new
latest
version
of
the
yeoman
templates
will
ask
you
I?
What
do
you
want
to
create
a
web
part,
or
do
you
want
to
create
an
extension?
A
And
then,
if
you
choose
an
extension,
it's
going
to
ask
you
what
kind
of
a
stationery
actually
want
to
use
and
then
the
scaffolding
actually
happens
when
you
have
the
solution,
when
you
have
the
code
available
and
the
debugging
is
slightly
different
than
for
the
client-side
web
parts.
So
right
now,
the
debugging
is
not
supported
in
SharePoint
framework
workbench
we're
looking
into
enabling
ducks
in
the
local
workbench
and
in
the
cloak
in
the
online
workbench
in
the
future.
A
But
what
you
would
be
doing
is
that
you
are
debugging
directly
against
the
SharePoint
Online
right
and
depending
on
the
scenarios,
well
a
page
or
a
list
again
depending
on
an
extension
type.
And
what
you're
doing
is
that
you,
you
can
use
a
specific,
deeper
query
parameters
in
the
process:
the
instructs
SharePoint
Online,
the
load,
your
local
extension
from
a
local
localhost
in
the
process,
without
installing
anything
on
the
site
or
without
the
installation,
anything
on
App
Catalog.
So
essentially,
you
can
use
the
query.
A
A
A
So
let's
actually
move
into
the
demo.
So
let's
have
a
quick
look
on
the.
How
do
we
actually
do
the
development
of
this
extensions?
So
how
does
the
scaffolding
actually
works
and
what
are
the
options
in
the
yeoman?
How
does
the
development
work
and
how
does
the
debugging
actually
work
against
the
live
SharePoint
side?
So
what
are
the
debugging
query
parameters
and
all
of
that
which
is
which
are
absolutely
documented
within
our
documentation
as
well?
So,
let's
jump
to
the
demo
and
welcome
back
on
closing
the
presentation
afternoon,
cool
so
on
this
demo.
A
A
How
do
I
do
debugging
on
the
extensions
because,
like
we
went
through
in
the
in
the
presentations
line,
the
debugging
is
slightly
different,
then
with
client-side
web
parts,
at
least
during
the
Deaf
preview,
so
we're
looking
into
having
additional
support
in
the
workplace
in
workbench
as
well
in
the
future,
so
we're
going
to
use
the
tutorial
samples
for
this
one.
If
you
go
AKMs,
let
me
actually
show
you
that
one
as
well
a
kms
SP,
FX
extensions.
A
So
let
me
zoom
them-
and
this
is
the
the
quick
redirection
and
to
our
extension
preview
documentation
right
now.
The
documentation
is
pretty
limited,
so
we
concentrated
on
getting
tutorials
available,
but
this
one
essentially
is
pinpointing
what
you
need
to
do
and
then
we
can
click
to
build
your
first
shape
and
extension
and
hidden.
Here
we
start
building
the
extensions
we
build
application
extension
field,
extensions
and
comment:
a
command
set
extension.
Now
all
of
these
samples
and
the
tutorial
outcomes
are
available
in
github.
A
So
if
you
go
github.com
sharepoint
ship
and
SPF
FX
extensions
you'll
find
the
tutorial
folder
here
and
you'll
find
also
community
samples.
So,
right
now,
when
we
are
recording
this
video,
there's
only
one
but
there's
additional
stuff
coming
pretty
soon,
also
from
engineering
to
the
sample
section.
So
what
I've
done
is
that
I've
pulled
down
the
tutorials
down?
So
if
I
do
listing
off
the
folder,
we
can
see
that
I
have
those
three
different
outcomes
from
the
tutorial
available
and
we'll
have
a
look
on
them.
A
Let's
talk
about
the
solutions,
let's
talk
about
the
actual
deployment
and
all
of
them,
but
before
we
actually
use
the
existing
tutorial
outcomes
or
the
samples.
Let's
talk
about
the
scaffolding
so
know
if
you
have
installed
the
latest
version
of
the
yeoman
templates,
there's
some
additional
switches
available
in
here.
So
let
me
slightly
change
that.
So
here
we
go
so
we
can
call
the
solution
tutorial
because
I'm
not
actually
gonna.
A
But
this
is
just
the
initial
structure
and
initial
starting
point
for
your
development,
which
is
getting
scuffled,
and
so,
if
I,
for
example,
just
list
common
threads,
it's
going
to
ask
me,
add
the
hello
name
for
it
and
then
the
description
and
then
it's
going
to
do
the
scaffolding
in
the
preview
when
it
gets
knotted
the
field
option
is
the
only
one
which
actually
has.
Let
me
actually
show
that
which
only
has
only
has
the
framework
selection
type.
A
So
if
I
go
to
the
field
customizer-
and
we
do
this-
we
can
actually
see
that
there's
the
node
JavaScript
framework
and
react
to
be
100%
clear
on
that
one
as
well.
You
can
always
start
with
the
node
JavaScript
framework
and
then
again,
who
can
react?
Angular,
knockout,
whatever
on
that
project
as
well?
The
initial
scaffolding
is
just
giving
you
the
starting
point.
It
doesn't
mean
that
angularjs
would
not
be
supported.
A
You
can
absolutely
use
angularjs
if
you're
using
a
new
version
of
the
angularjs
or
angular,
then
there's
some
considerations
on
that
one,
but
that's
a
different
topic.
So
let's
not
actually
go
on
that
one
today
now
so,
let's
actually
use
the
comment.
Let's
use
the
field
extensions
to
start
with
as
I'll
code,
there
OOP
CD
field
extension
chemical
and
let
me
clear
that
one
on
the
start
code,
which
is
actually
already
running
so
here
we
go
so
the
field
extension
solution
is
looking
exactly
the
same
as
client-side
web
parts.
A
It
doesn't
really
matter,
are
using
client-side
web
parts
or
extension.
It's
going
to
scuttle
the
basic
structure,
which
is
looking
exactly
the
same.
So
the
config
folder
has
familiar
configuration
files.
The
package
solution
is
there,
the
configuration
is
there
and
all
stats.
So
if
you
have
done
client-side
with
part
development
in
a
sense
exactly
the
same
structure,
all
of
the
tasks
are
exactly
the
same
as
well,
so
to
quickly
pinpointing
that
one
out.
So
if
we
do
call
it
tests,
we
can
actually
see
that
the
basic
structure
is
exactly
the
same
within
the
solution.
A
There
we
go
exactly
the
same
set
of
commands
which
are
available
that
as
well
after
this
update
as
well
in
the
because
this
is
a
client-side,
sorry
filled
extinct,
filled
customizer
and
we
by
default
provision
you
this
fill
customizer
in
the
air
starting
point,
and
in
this
case
we
already
slightly
extended
that
implementation.
So
what
we've
done
is
that
we
overwrite
the
on
render
soap
and
to
essentially
show
a
bar
related
on
the
percentage
of
the
value.
So
this
is
meant
to
be
used
with
a
a
number
field
and
based
on
the
seller,
value.
A
We're
then
increasing
the
wife
of
the
internal,
and
if
so,
it
will
then
show
that
in
a
graphical
way,
within
the
UI
now
obvious
with
wanna
test,
is
we
want
to
do
debugging
of
this
code?
When
you're
modifying
your
code,
we
want
to
debug
the
code
as
well,
so
how
do
we
actually
do
that
you,
the
workbench,
isn't
usable
because
it
doesn't
yet
support
extensions,
we're
looking
at
the
black
mentioned.
We
are
looking
at
that
support
there
in
future,
but
you
can
actually
do
debugging
against
the
live
data
in
a
SharePoint
Online.
A
Now
let
me
show
how
that
can
be
actually
done.
So,
first
of
all,
we
need
to
have
this
ID,
because
when
you
scaffold
your
project,
the
ID,
the
good
for
the
extension
and
will
be,
will
be
unique.
If
you
use
this
exist,
existing
existing
naviga
existing
ad
extensions,
you
can
actually
use
the
query,
parameter
directly
from
readme
file
and
let
me
actually
get
this
one
and
slightly
explain
that
so
I'll
start
a
note
that
and
put
that
one
in
there.
So
we
can
actually
have
a
quick
look
under
what
does
it
actually
contain.
A
So
here
we
go.
So
what
we're
doing
here
is
that
essentially
we're
in
achtung
SharePoint
list
or
a
library
to
load
the
extensions
from
a
on-premises
from
your
localhost,
so
we're
pinpointing
at
a
manifest
file
in
the
localhost.
Then
we
need
to
have
that
unique
grid
which
we
just
covered
and
then
I
can
bypass
also
properties
in
if
the
extension
is
interested
on
the
properties.
So
let's
actually
do
this
one
in
practice.
So
let's
answer.
B
A
Yes,
good
point,
so
I
somehow
skipped
that
one
completely.
So
here
we
go
we're
saying,
fill
customizers.
This
is
a
few
customers
that
we're
saying
the
field
name
and
then
we
are
associating
that
client-side
component
ID,
concise
component
properties,
dynamically
using
this
query,
parameter
the
top
field
and.
A
It
should
be
the
internal
name,
but
to
be
fair
now
that
you're
asking
that
I
haven't
tested
that
and
but
let's
actually
double
check
that.
Obviously
this
is
a
dev
preview.
If
it's
not
a
internal
name,
we
need
to
make
sure
that
it's
an
internal
name
but
I'm
pretty
sure
99%
sure
that
it
is
an
internal
name
but
technically
I
haven't
double
checked
that
so
I
can't
say
for
sure.
I
don't
want
to
lie
now.
A
So
let's
actually
go
to
our
site
which
we're
going
to
use
for
testing
and
and
because
I'm
using
the
percentage
value.
Let
me
actually
create
a
new
list
here,
so
let
me
create
a
list
gold.
It
doesn't
really
matter
but
I'm
creating
a
list
rather
than
using
existing
document
folder.
Let's
call
this
orders
and
create
that
list
to
our
site,
creating
delegate
and,
and
then
we
wanna
yeah
I,
know
that
it's
modern
side
or
than
list
thank
you
so
and
I
want
to
actually
create
a
number
field.
And
let's
give
this
a
name
percent.
A
We
cannot
test.
Obviously
the
querystring
parameter
as
well,
if
needed,
but
let's
make
sure
that
it's
right
there
we
go
now
we
have
a
list
with
two
fields
and
to
be
able
Dober
to
see
the
different
presentation
for
the
field
customizer.
Let
me
add
a
few
items
here:
item
a
and
percentage.
It's
30
and
let
me
add
another
one
as
well,
so
you
actually
see
the
different
behavior
e
and
percentage
value
is
ad
good.
A
So
now
we're
on
the
list-
and
in
here
we
can
collect
mention.
We
can
use
the
query
parameters
as
long
as
our
localhost
s
actually
running,
so
we
will
dynamically
load
at
the
manifest
and
the
extension
from
the
localhost
so
I'm
going
to
actually
copy
this
value.
Technically.
In
this
case,
my
customization
doesn't
care
about
the
properties,
but
we
can
leave
them
there.
It
doesn't
really
matter
in
this
case,
and
I
can
come
in
here.
I
can
get
rid
of
all
of
the
additional
stuff
from
the
URL.
A
Technically
it
can
be
there,
but
it's
just
easier
to
show,
what's
actually
happening,
so
we're
in
all
items,
URL
and
I'm
kind
of
paste
in
that
full
string
as
a
query
parameters
in
which
is
saying,
load,
SPF,
X,
localhost
from
a
local
host
and
that's
the
customizer
and
that's
the
field.
So
let's
do
that
and
this
case
you
can
a
a
warning
around
the
debug
manifests
and
so
I
can
actually
then
say.
Yes,
please
do
load
the
scripts
and
voila.
We
have
a
different
presentation
for
the
field
customizer.
A
B
A
Also
do
debugging
in
here
as
well
so
getting
in
here,
which
we
haven't
done
it
that's
awesome
job
of
explaining
how
to
do
this,
but
there's
my
code.
Oops
actually
explained
that
that's
my
customizer,
this
duck
shellcodes,
so
I
can
put
a
breakpoint
in
here.
Let's
request
this
one
of
get
in
so
we
can
actually
hit
that
one
to
happen
in
practice.
Look
come
on
press
Enter
that
helps
so,
let's
load
the
debugging
scripts
and
there
we
go
we're
hitting
a
paper.
So
then
I
can
actually
do
analyzer
softer.
A
A
B
A
Particular
case
in
the
application
customizer
that
there
can
expect,
but
in
the
field
customizer
and
the
field
presentation,
I
haven't
technically
IP
n
I
haven't
tested
this
point
myself.
It's
good
point
I
should
actually
test
on,
but
it
should
actually
overwrite
the
value.
So
it's
not
meant
to
be
that
you
will
have
multiple
field
customizers
in
a
single
field,
and
why
is
that?
Well
that
the
reason
for
that
one
is
that
we
are
associating
right
now.
Technically,
the
field
customizr
using
the
client-side
component,
ID
client-side
component
properties
in
an
SB
field
object.
A
So
let's
actually
quickly
have
a
look
on
that
one.
It's
create
segue
and
to
actually
show
this
one
as
well.
So,
if
I
true,
if
I
want
to
automate
my
full
deployment
off
the
opposite
of
my
field
and
everything
else
and
my
my
application
customizer
sorry,
my
field
customers
are
being
associated
directly
to
the
field.
A
I
can
do
that
using
the
feature
XML
or
remote
provisioning
techniques
in
the
tutorial
demos,
we're
actually
using
feature
XML,
so
you're
able
to
deploy
the
customization
to
size
and
then
associate
this
percentage
field
to
a
list
and
voila
it
will
work.
So
there
only
one
property
within
the
SP
field,
which
is
the
client-side
component
ID
and
the
client-side
component
properties.
So
you
cannot
actually
have
multiple
component
associated.
B
A
So
the
additional
thing
is
the
client-side
component
properties,
so
in
our
tutorials,
if
I'll
actually
break
this
one
and
we
actually
show
how
to
do
that
in
the
app
app
customized
extensions.
So
let
me
actually
show
you
them,
because
it
is
likely
to
be
a
slightly
complex
to
actually
get
it
configured.
That's
a
good
discussion
pointer.
So
in
the
application
customizer
we
are
actually
bypassing
slightly
is
slightly
at
just
assuming
there
we
go
bypassing
the
client-side
component
properties
as
well.
A
A
You
click
that
and
let's
do
a
quick
demo
also
on.
So
what
we
have
on
the
comment.
Extension
so
OOP,
CD
comment,
expansion
actually
helps.
So
let
me
clear
that
one
and
we
are
in
the
comment,
extension
folder.
So
let
me
actually
as
well
and
let's
go
to
the
source.
This
is
a
common
set.
The
comments
that
look
slightly
different.
It
has
a
slightly
different
looking
manifestation
over.
The
basic
structure
is
the
same,
but
you
actually
define
those
commands
which
are
visible
in
here
and
then
this
is
the
unique
identifier
for
your
code.
A
B
A
Absolutely
cute
question
as
well,
so
right
now
and
this
these
are
just
a
placeholders
for
the
image
URL,
so
you
can
do
absolutely
so
without
an
issue
of.
Let
me
rephrase
that
so
if
we
want
them
to
work
properly
today
in
the
Deaf
preview,
we
will
need
to
use
a
absolutely
or
else
to
pinpoint
to
the
actual
images.
A
So,
in
the
solution
structure,
there
is
no
default
images
or
sample
images
available,
we're
looking
into
having
the
traditional
logic
in
the
in
the
packaging
so
that
you
can
easily
have
to
be
the
assets
and
the
images
in
the
solution
package
as
well,
and
apparently
there's
a
one
MVP
called
Waldeck
who
has
written
something
related
on
this
one
in
sir,
what
what
who'sa
and
but
right
now
in
the
dev
preview
and
the
icon
image
URL.
If
you
want
to
have
that
one
working
properly,
you
will
need
to
use
absolute
URLs.
A
So
that's
more
limitation
for
now.
No,
let's
have
a
look
on
this
one
in
practice
as
well,
just
to
show
you
how
it
actually
works
like
nation.
This
is
relatively
simple:
we're
just
opening
up
a
dialogue
and
showing
some
value
there,
and
but
let's
flip
back
on
here,
let's
do
call
serve
and
no
processor,
because
a
point
of
opening
up
the
local
workbench
start
doing
that.
A
Then
I'm
going
to
go
to
the
readme,
because,
obviously,
how
could
you
remember
the
debugging
URLs,
so
I'm
going
to
actually
take
the
debugging
URL
from
here
and
let
me
double
check.
The
values
is
74
and
vector
to
read
me
and
we
can
say
that
it's
a
74,
so
all
good.
So
now
in
here
this
is
looking
slightly
different.
So
let
me
go
back
on
the
on
the
notepad,
so
we
can
actually
more
easily
say
this.
This
one
is
looking
slightly
different
than
the
field.
Customers
are
because
again
it
has
a
slightly
different
behavior.
A
What
we're
doing
here
is
that
we
are
essentially
saying
that
we
have
a
custom
action.
I
took
a
common
set,
customizer
or
common
set,
and
then
we're
saying
that
the
location
is
client-side.
Extension
leads
to
a
command
set
command
bar
and
using
this
you
can
actually
adjust
where
the
button
is
being
visible.
A
So
you
can
actually
do
a
common
set
or
command
set
dot
context
menu,
which
was
actually
mean
that
it's
visible
in
the
context
menu
on
the
on
the
on
the
list
or
you
can
actually
get
rid
of
the
whole
additional
thing
here,
and
this
would
mean
that
the
button
is
available
OOP
in
the
context
menu
and
in
the
toolbar.
So
let's
actually
test
that,
let's
go
check,
our
localhost
is
running.
That's
cute
and
let
me
go
back
on
my
my
browser,
so
where's
my
pro
side
there's
no
process
there.
We
go.
A
Let's
change
the
debugging
URL,
so
I'm
going
to
actually
get
rid
of
that
it
will
go
through
all
items
today,
as
the
X
and
pasted
other
debugging
URL
in
okay.
It's
going
to
again
warn
me
on
the
debugging:
manifests
load
epoch,
scripts
onto
it,
and
there
we
go
now.
We
can
say
two
additional
commands
here
and
if
I
do
and
context
menu,
I
can
see
those
fellows
here
as
well
and
if
I
click,
for
example,
the
common
two.
A
It
is
using
the
dialogue
framework,
so
I
can
do
something
like
hello
there
from
a
demo
and
then
clicking
okay
and
then
inserting
an
alert
offer
additional
information.
Now
the
dialogue
dialogue
thing
isn't
explicitly
only
for
extensions.
It's
going
to
be
available.
Client-Side
web
parts
as
well
and
you're
able
to
do
different,
UIs
you're
able
to
do
all
of
the
UI
modifications
and
controlling
what's
physically
in
the
dialogue,
will
get
more
documentation.
B
Are
absolutely
so
far,
so
so
good
using
that
I
wonder
about
whether
there
is
a
valid
case
for
extensions
or
commands
has
to
do
be
available
both
within
toolbar
and
the
menu,
whether
that
would
be
well
I
can
see
that
you
you
can
do
that,
but
where
there's
a
valid
case
to
actually
do
that
in
practice.
True.
A
That's
that's
a
fair
comment
so
and
obviously
we
can
absolutely
test
that
only
in
common
core
and
it's
it's
based
on
your
business
requirement.
It
is
up
to
you.
How
do
you
want
to
make
this
visible
and
where
so
right
now,
because
we
changed
the
location,
so
let
me
actually
zoom
there
to
be
a
slightly
different
zooming
there.
We
go
so
I
added
the
comment
bar
here,
so
it's
actually
saying
that
it
should
be
only
no
comment
or
so
again
after
you
on
the
business
case,
what
I'm
going
to
do
and
how
does?
A
Right
now
the
donor
locations
where
they
are,
they
are
in
the
readme
files
in
in
the
examples,
so
we
put
it
in
there
and
they're
aligned
with
the
unique
ID
of
the
tutorial
or
the
decorative
stuff
on
documentation,
like
I
said.
So,
if
you
go
through
the
tutorials,
so
if
I
scroll
down,
for
example,
let's
open
a
field
customizer
and
scroll
down,
when
we
actually
do
debugging,
we
can
start
a
a
typically.
These
are
debugging
URLs
and
this
actual
consistent
information
also
on
what
they.
A
What
those
individual
attributes
are
now
it
would
be
created
if
it
would
actually
output.
For
example,
this
query
parameters,
as
well
as
part
of
the
gulp,
serve
events,
and
there
is
an
ongoing
initiative
around
doing
a
custom
command
command
for
that
which
will
be
most
likely
share
through
PNP
at
some
point
so
or
producible.
B
A
Is
he
a
real
guy
or
if
it's
not
too
much
and
anything
else
comes
to
mind,
I
think
we
went
through
the
scaffolding.
We
went
through
the
structures.
We
had
a
quick
look
on
the
implementation
in
this
demo
with
into
application
customizer,
but
it
works
exactly
the
same
way,
maybe
just
to
complete
all
of
the
demos.
I
can
do
that
as
well.
A
So,
okay,
let's
go
to
the
application
extension
application,
customizer
and
copy
the
that
one
that
should
be
all
aligned
and
if
it
isn't
relaxed
then
I
started
also
workbench.
It
doesn't
matter
so
here,
let's
slip
in
in
the
URL
and
get
rid
of
that.
The
back
URL
paste
in
that
Deepak
URL
enter
and
we
should
have
a
application
customizer
loaded
on
this
page
and
yes,
we
do
so
taking
advantage
of
the
Bates
placeholders
I.
A
A
Just
let
us
know
this
is
an
issue
list
which
is
going
to
replicate
it
in
our
internal.
These
are
study
online
as
well,
so
we're
closely
closely
following
up
on
what's
coming
from
the
CPF
what's
coming
from
the
community,
but
let's
sleep
back
on
the
slides
and
talk
about
the
actual
deployment
process
of
an
extension,
and
we
can
do
another
webcast
on
that
one
later.
But
let's
walk
through
what
does
it
actually
mean
that
I'm,
when
I'm
deploying
an
an
extension
to
a
sharepoint
online
without
running
that
from
a
local
host?
A
So
before
closing
one
few
things
to
just
nation
on
the
deployment
of
the
extensions?
This
is
just
the
steps
to
kind
of
a
walk
through
the
actual
deployment
process.
So
you
do
the
development
within
your
local
box.
You
can
do
testing
and
debugging
of
your
customization
using
the
debug
query
parameters.
Then,
when
you
decide
that
you
want
to
actually
deploy
the
stuff
to
the
sharepoint
online,
you
need
to
obviously
decide
where
you,
where
you're,
going
to
host
your
javascript
file.
So
what
is
there
CDN
hosting
a
location?
A
It
could
be
again
a
library
within
a
sharepoint
online
tenant
or
it
could
be
a
CDN
location
in
a
share
or
wherever
and
when
you
have
that
decision
done,
and
you
update
the
target
hosting
URL
for
the
solution
and
copy
the
assets
to
the
CDN.
So
you
essentially
make
your
stuff
available
in
the
CDN.
Then
you
package,
the
solution.
You
deployed
that
solutions
to
app
catalog,
so
it
will
be
available
to
be
installed
on
a
site
level.
A
Then
you
go
to
the
site
where
you
actually
want
to
use
this
district
station
and
you
install
the
add-in
or
HSB
FA.
It's
not
an
atom.
In
this
case
it's
the
SharePoint
favorite
solution,
install
that
to
the
site
and
then
it's
matter
of
associating
the
client-side
component,
ID
in
the
user,
custom
actions
or
or
in
the
field.
So
getting
that
one
done
can
be
part
of
the
solution,
installation
or
it
could
be
part
of
the
remote
provisioning
process.
A
So
you
can,
you
see
some
rest
publish
all
even
to
set
those
things
up,
there's
a
few
things
which
we
didn't
explicitly
cover
in
the
intro.
So
we
mentioned
the
client
side
component,
ID
Association.
There
is
actually
client
side
component
properties,
property
as
well
for
the
user,
custom
actions
and
SP
field,
and
that
can
be
used
to
bypass
parameters
for
the
instance
of
the
extension
and
what
I
mean
with
that
one.
A
Is
that,
as
an
example,
you
might
have
a
generic,
let's
say
and
make
a
menu,
and
then
it
might
have
a
parameter
which
is
indicating
how
the
nikah
menu
would
be
actually
rendered,
and
so
you
can
bypass
parameters
for
one
site
in
a
set
different
parameters
than
to
another
side.
But
your
implementation
and
the
code
is
exactly
the
same,
so
you
can
permit
recite
the
specific
instance
from
that
perspective,
and
also
we
know
that
right
now.
A
The
fact
that
you
need
to
install
these
packages
one
by
one
to
the
existing
sites-
and
it's
no
doubt
a
pretty
big,
let's
say
a
limitation,
so
we're
looking
into
having
additional
options
on
them.
So
you
in
the
future
you're
able
to
define
in
the
solution
that
this
particular
customization
should
be
available
across
all
the
sites
automatically
without
installing
that
to
the
side,
and
then,
in
the
case
of
an
extension.
A
That
scenario,
then,
would
mean
that
you
would
skip
step
number
five,
but
you
would
still
have
to
do
it
step
number
six,
but
you
can
absolutely
easily
do
that
using
let's
say
a
loop
within
a
powershell,
and
so
they
associate
the
client-side
component
ID
in
the
cycle.
Action
use
the
custom
action
collection
and
both
your
header
or
footer
or
whatever
is
visible
across
all
of
your
site
collections.
B
A
B
And
before
we
close
I
want
to
ask
one
more
thing
right,
so
you
mentioned
that
you
can
use
the
properties
to
associate
or
do
you
can
use
property
to
store
properties
so
that
you
don't
need
to
pass
them
through
the
query
string
and
you
use,
as
example,
the
how
to
show
mega
menu
right
yep.
So
what
if
you
want
to
have
something
like
you
would
want
to
show
it
on
the
whole
site
collection
in
sirs
in
in
a
way,
and
then
in
one
side
you
would
like
to
override
it.
B
A
What
really
depends
on
the
implementation
of
the
customization,
but
by
default
you
would
be
showing
it
twice,
because
you
would
have
to
associate
a
different
user
connection
to
the
site
level.
On
that
specific
side,
you
would
have
a
site
collection
level
association
and
then
for
specific
signs
and
make
their
site
levels
association
or,
alternatively,
what
you
could
do
is
that
you
associate
the
extension
to
in
the
site
level,
not
in
the
site,
collection
level,
and
only
for
that
particular
site.
You
slightly
different
property
setup,
and
then
that
would
behave
differently
right.
A
A
A
Exactly
you
could
have
a
centralized
list
in
a
root
of
the
tenant
where,
where
you
have
Extension
exceptions,
and
then
your
code
is
checking
configuration
from
there
and
changing
the
behavior
based
on
them.
So
even
in
the
makeup
menus
scenario-
probably
you
don't
want
to
Hart,
go
to
your
maker
menu
items
to
your
attention
code
and
it
would
be
rare
for
awhile
to
actually
get
them
from
a
list
doing
a
query.
Analyst
cache
that
in
a
local,
cookie
or
local
store
and
then
render
the
menu.
A
That's
probably
right
thing
to
do,
which
would
be
a
good
scenario
to
actually
get
an
sample
in
archetype
repo
for
this
ones.
That's
actually
a
good
point.
We
need
to
put
it
in
our
to
the
list
unless
somebody
from
the
community
is
there
faster,
but
I
think
that's
it.
So
we
wanted
to
do
really
kind
of
an
introduction
level.
A
Webcast
on
this
we'll
do
deeper,
deep
dive
on
this
options
and
under
ployment
options
on
the
extensions
as
well
with
walk
about
talk
about
those
and
details
and,
if
you're,
looking
into
having
already
those
details
today
there
are,
there
is
the
tutorials
available
documentation
available
and
the
tutorial
videos
and
tutorials
written
tutorials
are
showing
also
the
deployment
mechanism
for
all
of
those
three
different
extension
times.
So
you
can
have
a
look
on
that
guidance
which
is
available
in
the
decorative,
comes
our
SharePoint
or
akms
SPF
X
XPS
VFX
extensions.
A
So
you
can
easily
access
that
information.
It
will
be
also
in
the
web
notes,
but
Thank
You
valdek
for
joining.
Thank
you
for
good
questions
and
kind
of
a
typical
questions.
What
probably
audience
would
be
asking-
and
we
will
definitely
go
to
the
extensions
quite
a
few
times
and
more
advanced
scenarios
also
in
our
community,
calls
so
feel
free
to
drop
by
in
the
special
interest
group
call,
for
example,
for
SharePoint
framework
and
then
ask
questions,
and
we
can
explain
how
things
are
working,
but
thank
you,
multics.
Any
last
words
from
your
sign
I
would.
A
Absolutely
absolutely
don't
be
a
stranger.
Let
us
know
if
there's
something
what
you
don't
like
or
something
which
should
be
improved.
Although
the
debugging
experience
is
I,
don't
like
it.
Let
us
know
there
are
certain
things
which
we
know
that
we
need
to
address,
but
the
fact
that
we're
getting
the
demand
from
the
developers
which
are
non-microsoft
people
and
that
gives
us
a
stronger
indication
on
the
demand
and
then
we
can
pre
profile
prior
prioritize
our
work
based
on
the
the
in
booth
budget
of
giving.
A
So
please
let
us
know
what
do
you
need
what's
working?
What's
not
working,
for
example,
what
kind
of
placeholders
you
need
on
a
base
and
all
of
that,
so,
let's,
let's
stay
in
touch
Thank,
You,
waldek
and
check
out
the
tutorials
check
out
the
the
new
codes
play
around
and
let's
make
SharePoint
beautiful
again.