►
Description
Recording of SPFx and JavaScript development in SharePoint Community Call from 10th of October. Topics include updates from SharePoint engineering on SPFx, latest on PnP JS Core, Office 365 CLI, Reusable SPFx controls and PnP SPFx Yeoman extension.
Detailed covered content from SharePoint Dev Blog at http://aka.ms/spdev-blog.
- Demo - David Warner (Catapult Systems) @DavidWarnerII – Introduction to Sharing is Caring initiatives – Getting started with GitHub contributions
- Demo - Aakash Bhardwaj (HCL Technologies) @aakash_316 – Building React based web parts – List Flows and page navigator web part
- Demo - Stephan Bisser (Solvion) @stephanbisser – Integrating Bot Framework v4 bots to SharePoint using SharePoint Framework
More details on SharePoint Framework library components is available from https://docs.microsoft.com/en-us/shar...
You can download an invite to this bi-weekly call from https://aka.ms/spdev-spfx-call.
You can find more details around the open-source and community work from http://aka.ms/sppnp
A
Welcome
to
the
SharePoint
framework
in
JavaScript
special
interest
group
bi-weekly:
sync,
it
is
October
10th
2019
the
year
is
flying
by
I.
Remember
introducing
the
year
like
it
was
yesterday,
so
our
agenda
for
today's
call
is
gonna,
be
the
latest
update
for
SharePoint
frame.
I
was
to
the
last
update
on
SharePoint
framework,
which
isn't
right
at
all,
and
then
we've
got
our
patterns
of
practice.
A
standard
update
so
we'll
go
over
p.m.
PJs,
the
CLI,
the
reasonable
trolls
and
as
well
the
yeoman
generator,
and
then
we've
got
three
great
demos.
A
Today,
david
warner,
a
quick
demo
on
getting
started
with
doing
github
contributions,
a
cache.
He
has
two
great
react:
demos
on
the
first
on
identifying
flows
and
then
a
really
cool
page
navigator
control,
so
excited
to
see
that
and
then
Stephane
has
a
bot
framework.
V4
example
of
how
to
work
with
the
new
bot
framework
so
excited
to
see
that
as
well
and
that's
an
extension
or
of
a
previous
sample
so
excited
to
see
how
that's
gonna
work
with
the
latest
bot
framework
changes
so
moving
right.
A
It's
really
exciting
to
see
the
stuff
people
are
building
and
it
gives
us
ideas
on.
You
know
things.
We
can
do
with
in
P
and
P
to
help
felt
a
little
bit
more
with
what
you
all
are
doing
so
do
reach
out
to
myself
or
visa
great
way
is
just
on
Twitter
DM
or
something
like
that
reach
out
to
us,
and
let
us
know
you
want
a
demo-
will
get
you
on
the
schedule.
It's
not
always
gonna
be
immediately
like
the
next
week.
A
We
are
sometimes
booked
out
a
couple
months,
but
we
will
get
you
on
the
schedule
and
would
love
to
have
you
do
your
demos
as
well
always
welcome
to
contribute
on
github,
so
you
contributing
could
take
a
couple
of
different
forms.
You
can
report
issues
to
us,
which
is
always
very
much
appreciated,
submitting
pull
requests
so
across
all
of
our
projects,
all
of
the
at
P
and
P
projects.
A
We
absolutely
welcome
and
encourage
pull
requests,
so,
whether
that's
fixing
a
bug
or
adding
some
new
functionality
definitely
encourage
you
to
get
involved
that
way
as
well
and
then
finally
always
encourage
folks
do
if
you
see
in
the
issues
list
for
any
of
the
things
somebody
has
a
question
or
an
issue:
maybe
you've
run
into
it,
or
maybe
you
know
the
answer.
If
you
could
jump
in
and
help
out
comment
there
and
give
them
the
answer
or
help
them
out.
A
That's
a
it's
a
big
help
for
us,
because
it
makes
it
a
lot
easier
for
those
of
us
on
the
core
team.
We
might
not
always
have
the
time
or
or
get
around
to
responding
to
all
those
questions.
So
if
you
happen
to
see
a
question,
you
know
the
answer
to
that's
a
great
way
to
contribute
as
well
to
help
out
other
folks
in
the
community
with
their
questions
and
their
issues
and
then,
finally,
of
course,
we'd
love
to
hear
feedback
from
everybody
on
all
the
things
we're
doing.
So,
how
are
these
calls
going?
A
What
other
documentation
needs
are
there?
Where
can
we
help?
What
other
functionality
can
we
provide,
or
other
projects
or
or
features,
might
be
helpful
for
you
and
the
work
you're
doing
and
then,
of
course,
positive
feedback
is
okay,
it's
good
for
us
to
know
what
we're
doing
well
and
we
can
do
a
little
bit
more
of
that
as
well.
So
thank
you
all
for
all
your
contributions
and
all
your
feedback.
Quick
reminders
on
our
links.
A
Akms
s/pdif
Doc's,
is
all
of
your
sharepoint
development
documentation.
Whether
you
are
getting
started
on
sharepoint
framework,
you
still
are
working
within
the
old,
not
old,
the
still
current,
but
the
app
model
any
of
those
things,
and
even
if
you're,
on
premises,
all
of
the
SharePoint
developer,
documentation
is
rolling
up
under
that
URL.
So
definitely
check
that
out.
We've
got
the
SP
dev
videos
we'll
take
you
to
our
YouTube
channel,
where
we
have
lots
of
different
videos,
including
the
recordings
of
these
calls,
but
as
well.
A
You've
got
tutorials
on
getting
start
of
a
SharePoint
framework,
getting
started
with
provisioning,
getting
started
with
p.m.
PJs
lots
of
other
topics
across
the
entire
at
PNP
space
so
definitely
check
those
out
lots
of
great
tutorials
lots
of
great
content,
some
of
its
short
forms,
some
of
it
long
forms.
So
if
you
have
a
quick,
you
know
it
kind
of
fills
the
needs
just
for
getting
started
and
then
as
well
SP
dev
issues.
That
is
your
place
to
report
any
product
issues
with
SharePoint
or
with
SharePoint
framework.
A
Those
can
go
to
that
issues
list
and
then,
of
course,
any
issues
you
find
within
at
P
and
P
resources
should
be
reported
to
their
appropriate
issues
list.
So
SP
dev
issues
is
for
SharePoint
product
and
SP
FX
issues,
and
then
all
the
various
at
P
and
P
lists
are
for
those
libraries
issues
and
with
that
I'll
turn
things
over
to
visa.
So.
B
Shipments
River
adaption
definitely
is
crowing
still
a
lot.
This
is
always
we
always
show
the
latest
numbers.
This
is
actually
including
already
yesterday's
usage,
so
the
growth
is
absolutely
out
of
this
world,
so
we
are
seeing
crowing
crowing,
crowing
usage,
I
think
on
Tuesdays
caller
said
that
it
was
fifteen
point
six
or
fifteen
point.
Four
percent
increase
on
the
shared
third
party
SharePoint
framework
use
its
in
worldwide
SharePoint
Online
in
last
month.
B
So
15.6
percent
is
a
massive
number
considering
already
where
we
are
with
the
overall
usage,
so
huge,
huge
growth,
all
the
time,
which
is
great,
nothing
too
dramatic,
oh
and
I
didn't
update
this
slide
at
all.
Actually,
since
the
the
last
community
call
because
there
hasn't
been
actually
that
much
new
stuff,
so
we're
looking
into
making
the
1.10
out
relatively
soon
with
all
three
honestly
transfer
to
provide
some
transparency,
we
are
now
prioritizing
a
defecation,
so
we
do
are.
B
We
will
execute
a
deaf
kitchen
next
week
with
a
selected
group
of
partners
and
customers,
a
treatment
where
we
can
actually
talk
about
this,
like
how
would
I
put
it
fluid
framework
and
SharePoint
framework.
The
next
direction,
where
we're
actually
heading
with
the
product
I,
will
talk
about
publicly
more
about
that
one
in
ignite.
B
So
during
load
time
of
the
page,
we
will
basically
allocate
a
certain
piece
space
for
the
application
customizer
and
then,
when
the
page
is
completely
loaded
than
the
actual
JavaScript
is
kicking
in
and
that's
going
to
then
render
on
that
allocated
area.
So
that's
basically,
then
reducing
the,
however,
at
the
Bates
flickery
effect,
which
you
might
see
right
now,
if
nicely
or
implemented
application
customizer.
So
basically,
the
page
is
moving
quite
a
lot
as
part
of
the
loading
events
and
I
went
over
to
application.
Customizer
kicks
in
almost
like
the
first
thing.
B
The
last
thing
on
the
page,
loading,
it's
just-
can
move
debates
still
and
that's
not
always
an
optimal
thing,
so
we're
now
solving
that
at
least
in
a
one
way.
This
will
be.
The
simple
way
of
solving
things
is
to
allocate
the
space
what's
actually
happening.
It
will
be
a
there's,
a
new
property
actually
on
the
custom
action
entry
of
the
of
the
extensions
and
then
there
will
be
an
option
to
and
define
this
in
the
tenant
or
destination
list
as
well.
B
A
Quick
updates
on
at
P
and
P
suite
of
stuff,
so
P
and
PJs
version
two.
We
are
working
on
that
pretty
actively
aiming
for
an
RC
beta
one
in
October
up
now
crossed
out
early
October,
because
my
personal
work
schedule
has
been
very
much
busier
than
I
had
anticipated,
which
is
always
good.
But
if
you
are
interested
in
helping
out,
we
still
have
some
some
modules
that
could
use
some
help.
There's
a
call
recording
you
can
check
out
PMP
gsv
to
start
contributing,
certainly
check
that
out.
A
That's
a
great
way
to
find
out
how
to
get
involved
and
help
us
get
that
first
beta
out
the
door
and
then
just
reminder
we're
gonna
move
the
graph
library
stuff
over,
as
is
we're
not
going
to
update
the
docs
or
tests,
but
we
have
updated
to
work
with
the
v2
core
so
with
the
import,
the
selective
imports
and
in
vocable
functionality.
So
that
is
gonna
move
over,
as
is
for
reasons,
and
then
we
will
have
a
release
on
October
11th.
That's
this
Friday
of
some
updates
for
v1.
A
We
did
miss
a
release
last
month
again
due
to
me
being
just
super
busy,
but
we've
went
through
got
a
bunch
of
bug,
fixes
and
enhancements
that
were
sitting
in
the
issues
list
for
a
while
got
those
in
have
that
release
on
October
11th.
So
if
there's
anything
you
want
to
try
and
get
submitted
prior
to
the
release,
we
will
do
the
release
Friday.
So
I
would
ask
for
you
to
get
those
in
shortly.
A
Http
github
that
IO
/p
in
PJs
for
the
docs
hash
tag
team
to
JSON
Twitter.
You
can
always
follow
me
at
mediocre.
Bowler
on
twitter
and
david
brought
up
a
good
thing
that
shouldn't
mention
we
did
for
the
first
time
in
september,
across
four
billion
requests
in
the
month
of
in
a
month,
four
pm
PJs,
so
really
kind
of
amazing
milestone
there
and
really
a
testament
to
all
the
great
work.
A
All
of
you
are
doing
with
the
library
out
there
with
your
customers
and
your
companies
to
really
support
that
and
get
it
out
there
and
it's.
It's
really
phenomenal
to
see
the
growth
and
it's
so
much
growth
we're.
Finally,
getting
a
little
bit
of
positive
traction
internally
on
getting
some
more
support.
Formal
support
around
the
libraries
so
excited
to
see
that
and
thank
you
to
all
of
you,
so
a
really
great
milestone
there
and
we
should
November
be
celebrated
a
couple
different
milestones.
So
we'll
have
some
updates
there
office
365
CLI
version.
A
Two
is
out:
there's
a
new
beta
2.2
with
support
for
retrieving
Yammer
networks,
enabling
features
and
retrieving
teams
message
replies,
so
you
can
always
install
the
latest
beta
and
him
install
gee
@pp
office
CLI
at
next,
and
that
will
give
you
whatever
the
latest
functionality
is
remember.
That's
a
beta
I
mean
the
betas
are
usually
pretty
solid
for
the
CLI,
but
anytime
you're
installing
a
beta
understand.
A
It
might
have
a
few
couple
of
things
and
of
course,
if
you
have
issues
you
could
always
report
those
to
the
issues
list,
but
the
CLI
is
a
great
cross-platform
tool
to
use
when
managing
your
your
SharePoint,
your
Azure
various
other
office.
365
capabilities
are
there
and
it's
it's
really
great,
especially
if
you're
not
able
to
use
PowerShell
or
don't
want
to
use
PowerShell.
That's
a
really
powerful
solution
for
scripting
out
deployments
and
doing
other
administrative
or
development
type
tasks.
A
kms
office
uses
five
CLI
for
more
information,
hashtag
office
365
CLI
on
Twitter.
A
There
is
as
well
a
get
ur
channel
get
ur
IM,
/
office,
365
CLI
so
definitely
check
that
out
and
get
started
with
the
CLI.
If
you
haven't
already
updates
on
their
usable
controls,
react
controls.
Beta
115
is
out
latest
controls,
file,
picker
grid
layout
and
carousel,
plus
numerous
fixes
and
enhancements
special
thanks
to
our
contributors,
an
alphabetical
order,
a
Mort,
Sahl
Hugo,
Robert,
PFC,
2k8,
whoa
man,
great
name,
Peter,
Alex,
Lewis
and
Eric.
A
B
The
industry
in
the
in
the
latest
shipment
that
we
could,
we
actually
had
a
discussion
with
wall
decor
around
this
one
as
well.
So
just
a
reminder
for
everybody.
Please
remember
to
update
your
key
topic
profiles
to
use
your
name
and
make
the
reference.
For
example,
your
Twitter
account,
if
you,
if
you
want
to
have
that
one
mentioned
or
making
sure
that
people
know
who
you
are
so
like
I
said,
be
a
f.c
2k8.
B
You
can
be
absolutely
anonymous
and
keep
on
using
that
kind
of
an
alias.
But
that
means
that
we
can't
really
acknowledge
the
awesomeness
what
these
people
are
doing.
So
there
is
somebody
behind
of
that
alias,
but
we
don't
know
who
his
or
she
is
so
it
would
be
creative
she
or
he
can
actually
then
open
up
the
profile
slightly.
So
we
can
actually
call
out
the
name
and
potential
company
and
all
of
that
stuff
what
we
brought
to
it
right.
Patrick.
Yes,.
B
A
There
save
you
a
ton
of
time
for
providing
a
rich
experience
in
your
SharePoint
framework
webparts
and
the
other
set
of
controls
are
the
controls,
react
which
are
designed
to
be
used
more
in
the
body
of
either
your
webparts
or
could
be
appropriate
as
well
an
application
customizer.
So
you
can
check
those
out
again.
A
That
is
no
change
from
the
last
updates,
but
just
a
reminder
had
major
upgrades
for
handlebars
day
s,
support
for
handlebar,
JS,
partials
and
helpers
upgrades
to
view
J
s,
support
and
then
angularjs,
bundling
updates
include
support
for
all
of
those
different
things
there
in
that
list.
I
don't
need
to
read
them
all
to
you,
I
think
you
can
all
read,
but
installing
the
latest
version
via
NPM
NPM,
install
g
@
PM,
p,
/,
generator,
SP,
FX,
link
there
to
the
documentation,
aka,
MSP
and
P
generator
and
as
well
there's
a
git
er
channel.
A
If
you
haven't
used,
the
generator
generator
is
a
great
extension
on
the
out-of-the-box
Microsoft
generator.
So
you're
gonna
get
a
quote,
unquote
standard
SharePoint
framework
project
when
you
use
the
PNP
open
source
generator,
but
you're
gonna
have
a
whole
set
of
additional
options
and
features
that
can
come
pre-installed
or
pre-configured
into
your
new
SharePoint
framework
project,
such
as
using
things
like
handlebars
and
view
having
PPA
GS
or
the
reasonable
controls,
or
the
CLI
already
installed
in
your
project
and
a
lot
of
other
great
features
around
testing
and
linting
and
other
support
like
that.
A
So
it's
it's
a
really
great
extension.
It's
a
really
excellent
way
to
create
a
new
SharePoint
framework
project
from
scratch,
but
ending
up
with
a
lot
of
stuff
that
you
normally
in
the
past
would
have
to
configure
for
yourself
on
the
out-of-the-box
generator
so
be
sure
to
check
that
out.
Another
great
tool
in
the
app
PNP,
a
toolkit
so
very
excited
to
see
that
grow
and
again
another
place.
We've
seen
a
lot
of
wonderful
contributions
from
folks
across
the
community.
So
thank
you.
Thank
you.
A
Thank
you
to
everybody
for
all
your
contributions
across
the
community
and
speaking
of
contributions.
A
great
way
to
contribute
is
through
a
demo,
so
we're
gonna
start
with
some
demos
right
now.
Look
at
that
transition!
That's
just
a
plus
stuff,
David
Warner!
If
you
are
ready
to
go,
if
you
want
to
take
over
presenting
you've,
got
a
demo
on
quick
demo
on
github
contributions
about
a
couple
minutes
on
that.
Yes,
okay,.
C
C
Now
this
is
awesome
all
these
contributions
and
as
small
as
this
font
is
I'm
gonna
go
out
on
a
limb
here
and
I'm
gonna
guess
that
vessel
would
love
nothing
more
than
to
be
forced
to
create
two
or
more
of
these
slides,
because
there
are
so
many
contributions,
but
we
also
know
that
that
sort
of
growth
probably
isn't
going
to
happen
with
just
enough
positive
encouragement
in
all
the
world,
because
there
are
certain
technical
challenges
right
that
come
with
the
github
contribution
process.
I'm
also
gonna.
C
Guess
that
there's
probably
some
on
this
call
right
now
that
would
like
to
contribute,
but
maybe
it
has
felt
a
little
intimidated
or
unsure
or
unaware
of
the
steps
needed
to
make
those
contributions
and
knowing
that
they're
all
publicly
available
when
you
make
them,
they
might
be
afraid
they're
going
to
make
a
mistake.
So
we're
going
to
help
remove
those
fears
and
provide
experience,
starting
with
sharing,
is
caring
initiative
and
we're
going
to
start
with
some
cleaner
documentation.
So
let's
go
ahead
and
look
at
that,
so
you'll
notice
that
this
documentation
has
been
updated.
C
It's
more
aligned
with
some
that
we
see
in
the
react
components,
PN
pjs,
etc.
So
it
should
be
a
little
easier
to
start
consuming.
It's
not
so
github
II
when,
when
you
get
there
now,
there's
been
some
fair
questions
and
perspective
from
the
community
around.
If
someone
is
afraid
to
use
github,
how
is
creating
a
github
repo
going
to
help
them?
Mark
Anderson
had
a
fantastic
example
of
this.
He
had
said:
I,
remember
back
when
I
got
a
VCR
I
think
we're
all
probably
old
enough
to
know
what
a
VCR
is.
C
I
didn't
know
how
to
use
my
VCR,
but
with
my
VCR
came
an
actual
VHS
tape
that
had
instructions
on
how
to
use
the
VCR
but
I
didn't
know
how
to
use
the
VCR.
So
what
good
did
the
tape
do
right,
huge
fail
on
the
part
of
the
VCR
company,
but
imagine
if
the
VCR
company
provided
a
person
that
helped
train
you
live
with
hands-on
guidance
and
and
that's
really
what
the
goal
of
the
sharing
and
caring
sharing
is
caring
initiative.
Is
it's
not
just
a
repo
for
you
to
come?
C
C
What
the
repo-
and
this
is
the
beauty
of
the
sharing
is
caring,
a
repo
is,
we
will
pre,
create
documents
that
need
to
be
updated
and
so
you're
in
a
safe
zone
to
be
able
to
make
those
updates
during
the
session
and
at
the
end
of
the
session,
that
will
actually
count
towards
your
first
pnp
contribution.
So
how
awesome
is
that
and
you'll
get
to
experience
it
from
all
the
way
beginning
to
end?
And
so
the
way
you
would
start
out
to
register
is
you'll
notice
down
here
at
the
bottom.
C
Some
of
the
contents
that'll
be
available
there
during
the
session
we're
trying
to
determine
the
best
time
we
are
a
global
community,
so
we
can't
just
simply
say
despite
this
as
best
efforts
to
have
a
single
time
zone,
it
doesn't
fit
and
it
doesn't
work
so
we're
trying
to
find
whether
or
not
we
need
additional
sessions
right.
If
there's
additional
sessions
where
maybe
we
need
to
meet
in
morning's
or
evenings
or
both
to
meet
everybody's
requirements
and
and
requests
to
be
able
to
take
advantage
of
this
opportunity,
then
we'll
definitely
do
that.
C
Now,
that's
not
just
it
right.
So
there
are
going
to
be
additional
opportunities.
You
may
say:
hey,
that's
great
I
want
to
start
with
documentation
and
I've
walked
through
people
that
have
started
there,
and
they
said
this
is
awesome.
I
want
to
do
more,
though.
I've
got
an
idea
for
a
code
contribution,
so
we're
going
to
be
setting
up
additional
sessions
around
being
able
to
if
you've
got
a
fantastic
sample
you
want
to
submit,
but
not
sure
how
it's
a
little
more
complex
than
simply
updating
a
piece
of
document.
C
Then
we're
going
to
create
sessions
for
that,
and
you
know
even
beyond
that,
you
may
say
I'm
a
developer,
but
I
don't
really
have
any
of
my
own
samples.
Well,
we
also
want
to
set
up
where
you
can
take
a
look
at
the
samples
that
are
already
in
the
repo
and
a
lot
of
them
get
outdated
and
that's
understandable.
C
C
C
We
talked
about
dev
Docs,
so
that's
one
of
the
first
easiest
low-hanging
fruit
that
we
can
help
walk
you
through,
and
so
we'll
show
you
that
in
the
first
in
the
first
contributor
session,
if
you
sign
up
for
that,
there's
also
the
usage
docs,
so
Marc
Anderson
has
been
really
working
hard
on
putting
together
the
repo
for
usage
docs
again.
This
goes
in
line
with
what
you
see
here
on
on
the
dev
Doc's.
C
You
know,
you'll
be
able
to
take
that
experience
and
parlay
it
down
into
the
dev
Doc's
and
that
that
will
really
help
the
community
as
well.
We
had
talked
about
the
SPF
X
sample,
so
Hugo
Bernier
created
that
amazing
interactive
gallery
of
the
web
parts
that
are
easier
to
find
and
one
of
those
ways
that
you
can
find
web
parts
there
is
by
looking
at
version,
so
it
makes
it
really
easy
to
find
the
older
versions
that
might
need
to
be
updated
in
BAM.
That's
a
contribution
right,
so
the
three
takeaways
here.
C
First
of
all,
you're
not
alone.
Our
community
success
is
based
upon
community
support
and
that
doesn't
just
mean
encouraging
people
to
contribute
and
then
leaving
them
on
there
on
the
on
by
themselves
alone.
To
do
that,
we
really
have
a
responsibility
to
help
one
another,
and
this
is
one
of
the
first
ways
that
we're
looking
to
do
that
it's
more
than
just
github
right,
so
we're
not
just
looking
as
you
could
see
with
the
CLI
session.
C
This
is
not
just
about
hey
we're
gonna,
give
you
experience
with
submitting
stuff
that
you
need
to
go,
create
on
your
own
in
a
bubble
and
then
submit
it
to
github.
You
saw
that
that
provides
you
access
on
how
to
submit
it
using
github,
but
also
it
exposes
you
to
amazing.
Other
tools
like
the
CLI
that
project
upgrade
command
is
amazing
and
super
powerful
and
not
hard
to
use
and
it'll
give
you
exposure
to
code.
C
That's
out
there
it'll
allow
you
to
upgrade
it
and
allow
you
to
resubmit
it
back
in
and
so
check
out
that
link
sharing
is
caring.
A
KDOT
ms
ford,
/
sharing
is
caring
and
then
feel
free
to
reach
out
to
me
on
twitter.
If
you
have
any
questions,
I'm
always
happy
to
help
and
and
love
the
the
interaction
and
we're
all
in
this
together.
C
So
one
last
thing
you
may
have
noticed
the
little
teaser
around
the
PNP
contribution
challenge,
rewards
right,
so
I've
been
working
with
vests
on
this
we're
still
working
on
it
right
you
get
some
swag,
you
get
some
swag,
everybody
gets
some
side
work,
everybody
wants
a
little
swag
and
we
all
love
to
see
our
names
and
the
bright
lights
of
that
contribution
slide
on
the
monthly
call
love
to
see
our
company
name
up
there.
But
let's
face
it,
we
love
swag
a
little
more.
C
So
this
is
coming
soon,
nothing's
set
yet
in
stone,
but
it's
an
exciting
opportunity,
maybe
some
stickers
or
some
mugs,
or
something
like
that.
So
keep
an
eye
out
for
that.
It's
I
think
this
is
gonna,
be
a
really
exciting
way
to
help
encourage
and
provide
some
giving
back
to
the
community
in
a
way
that
hasn't
happened
yet
so
hope
you
guys
want
to
get
involved,
feel
free
to
reach
out
again.
Akms
sharing
is
caring
and
thanks
for
the
time
great.
A
Thanks
David
for
that
appreciate
that
a
cash
if
you
are
on
the
call
and
ready
to
go
we're
not
gonna,
try
and
switch
back
to
the
slides
if
you
would
just
try
and
take
over
presenting,
but
really
excited
to
see
that
initiative
that
David
was
talking
about.
Hopefully,
that
will
help
folks
who
want
to
contribute,
but
aren't
quite
sure
how
to
get
involved.
So
there
you
are
a
cash.
How
are
you
today,
hi.
D
Patrick
I'm
good,
so
right
just
respect
for
this
small
introduction,
so
hello,
everyone,
my
name
is
Akash
Bhardwaj,
so
I
work
as
an
office
365
developer
at
HCL
Technologies,
so
I
have
two
samples
that
I
would
be
showing
today,
so
that
I
recently
contributed
to
the
SPF
X
webparts
github
repo.
So
the
first
one
is
called
the
react
page
navigator.
So
I'm
going
to
start
with
this.
D
So
recently,
this
new
feature
was
introduced
for
the
modern
pages,
so
we're
in
any
of
the
heading
tags
that
we
add
in
the
text
to
a
pets,
so
they
automatically
get
an
anchor
tag
associated
with
them
like
I.
Have
this
introduction
so
if
I
just
hover
over
next
to
it
so
I
get
this
hash
tag.
Introduction
appended
to
the
page
URL
so
clicking
on.
This
would
directly
take
me
to
that
heading
so
that
I
won't
have
to
manually
scroll
to
go
to
that
link.
D
So
the
a
common
scenario
that
I
thought
of
could
be
around
this
feature
was
to
have
a
list
of
all
such
headings
on
the
page
so
that
it
can
act
as
a
table
of
contents
wrapper
and
the
users
can
just
simply
see
what
all
content
is
there
on
the
page
and
clicking
on
each
of
those
links
would
directly
take
them
to
that
section.
So
this
is
what
I
built
my
web
part
around.
So
let
me
just
show
how
it
works.
D
So
here
you
can
see
so
this
automatically
lists
all
these
headings
as
navigation
links,
so
that
clicking
on
each
of
these
links
would
take
me
to
that
section
of
the
page.
So
it's
pretty
simple
to
use
web
parts,
there
isn't
any
property
that
you
need
to
configure
to
start
using
it.
So
let
me
just
remove
this
and
refresh
my
page
so
here,
if
I
click
on
this
purposely
just
a
second
okay,
so
I
click
on
this
criteria
link.
D
D
D
So
once
I
have
that,
then
I
am
using
this
canvas
content
to
one
property
that
basically
has
all
the
information
about
all
the
web
parts
that
are
added
on
the
page,
so
once
I
have
that,
then
I
am
traversing
through
each
of
these
reports
and
finding
which
which
of
these
web
parts
are
actually
text
web
parts
that
I'm
doing
by
checking.
If
this
inner
HTML
property
exists
for
that
wrapper.
So
once
I
have
that,
then
I
am
just
using
some
basic
radix
operation
to
get
the
value
of
my
heading
tags
and
their
URL
as
well.
D
Here
so
and
once
I
have
all
these
URL.
So
after
that,
I
am
making
some
checks
to
see
whether
this,
whether
the
navigation
link
that
I
have
so
whether
it
should
be
promoted
as
a
main
link
of
in
live
apart
or
as
a
sub
link
to
the
previous.
The
previous
link
that
we
saw,
because
you
can
see
here
like
this
hope
that
we
have
so
this
is
currently
a
heading
of
the
type
H
2.
So
it's
listed
as
a
sub
link
of
this
main
h1
introduction
heading.
D
So
these
anchor
tags
that
we
see
they
are
currently
supported
for
all
the
h1
h2
and
h3
tags.
So
in
this
section,
I
am
just
checking
that
sorting
order
so
that
all
my
navigation
links
are
sorted
and
structured
correctly.
So
once
I
have
traversed
through
all
these
vapors
and
all
these
anchor
tags,
so
then
I
simply
returned
mm.
This
array
of
einav
link
so
once
I
have
this
value
here
in
this
distort
and
killings.
D
D
D
So
if
there
are
any
flow
is
attached
to
it.
It
will
simply
show
up
here
and
if
not,
then
it
would
just
give
a
message
that
there
are
no
SLOS
associated
with
this
list.
So
one
thing
I'd
like
to
share
for
this
is
that
this
this
webpart
only
lists
the
flows
that
are
shared
with
the
current
user,
so
whether
they
would
have
to
be
created
by
him
or
her
as
my
flows
or
they
would
have
to
be
shared
as
team
flows
with
them.
D
D
So
let
me
jump
over
to
the
core
for
this,
so
this
is
my
main
web
partyís
file.
So
here
in
I'm,
I'm
using
this
espy
daughter
blood
lists
to
get
to
all
the
lists
in
my
side,
so
I
am
getting
their
title
and
entity
type
name.
So
once
I
have
this,
then
I
am
just
assigning
its
value
to
this.
This
dot
list
options,
so
this
variable
I
am
passing
as
a
prop
to
my
react
component
along
with
some
other
properties
that
are
I,
think
basically
used
just
for
that
configurable
River
per
title.
D
So
here
in
my
react
component,
if
I
look
at
the
render
method,
so
first
of
all
there
is
this
react,
reusable
control
for
a
webpart
title.
Then
I
have
my
drop-down,
the
four
select
list
so
in
the
oil.
So
in
the
option
for
the
drop-down
options.
I
have
this
drops
not
list
options
that
I
pass
from
my
webpart
file
and
then
on
change.
I
am
calling.
This
method
is
selected,
so
here
in
I
am
actually
constructing
the
URL.
D
For
this
list
and
once
I
have
that
over
for
the
list
or
library
and
once
I
have
that
so
then
I
am
passing
it
to
this
method.
Gate
list
flows
so
in
this
method,
I
am
using.
This
mm
sync
flow
instances
rest
api,
so
I
am
passing
the
URL
for
the
list,
and
so
this
returns
me
some
information
about
what
flows
are
attached
to
this
list.
So
once
I
have
this
info,
so
then
this
is
an
important
part
like
the
Val
dot
synchronization
data.
So
this
is
my
main
property
that.
D
Property
for
value,
it
is
an
array,
so
this
is
the
error
that
would
array
that
would
contain
the
list
of
all
flows.
So
this
information
that
you
see
here
this
was
for
this
side
pages,
the
one
that
had
three
flows
attached
to
it
so
in
the
value
array.
So
we
have
all
the
info
about
each
of
these
flows.
For
example,
here
I
have
the
display
name
and
then
I
have
the
sharing
type,
whether
its
author
or
co-author,
and
then
I
guess
in
the
definition
summary
yes
here
in
the
Tiggers
I
get.
D
D
So
once
I
have
this
info,
the
synchronization
dot
value.
So
then
I'm
traversing
through
each
of
these
area
elements
and
then
I'm
actually
pushing
it
to
pushing
the
all
the
required
info
to
another
array
of
type
I
flow
details.
So
this
is
an
interface
that
I
have
created
for
storing
this.
Storing
all
the
information
around
each
of
these
flows
so
like
I,
have
this
display
name
and
then
trigger,
and
this
is
the
flow
URL
and
the
shared
type,
whether
it
would
be
team
flow
or
a
my
flow.
D
So
once
I
have
all
these
misinformation
in
place,
so
then
I'm
calling
this
red
state
method
to
add
it
to
this
flow
item,
state
variable
and
then
in
my
details,
list
component
here
and
I'm
actually
passing
in
this
distort
state
dot
flow
items
as
the
items
so
that
it
renders
all
the
flow
information
correctly
and
other
than
this
I'm,
also
using
this
kurashima
control,
so
that
renders
some
placeholder
data,
while
my
actual
data
is
being
loaded.
So
just
a
way
to
keep
the
user
engaged
like
the
content
is
still
being
loaded.
A
There's
a
few
there
in
the
window,
I
think
in
the
interest
of
time,
if
you
can
answer
them
in
the
chat
window,
that
would
be
best
and
we
can
move
on
to
Stefan's
demo
if
he
is
on
the
call
and
ready
to
go
but
really
interesting,
stuff
and
great
to
see
the
code
for
both
of
those
controls
to
see
how
you're
doing
that
and
both
of
those
samples
are
available,
looks
like
David
just
posted
the
links
there
in
the
chat.
Both
of
those
are
available,
definitely
check
those
out.
A
They
show
some
great
techniques
for
doing
different
things
in
react,
but
also
different
things
with
working
with
flows
and
off
and
so
forth.
So
and
even
a
little
PM
pjs
in
there
so
great
to
see
great
work
on
that.
Thank
you
very
much,
a
cache
to
see
those
and
stuff
on
if
you're,
on
the
call
and
ready.
E
A
E
So,
first
of
all
for
any
one
of
you
who
doesn't
know
what
actually
Microsoft
is
offering
in
terms
of
conversational,
AI
and
BOTS,
there's
a
pretty
decent
SDK
out
there,
which
is
called
the
Microsoft
web
framework,
which
is
basically
designed
to
have
you
being
able
to
develop
BOTS,
no
matter
if
it's
on
the.net
stack
or
JavaScript
or
even
travel.
Python
is
available
these
days.
E
So
you
could
basically
use
that
educate
to
write
your
BOTS.
Do
the
whole
development
stuff
locally
on
your
machine
and,
if
you
say,
you're
ready
to
go
and
you
want
to
push
your
BOTS
out
to
to
the
world,
you
can
host
it
on
Azure,
of
course,
so
there's
a
managed
boat
service
called
da
Shabbat
service,
which
basically
does
the
whole
connection
to
the
channels
like
teams,
slack,
facebook,
Messenger
and
so
on.
For
you
so
the
cool
thing.
E
The
intelligence
comes
by
the
thing
called
cognitive
services,
so
they're,
I,
guess
they're
more
than
twenty
or
almost
thirty
cognitive
services
out
there,
which
you
could
use
in
the
various
categories
for
various
use
cases
like
vision,
language
understanding,
speech
and
so
on,
and
on
top
of
that,
Microsoft
actually
is
now
starting
to
push
out
templates,
which
you
can
basically
use
to
as
a
starting
point
for
various
use.
Cases
like
an
HR
template
for
HR.
E
For
the
customer
care
template
and
so
on,
so
what
we
also
have
in
the
in
the
bot
ecosystem,
similar
to
the
PNP
thing,
is
about
building
communities.
So
if
you,
if
anyone
of
you
is
interested
in
doing
like
pod
stuff
reach
out
to
us,
we
have
some
some
creepers
out
there,
which
you
can
contribute
to
what
is
actually
a
bot
and
how
does
it
work?
E
E
So
should
it
be
team
sport
should
it
be
like
a
Amazon,
Alexa
skill,
but
and
therefore
you
need
to
have
like
various
services
put
into
your
bot
for
speech,
understanding
or
for
special
teams,
things
like
messaging
extensions
and
so
on,
and
of
course,
your
body's
not
only
be
able
to
run
on
on
smartphones
and
on
the
browser
you
can
deploy
about
anywhere.
You
want
to
see
you
can,
as
I
said,
write
an
MS,
an
Alexa
skill
with
the
bot
framework.
You
could
do
the
same
for
katana.
E
You
can
even
push
your
body
into
your
your
vehicle,
your
car,
if
you
want
you
and
talk
to
you
about
in
your
car-
and
the
next
thing
you
always
have
to
keep
in
mind-
is
just
about
need
to
connect
to
knowledge
sources.
Of
course
it
can
because
it's
just
the
web
application.
You
run
some
very
nature
or
in
your
premises,
on
your
data
center
or
wherever.
So
you
can
reach
out
to
them
and
make
sure
actually
it's
kind
of
going
the
same
way
as
Emerson
does
with
its
Alexa.
E
E
If
you
will
to
basically
just
develop
your
bot
and
then
you
develop
the
skills
and
plug
the
skills
into
your
bot,
and
you
can
reuse
them
across
different
BOTS
to
make
the
user
interaction
and
the
user
experience
even
greater
and
of
course
the
Microsoft
stack
is
natively
integrated.
So
you
can
work
with
the
graph
natively.
You
can
do
all
the
authentication
stuff
which
is
ready
right
from
your
bot,
so
that's
pretty
cool
in
terms
of
channel
support
there
more
than
trying
to
channel
support
it
right
now.
E
So,
as
you
can
see,
and
as
I
mentioned
here,
not
only
Microsoft
ones,
but
also
third-party
channels
are
supported
and
firm
from
the
sample
perspective.
I
did
I
focused
around
the
web,
chats
channel
and
the
direct
line
channel.
So
those
are
basically
the
pre-built
channels
you
can
use
to
offer
like
a
web
chat
window
for
your
bot,
which
you
can
host
on.
Let's
say
your
web
page
or
wherever,
and
this
pretty
much
looks
like
this
out
of
the
box.
So
this
is
all
also
open
source
out
there
on
github.
So
you
can
check
that
out.
E
You
can
clone
the
repo
you
can
customize
it.
You
can
integrate
it
with
JavaScript
or
if
you
want,
and
as
as
I
did
it
as
well
in
the
sample.
Integrator
is
integrated
with
react,
so
there's
the
bot
framework
webchat
npm
module
you
can
use,
which
basically
offers
you
the
react
component
you
could
use
for
rendering
the
website
as
a
react
component.
As
you
can
see,
on
the
left
hand
side
in
terms
of
customizations,
that's
pretty
pretty
basic,
so
you
have
all
black
and
white
out
there.
Of
course,
what
what
the
web
chat
component
offers?
E
You
is
to
change
various
colors
change.
The
sizes,
of
course,
even
use
your
own
CSS
Styles
and
with
the
react
component,
you
can
do
even
more
so
you
can
add
custom
renderer
activities.
You
can
add
new
UI
components
if
you
want
to,
and
you
can
basically
recompose
the
whole
UI
to
fit
your
needs
and
the
sample
I
did
was
based
on
a
sample
which
was
already
out
there.
E
So
Bob
chairman,
very
pretty,
and
the
team
did
a
good
job
in
in
kicking
out
the
sample,
which
was
actually
using
the
bots
framework
version
free,
so
version
free
was
used
one
and
a
half
years
ago,
and
one
and
a
half
years
ago
version
four
got
GA
that
guessed
roughly
at
that
time
frame
and
the
B
free
version
of
the
web
chat
offered,
rather
rather
basic
capabilities
in
terms
of
customizations
and
so
on.
So
back,
then,
you
only
had
like
text
support
and
stuff
and
the
ESP
FX
web
part
sample,
which
was
out
there.
E
Also
just
had
that
text
support
and
when
you
do
modern
parts
and
when
you
develop
modern
BOTS,
you
don't
want
to
use
text
only,
but
you
want
to
use
like
adaptive
cards.
You
want
to
use
rich
attachments,
you
want
to
use
images,
videos,
links
and
stuff
like
that
and
they
should
be
natively
rendered
within
the
the
web
chat
window.
E
I
have
here
some
properties,
I,
define
and
I,
which
basically
users
can
configuring
the
property
pane,
ranging
from
the
direct
line
secret.
So
direct
line
secret
is
the
secret
we
use
to
connect
the
web
part
to
the
bot,
so
the
web
part
actually
or
the
react
component
actually
knows
whom
to
talk
to
and
where
the
body
is
deployed
and
when
you
do
it,
when
you
add
a
bot
in
the
azure
portal,
you
always
get
direct
line
secret.
E
So
that's
the
secret
key
used
to
communicate
from
the
bot
with
any
other
service,
or
instance
natively
by
the
direct
line
protocol.
What
we
also
can
change
is
like
text
colors
background
colors.
You
can
set
some
initials
for
the
bot
and
users
or
we
can
also
set
some
images
for
the
bot
and
the
users
and
so
on.
E
So
this,
basically,
that's
basically
it
from
from
the
property
side
and
the
web
part
site
or
direct
component
side
is
rather
simple,
so
what
I
actually
did-
and
this
is
basically
the
whole
magic
which
happens
in
there-
is
that
you
use
the
react.
Web
chat
component
coming
from
the
bot
framework
web
chat.
Npm
module.
E
You
add
your
dark
line
secret.
So,
as
I
said,
this
is
the
unique
identifier
and
the
secret
connecting
the
web
part
and
the
Deisher
bot,
and
you
give
some
some
style
options
with
it
for
customizing
the
UI
and
that's
basically
it
and
what
that
looks
like
in
detail
as
I
said:
Stiles
adoptions.
So
there
are
a
lot
of
there's
a
lot
of
styling
capabilities
out
there,
so
you
can
basically
recompose
the
whole
user
interface
and
the
whole
reaction
component
and
you
can
play
around
with
the
colors.
E
You
can
play
around
with
the
with
the
hate,
the
width
of
images
and
with
the
hate
and
image
width
of
the
text
boxes
and
so
on,
and
you
can
basically
get
your
C
ICD
guidelines
on
top
of
the
website
component
to
make
it
look
native
wherever
you
want
to
deploy
it,
you
can
even
use
custom
fonts.
If
you
want
to
you,
if
you,
if
you
don't
like
the
segue
UI,
you
can
use
I,
don't
know
comics
tents
or
any
other
font.
E
If
you
like
to
make
it
more
look
like
funny
or
so
and
yeah-
that's
basically
it
from
there.
So
if
you
want
to
check
it
out,
I
have
a
blog
post
out
there,
which
is
basically
just
around
the
standard
options
you
have.
So,
let's
look
at:
let's
look
at
it
in
detail
or
life,
so
I
have
a
site
here
and
I've
already
added
the
bots
web
check,
bot
framework
chat
b4f
to
my
side,
so
the
solution
basically
offers
you
both.
E
C
E
It
more
colorful
colorful,
we
can
go
ahead
and
just
add
some
some
colors
in
here
the
messages
from
the
bots.
We
can
also
go
ahead
and
add
some
some
foreground
colors
same
for
user
messages
same
for
the
text
box,
so
we
can
customize
text
box.
If
you
want
to,
and
on
the
second
page
we
have
the
visuals
concerning
the
icons
or
our
initials.
You
want
to
use
so
I'm
go
ahead,
and
this
is
basically
a
one
thing.
E
E
So
this
what's
cooking
from
my
side,
if
you
want
to
know
some
details
about
it,
I've
also
done
a
blog
post
on
this
or
just
simply
check
out
the
github
repo,
where
everything
is
described.
There's
even
a
sample
chat,
but
in
there,
which
was
done
by
Gary
pretty
so
if
you
don't
have
a
board
already
and
don't
have
the
time
to
develop
your
own
board
just
use
the
sample
bot
in
there
there's
also
some
links
in
there
which
described
on
how
to
get
started
with
with
the
Box
samples.
E
A
Stuff,
Stephan
I
think
there
might
be
a
few
questions
there
in
the
chat,
but
the
interest
of
time.
We
could
go
ahead
and
inch
review.
Those
from
the
chat,
I'm
gonna
get
the
slide
that
uploaded
again.
The
great
stuff
really
interesting,
demo,
again
really
fascinating
stuff.
All
through
today,
says
to
fond
with
a
great
demo.
A
There
on
the
bot
builder
stuff
was
really
amazing
to
see
the
slick
integrations
there,
a
cache
to
great
web
parts
to
see
two
different
pieces
of
functionality
and
some
great
backup
code
and
then,
of
course,
David
had
a
great
presentation
there
on
getting
started
with
contributing
and
how
you
can
get
some
help
with
contributing
so
really
awesome
demos.
Today,
you
can
see
why
I'm
always
a
big
fan
of
the
demos,
thanks
to
all
three
of
you
again
really
fantastic
stuff.
Our
next
SPF
XJS
meeting
is
going
to
be
October
24th.
A
That's
in
two
weeks
on
Thursday,
our
next
general
SharePoint
dev
meeting
will
be
in
one
week
on
October
17th,
so
that'll
be
next
Thursday.
We
will
have
the
next
General
SharePoint
development
special
interest
group.
So
thank
you.
Everybody
for
joining
the
call
learn
reused.
Share
appreciate
everybody's
time
and
we'll
talk
to
you
soon.
Thank
you.
All
bye,
bye.