►
Description
SharePoint PnP Community - SPFx & JS SIG call on September 9. Demos on Building advanced image gallery experience with SharePoint Framework, Hyperscript Tagged Markup (HTM) Templating, and Modernize your SharePoint Framework projects. Tune in each Tuesday for the new Microsoft 365 platform community call. Sign up for training events hosted by Sharing is Caring. Register for the PnP Recognition Program. New version of SPFx v1.13 - Beta.20, is out along with PnPjs Client-Side Libraries v2.9.0. Two SPFx samples delivered as well. The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place as always in chat throughout the call.
Learn more:
• See the full blog post for this call at: https://aka.ms/m365pnp/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
Hello
and
welcome
to
the
sharepoint
framework
and
javascript
special
interest
group
by
weekly
sync.
It
is
september
9th
2021..
We've
got
a
great
call
for
you
today.
As
always,
here
is
our
agenda.
We've
got
latest
updates
on
sharepoint
framework
patterns
and
practices
updates
across
the
program.
New
community
samples
are
optional
picture
time
and
then
three
great
demos
from
yannick
fabio
and
andrew
building
an
advanced
image
gallery
experience
for
sharepoint
framework,
a
hyper
script,
tagged
markup,
templating
and
modernize.
A
A
How
to
participate
in
these
calls
and
the
program
first
off
always
encourage
folks
to
demo
your
stuff
you're,
doing
great
work
for
your
companies
and
your
customers
and,
where
appropriate,
of
course,
make
sure
it's
okay
to
demo
the
work,
but
would
love
to
have
you
on
the
call
to
demo
your
web
parts
application
customizers
new
viva
connections
work
anything
you
might
be
doing
related
to
client-side
development,
sharepoint
framework
development,
fancy
uses
for
the
cli,
reusable
control,
stuff
lots
of
great
options
out
there.
Love
love,
love
to
see
those
demos,
so
please
reach
out.
A
We've
got
a
form
now
there
ak
dot.
Ms
slash
m365
pnp,
slash,
request,
slash
demo,
and
you
can
always
check
that
out
and
please
do
request
a
spot
would
love
to
have
you
host
or
demo
your
stuff
on
the
call
as
well.
You
can
contribute
on
github
to
any
of
our
projects.
You
can
report
issues
there
as
well
as
submit
pull
requests.
If
you
have
ideas
on
how
to
fix
things
or
just
new
features,
new
additions
to
the
library
love
to
have
those
as
well,
and
you
can
always
help
with
issues
and
questions.
A
If
you
happen
to
see
those
from
others,
and
we
always
appreciate
your
feedback,
how
are
these
calls?
How
are
the
documentation
needs
and
where
else
can
we
help?
Positive
feedback
is,
of
course
okay
too,
because
if
you
like
something
we're
doing,
perhaps
we
can
keep
doing
a
little
bit
more
of
it.
Here
are
lots
of
links
to
things
our
first
set
of
links.
A
We
have
our
community
videos,
those
community
videos
are
going
to
be
the
recordings
of
all
of
our
calls,
such
as
this
one,
our
monthly
calls
and
all
the
other
calls
we
do
across
the
programs
we'll
be
able
to
you'll
be
able
to
find
on
our
youtube
channel
there
for
the
community
videos.
We
also
have
lots
of
open
source
organizations,
sharepoint
pnp
office,
dev
and
microsoft.
A
Graph
are
all
open
and
looking
for
your
participation,
looking
for
your
ideas,
looking,
hopefully
you
don't
have
lots
of
issues,
but
you
can
of
course,
report
issues
there
as
well
for
problems
you
might
find.
So
please
check
those
out
as
well
tons
of
sample
galleries,
so
teams,
spfx
power
platform,
spf,
x,
extensions
and
list
formatting,
are
all
available
great
place
to
start.
A
If
you
have
questions
on
just
exactly
how
to
how
to
solve
a
certain
problem,
or
maybe
you
want
to
see
how
others
might
have
approached
a
project,
you
have
great
place
to
start
it's
something
I
always
check
out.
Those
are
a
lot
of
links
to
remember
so
always
I
always
like
to
just
remember:
ak
dot.
Ms
m
365,
p
and
p
that'll
get
you
updates
around
the
entire
patterns
and
practices
program
as
well
as
links
to
all
of
these
other
things.
A
A
Several
other
calls
into
one
to
make
a
little
bit
easier
for
folks
to
attend
a
little
bit
easier
to
do
some
planning
so
latest
engineering
news
from
365,
as
well
as
three
great
demos
on
that
call
from
royna.
I
hope
I'm
saying
that
right,
apologies
if
I'm
not
kathy,
and
somebody
named
vasa
who
we
may
have
heard
from
before,
we'll
be
doing
some
great
demos
there
and
it's
a
great
session
so
certainly
check
that
out.
A
There
is
a
new
invite
for
this,
so
you
can
get
that
at
ak
dot.
Ms
m365
dash
call,
and
so
certainly
check
this
out,
download
that
new
invite
and
make
sure
you're
not
missing
this.
This
is
a
great
roll
up
of
a
lot
of
other
calls
that
used
to
happen
in
the
community
and
now
I'll
hand
things
over
to
david
for
sharing
his
caring.
B
If
you're
just
starting
to
get
involved
with
spf
x,
we
would
love
to
help.
We
also
have
a
lot
of
amas
coming
up
script
samples,
power
platform
list
formatting.
These
are
great
opportunities
to
collaborate
with
those
maintainers
within
the
pnp
program.
So
take
advantage
of
all
these
safe
space
opportunities.
We
don't
record
the
calls,
so
it's
a
great
opportunity
to
collaborate
without
the
fear
of
asking
a
question
that
you
think.
Maybe
someone
else
should
know.
All
questions
are
great.
We
all
started
somewhere.
So
we
ask
you
to
please
and
register
aka.ms
forward.
Slash
sharing.
B
Is
caring,
we'd
love
to
see
you
soon
once
you
have
started
contributing
we'd
love
to
celebrate
all
of
the
contributions
you're
doing
so.
The
pnp
recognition
program
is
a
new
program.
That's
here
to
formally
celebrate
and
thank
you
for
all
the
hard
work
that
you
put
into
this
community.
We
are
partnering
with
credly
the
same
credly
that
handles
all
the
certification
badges
to
provide
a
number
of
badges
that
are
going
to
be
available
to
you
soon
and
some
available
now.
So
please
we
need
you
to
register
and
opt
in
for
this
aka
dot.
B
Ms
forward
slash,
m365
pnp
hyphen
recognition,
and
we
will
get
you
taken
care
of
again
there's
going
to
be
a
lot
of
campaigns
coming
soon.
I've
been
working
on
some
new
designs,
a
lot
more
opportunities
with
things
like
the
independent
publisher,
connectors
spfx
samples,
community
docs,
blog
articles,
if
you've
been
assisted
by
louisa.
So
many
great
things
coming
up.
We
want
to
celebrate
you
so
please
opt
in
and
we
look
forward
to
celebrating
all
your
hard
work.
Patrick
back
to
you.
C
So
basically,
this
is
also
there
to
demonstrate
easily
how
to
do
teaming
in
the
teams
and
teaming
in
the
sharepoint
and
background
section
colors,
and
all
of
that
as
a
starting
point.
Of
course,
if
you're
experienced
sharepoint
framework
developer,
you'll
do
the
same
as
with
the
existing
default
template,
which
is
coming
out
from
the
omen
generator
is
that
you
delete
everything
and
start
from
there,
but
it's
basically
there
for
the
people
to
easily
catch
on.
C
How
do
they
do
the
basic
setup
and
make
the
web
parts
and
experience
look
of
demo,
so
the
sharepoint
framework
1.13,
the
latest
version
is
out,
like
I
said
the
beta,
for
that
one,
there
will
be
a
ga
version
coming
out
on
that
one
within
upcoming
weeks,
I
think
that's
fair
to
say,
which
is
then
aligned
together
with
microsoft,
viva
public
preview.
So
that's
happening
also
relatively
soon,
so
we're
kind
of
pushing
out
the
capabilities
for
max
of
fema
and
and
of
course,
we're
evolving,
the
microsoft
teams
and
sharepoint
experiences
as
well.
C
D
Thanks,
patrick
so
we
have
the
2.9
release
scheduled
for
september
10th.
We
do
have
a
new
graph
feature
for
advanced
querying
and
so
we'll
look
to
get
that
implemented
in,
but
other
than
that
it's
pretty
quiet
right
now,
as
we
focus
all
of
our
energies
and
attention
on
v3,
which
is
coming
along
quite
well
again.
We
have
that
v3
branch.
So
if
you're
interested
in
checking
that
out
and
seeing
what
we've
been
up
to,
you
can
go
check
out
the
v3
branch.
D
D
A
new
preview
v4
with
some
breaking
changes,
retrieving
sharepoint
group
members,
change
default
options
to
json
default
output
to
json,
remove
the
value
wrapper
and
output,
and
some
commands
remove,
duplicate
id
and
spo
list
item
commands
and
remove
some
obsolete
file
path.
Options
definitely
check
out
that
preview.
The
v4
with
the
breaking
changes
is
going
to
ship
a
ga
so
to
speak
at
the
end
of
september,
but
you
can
always
try
that
now.
A
Npm
install
dash
g,
p,
p,
slash
cli,
dash
microsoft
65
at
next,
so
check
that
out
great
tool
to
have
in
your
toolbox
a
great
resource
to
have
as
you're
developing
set
up
your
environments.
I
certainly
encourage
you
to
check
that
out
now
the
reusable
components
there
are
two
sets
of
reusable
control
components,
2.9
or
the
2.x
branch.
That's
supporting
spfx,
1.11
and
below,
and
the
3.x
branch
is
spfx
1.12
and
above
same
for
the
property.
Controls
has
that
same
break
there,
and
these
are
the
last
major
releases
for
that
v2
branch.
A
A
So
again,
this
is
a
place
where,
as
you
have
time
as
you're
able,
we
encourage
you
to
please
update
to
the
v4
branch
of
the
modern
search
experience
that
will
really
help
you
out
and
make
sure
you're
getting
all
the
latest
features
and
enhancements
for
your
solution.
Next
up
is
spfx
samples
with
hugo.
E
So
we
invite
you
to
always
go
take
a
look
at
these.
These
samples,
these
repos,
but
we
have
two
new
samples
over
the
last
two
weeks.
I
know
it's
kind
of
a
quiet
couple
weeks
because
of
everyone
being
on
vacation,
but
the
first
one
is
a
share
to
teams
by
kunchi
sangani.
I
kind
of
mentioned
that
last
call
it's
a
new
xpfx
extensions
that
makes
it
easy
for
you
to
share.
You
know,
items
in
the
list
and
document
to
teams.
E
On
the
webparts
side
we
have
a
new
web
part
from
anub
tati,
which
is
an
at
a
glance
webpart,
which
is
based
on
the
bbc
website.
That
shows
you.
You
know
the
news
at
a
glance,
so
he
actually
grabs
the
the
latest
news
from
a
site
and
actually
shows
you
those
news
at
a
glance
we'd
like
to
thank
everyone
for
oh,
and
we
have
sorry
I
forgot
about
this
new
thing.
We
have
a
new
repository
for
adaptive
card
extensions
as
well,
so
asp
effects
aces.
E
C
F
First
of
all,
some
words
about
me:
I'm
max
of
mvp
in
office,
development
and
business
application
category
and
I'm
working
as
a
senior
consultant
consultant
and
trainer
on
microsoft,
process,
5
and
power
platform.
So
you
can
find
some
information
like
my
email,
twitter,
linkedin
and
the
github
account.
F
So
we
can
start
on
thinking
about
how
to
develop
the
ui
for
our
part.
So
there
are
two
ways
to
approach
when
you
want
to
create
the
ui
for
a
web
part.
First,
one.
The
first
one
is
create
the
ui
during
the
development,
of
course,
by
using
sharepoint
framework
and
typescript,
you
are
able
to
use
a
react
or
another
frameworks
using
fluent
ui
or
another
ui
framework.
F
In
this
case,
when
you
want
to
use
a
template
and
evaluate
around
time,
we
need
to,
for
example,
by
using
the
handlebars.
We
need
to
understand
something
if
we
take
an
example,
the
pmp
modern
search
web
part.
This
is
our
part,
use,
handlebar,
syntax,
some
helpers
and
then
use
html
and
css
to
build
the
ui.
Of
course,
if
you
want
to
use
some
complex
controls,
we
can
use
some
web
components
provided
by
the
solution
and,
of
course,
the
microsoft
graph
toolkit
components.
A
F
Or
some
web
components
in
this
case
the
document
card.
It's
a
web
component
builded
on
top
of
the
fluent
ui
react
document
card
component
and
in
this
case
it's
the
the
only
way.
If
you
want
to
use
react
inside
the
handlebars,
because
ender
bars
are
not
able
to
understand,
react
and
then
the
only
way
is
to
generate
on
our
web
components
and
then
render
as
a
standard
web
components
inside
your
html
handlebars
template.
F
So
what
is
the
pros
and
cons
of
the
two
approaches
so
create
ui
during
development
or
use
the
template
and
evaluate
runtime?
Of
course,
if
you
created
the
ui
during
development,
you
have
maximum
freedom
of
which
framework
you
want
to
use.
You
have
the
great
flexibility
on
implement
complex
ui,
because
you
write
code
and
you
are
able
to
do
anything
excellent
development
and
testability.
F
If
you
use
the
template
and
developer
runtime,
you
have
maximum
freedom
on
customize,
the
ui
without
recompile,
but
you
have,
I
think,
a
poor
ui
testability
and,
of
course,
you
are
not
able
to
use
all
the
framework
that
you
want
without
risks.
For
example,
using
fluent
ui
react
without
write,
some
wrapper
using
web
components
or
something
like
that,
but
this
is
my
sample.
F
This
is
very
interesting,
basically
this.
So
the
template
that
you
have
to
to
create.
Basically
it's
a
piece
of
javascript
code
and
this
code,
it's
evaluated
through
the
function
constructor.
So
inside
this
slide,
you
can
find
some
line
of
code,
the
first
line.
It's
the
line
that
use
the
function
constructor
by
passing
the
string
that
contain
the
template
that
we
want
to
evaluate,
and
the
second
piece
of
code
is
the
executable
function.
So
the
function,
the
arrow
function
that
use
the
constructor
function
that
we
have
defined
and
call
it
bypassing
the
function
context.
F
The
function
context
is
just
on
a
javascript
object
that
contains
all
the
data
and
all
the
function
that
we
want
to
pass
to
our
template
and
the
last
part
of
the
code.
It's
the
way
to
render
as
a
react
control
our
template
by
using
the
html.
So
html
is
the
object
that
implements
the
hyperscript
tagged
markup,
and
then
this
is
the
simple
syntax.
Later
I
show
you
on
an
example
on
how
to
render
the
execute
levels
function,
that
it's
the
object
that
it's
returned
from
our
template
and
then
by
using
react.
F
Dom
render
render
directly
this
component
to
the
domain
element.
The
context
object
object,
of
course
contains
some
fields.
We
have
the
reference
to
the
html,
so
html
is
the
reference
to
the
htm
engine,
the
reference
to
react,
the
reference
to
the
or
the
theme
object,
the
reference
to
the
team
variant.
F
I
use
this
one
to
have
a
simple
data
to
show
how
to
use
this
template
inside
the
web
part.
So
before
the
demo.
I
want
to
show
you
some
information
about
the
hyperscript
tag
markup.
So
this
template
system
it's
on
a
js6
like
syntax
in
plain
javascript,
so
you
are
able
to
develop
application
inside
the
directory
inside
the
browser
by
using
react
or
react.
F
It's
used
the
standard,
javascript
target
template
that
are
available
in
all
modern
browser
and
it's
very
light
in
terms
of
dimension
of
the
library.
So
this
is
a
basic
introduction
to
the
syntax.
You
can
use
the
spread
prop
by
write
as
a
string,
the
html
tag
and
then
write,
for
example,
dollar
props
to
to
pass
more
than
one
property.
If
you
want
to
use
the
react
component,
you
have
to
write
something
like
dollars
and
the
name
of
the
components
to
pass
the
instance
of
the
components
inside
the
target
template
string.
F
But
the
the
good
thing
is
that
you
don't
need
to
transpire
nothing
because
by
using
this
technique,
you
are
able
to
use
it
directly
in
a
in
a
html
like
syntax,
the
all
the
control,
all
the
react.
Controls
that
you
want
to
use
more
improvement
are,
for
example,
the
possibility
to
use
a
more
multiple
root,
so
fragment
without
problem
use,
a
comment
and
close
the
tag
by
using
the
slash
slash.
F
F
F
So
the
information
on
how
to
use
the
context
object
inside
the
template,
the
possibility
to
load
the
fluent
ui
sample
data
and,
of
course,
if
you
want
to
use
the
student
ui
load,
different
ui
library
components,
but
the
good
thing
is
here:
you
are
able
to
click
and
then
edit
directly
the
html
template.
So
basically
I
want
to
show
you
here.
F
The
the
only
thing
that
you
have
to
do
is
the
red
turner,
the
html
object,
and
this
is
the
syntax.
In
this
case.
I
create
this
object
in
provider
by
passing
the
team
variant
and
then
I
create
on
a
stack
panel
and
then
I
create
a
label
and
a
primary
button
and
a
list
that
have
some
items
and
an
on
render
cell.
F
F
F
A
G
I
am
here,
let
me
grab
my
slides,
so
I
got
a
few
slides.
I
want
to
run
through
real,
quick,
just
to
kind
of
answer
the.
What
and
the
why
and
then
I'll
do
a
demo
of
all
three
of
the
things
I
want
to
show
you
and
the
demo
at
the
very
end,
all
right.
So,
first,
it's
all
about
modernizing
your
sharepoint
framework
project.
Just
really
quick,
I'm
andrew
connell
got
a
podcast.
I
also
have
a
sharepoint
framework
course
and
I'm
the
one
person
that
likes
the
first
three
star
wars
episodes.
G
G
Let's
look
at
a
little
bit
of
a
history
on
why
this
is
well
back
in
january
of
2019,
the
typescript
team
published
a
road,
a
roadmap
post
that
effectively
said
we're
done
with
doing
things
that
or
we
our
mission
going
forward,
is
not
about
making
typescript
the
greatest
language
in
the
world.
The
the
idea
here
is
about
making
typescript
to
improve
the
ecmascript
experience,
so
they
want
to
focus
on
on
not
going
off
and
doing
their
own
thing
and
kind
of
forking
off
ecmascript.
G
They
want
to
focus
on
on
making
it
a
better
experience,
and
in
doing
so,
they
essentially
were
saying
we
don't
want
to
make
typescript
something
special.
We
simply
just
want
to
make
it
special
sauce
on
top
of
ecmascript
well,
very
soon
after
that
about
a
month
after
that,
the
team
that's
in
charge
of
a
tool
called
tslint,
which
is
a
linter
that
checks
your
code
and
for
different
code
rules
and
stuff
like
that
they
looked
at
it
and
they
said
you
know
what
pretty
much
same
thing
we're
done.
G
Maintaining
this
ts
lint
project
this
doesn't
make
sense.
We
should
be
pouring
all
of
our
efforts
into
eslint
and
instead
just
create
special
plugins
for
eslint.
That
know
how
to
read
typescript
for
reading
just
javascript,
so
they
ditched
it
as
well
notice.
The
dates
on
these,
though
that
was
in
february
of
2019..
G
Well,
unfortunately,
two
and
a
half
years
later,
we
are
still
create
using
ts
lint
with
spfx
project.
So
even
though
this
has
been
deprecated
by
microsoft
and
by
from
the
typescript
team,
but
also
from
the
team
that
does
ts,
lint
they've
deprecated
this
tslint
tool
for
over
two
and
a
half
years,
and
it
can
even
result
in
some
random
stuff
that
you
get
every
once
in
a
while.
I
showed
an
error
that
I
got
just
recently
working
on
a
sharepoint
framework
project
right
here,
where
it
talks
about
can't
find
a
custom
rule
directory.
G
Strangely
enough,
that's
actually
been
one
of
my
most
popular
blog
posts
in
the
last
year
that
I
posted
a
couple
weeks
ago
about
that.
The
problem,
though,
is
that
you
know
sharepoint
framework
projects
they
can
take
a
while
to
catch
up
to
some
of
the
more
modern
practices.
We
all
remember
how
long
it
took
us
to
get
off
of
node
10
up
to
node,
12
or
14.
G
The
other
thing
I'm
going
to
talk
about
is
ie
11.,
so,
like
other
stuff
that
we're
all
familiar
with
you
know,
there's
been
this
thing
going
around
the
world
that
all
of
us
hate.
It's
been
a
scrounge
on
all
of
us.
A
lot
of
us
have
been
affected
by
it
and
it's
something
we
that
obviously
the
world
just
can't
shake.
And,
of
course
I
am
talking
about
internet
explorer
11..
So
I'm
going
to
show
you
how
you
can
get
rid
of
ie
11
support
once
and
for
all
in
your
project.
Now.
G
Why
do
you
even
care
about
that?
Well,
first
of
all,
microsoft,
365
apps.
They
don't
support
ie11
anymore.
As
of
the
middle
of
august,
microsoft
has
dropped.
I11
from
the
list
of
their
supported,
browsers
for
all
microsoft,
365
apps.
So
even
if
you
build
something
in
today,
a
sharepoint
framework
project
today
and
your
customer
says
we're
sharepoint
online,
but
we
still
have
a
corporate
standard
of
ie
11..
That's
like
the
equivalent
of
them
saying
we
have
a
corporate
standard
of
using
betamax.
No
one
cares
right.
G
G
G
In
addition
to
that,
is
that
ecmascript
5
by
doing
by
sharepoint
projects,
transpiling
our
typescript
down
to
es5,
it's
adding
a
lot
of
extra
code.
A
lot
of
polyfills
just
to
account
for
missing
language
features,
so
I'm
going
to
show
you
how
you
can
also
update
your
sharepoint
framework
projects
today
to
tell
typescript
to
not
build
for
something
that's
12
years
old,
but
there
also
is
a
couple
little
things
that
you're
going
to
need
to
fix
as
well.
G
Now
I'm
going
to
show
you
a
bunch
of
stuff
here
in
the
demos,
but
if
I
can
find
it
really
quick,
I'm
going
to
drop
something
in
the
chat
there.
We
go
so
I'm
going
to
walk
through
something
that
I've
actually
blogged
about
three
different
things.
So
if
you,
if
you
miss
what
I'm
doing
I've
been
going
too
quick
through
this,
so
let
me
switch
over
and
show
you
vs
code,
all
right.
G
So
what
I'm
going
to
do
is
I'm
going
to
show
you
first
about
eslint,
but
again
the
just
sit
back
and
enjoy
the
ride
for
what
I'm
going
to
show
you
real,
quick.
The
links
that
I
just
posted
are
going
to
walk
you
through
all
three
things.
I'm
going
to
show
you
here.
So
let's
say,
you've
got
a
base,
sharepoint
framework
project
and
you
want
to
get
rid
of
tslint
and
swap
it
over
eslint.
What
are
the
steps
you
need
to
do?
G
G
G
I'm
going
to
come
back
to
this
in
the
second
part
of
my
demo
in
just
a
minute
here,
because
one
thing
you're
noticing
is
that
you
don't
see
any
sharepoint
framework
defined
rules.
If
you
remember
in
a
base
sharepoint
framework
project,
we've
got
a
bunch
of
base
ts,
lint
rules
here
that
you
see
that's
in
that
tsl
json
file
in
the
base
of
your
project.
G
Okay,
so
I've
got
I've
got
dslint
installed.
I've
got
a
configuration
file
set
up
for
it
as
well.
So
the
next
thing
I
need
to
do
is
I
need
to
run
the
task.
Well
problem
is,
is
I
don't
have
a
task
in
here?
So,
in
a
default
gulp
file
that
we
have
in
a
sharepoint
framework
project,
what
you're
going
to
do
is
you're
going
to
find
this
line.
That's
already
there
and
you're
going
to
add
some
awesome
sauce
to
it.
G
You
are
first
going
to
tell
the
sharepoint
framework
to
stop
using
ts,
lent
that
two
and
a
half
year
old
thing
that
you
don't
want
to
touch
anymore
and
instead,
what
you're
going
to
do
is
create
a
custom
task
and
what
this
custom
task
does.
Is
it's
going
to
take
all
of
your
typescript
and
typescript
extended
files?
G
G
I
had
actually
just
killed
my
wi-fi
and
gone
to
hardline
right
before
the
last
demo
like
lost
the
connection
second
ago,
and
I
was
like
did
I
just
do
that?
I
just
kicked
myself
out
there.
We
go
all
right,
so
I'm
not
going
to
run
this
because
you
know
you
can
see
that
it's
there,
but
what
it's
done
is
that
when
I
run
a
gulp
build,
it
will
run
eslint
before
it
runs
gold,
build
hey,
that's
all
fine
and
good,
and
now
I've
got
ts.
G
I've
got
es
lint
working
on
my
project,
but
that's
a
lot
of
extra
steps.
I
have
to
do
so.
What
I've
done
is
I've
actually
done
something
else
to
make
your
life
a
little
bit
easier
in
the
second
project?
What
I've
done
is
I've
created
this
little.
I
call
it
a
preset
kind
of
following
the
preset
concept
that
we
have
with
jest
and
testing
react-based
projects.
I've
created
an
eslint
preset
for
sharepoint
framework
and
what
this
is
going
to
do.
G
G
As
you
see
here,
I've
actually
got
it
baked
into
my
preset,
so
I'm
making
it's
a
lot
easier
to
go
through
and
to
include
it
as
a
task
inside
of
your
sharepoint
framework
project,
but
the
other
cool
thing
about
this
is,
if
you
come
over
here
and
you
look
at
the
config
file,
what
you
see
in
this
eslint
file,
now
there's
a
in
this
config
file.
There's
a
lot
of
stuff!
That's
in
here
a
lot
more
stuff
that
I've
added
and
the
documentation.
G
This
all
this
red
stuff
kind
of
explains
a
little
bit
there's
a
little
bit
of
an
issue
between
eslint
version,
6
and
version
7.
version.
6
doesn't
like
this
schema
thing
in
here,
so
you
don't
get
intellisense.
So
I
have
to
uncomment
that
if
I
want
to
get
intellisense
with
my
with
the
different
options
I
can
do
in
the
config,
but
when
I
go
to
build
it,
eslint
6
is
going
to
throw
an
error
saying
it
doesn't
understand
what
that
thing
is.
G
Furthermore,
if
you're
using
eslint
6,
it
doesn't
support
the
version
of
typescript
that
the
sharepoint
framework
projects
support
today
it
works
just
fine
and
eslint
seven
supports
it,
just
fine,
but
if
you
don't
want
that
warning
to
show
up,
you
can
say,
warn
unsupported
typescript
version.
No,
I
don't
wanna,
don't
warn
you
about
anything.
I
know
what
I'm
doing.
G
Furthermore,
what
if
you're
the
kind
of
developer
that
likes
all
of
those
rules
that
the
sharepoint
framework
team
puts
on
us?
Personally,
I
don't
like
that.
I
like
to
let
developers
choose
what
they
want
and,
like
I
like
spaces,
I
like
two
spaces,
I'm
not
one
of
those
strange
people
that
likes
tabs
or
four
spaces
and
likes
to
indent
stuff
way
off
the
screen.
G
So
if
you
want
to
look
just
like
the
way,
the
microsoft
guys
want
you
to
make
want
your
project
to
look,
but
you
want
to
use
tslent.
I
got
you
set
up
here.
It's
just
one
extra
step.
You
got
to
uncomment
that
line.
If
you
want
to
do
it,
if
you
don't
like
it,
and
you
think
that
that
should
be
the
default
well,
prs
are
always
welcome.
They're
always
accepted,
but
at
least
they're
welcome,
and
you
can
actually
submit
it
to
my
preset
project
and
we'll
take
a
look
at
it.
G
G
The
way
you're
going
to
do
that
this
is
actually
very
simple,
is
if
you
come
over
here
and
you
look
at
your
ts,
lin
ts,
config
file,
the
only
change
you
have
to
do
to
do
to
make
this
change
is
right
here
on
this
target
and
what
you
want
to
do.
Is
you
want
to
change
this
target
to
a
different
value?
Now,
let
me
show
you
something:
first,
if
you
come
over
here
and
I've
done
a
normal
build
of
a
sharepoint
framework
project
already,
and
I
look
at
the
bundle
that
was
actually
created
here.
G
G
If
I
come
over
here-
and
I
make
this
go
back
to
my
ts-
link
config
file
and
I
change
this
use
a
more
recent
version
of
ecmascript.
I
can
choose
a
bunch
of
different
options
here
I
like
to
choose
es
next
and
then
what
that
says
is
just
use
the
most
current
version
of
javascript.
That's
a
safe
one
to
use,
because
now
that
I
11
is
gone,
the
only
browsers
that
are
out
there
are
evergreen
browsers,
so
we
should
be
in
good
shape.
Now
we're
gonna
make
that
one
change.
G
The
other
change
you're
going
to
you're,
going
to
probably
want
to
do,
is
you're
probably
going
to
want
to
come
to
this
lib
section,
and
you
want
to
tell
the
typescript
compiler,
hey
here's
other
things
you
want
to
import
that
you
want
to
assume.
Are
there
like,
for
example,
if
I
ran
this
on
the
default
sharepoint
framework
project
right
now
it
worked
great.
But
if
you
use
something
like
a
spread
operator,
well,
ecmascript
5
didn't
understand
what
the
spread
operator
was.
G
G
Hopefully
this
runs
slightly
faster
than
the
last
time
I
ran
gulp
here
I
can
just
show
you
while
we're
waiting,
let's
open
up
another,
let
me
open
another
console
real
quick
come
on.
Let's
do
a
list,
everything
in
the.
What
was
that
the
ie
11
demo
that
was
in
lib,
that
was
in
web
parts-
let's
see
if
it's
still
there
hello
world
and
let's
go
to
that
javascript
file,
and
we
can
see
that
he,
oh
it's
already
finished
the
build
okay,
so
it
doesn't
matter
so
the
build
finished.
The
build
is
now
1.9
k.
G
If
I
come
over
here
and
look
at
the
bundle
notice,
all
that
junk
that
we
had
at
the
top
is
gone,
this
actually
looks
like
the
same
class
that
you
wrote
in
your
web
part
project,
because
typescript
is
very
close
to
the
modern
version
of
javascript,
so
we
got
rid
of
all
the
extra
junk
at
the
top.
We
got
rid
of
that
extra
junk.
After
all,
those
import
statements
and
our
our
bundle
has
now
gone
from
3k
down
to
1.9
k.
That
means
you
just
chopped
off
about
40
percent
on
the
size
of
your
bundle.
G
It's
a
debug
build
it's
not
minifi
blah
blah
blah,
but
still
it's
better.
So
that
way
we
can
move
on
to
the
world.
That's
everything
I
wanted
to
show
you
guys
in
this
demo
again
the
samples
are
or
the
there's
some
blog
posts
that
do
show.
You
walk
you
through
each
of
these
different
three
things
that
I
showed
you
if
you
were
interested
in
looking
at
more
stuff
or
learning
how
to
do
this
in
your
own
projects,
and
I
will
now
pass
it
back
to
yannick.
H
Thank
you,
andrew,
so
hi,
folks,
sorry
for
being
late.
I
promise
I
will
learn
to
read
clock
next
time,
so
I
created
a
web
port
and
basically
I
want
to
show
this
web
part
in
this
demo,
but
the
reason
why
I
built
this
is
because
it
doesn't
exist
out
of
the
box.
It
was
a
returning
customer
requirement.
H
It
has
to
use
folders
to
group
pictures
of
an
event
it
had
to
have
support
for
subfolders.
I
wanted
a
breadcrumb
to
navigate
and
I
wanted
the
image
browsing
to
happen
in
lightbox
style
when
I
built
this.
A
pleasant
surprise
was
that
it
also
works
in
the
sharepoint
mobile
app
through
viva
desktop
in
teams
and
that
people
actually
loved
how
it
looked
and
feel
because
I'm
a
developer-
and
I
don't
really
do
styling
and
the
ease
of
use
for
this
image
library
was
a
pleasant
surprise
as
well.
H
So
it
was
a
great
success
to
get
this
web
part
ready.
So,
first
of
all,
let
me
demo
it
before
we
dive
into
some
code.
Oh,
my
editing
session
has
ended.
So
let
me
refresh
this
page,
make
it
bigger
go
to
edit-
and
here
I
can
add
my
web
art.
So
it's
the
lightbox
image
gallery
webpart
and
it
uses
a
lot
of
bmp
available
controls,
so
it
uses
spdf
fx
react
controls
made
available
in
pnp.
H
So
I
go
to
configure
my
web
part
and
the
only
thing
that
you
have
to
configure
is
select
the
document,
library
or
picture
library
in
your
sharepoint
site
collection
that
you
want
to
use
to
render
your
data.
I
will
pick
fun
because
I
have
lots
of
fun
photos
available
and
you
can
see
here
that
it
renders
immediately
all
of
the
folders
that
are
available
in
my
document
library.
H
Another
thing
I
want
to
show
off
by
default:
it
has
the
web
or
title
available
and
I
use
another
control
from
the
same.
React
controls.
Library
in
pnp
to
just
inline
edit
this
to
get
kind
of
the
same
thing
as
the
out-of-the-box
web
parts,
and
then
I
will
publish
the
page
like
this,
so
it
still
renders
that's
nice
and
then
we
can
dive
into
all
of
these.
H
Folders,
like
every
folder,
like
I
said,
contains
images
for
a
specific
event
or
something
because
I
use
this
webpart
on
my
intranet
to
show
off
all
of
the
corporate
events
that
we
do.
So
if
I
dive
into
one
you
see
that
it
quickly
renders
all
of
the
thumbnails
of
the
images
inside
that
folder
and
it
also
lists
all
subfolders
in
that
folder
into
on
top
of
the
images.
H
Also
using
the
keyboard,
you
can
go
full
screen,
zoom
in
download
and
everything.
So
it's
from
the
look
and
feel
or
usability
point
of
view,
not
too
complex
of
a
part,
but
it
has
a
lot
of
use
cases
on
an
internet
or
on
a
sharepoint
site,
so
this
is
about
it
from
the
demo.
So
let's
switch
back
to
the
slides
first
of
all,
my
code
structure,
because
it's
always
nice
to
see
how
someone
else
structures
his
or
her
code.
So
I
work
with
models
where
I
put
my
models
or
my
interfaces
in
a
folder.
H
So
I've
got
my
I
data
service
here
and
my
ifolder
data.
I've
got
my
services,
the
data
service
and
the
mock
data
service
who
implement
I
data
service
on
top.
So
my
data
service
is
the
class
that
does
everything
it
interacts.
It
fetches
all
the
data
from
sharepoint.
First
of
all,
fetching
all
of
the
lists
in
my
site,
collection.
Second,
fetching.
The
data
of
a
folder
in
that
list.
Mock
data
service
is
one
that
I
use
when
running
my
report
locally
and
not
running
inside
a
site
collection
or
inside
sharepoint
online.
H
H
So
this
is
my
code
structure
and
then
there
are
some
code
snippets
that
are
might
be
interesting,
because
this
web
part
is
pretty
simple
in
terms
of
code.
So
with
simple
code,
you
can
still
get
a
lot
of
value.
So
there's
not
much
of
code
that
I
can
show
you.
First
of
all,
there's
data
service,
it
does
the
get
lists
and
it
uses
pmpjs
to
select
all
the
lists
inside
your
sharepoint
site.
So
I
get
all
my
lists.
I
get
title
base
template
root.
Folder.
H
I
expand
the
root
folder
because
I
need
some
properties
that
are
on
root
folder
and
I
fetch
everything
and
then
I
go
filter
on
base
template,
109,
which
is
picture
library
or
101,
which
is
document
library
and
all
of
those.
I
return
and
that's
what's
used
in
the
property
pane
of
my
webart
and
then
there
is
get
folder
data.
So
every
time
a
folder
is
opened
and
remember,
the
root
of
a
document.
Library
is
also
a
folder
and
has
a
folder
unique
id.
H
We
use
it
the
folder
itself
to
get
all
of
these
subfolders
for
that
folder
and
we
use
the
folder
to
get
all
the
files
from
the
folder
and
then
we
return
that
as
an
I
folder
data.
So
basically
this
tells
me
the
name
of
the
folder,
the
path
of
the
folder
and
the
number
of
images
in
the
folder.
It
gives
me
all
of
the
subfolders
and
their
ids
and
all
of
the
files
in
this
specific
folder,
so
I
can
render
them
on
screen
so
with
getsubfolders,
which
is
one
of
my
own.
H
I
just
use
once
again
bmpjs
to
get
all
of
the
data,
and
I
filter
specifically
on
is
what
we
enable
to
be
false,
which
filters
out
all
of
the
out-of-the-box
hidden
folders
from
sharepoint,
and
only
those
where
there
is
more
well
where
there
is
at
least
one
file
inside
of
that
folder
and
then
the
last
one
is
get
files
from
folder.
So
I
fetch
all
of
the
files
now.
This
is
a
specific
one,
because
I
couldn't
figure
out
the
camel
query.
H
I'm
sure
there
is
one
so
after
I
get
all
the
files
I
filter
them
to
be
of
an
image
type
to
render
them
on
the
screen
last.
One
that
I
want
to
show
off
is
the
once
again
the
sharepoint
property
pane
things
that
pmp
makes
available,
because
you
can
do
load
property,
pain
resources,
which
is
an
spf
x
out
of
the
box
available
method
to
fetch
all
of
my
lists.
So
this
goes
to
data
service.
H
Now,
because
this
is
asyncing
and
taking
a
little
while,
I
use
something
from
bmp
to
set
a
spinner
on
screen
and
then
when
this
is
loaded
afterwards,
I
clear
the
spinner
and
then
this
is
the
most
complex
line
of
code
inside
this
web
part
it's
to
fetch
or
to
get
a
thumbnail
pop,
because
if
you
fetch
an
image
from
a
document
library,
you
only
get
the
full
image
url
and
to
render
a
thumbnail
or
a
small
version
to
make
it
load
quicker.
I
really
like
to
get
a
preview
version
of
that
image.
H
So
what
I
do
is
I
take
the
full
screen
url.
I
do
an
encode
uri
component
on
it
and
then
I
once
again
replace
the
percentage
2f
with
the
forward.
Slash
again,
it's
because
that's
what's
needed
for
this
format
to
work,
and
then
I
create
a
thumbnail
path
by
taking
the
root
url
of
my
site
collection
and
replace
the
ending
with
nothing.
H
A
Thanks
janik
great
stuff,
there
really
excited
to
see
that
demo
and
as
well
the
others.
So
thanks
to
yannick
fabio
and
andrew
for
the
demos
today
very
much
appreciate
that,
and
thanks
to
all
of
you
for
joining
us
here
on
the
call
today
so
recording
will
be
available
in
about
24
hours
on
the
youtube
channel.
You
can
follow
us
on
twitter
there.
Our
next
spfx
call
will
be
in
two
weeks
on
september
23rd.
The
next
general
dev
call
be
next
thursday
september.
16Th.