►
From YouTube: PnP Webcast - SharePoint Framework Dialog Framework
Description
In this webcast we concentrated on the SharePoint Framework Dialog Framework and how it can be used within SPFx solutions. Dialog Framework is a convenient way to show dialogs or ask input from the end users as needed. More details on the covered topics from http://dev.office.com/blogs
A
B
To
the
SharePoint
founders
and
practices,
webcast
and
system,
we'll
have
a
look
on
the
dialogue
framework,
which
is
one
of
the
capabilities
available
in
the
SharePoint
framework.
So
when
you're
implementing
something
using
the
SharePoint
framework,
what
parts
or
extensions
you
can
take
advantage
of
this
dialog
framework
within
your
implementations,
my
name
is
les.
Are
you
gonna
I'm,
a
Senior
Program
Manager
from
SharePoint
engineering
and
with
me
today,
as
the
primary
speaker
is
the
Paulo
P
LRC
Paulo?
Will
it
really
quick
interests
as
well?
Yes,.
A
B
Cool
so
today
talk
about
the
dialogue
framework,
and
this
is
something
which
was
released
as
part
of
the
ship
on
framework
extensions,
so
as
part
of
the
extension
released
back
in
September
in
ignite
timeframe,
this
was
introduced
to
be
available
for
you
to
take
advantage
and
will
reference
all
of
the
our
existing
tutorials
and
samples
around
this
one
in
the
webcast
notes.
But
let's
concentrate
what
is
it
and
let's
do
a
live
demo
on
that
one
and
Polo's
can
delete
presentation
so
take
it
away.
Okay,.
A
Thank
you.
So,
let's
start
introducing
the
dialogue
framework,
which
is
basically
a
framework
that
you
can
use
in
whatever
shape
and
frame
or
solution.
It
can
be
a
client-server
part
in
extension.
So
far,
those
are
the
options
that
we
have,
but
more
in
general.
You
can
use
it
in
SharePoint
framework.
Whenever
you
want
to
use
or
to
create
a
dialog
box
or
a
dialog
window
in
the
UI
of
your
solutions,
you
can
use
different
options.
A
For
example,
you
have
the
dialog
alert
to
just
provide
an
alert
to
the
end
users
as
long
as
you
can
see
in
the
lower
right
corner
of
this
slide,
or
you
can
do
a
dialog
prompt.
If
you
want
to
prompt
the
user
for
an
input
for
an
Oscar
or
you
can
create
custom
dialog,
which
is,
let
me
say,
my
favorite
option,
which
is
the
one
I
really
like
of
the
dialog
framework.
It
is
ready
to
use
in
sharpen
framework,
and
it
is
fully
integrated
with
the
modern
UI
of
SharePoint.
A
So
it
allows
you
to
create
real
solutions
with
a
real
and
fully
integrated
UI
Flint
elated,
with
the
sharp
point
from
a
technical
perspective,
the
key
components
or
key
types
that
you
have
in
the
dialog
framework
are,
first
of
all
the
base
dialogue
type,
which
is
a
base
class
that
you
can
use
to
build
every
custom
dialogue
window.
So
whenever
you
want
to
create
a
dialogue,
you
just
need
to
extend
to
inherit
the
base
dialogue
and
you
are
good
to
go.
A
You
can
use
the
dialogue
1,
which
is
a
static
class
which
provides
the
alert
and
the
prompt
methods
to
create
the
alert,
dialogue
or
deform
dialogue,
and,
moreover,
you
also
have
the
secondary
dialogue
provider,
which
we
will
not
cover
in
this
webcast,
maybe
in
a
future
one.
But
this
allows
you
to
create
multiple
layers
of
dialogue.
So
let's
say
you
have
a
dialogue
window
and
you
wanna
from
the
user,
with
one
more
dialogue
with
an
alert
or
with
a
prompt.
You
can
use
the
secondary
dialogue
provider
to
achieve
this
goal.
A
So
those
are
the
main
types
that
you
have
and
let
me,
for
example,
explain
you
how
to
use
the
out-of-the-box
basic
dialog
boxes
like
the
alert
and
the
prompt.
If
you
wanna
make
an
alert,
you
will
simply
need
to
import
the
dialogue
framework
types
and
like
the
dialogue,
a
static
class
and
you
can
say,
dialogue,
alert
and
you
will
have
to
provide
a
message
which
will
be
the
content
of
the
alert
as
well
as
optionally,
the
eye
alert
options,
type
which
will
simple
ow
you
to
confirm.
A
If
you
want
to
open
or
not
the
alert
window
using
a
callback
function,
let's
say
that,
for
example,
you
wanna
intercept
the
popping
up
of
the
alert
window
and
using
a
callback
function.
You
want
to
define
if
you
really
want
to
show
the
alert
or
not,
moreover,
to
do
a
prompt.
You
simply
need
to
say
dialog
that
prompt
and
one
more
time
you
provide
the
message
and
you
can
provide
some
option
through
the
I
prompt
options,
interface,
which
can
define
a
default
value
for
your
prompt.
If
any.
A
If
you
need
the
full
value,
I
mean
on
the
other
side.
If
you
want
to
create
my
favorite
ones,
so
the
custom
dialog
boxes
you
will
inherit,
you
will
have
to
inherit
from
the
base
dialogue
type
and
you
can
configure
the
dialogue
using
an
I
dialog
configuration
interface,
so
an
object
which
will
implement
this
interface
and
within
the
customer
dialogue
inherit
from
this
dialog.
A
You
can
use
method
like
on
before
open
to
intercept
the
opening
of
the
dialogue
before
it
is
fully
opened
on
the
screen,
as
well
as
the
open
method
to
react
to
the
opening
of
the
window
to
the
dialogue
window.
You
can
implement
the
render
method
to
do
the
rendering
of
your
dialogue,
and
we
will
see
this
one
in
the
upcoming
demo.
A
A
We
have
components
like,
for
example,
the
dialog
content,
as
you
will
see
in
the
upcoming
demo,
so
it's
a
small
framework
but
really
powerful
to
create
nice
UI
and
with
nice
dialog
boxes
in
the
SharePoint
framework
solutions.
So
if
you
agree,
visa
I
would
like
to
move
to
the
demo
solution.
As
long
as
you
don't
have
anything
else
to
add.
On
top
of
these
basic
introduction.
A
So
let
me
show
you
here:
we
have
a
modern
theme
site
in
SharePoint
Online
and
we
have
a
document
library,
the
out-of-the-box
one
is
share
document,
one
in
which
we
have
a
custom
command
set,
which
is
called
discuss
now
common
set.
Whenever
you
select
a
document
in
the
document
library,
you
can
click
on
the
viscous
Now
button
in
the
area
in
the
top
area
of
the
screen
here
or
you
can
use
the
ECB
menu
here
and
click
the
discuss
Now
button.
A
Whatever
will
be
your
choice,
you
will
have
a
cast
on
dialog
box
which
have
been
built
has
been
built
using
the
SharePoint
framework
dialog
framework.
Now
the
wire,
the
wire
of
the
dialog
box,
is
built
using
the
dialog
framework.
The
content
of
this
dialog
is
built
using
official
fabric
dialog
content
component
and
inside
of
the
component.
We
are
using
a
bunch
of
out-of-the-box
components,
react
components
of
a
fishwife
fabric,
so
this
is
a
clear
example
of
what
you
can
do
using
dialog
framework
in
a
SharePoint
frame
or
solution
like
a
next
time,
for
example.
A
So
let
me
explain
you
how
this
solution
works,
so
I
will
go
back
if
we
just
look
good,
and
here
we
have
a
common
set,
the
common
set,
which
was
which
is
not
the
main
topic
of
this
webcast,
so
I
will
not
be
into
the
details
of
the
common
set
by
itself,
but
the
common
set
as
an
execute
on
execute
method
in
which
we
simply
create
the
instance
of
the
dalek,
and
we
show
the
dialogue
go
through
the
end
user.
So
what
we
do
here,
we
get
some
input
argument
from
the
currently
selected
item.
A
We
create
a
new
instance
of
an
object
called
scheduled
meeting
dialogue,
which
is
the
one
we
used
to
create
the
dialogue
window
for
setting
up
a
new
meeting
to
discuss
now
about
the
currently
selected
document.
We
set
up
few
properties
for
the
dialogue
window
that
we
just
created,
and
then
we
show
the
dialogue
using
the
show
method
that
I
told
you
before.
A
So
the
key
point
is
how
the
scheduled
meeting
dialogue
words
inside,
so
let
me
dig
into
it
as
I
told
you,
this
is
a
class
which
extends
extends
the
base
dialogue
type,
which
is
provided
by
the
dialogue
framework.
If
we
go
into
this
type,
as
you
can
see,
and
we
have
a
bunch
of
information,
we
have
the
config
paramah,
we
have
a
constructor.
We
have
all
of
the
methods
that
we
can
override.
A
Indeed,
in
the
custom
dialogue
that
we
created,
if
I
go
back
to
my
scheduled
meeting
dialogue
here,
we
have
the
get
config
method
in
which
we
simply
define
that
from
an
I
dialog
configuration
perspective.
This
dialogue
is
not
blocking
the
UI,
so
is
blocking
force.
Moreover,
in
the
render
method
that
we
override
in
this
custom
type,
we
say:
okay
using
the
react,
Dom
type
render
a
custom
component.
A
A
Yeah,
exactly
exactly
so
when
we
create
a
new
instance
of
the
type
we
can
set,
the
properties
of
the
dialog
type
and
those
properties
are
used
here
to
configure
the
dialog
content.
Moreover,
we
have
a
submit
function
which
we
simply
plug
into
the
submit
event
of
the
dialog
content
and
which
will
be
used
to
create
using
the
Microsoft
broth
one
more
time.
This
is
not
the
main
topic
of
this
webcast,
but
using
the
micrograph,
we
create
a
new
meeting
in
the
office
with
five
group
calendar
under
the
cover
of
the
team
side.
A
Modern
team
site
in
which
we
are
but
again
I
will
not
dig
into
the
details
of
how
to
create
a
meeting
using
a
micrograph.
Even
if
you
can
still
see
how
to
do
that,
once
you
will
download
the
source
code
of
this
sample
solution,
I
want
to
focus
my
attention
on
the
dialog
framework
right
now,
so
the
scheduled
meeting
dialog
content
component
is
defined
just
before
this
one,
and
here
it
is,
and
it
is
just
the
type
that
extends
the
base
Riyadh
component.
A
It
has
a
custom
interface
for
the
properties
and
a
custom
interface
for
the
state.
As
like,
as
many
other
react
components
out
there
and
in
the
constructor,
we
simply
define
some
default
values
for
the
state
variable
and
the
key
method
is
one
more
time
give
render
method.
Here
we
use
the
dialog
content
react
component
from
a
fishwife
fabric.
We
define
the
title,
the
subtext,
what
to
do
on
on
this
Mesa
and
if
we
want
to
show
the
close
button
or
knots
for
the
dialogue
content.
A
Moreover,
using
a
bunch
of
HTML
and
office
white
fabric,
we
have
components,
we
define
the
UI
and
the
content
of
the
UI
of
the
dialog
content.
As
you
can
see
here,
we
have
the
text
field
that
we
had
here
in
the
discuss
now
dialog,
we
will
have
the
controls
to
define
the
date
and
the
time
of
the
meeting
and
the
duration
of
the
meeting,
which
can
be
any
of
the
four
available
values.
So
we
have
the
subject.
We
have
a
date/time
picker
control,
which
is
a
custom
control
that
we
built
in
the
solution.
A
Reusing
some
out-of-the-box
of
this
UI
fabric
react
components
as
well
as
we
have.
The
drop
down
will
be
four
options
for
the
meeting
duration.
Moreover,
we
have
a
direct
footer
component
still
from
office
way
fabric
in
which
we
have
the
common
button
to
cancel
and
the
primary
button
to
confirm
the
creation
of
the
meeting
and
once
the
end
user
will
click
on
the
primary
button.
A
A
Just
for
the
sake
of
completeness,
if
you
want
to
use
the
dialog
study
class,
as
you
can
see,
you
have
the
prompt
method
which,
as
I
told
you,
accept
the
input
string
and
optionally,
the
PI
prompt
options
or
you
can
use
the
alert
function
which
will
still
get
the
message
as
an
input,
string
and
optionally.
The
eye
alarm
options,
so
that's
it
and
you
can
create
dialogues
for
alerting
for
prompting
or
custom
dialog
boxes
to
create
your
own
UI,
built
on
top
of
the
SharePoint
framework,
dialog
framework,
anything
to
add
visa
or.
B
Really
I
think
this
is
really
great.
We
do
have
a
a
tutorials
available
on
this
one
as
well
on
samples
which
will
put
no
doubt
on
the
webcasts
and
knows
people
can
actually
find
additional
details
and-
and
it
was
linked
to
this
sample
as
well-
and
maybe
just
one
point
here-
to
to
kind
of
a
clarify.
Also,
the
dialogue
is
a
really
great
functionality
from
that
perspective,
that
it
will
keep
the
user
in
the
context
and-
and
so
people
are
not
redirected
to
another
bait
and
then
they
list
the
context.
B
Where
was
I,
what
was
I
selecting
what
were
I
was
I
actually
doing
so.
All
of
that
is
is
the
user
is
in
context
and
and
it's
not
getting
lost,
the
scaling
of
the
dialog
is
automatic.
All
of
that
is
happening
automatically
as
well.
You
don't
have
to
worry
about
that.
Obviously,
you
have
a
freak.
React
component
usage.
It's
great!
If
you
build
your
stuff
using
react,
and
this
is
a
great
sample
showing
that
as
well.
A
B
If
you
need
to
have
anything
complex,
you
take
advantage
of
the
custom
dialog
model
where
you
inherit
the
base
dialog
and
then
extend
that,
but
really
great
way
of
efficiently
utilizing
what's
available
in
the
SharePoint
framework,
and
it
works
obviously
in
any
language.
In
this
case,
we
were
using
in
framework
this
case.
We
were
using
react,
but
you
can
implement
and
take
advantage
of
this
one
using
other
frameworks
as
well.
Anything
else
pull
up
what
am
I
missing,
no.