►
Description
M365 PnP Community's SPFx and JavaScript SIG call on June 18. Four demos delivered: 1) Teams personal app settings, 2) Add JS and CSS to modern pages, 3) Using Codespaces with SPFx, and 4) Using React Hooks with SPFx, Open-source project updates include: Released PnP Office 365 CLI - new beta version v2.11, Reusable SPFx React and React Property Controls v1.19.0, PnP SPFx Generator v1.14.0 with support for Angular 9. Ten new or updated Samples - 2 SPFx extensions and 8 SPFx web parts delivered. The host of this call was Vesa Juvonen (Microsoft) @vesajuvonen. Q&A takes place in chat throughout the call.
Demos:
• Storing Microsoft Teams personal app settings in your SPFx solutions | Alex Terentiev (Sharepointalist) | @alexaterentiev
• Using SharePoint Framework to embed JS and CSS to modern pages | Siddharth Vaghasia (Tata Consultancy Services) | @siddh_me
• Using Codespaces with SharePoint Framework | Paul Schaeflein (AddIn365) | @paulschaeflein
• Using React Hooks with SharePoint Framework | Paul Schaeflein (AddIn365) | @paulschaeflein
References:
• See the full blog post for this call at: http://aka.ms/spdev-blog.
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos
A
Welcome
everybody
to
the
SharePoint
framework
and
JavaScript
special
interest
group.
This
is
the
bi-weekly
sync.
It
is
June
18th.
It
is
a
midsummer
which
is
apparently
being
almost
celebrated
in
Finland
and
in
Sweden.
So
in
Finland,
that's
the
biggest
family
celebration,
because
typically
this
time
of
the
year,
we'll
have
two
two
days
of
summer
and
the
other
one
will
rain
anyway,
but
anyway,
that's
more
than
enough
from
Finland
and
stupid
joke
anyway.
A
So
today
we'll
have
a
lot
of
lot
of
stuff
to
go
to
so
we'll
have
actually
quick
recap
on
where
we
are
with
Japan's
famed.
Nothing
really
traumatically
new
on
that
one.
Now
it's
gonna
give
some
updates
on
the
schedule.
Then
we'll
have
a
massive
recap
on
five
different
open-source
projects,
we'll
run
them
through
relatively
fast,
and
let's
see
if
the.
If
the
owners
are
on
the
call
depending
on
their
availability,
then
we
have
I.
A
Think
Hugo
is
going
to
call
to
do
a
quick
recap
on
the
new
community
samples
and
then
three
demos
I'm
trying
to
be
so
fast
on
the
intro
that
we
are
arriving
to
the
demos
on
quarter
baths.
So,
if
you're
not
interested
on
anything
else,
you
can
have
a
coffee
break
for
15
minutes
and
a
quarter
busts
will
be
in
the
demo
section
and
Alex
is
going
to
start
and
then
sit
hard
and
then
Paul
Celan.
It's
going
to
do
some
cool
stuff
as
well,
but
let's
actually
get
moving
on
the
classic
stuff.
A
So
quick
recap
on
the
opportunities
just
please
reach
out
if
you're
interested
on
and
doing
any
of
the
demos
or
contributing,
oh
sorry
doing
demos
on
the
course,
we
absolutely
welcome
them
right
now.
We
are
already
booking
August.
So
please
be
early
if
you're
interested
on
booking
things.
So
that
means
that
it
will
be
not
be
the
next
call
where
you
can
be
actually
doing
the
demo
and
people
seem
to
like
and
I.
Personally,
oh
absolutely
love
the
community
contributions
and
community
demos,
so
that
is
a
great
way
of
learning
how
to
do
stuff.
A
In
my
experience,
it's
the
first
platform.
You
can
also
contribute
in
github
we'll
go
through
the
projects
in
a
second
and
which
are
really
related
on
the
client
side
and
the
most
important
thing
provide
feedback.
Super
super
important
and
also
positive
feedback
is
welcome
and
I
think
I
mentioned
this
last
time
or
whenever
it
was.
There
was
a
moment
where
somebody
actually
get
opened
up
an
issue:
I
think
it
wasn't
B&B
jeaious
library
and
where
they
basically
said,
yeah
I
just
wanted
to
open
up
an
issue
and
say
awesome
job
and
I
betting.
A
You
know
that
circa
circled
around
against
which
all
of
the
people
who
actually
are
working
behind
the
same
some
things,
because
it
is
so
rare
that
people
actually
provide
open
openly
a
positive
feedback
and
negative
feedback
and
people
calling
out
other
people
yeah.
That
happens
all
the
time,
because
this
is
apparently
the
term
of
the
internet,
and
but
let's
try
to
learn
to
be
positive.
Let's,
let's
try
to
get
to
be
R
to
the
positives
and
and
move
forward
from
there.
Now
quick
recap
on
our
assets,
not
gonna.
A
Last
you
must
summon
this
number
one
URL
to
actually
remember
is
the
AKMs
introduces
the
five
P
and
P,
which
is
basically
the
location
where
you
can
find
all
of
the
different
assets
and
locations
and
projects
and
links
and
blah
blah.
So
that's
the
Welcome
page
of
my
cash
register,
five
buttons
and
parenthesis
where
this
initiative-
and
this
call
is
also
part
of
now.
We
also
have,
if
you're
interested
on
contributing
but
you're,
not
super
familiar
and
you're
scared.
We
can
help
you
and
that's
the
beauty
of
the
community.
So
we
have
this
open.
A
Sharing
is
caring
initiative,
which
is
basically
helping
well
sharing
is
caring
is
a
slogan,
but
then
this
initiative
is
called
sharing.
Sharing
is
caring,
where
we
actually
help
first-time
contributors
and
community
Docs
contributors
on
learning,
how
to
use
kids
up
and
contribute
on
the
on
the
Kitab
on
contribute
on
the
docs
that
microphone
or
in
a
case
hub
intern
in
general.
So
please,
if
you
don't
feel
comfortable
enough,
go
to
the
AKMs
sharing,
is
caring,
URL
and
sign
up
for
these
trainings.
A
They
are
really
good
and
we
are
hearing
a
lot
of
out
of
great
feedback.
How
awesome
and
helpful
their
sessions
are
for
the
people
who
are
joining
on
them.
So
please,
please,
please,
go
there
and
be
active,
quick
recap
on
the
SharePoint
framework.
We
are
closing
in
to
the
shipments
framework
1.11
release.
So
that's
gonna
happen
in
July
right
now.
It's
the
plan,
roughly
in
mid
July
I'm,
actually
gonna
have
few
weeks
off,
starting
from
a
certain
time
in
July,
so
I
need
to
get
get
it
out
before
that,
so
otherwise
my
family
will
be.
A
Wife
will
not
be
happy.
So
that's
now
right
now
the
driving
factor.
So
obviously,
if
there's
technical
issues
and
we
need
to
delay
the
release,
then
we'll
delay
the
release,
and
somebody
else
will
take
that.
But
anyway,
just
letting
you
know
Mitchell,
I
or
right
after
me,
July
is
right
now
to
target.
It
will
basically
also
be
enabling
us
to
go
to
the
app
source,
so
you
can
actually
have
shipment
framework
solutions,
so
you
can
already
start
thinking.
A
Do
you
have
something
where
she
would
like
to
good
on
the
on
the
store
and
then
have
your
licensing
structures
and
all
those
implemented
as
an
option
as
well?
There
will
be
teams,
integration,
improvements,
so
test
modules
and
metadata
updates
for
the
manifests
for
the
other
generation.
Nothing
too
dramatic,
but
again
enabling
more
Ziya
scenarios.
This
additional
in
general
we're
looking
into
teams
teams,
teams
as
the
focus
area
and
definitely
and
but
also
we're,
not
forgetting
the
sharepoint
and
portals
not
at
all.
A
So
all
of
that
is
different
in
their
focus
area
as
well,
but
as
a
rule
of
thumb,
teams
is
the
target
for
Microsoft
right
now.
Now,
quick
recap
on
the
PBJs
client-side
libraries
I'm,
just
double-checking
Julie.
Are
you
in
the
call
one
two,
three
four
five,
no
you're
not
so,
and
the
next
release
will
be
one
2.0
at
2.0,
seven,
which
is
happening
in
July.
10Th
2.06
happened
already
that
actually
already
had
a
taxonomy
API
sand
updates
and
Docs
updates,
and
it's
great
to
see
the
interest
on
this.
One
I
was
just
checking
this.
A
It
has
more
than
400
hearts
and
likes
in
the
indicator.
Ups
and
it's
used
super
widely
used.
It's
is
growing
really
watch
and
Patrick
is
still
on
a
family
leave
parental
leave,
basically
and
he's
coming
back
on
the
latter
part
of
July,
actually
on
the
exact
day
when
I'm
starting
my
vacation,
which
is
kind
of
funny
by
an
accident
but
he'll,
be
back
in
July
until
then
actually
and
untrue,
and
the
other
theme
is
something
to
be
in
PJs.
Now
it's
quickly
on
the
office
reaches
2000.
A
I
2.11
is
the
latest
one,
which
is
the
beta
version,
support
for
creating
max
of
teams
using
templates,
improve
upgrading
of
the
SP
FX
projects.
So
by
the
way,
it's
just
a
recap-
and
we
notice
we're
repeating
this,
and
there
is
no
thing
everything
else
I
shouldn't,
but
if
you
have
any
existing
SharePoint
framework
solutions
used,
office
register,
I,
say
Ally
to
upgrade
to
the
latest
version.
Definitely
the
easiest
way
to
do
that
and
I
will.
A
It
is
also
looking
into
get
renamed
as
a
Microsoft
resist
5rm,
true
sister
5
in
the
future,
that
naming
a
discussion
are
still
ongoing
to
get
with
marketing,
now
svff,
reusable
components
again
updates
here
as
well,
new
controls
and
in
1.19
one
of
the
things.
What
I
wanted
to
call
out
here
is,
for
example,
the
the
probably
pain
file
picker,
which
is
the
the
lower
right-hand
picture,
which
actually
looks
like
the
OtterBox
one,
and
but
it
is
actually
a
third
party,
a
custom
one
which
prayer
which
has
been
contributed
by
the
community.
So
thank
you.
A
Thank
you
for
these
contributions
as
well,
and
then
we
have
the
BMP
SPF
exeument
generator
in
here.
We
just
had
a
release
today
and
with
a
absolutely
created
own,
where
we
now
support
angular,
9
and
with
BMPs
perfection
our
item.
So
if
you're,
if
you
are
not
in
react-
and
you
prefer
to
do
your
development
using
anger,
that
is
now
an
option
for
you
by
using
the
BMPs
VFX
generator
behind
the
scenes,
this
generator
is
using
the
out-of-the-box
one.
So
you
are
not
actually
using
any
any
rope
functionality.
So
to
say
this
generator.
A
Decorates
start
at
the
box
one
and
adds
capabilities
like
the
angular
support
on
it.
So
that's
pretty
cool
as
well,
and
then
a
quick
recap
on
the
PMP,
modern
search
and
there's
a
new
version
coming
up
in
July
2020
and
not
a
massive
massive
updates.
Until
then,
a
chemist,
BMPs
search,
it's
the
location,
so
this
is
the
one
which
is
enabling
you
to
build
more
on
SharePoint
assert
centers
until
the
first
first
party
experience
that
is
available
again
new
version
plan
to
get
out
in
July.
B
So
we
have,
we
have
the
SP
effects
sample
repositories.
There
are
two
of
them:
one
is
the
SP
FX
extensions
and
ones
SD
FX
webparts,
they
are
community,
contributed
samples
and
you
know
they
can
represent
any
kind
of
scenarios,
including
some
very
basic
concepts,
to
pretty
much
entire
solutions
that
you
can
use.
So.
C
B
New
samples,
one
is
a
full-on
image.
Editor
from
Mendes,
allows
you
to
actually
edit
images
directly
within
library.
It's
fantastic.
We
also
have
updates
to
my
followed
site
application
customizers
by
Raoul,
who
updated
it
to
SPF,
X,
1.10
and
I.
Believe
Raoul
was
one
of
our
sharing
is
caring
graduates.
We
also
have
a
new
web
part
from
harsh
of
our
Deanie.
The.
C
B
Web
part
details
and
what
it
does
it
actually
allows
you
to
look
at
all
the
web
parts
on
a
page,
get
information
about
those
web
parts
and
interact
with
them.
So
this
is
a
great
concept
that
you
can
use
in
your
own
web
parts.
Harsha
is
also
a
sharing
and
scaring
graduates
who
are
proud
to
see
her
work
here.
B
B
You
know
just
trying
to
surprise
him
where
we
can
add
JavaScript
and
CSS
references
on
modern
pages.
We
also
have
the
adaptive
card
host,
which
I
love
it
today,
you'll
actually
see
of
react
hooks
version
of
it
by
Paul
Chafin.
But
what
we've
done
here
is
in
May
the
adaptive
cards
schema
for
for
adaptive
card
templating
was
changed
and
it
broke
all
our
parts,
so
we
had
to
update
them.
We
have
also
an
update
to
the
react.
Calendar
I
actually
use
the
office
365
CLI
project
upgrade
using
code
tours.
B
If
you
haven't
tested
that
try
it,
we
have
the
modern
calendar
by
nan
deep
and
the
this
was
a
web
part
sample
from
originally
by
jerry
Coleman,
but
nandi
updated
it
for
us.
And
finally,
we
have
two
more
the
react:
carousel
web
part
by
roll
again
and
the
abreact
app
in
sites
dashboard
by
Sudarsan,
who
added
support
for
communication
pages
I,
encourage
you
to
go
to
a
kms
extensions
in
akms,
/,
SP
effects,
webparts
and
we're
always
looking
for
samples.
If
you
have
anything
to
contribute,
we
love
to
see
your
sample.
That's
it
for
me.
A
Thank
you
go.
Thank
you
go!
Thank
you,
everybody
for
contributing.
This
is
really
really
cool
stuff
and
it's
great
the
same
and
more
and
more
contributions
on
this
area
so
really
really
really
great
stuff
and
by
the
way,
if
you're
interested
you
can
try
contributing
and
then,
whenever
you're
contributing
then
huger
or
somebody
else
so
we're
reaching
out
and
asking
hey.
Do
we
want
to
do
it
like
demo
of
this
thing,
and
so,
if
you're
interested
on
getting
exposure
through
this
community
course
as
well,
so
we
can
catch.
A
You
scheduled
and
good
example
of
those
people
on
these
three
and
persons
who
volunteered
and
based
on
their
contributions,
which
we'll
see
today,
and
we
are
amazingly
on
the
under
schedule
as
well.
So
I
was
speaking
so
fast
on
the
start.
I
need
to
start
doing
that
even
even
more
in
the
future,
maybe
not
now.
Alex
I
saw
that
you're
already
a
presenter
which
is
good
and
we
can
actually
start
moving
to
your
screen.
You.
C
This
demo
is
about
a
part
that
is
hosted
in
Microsoft
teams
as
a
personal
app
and
probably,
as
you
know,
the
personal
apps
or
personal
tabs
and
teams.
They
don't
have
settings
so
for
shape
one
framework
developers.
It
means
that
these
dot
properties
object
is
never
populated,
it's
always
undefined,
but
in
real
scenarios
we
probably
need
to
store
setting
somewhere
and
to
customize
different
behaviors
of
our
web
part
based
on
different
users,
and
there
are
multiple
different
approaches
that
we
can
use
here.
C
One
of
the
approaches,
for
example,
described
by
rubber
scout
and
sorry
if
I
pronounce
the
last
name
correctly.
It
is
this
approach
is
about
using
onedrive
document
sent
in
document.
You
can
store
all
the
configurations
for
the
web
parts.
Another
option
is
Microsoft
graph,
custom
properties
for
users
and
the
approach
that
I
want
to
show.
You
today
is
about
onedrive
as
well,
but
it's
about
creating
a
custom
list
in
onedrive
and
storing
the
information
in
there.
So,
first
of
all
here
you
see
the
web
part
itself.
C
It
has
custom
panel
where
you
can
do
the
same
configuration
of
the
properties
like
in
property
pane
when
you
click
Save,
it
should
update.
Hopefully
no
it's
not.
Yes,
it's
updated
and
if
I
refresh
the
properties
should
be
set,
so
you
will
see
the
same
configuration
so
everything
works
now.
I
want
to
show
you
the
onedrive
lease,
so
here
I'm
on
my
onedrive.
It
means
that
because
personal
apps
are
about
users,
so
each
user
has
unique
configurations.
C
That's
why
that's
why
we
can
use
users
onedrive
to
save
their
unique
settings
so
I
have
these
WP
properties
list
on
my
onedrive
and
I.
Have
one
record
here
with
the
key
of
my
web
part
and
web
part
properties
as
a
separate
column.
Why
this
approach
is
good,
at
least
from
my
point
of
view.
If
you
are
Eisley,
you
can
have
single
lists
in
onedrive
and
you
can
store
different
configurations
here
for
different
webparts.
C
So,
for
example,
if
you
are
provided
in
a
bundle
of
like
10
I,
don't
know
webparts,
you
will
have
10
different
options
here
with
with
10
different
keys
and
request
information
about
properties.
From
this
list
you
don't
need
to
create
separate
file
or
separate
instance
of
library
for
each
and
every
configuration
and
each
and
every
web
part.
So
let's
look
at
the
code,
it
should
be
good
size,
so
there
is
not
much
interesting
from
the
web
part
itself.
The
only
thing
that
we
are
doing
here.
C
We
can't
get
properties
from
these
dot
properties
object,
and
instead
of
that,
we
are
creating
the
web
properties
service
that
actually
yet
properties
from
onedrive
and
when
needed,
set
properties
to
onedrive
as
well,
based
on
webpart
key
and
the
properties
are
kind
of
custom
properties.
Object
from
our
web
part
and
the
interesting
part
is
this
service
service.
Sorry,
so
I
have
the
interface
for
the
web
part
properties
service.
C
So
it
basically
means
if
you
copy
and
paste
the
code
from
this
web
part
to
your
solutions,
you
can
implement
some
other
approach
using
just
the
this
interface.
It
has
just
two
methods:
get
properties
and
set
properties
and
I
have
the
implementation.
For
this
interface,
onedrive
least
the
part
properties
service.
Under
the
hood,
it
is
using
Microsoft
graph
to
communicate
with
the
onedrive
and
main
things
that
are
done
here.
First,
we
are
getting
my
side
graph
ad,
so
this
is
done.
Using
slash
missile
drive,
/
route
and
from
there
we
are
getting
SharePoint
IDs.
C
It
actually
allows
us
to
construct
site
ID
that
is
used
to
work
with
the
SharePoint
and
onedrive
sites
inside
Microsoft
graph.
The
second
request
that
we
need
is
to
get
settings
list
ID,
so
we
are
trying
to
get
our
list
from
onedrive
it.
If
it's
not
there,
we
will
create
the
list
first
and
then
store
this
ID
in
our
web
part
again,
because
we
need
that
to
store
our
settings
and
two
main
methods
or
implementation
of
our
interface
is
basically
really
simple
as
well
in
our
set
properties.
C
We
are
getting
this
list
ID
that
we
previously
sort
or
if
it's
not,
we
are
creating
the
list.
We
are
updating
the
internal
cache
because
we
don't
want
to
do
all
the
requests
all
the
time
when
one
property,
for
example,
changed.
We
have
our
instance
of
the
service,
so
it
will
be
just
operated
from
our
memory
right.
So
then
we
are
checking
if
there
is
existing
item
for
our
web
part
properties.
If,
yes,
in
that
case,
we
will
just
update
the
specific
field
with
our
new
properties.
C
Otherwise
we
will
create
a
new
row
in
our
list
new
item
in
our
list
and
provide
properties
in
there.
So,
as
I
said,
this
approach
allows
you
to
have
multiple
webparts
all
in
the
same
list
with
different
configurations,
and
it
will
automatically
create
additional
list
items
for
you
if
it's
not
there.
So
that's,
probably
it's
it's
a
pretty
simple
quote
and
go
to
a
game
as
a
spell
effects.
Webparts
I
believe
and
the
example
is
there
and
copy
and
paste
the
poet
if
you
need
and
feel
free
to
use
it
in
your
custom
solutions.
C
A
List,
as
are
you
creating
a
list
which
is
hidden
and
you
only
get
access
on
it.
If
you
know
the
URL,
and
so
that's
actually
smart
way
and
the
kind
of
a
classic
way
how
we're
storing
data
in
the
in
the
SharePoint
in
general,
so
hidden
lists
just
actually
a
lot
of
hidden
lists
in
the
sites
where
we're
storing
the
information.
A
A
If
you
go
dust,
slash
lists,
slash
component
manifests
mm-hmm,
just
getting
some
insights
on
on
how
we,
as
a
Microsoft
and
engineering,
we're
actually
taking
advantage
of
this
exactly
the
same
model.
So
when
I
think
about
it
and
whatever
Alec
showed
as
the
storage
option
and
creating
a
list
behind
of
the
scenes,
the
user
has
always
permissions
creating
his
own
list
and
then
saving
the
information
to
the
list
in
the
in
the
one
tribe.
It's
exactly
the
same.
What
a
lot
in
SharePoint
as
well!
A
So
even
your
individual
SharePoint
framework
components-
these
are
the
ones
these
are
actually
the
ones
which
were
operating
behind
the
scenes.
Obviously
it
is
not
intended
to
anybody
to
go
here
and
edit
the
settings
and
all
of
that,
because
doesn't
it
actually
break
stuff,
but
if
needed,
this
is
good
information
from
a
troubleshooting
perspective
because
might
need
to
have
to
go
here
and
and
then
see.
A
If
something
is
there
now,
if
you
go
back
on
your
own
list,
implementation
notes
and
again,
one
of
the
things
here
super
important
to
notice
is
that
you
want
a
name
to
list
using
some
sort
of
a
unique
naming
convention
within
your
company,
so
that
because
it
would
be
pretty
awkward
Alex
if
your
company
would
be
using
exactly
the
same
names
list,
then
say
otherwise:
v4
and
actually
cause
conflict.
So
there's
kind
of
an
interesting
implications
in
here.
So
just
there
are
three
questions
related
on.
A
So,
first
of
all
and
I
might
actually
confuse
people
on
the
client-side
components
and
lists
that
was
only
to
show
that
we're
using
that
kind
of
a
model
and
an
approach
and
a
pattern
internally
an
out-of-the-box
and
you
cannot
actually
save
the
information
in
there.
It
was
mainly
to
show
the
model
that
we,
whatever
Alex,
shows.
We
use
that
you
use
it
in
general
as
well.
Then
there
was
a
good
comment
from
Aaron.
Is
it
not
better
to
use
Microsoft
graph,
open
extensions
or
skin
extensions
for
specific
user
disorders?
Information?
Yes,.
C
A
Yeah
yeah
and
then
what's
the
better
approach?
What's
the
bad
approach,
it's
always
debatable.
There's
there's
advantages
and
disadvantages
on
different
options,
whatever
actually
feels
more
comfortable
comfortable
for
the
developer
that
would
be
chosen.
Yes,
cool
I
think
we
can't
went
through
all
of
the
all
of
the
questions
in
the
chat
and
pretty
much
and
just
wanted
to
kind
of
read
the
rates.
What
you
were
showing
so
that
people
understand
the
power.
A
Can
you
get
back
still
on
the
on
the
web
part
or
the
personalization
just
making
sure
that
people
do
understand
that
this
is
a
weird
thing
and
but
it's
actually
by
design
in
Microsoft
teams
that
there
is
no
setting
option
for
personal
applications.
So
personal
applications
are
not
intended
to
have
a
native
out-of-the-box
configuration
option
and
that's
where
basically
yeah
it
is
I,
do
a
Korean,
that's,
but
apparently,
from
their
perspective
they
decided
that
that's
not
apparently
needed
sir
I
don't
know,
but
I
think
that's
it
for
now.
So
thank
you.
Thank
you.
Yeah,
like.
C
A
Point
good
point:
yes,
absolutely
absolutely
now
it
might
be
that
in
the
future,
additions
and
versions
of
SharePoint
framework,
like
SharePoint
version
framework
version,
one
point,
twelve
or
thirteen
or
fourteen-
and
who
knows
if
we
skip
thirteen
because
there
was
no
sharepoint
version-
thirteen
even
in
either
anyway.
That's
a
side
track,
but
in
those
there
might
be
some
native
support
for
something.
Maybe
if
people
find
these
kind
of
things
useful,
but
but
again,
like
Alex,
showed
implementing
this
as
a
own
extensibility
or
own
implementation.
A
In
a
it's,
not
a
message
to
couch,
let's
actually
move
into
the
siege
hearts
site
and
it
hurts
demo-
and
this
was
around
adding
javascript
and
CSS
to
modern
pages,
which
I
think
we
will
have
a
discussion
on.
Is
this
actually
recommend
it
or
a
a
good
approach
or
a
bad
approach
as
well?
But
let's
actually
go
through
the
implementation
first
and
then
talk
about
talk
about
what
it
actually
means
and
take
it
away.
Yeah,
hello.
D
Everyone,
so
my
sense
is
that
I'm,
a
technical
consultant
working
primarily
focusing
on
SharePoint
office,
365
and
Azure
today
I
will
be
presenting
an
SPF,
X
solution
which
will
allow
us
to
add
JavaScript
and
CSS
reference
on
to
the
modern
pages.
This
is
the
link
to
the
sample
which
is
available
in
our
SPF
X,
the
parse
repo,
so
driving
factor.
First
main
one
of
the
main
driving
factor
was:
you
know
how
we
can
make
SPF
x
action
send
configurable
by
so,
as
we
know,
with
modern
pages,
we
we
are
not
allowed
to
LED
master
page.
D
That
is
a
different
story,
but
for
now
the
primary
focus
is,
you
know
in
case
wherein,
if
the
organization
or
the
customer,
which
you
are
working
on,
had
very
strict
branding
guidelines
and
we
might
have
to
use
custom
CSS
customization
on
all
the
modern
web
part
pages,
then
there
is,
there
might
not
be
other
way
rather
than
using
the
customization
using
CSS
files.
So
another
driving
factor
is
if
we
are
using
the
SP
FX
extension
of
application
customizes
the
references
which
we
wanted
to
add,
which
we
need
to
add
it
in
the
code
itself.
D
So
it
would
be
kind
of
hard
coded
in
the
solution,
and
if
we
wanted
to
remove
or
add
existing
reference,
then
we
might
have
to
change
the
extension
code
again
redeploy
the
package
and
also,
if
suppose,
we
think
we
can
also
make
it.
You
know
it
won't
be
reusable
we've
suppose.
If
you
have
two
different
side
connection,
wherein
we
need
two
different
references,
different
set
of
references,
javascript
and
CSS
references
for
each
side
collection,
then
we
might
have
to
build
two
different
SP
effects
solution,
one
for
site
collection,
one
and
one
for
site
collection
too.
D
But
in
this
the
solution
which
I
would
be
presenting
it's
kind
of
a
usable
solution
wherein
we
can
use
a
single
solution
across
your
tenant
and
it
can
be
used
across
different
sized
connections
and
different
J's
and
CSS
file.
Reference
can
be
added
onto
the
modern
pages,
so
this
solution
demonstrate
the
usage
of
the
part
and
extension.
Now
we
are
connecting
the
apart
and
extension.
This
is
interesting,
I
mean
via
custom,
extents.
So,
okay,
we
are
using
custom
actions
to
activate
and
deactivate
and
xB
FX
extension.
D
As
I
said,
it
will
allow
us
to
add
custom,
J's
and
CSS
file
reference.
It
will
also
allow
to
add
or
remove
the
reference
it
supports.
Relative
URL
and
simple
security
reason:
I
mean
we
don't
want
any
user
who
has
access
to
the
site
to
allow
or
use
this
map
art.
For
that
reason,
simple
reason:
I
have
added
a
simple
permission:
T
wherein
the
users
with
manage
permission
will
be
only
able
to
do
the
operations,
okay
so
coming
to
the
demo.
D
So
this
is
the
part
page,
and
this
is
the
part
which
would
allow
us
to
add
the
custom
engines
file.
References
see
on
the
page
load,
it
will
check
whether
you
know
there
are
any
existing
GS
or
CSS
file
reference
which
have
been
added
via
this
solution.
If
so,
it
would
be
loaded,
otherwise
it
will
allow
me
to
and
new.
D
I
mean
we
should
not
be
using
this
kind
of
customization,
which
is
heavily
dependent
on
the
page
structure,
because
you
know
in
future,
if
Microsoft
changed
something
onto
the
page
structure,
our
customization
can
break.
But
this
this
might
not
be
a
solution,
but
if
you
think
about
it,
if
we
wanted
to
add
any
external
j/s
or
CSS
reference,
which
you
wanted
to
use
across
multiple
SP
effects
of
a
part-
and
you
wanted
to
add
references
onto
all
the
modern
pages,
still
this
kind
of
adding
references
by
application
customization
can
be
used.
D
D
Once
I
have
done,
this
I
will
just
activate
it
and
it
will
activate
the
application
customization
a
customizer
and
if
now
I
will
refresh
the
page,
the
JavaScript
file
and
the
CSS
file
customization,
which
I've
ever
done
would
be
activated.
So
if
you
see
I
can
see
the
alert
box
which
I
was
there
in
the
custom
J's
file
and
the
color
of
my
left,
navigation
has
changed
right
and,
as
I
said,
if
the
apart
already
has
some
customization
been
done,
it
also
allows
to
edit
the
reference.
D
It
also
allowed
us
to
add
new
references,
or
it
also
allows
us
to
delete
the
references
so
now
for
now
I'm,
just
deleting
the
JavaScript
reference
and,
if
I
say
activate,
it
would
automatically
update
the
application
customization
and
now,
once
I
refresh
the
page,
I
won't
see
the
alert
box
because
I
have
removed
reference
to
the
JavaScript
file,
but
this
CSS
customization
would
be
there.
So
one
more
feature
here
is:
we
can
all
together
deactivate
everything
rather
than
you
doing
individual.
If
you
wanted
to
deactivate,
I
can
just
say
deactivate
and
everything
would
be
deactivate.
D
Deactivated
and
I
should
not
be
see,
any
references
should
be
removed
and
the
customization
also
would
be
removed.
Okay.
So
this
is
the
demonstration
of
the
web
part
going
to
the
code.
As
I
said,
we
have
two
components:
one
is
SPF
X
extension,
which
takes
care
of
injecting
the
scripts
JavaScript
references
and
CSS
file.
References
I
will
come
back
to
this
later
and
in
the
web
part
we
have
the
extension
which
which,
which
will
have
the
user
interface.
D
So
I
am
using
PNP
mix
of
PNP
controls
and
office
UI,
or
few
and
UI
controls
to
create
the
user
interface
and
on
the
page
load.
The
first
method,
which
would
be
called,
is
to
check
the
permissions
okay.
So
here
again
we
are
using
PNP
J's
to
check
whether
the
current
logged
in
user
has
managed
by
permission.
If
so,
he
would
be
able
to
allow
to
move
forward.
Otherwise
we
would
be
displaying
a
simple
Excel
denied
error
message
on
to
the
web
part
and
he
won't
be
able
to
use
that
particular
part.
D
Come
to
the
page
load
method
on
the
page
load,
we
are
checking
whether
we
are
first
reading
the
current
custom
extents,
which
are
resisted
onto
this
particular
site
collection,
and
then
we
are
filtering
based
on
the
custom
action
title.
So
this
is
kind
of
a
custom
action
title
which
is
kind
of
hard
coded,
so
that
you
know
I
can
compare
it
and
I
can
also
read.
I
can
I
can
also
add
it
whenever
it
is
required.
So,
based
on
the
title,
it
will
check
whether
you
know
the
custom
action
has
been
registered
already.
D
If
so,
it
will
basically
read
the
client-side
component
property,
so
this
is
the
interesting
part:
okay
like
how
we
can
make
an
SPF,
X
extension
customizable.
So
associating
the
client-side
component
properties
attribute
of
a
custom
action
would
allow
us
to
pass
dynamic
properties
to
the
extension
also-
and
this
would
have
this-
we
will
be
passing
while
we
would
be
registering
the
custom
actions.
D
So
once
we
get
the
properties,
we
are
passing
that
particular
jason
and
categorizing
into
JS
file,
references
and
CSS
file
references,
and
then
we
are
setting
States
so
that
it
would
be
displayed
on
the
page
load
right
now
coming
to
once
when
the
user
clicks
on
activate
button.
So
this
is
the
method
which
would
be
calling-
and
here
if
we
see
this
is
the
payload
through
which
the
extension
and
the
custom
action
is
getting
connected.
D
Okay,
now
the
title
as
I
said,
it
is
something
which
I
have
hard-coded
in
the
code
itself,
so
that
I
can
compare
it
later.
When
the
page
load
is
happening,
the
location
of
the
custom
action
should
be
of
type
application,
customizer
and
the
client-side
component
ID
is
the
actually
the
application.
Custom
is
a
component
ID
which
we
can
found
in
the
extensions
manifesto
JSON
file.
D
So
this
is
how
the
extension
code
is
being
connected
with
the
apart
and
to
and
make
it
can
be
made
configurable
so
that
you
know
we
can
allow
user
to
pass
some
properties
to
over
X
if
X
extension
via
the
part
and
the
extension
will
do
its
work
as
soon
as
the
extension
would
be
loaded.
So
that's
it
from
the
code
side
before
moving
on
I.
D
Just
wanted
to
add
one
interesting
read
here,
which
was
helpful
for
me,
which
is
available
at
this
Microsoft
Docs
link
from
this
particular
paragraph
I
got
an
idea
where,
in
you
know,
though,
it
says
that
we
can
associate
a
client-side
component
I
leave
with
the
field
customizer
in
the
documentation
part,
and
we
can
associate
the
properties
also,
but
this
is
from
where
I
got
the
idea
that
we
might
be
able
to
use
it
in
the
other
extension
types.
Also,
so
that's
it
from
my
side.
Thank
you.
Everyone
for
listening
over
to
you
VESA
thank.
A
You
sweetheart,
let's
not
close
to
the
discussion
yet
because
we
still
have
a
few
minutes,
the
code
and
just
the
pin
point
there:
the
the
SB
dot
web
dot
s,
the
user,
custom
action
and
that's
where
we,
where
we
add
or
get
we
operate,
the
user
custom
action
there
exactly
so
this
one
just
for
those
who
are
not
super
familiar
with
this
one.
This
is
an
object,
model
and
structure
which
have
existed
in
SharePoint
since
2010.
A
It
is
2020
now
so
it's
kind
of
interesting,
but
it's
it's
being
kind
of
a
classic
way
of
embedding
scripts
or
references
to
scripts
on
a
pages
and
basically
it
Hearst
solution
is
taking
advantage
of
exactly
the
same
classic
option
where
we
are
then
adding
the
the
well.
It
gives
you
the
capabilities
of
having
a
script,
URL
or
an
actual
script,
and
then
it
will
be
executed
as
part
of
the
page,
and
you
could
actually
set
this
also
in
the
site.
A
Collection
level,
but
typically
in
a
modern,
safe
SharePoint
experience
is
one
site
is
at
once
I
collection.
So
because
we're
heading
to
this
direction,
where
we
talk
about
hub
sites
and
rather
than
sub
sites,
so
therefore,
quite
often
adding
this
to
the
web
object
would
be
enough
I'll
unless
I'm
completely
wrong.
If
you
would
do
SBS
site,
don't
use
a
custom
action
that
would
be
available
there
as
well,
and
the
implementation
would
be
exactly
the
same.
Is
there
a
SPO
site,
yeah
and
user
custom
action
should
be
there
yeah?
So
this
one?
A
If
you
get
the
script
or
a
setting
in
here,
it
would
actually
impact
all
of
the
sites
within
a
site,
collection
and-
and
like
said
this
is
quite
classic
script.
Embedding
scenario
which
we've
been
using
in
in
SharePoint
for
addressing
gaps
in
the
product
for
quite
a
few
years
already
well,
almost
the
more
than
a
decade
already,
which
kind
of
scary
as
well
and
just
to
recap
with
formation.
So
you
should
only
use
this
in
the
scenarios
where
customer
says
that
you
need
to
do
this
or
you
will
lose
the
the
deal
or
whatever.
A
So
it's
not
because
the
problem
is
really
here
is
that
your
code
is
not
in
the
native
extensibility
point,
and
that
might
mean
that
your
code
will
not
execute
in
all
of
the
scenarios.
Well
will
execute
the
user
custom
action
but,
for
example,
if
you
get
a
dependency
on
the
CSS,
IDs
or
elements
in
a
page
which
will
be
changed
at
some
point
and
which
sister
typical
way
of
hiding
stuff
or
modifying
stuff
like
in
this
case.
Thank
you
sit
her
now.
You
basically
have
the
SP
left
navigation.
A
We
do
not
guarantee
that
the
dome
structure,
so
basically
the
structure
of
the
page
is
an
API.
It's
never
intended
to
be
an
API.
It
should
not
consider
it
as
an
API.
So
therefore,
the
dome
structure,
the
structure
of
the
bits,
England
and
CSS
style
names
might
actually
be
changed
without
you,
letting
without
just
letting
you
know
about
that,
because
we
don't
currently
that
as
an
extensibility
point
again,
you
can
do
that.
But
does
this
dependency
on
things
and
then
others?
A
A
E
I
want
to
cover
a
couple
of
tips:
I've
stopped
using
with
SPF
X
over
the
last
couple
months
or
so
using
Visual
Studio
code
spaces
or
as
well
as
well
as
react
cooks.
So
a
little
bit
about
me,
I
work
on
365
ICO
hosts
a
podcast.
If
you
don't
hear
enough
of
my
voice
today,
you
can
certainly
find
out
more
I
will
say
that
we
recorded
the
PM
of
code
spaces
that
earlier
this
week,
so
that'll
be
published
in
the
next
couple
of
weeks.
E
So,
if
you
want
more,
you
can
certainly
get
it
from
there
I'm
happy
to
answer
questions
on
the
Twitter
and/or
email
happy
to
I'll
open
any
questions
that
you
guys
might
have
as
well.
So
real
quick
I
want
to
show
about
Cote
spaces.
I
confirmed
it's
one
word
with
one
capital
letter,
so
code
spaces
is
currently
public
preview
which
lets
you
connect
to
a
cloud
hosted:
development
environment
using
the
browser
or
Vegas
code
or
Visual
Studio,
and
there's
the
link
in
there.
E
We
can
get
these
things
posted
up
as
well,
pretty
straightforward,
but
the
idea
of
course,
or
on
this,
is
that
Microsoft
will
then
host
or
github
right
will
host
a
development
container
and
you
can
connect
to
it
using
your
various
tools.
So
I
want
to
switch
first
over
to
the
web
page
and
here's
Studio
code
spaces.
Now
I've
connected
using
my
Microsoft
account
that
has
an
azure
subscription.
You
have
to
connect
to
a
measure
via
subscription
and
so
I've
done
that
you
can
see.
I
have
no
code
space,
so
I'm
just
create
a
blank
one.
E
Now.
So
we'll
call
this
demo
one
for
the
moment
and
the
idea
on
this
is
that
you
would
come.
You
can't
connect
to
a
repository.
I'm
gonna
leave
it
blank
for
now,
just
to
show
you
what
you
get
when
you
launch
this
and
so
I'm
in
the
browser
it's
gonna
go
through
and
do
all
this
work
and
then
we'll
eventually
load
Visual
Studio
in
the
browser.
So
you
can
see
here
online
that
Visual
Studio
comm
is
coming
up.
It's
thumbies
preparing
my
environment
and
off.
E
It
goes
well
so
that's
kind
of
interesting,
but
at
the
end
of
the
day,
I
want
to
be
able
to
do
something
right,
and
so
the
first
impression
might
be
it's
like
a
VM,
so
I
can
then
do
yo,
T
or
yo
Microsoft
SharePoint.
If
I
want.
However,
the
the
idea
around
this
really
is
that
perhaps
you
have
a
github
repo
already
or
a
Azure
DevOps
repo
that
you
would
then
connect
to,
and
then
you
can
work
on
that
code.
E
So
that's
kind
of
the
scenario
that
I
typically
do
so
next
I
want
to
switch
over
to
visual
studio
code
and
I
have
an
empty
window
in
Visual
Studio
code
here,
and
it
would
install
the
extension
called
remote
explorer
and
this
connects
again
to
the
same
code
spaces.
Let
me
just
do
a
quick
refresh
here
and
so
I'm
going
to
create
a
new
code
space.
However,
this
time
I'm
going
to
connect
to
a
repo
that
I
already
have
and.
E
This
repo
has
just
an
out-of-the-box
one
that
10
SharePoint
web
part.
The
rest
VFX
web
part
already
created
to
it,
and
so
the
idea
here,
of
course,
now
is
I-
would
want
to
work
on
this
web
part
or
perhaps
I
need
to
review
a
Pierre
or
perhaps
I
just
need
to
make
a
quick
change.
My
full
development
I
don't
have
it
Oakley,
so
this
will
go
through
and
do
the
same
thing
now.
If
I
go
back
to
the
browser
one
you
can
see
here,
it's
done
all
its
work.
E
It's
created,
I
can
do
the
in
terminal
and
if
I
look
here
and
I
do
node
you'll
notice
that
what
I
get
out
of
the
box
is
that
version
12
of
nodejs,
which
is
not
what
SharePoint
still
time
at
the
moment,
however,
at
node
version
manager
is
installed
on
the
VM,
so
I
can
do
that
information
right
to
switch
over
to
version
10.
So
now
what
I've
done
in
this
SPF
xcode
space
is
rebo.
Let
me
switch
over
to
that
real
quick
that
would
be
here.
E
Tunnel
against
the
project
in
the
current
directory.
Now,
if
I
look
in
here,
you'll
see
here
that
it's
done
the
work
it's
gone
through
part
of
what
code
spaces
does
is,
it
will
do
a
clone.
So
if
I
look
here,
so
you
can
see
it's
on
a
git
clone
of
the
repo
that
I
provided
to
it
and
then
further
down
here
now.
E
You
won't
see
this
because
it's
gross,
but
if
you
look
what's
happening
in
the
lines,
you'll
see
that
it
has
actually
done
downloading
and
installing
node
version
10
and
further
down
it's
actually
doing
the
door
or
the
NPM
install
for
for
gulp,
I'm
gonna
then
connect,
and
now
you
see
the
window
refreshes
and
now
in
my
code
spaces
list
here
on
the
side
it
will
show
once
it's
connected.
It
will
show
the
project.
Now
it
looks
like
it's
building
it
again,
but
it's
really
not
it's
just
doing
a
different
connection,
but
here
we
are.
E
We
now
have
our
our
SPF
project.
If
I
open
this
up
here,
I
can
do
my
gulp
it
all
great,
so
that
should
work.
Everything
is
fine.
If
I
go
back
to
my
dev
container
file,
part
of
what
I've
done
here
is
I've
configured
forwarding
ports.
These
are
the
ports
that
are
used
for
the
local
workbench
and
if
I
go
back
to
my
extension
here,
you
can
see
here.
Those
ports
have
been
forwarded.
E
Now
that
you
can
do
these
manually,
I
can
right
click
and
create
a
new
one,
but
the
idea
of
using
a
dev
container
file
is
that
I
can
have
these
pre-configured
and
let
that
work
right.
So
if
I
were
to
run
this
now,
I'm
gonna
get
the
problem,
because
the
developer
certificate
is
not
trusted,
so
the
stuff
I
have
to
do
here.
E
First
of
all,
I
want
to
create
a
desert
and
when
I
run,
this
is
now
in
this
remote
environment,
I'm
running
under
Linux,
and
it
tells
you
so
for
Windows
or
Mac
OS
it'll
automatically
trust
that,
but
for
Linux
will
not
so
the
file
was
created
here
in
this
folder
right,
so
I'm
gonna
I
will
hopefully
because,
if
I
run,
the
browser
I
have
to
run
the
browser
locally,
because
I'm
connected
to
a
container
that
has
just
the
linux
shell
running
on
it.
So
so,
first
of
all,
I'm
gonna
do
is
I'm
gonna
copy.
E
This
o.
My
shortcut
is
go
up
here,
so
it's
slash
home
yes,
online
I've
copied
that
folder
from
from.
Where
get
the
the
trust.
That
sir
does-
and
here
is
the
certificate
files
right
here,
right
and
so
I
can
right.
Click
on
this
and
download
Mitchell
studio
knows
that
I
am
connected
remotely
so
it'll.
Let
me
do
this
so
I
just
put
this
in
my
research
folder
here
real
quick
and
give
it
a
name
and
if
I
switch
over
to
that
folder
and
you'll
see
there.
It
is
here
now.
E
E
Well,
then,
I'll
run
and
gulp
serve.
Then,
of
course,
we'll
run
start
to
our
bench
for
me,
and
so
let
me
open
the
browser.
Real
quick
I
haven't
seen
the
read
X
the
redirects.
Don't
normally
work
so
great,
so
I
just
put
in
the
workbench
URL,
and
now
you
see
boom
there.
We
are
with
the
workbench
and
we
have
our
wonderful
hello
world.
Web
part.
Life
is
good,
so
these
steps
are
summarized
on
my
blog
I'll
post.
E
That
link
in
the
when
we're
done,
but
that's
tibia
around
Cote
spaces
is
that
I
can
connect
quickly
if
SharePoint
framework
or
any
environment
running
now
right
now,
it's
only
Linux
and
Windows
is
on
the
way
and
again
studio
full
studio
for
the
six
or
eight
of
us
who
still
use
it
is
in
private,
P
P,
but
that's
available
as
well.
So
that
is
now
the
next
part
of
my
talk
was
to
talk
about
react,
hooks
and
so
I'm
going
to
switch
over
now
to
a
couple
of
different
Visual
Studio
code
windows.
E
The
first
one
is
this
adapted.
This
is
in
the
the
samples
repo.
This
is
the
adaptive
card
web
part
that
you
go
was
built
and
demoed
a
couple
times.
I,
look
back
in
the
history
to
see
is
of
this
and
I
want
to
compare
and
contrast
that
with
the
hooks
version,
and
so
a
couple
things
that
I
want
to
call
out.
First
of
all
is
that
hooks
are
optional.
E
You
can
run
those
side
by
side,
they
run
our
function
components,
but
they
work
well
class
components,
and
so
what
I
did
is
just
to
go
through
his
web
part
here
and
it
changed
it
around.
So
let
me
bring
this
one
up
here,
trying
to
race
through
this.
Obviously
we're
not
gonna
I'm,
not
gonna
cover
the
whole.
The
whole
thing
right,
so
we
have
two
different
versions
here:
no
I'm
not
gonna,
do
em
side
by
side.
That's
not
gonna
work
on
me
today,
but
what
I
want
to
point
out
here?
We
look
closer
here.
E
What
I've
done
is
the
actual
web
part
that
is
generated
is
untouched.
Basically,
right,
SharePoint
framework
creates
a
class
and
that's
fine.
Kooks
are
not
supported
in
classes,
but
if
you
think
through
what
needs
to
happen
here
in
general,
we
just
use
I
just
used
the
built-in
web
part
to
host
a
functional
component,
which
is
the
this
route
component
and
then,
of
course,
the
all
the
work
to
be
done
for
properties
is
still
as
it
always
was,
so
that
part
still
works
so
close
at
the
component.
E
E
So
that's
basically
using
this
pjs
to
read
a
list
and
then
there's
a
couple
of
built-in
ones
here
to
set
state
so
things
that
you
would
expect
I'm
going
to
be
setting
stay
for
stuff
I
need
to
do,
and
then
you
can
see
here
we're
using
the
the
use
effect
cook
to
react
when
something
changes.
So
again,
you
can
read
more
about
this
in
links
that
we'll
post,
but
when
I
have
this
dependency
of
null.
E
That
means
this
kind
of
component
mount
so
when
it
did
mount
it'll
go
through,
and
what
I
want
to
point
out
here
is
that
it's
going
to
connect
to
the
context
right.
So
this
is
the
SharePoint
context
that
we
gave
as
part
of
our
web
part.
If
I
go
back
to
my
here,
you'll
notice,
that's
when
I
do
render.
It
is
passing
this
that
context
into
the
root
component,
and
so
it's
available
there.
I
can
then
pull
information
out
of
that
now.
E
Another
thing
that
what
this
opponent
is
doing,
his
it's
importing
kept
context
and
the
idea
around
this
is
I
can
now
use
an
app
context
when
I
render
and
I
can
provide
things
that
are
put
in
the
context
are
now
available
to
all
children
and
which,
basically,
is
everything
in
my
web
part.
Why
do
I
care
about
this?
Because
I
can
now
reference
things
from
the
context
instead
of
having
to
pass
it
down
so
the
reason
I?
E
This
becomes
interesting
to
me
because,
as
I
drill
down
into
other
components,
I
don't
necessarily
need
to
have
the
passed
in
as
a
property
right.
There's
no
properties
that
are
passed
in
I
just
use
the
context,
so
this
makes
sense
I'm
just
one
child
on,
but
if
I
keep
going
further
down
into
my
adaptive
card
host,
they
come
into
the
adaptive
Connard
host
control.
E
Again,
I'm
going
to
then
get
the
context
and
I
don't
have
to
pass
in
any
properties.
The
properties
that
I'm
passing
in
are
really
only
things
that
are
going
to
directly
control
the
rendering
what
I
need
the
context
for,
because
I
want
to
switch
when
the
theme
changes
right.
So
if
the
SharePoint
web
hurt
the
SharePoint
site
theme,
changes
I
may
want
to
react
that
or
I
want
to
make
a
HTTP
call
in
response
to
handler
on
the
adaptive
card.
I
don't
necessarily
have
to
pass
in
a
property-
that's
not
necessarily
used.
E
E
I
got
my
myself
all
confused
here.
If
I
go
back
to
adaptive,
hard
host
component,
yeah,
all
right,
so
you'll
notice,
here
it's
reacting
to-
is
the
data
loading
I'm
going
to
show
a
spinner
or
I'm
going
to
show
the
adaptive
card
if
I
look
at
the
adaptive
card?
What's
interesting
here,
I
think,
is
that
if
looking
at
this
closely,
this
is
a
class
component.
In
fact
it's
unchanged
from
what
Hugo
had
prepared.
The
key
point
here
is
I
can
use
hooks
and
functional
components
alongside
class
components.
E
I
don't
have
to
change
everything,
so
I
was
able
to
to
leave
a
top-level
part.
The
original
SP
FX
generated
web
part
is
a
class
and
the
the
bottom
bottom
entry,
the
rendering
component
is
still
class
and
everything
in
between
is
set
up
to
be
hooks.
And
so,
if
you
look
at
both
projects,
you
see
there's
a
lot
of
services
in
here,
and
this
is
I've
abstracted
out
a
bunch
of
the
stuff
to
do
HTTP
context
and
there's
also
a
reducer.
You
can
read
more
about
the
use
reducer
hook
as
well.
E
The
reducer
becomes
helpful
because,
as
I
make
change
or
as
the
information
comes
back
from
from
my
data
from
HTTP
endpoint,
this
will
be
reflected
in
the
state
and
so
in
this
hooked,
when
this
hook
will
monitor
the
state
when
the
state
changes
it'll
cause
a
render.
So
in
this
particular
example,
you
can
see
what
I'm
just
saying,
hey
I've
got
here's
my
my
data
that
came
in
as
a
payload
right
when
my
Stipe
is
complete.
Here's
the
day.
E
I
can
pass
the
data
in
here
by
using
this
dispatch
method
in
the
reducer,
and
this
will
cause
the
rerender,
so
the
web
part
will
be
render
so
and
you
can
see,
there's
various
hooks
on
different
different
dependent
properties
and
that
I
find
this
becomes
less
much
cleaner
to
have
individual
methods
that
based
on
changes
instead
of
a
big
monolithic
data,
rendering
once
I
go
back
to
the
hole
and
you'll
notice.
If
I
come
into
the
adaptive
card
host
component
in
here,
there's
a
lot
of
if
statements
going
through
and
checking
through.
What's
going
on.
C
E
C
E
That
gets
a
little
bit
more
straightforward
code
in
using
the
hooks,
along
with
the
context,
so
talking
about
hooks
just
to
recap.
There
are
some
reasons
why
the
react
team
built
them
the
bottom
one.
There
is
what
helps
me
confused
the
this.
What
is
this
in
a
particular
class?
So
that
doesn't
matter
because
it's
a
function
and
now
it
doesn't
factor
to
use
context
and
state-
and
here
are
a
bunch
of
links
again.
I'll
post
these
in
the
chat
and
I'm
happy
to
take
any
questions
that
folks
at.
E
E
See
this
being
helpful
is
number
one
as
an
open-source
contributor.
Perhaps
I
want
to
just
do
something:
quick
yeah
in
fact
that
I
found
I
wanted
to
add
a
feature
to
Stefan
Bowers
painting,
my
web
part
I
was
able
to
just
fork
the
repo
create
the
code
space.
Do
that
boom.
Wi-Fi
goes
great.
Another
idea,
if
I
have
this
code
step
container
in
the
repo,
so
it's
building
up
the
dev
team,
so
working
with
a
dev
team
here
at
the
office.
E
How
much
setup
you
two
are
on
your
computer
to
make
it
ready
to
go
now.
I,
don't
have
to
necessarily
do
that.
I
can
say
here
point
to
this:
you
can
be
productive
on
day
one.
If
you
want
to
locally,
you
could
review
what
the
code
space
is
doing
in
and
go
from
there
so
yeah.
It
certainly
is
going
to
be
helpful.
I
believe
yep.
A
Yeah
and
I
think
that
definitely
the
main
main
power
there.
No,
you
don't
have
to
install
anything
to
your
own
actual
computer
to
make
stuff
happen.
So
that's
really
really
cool
absolutely
now.
Let
me
actually
go
back
and
slides
where
we
were
running
out
of
time
as
well,
so
I'm
going
to
share
my
screen
and
we're
gonna
close
up
the
call,
but
thank
you
Alex
thank
you,
sweetheart
and
thank
you
Paul
for
the
great
demos
we
actually
had
four
demos,
so
nothing.
A
Okay,
okay,
anyway,
so
the
recording
on
the
of
the
setup
will
be
available
tomorrow
in
24
hours
in
the
monetary
system
and
community
YouTube
channel
they
came
as
amateurs
is
40mp
videos
now
em
trees
is
worth
dev.
Transistor
PNP
are
the
ones
where
we
communicate
different
stuff.
Next
s,
perfect
community
call,
isn't
July
2nd
at
7
a.m.
Pacific
time.
Next.
A
M
trees
is
to
attend,
recall,
is
on
June
25th
week
from
now,
and
the
chulai
monthly
community
call
for
shipment
is
on
July
14th,
there's
a
lot
of
lot,
of
course,
and
that
doesn't
actually
end
there,
because
there's
a
lot
of
other
calls
as
well.
So,
yes,
we
probably
produced
a
lot
of
material.
Will
chicken
join
again?
You
don't
have
to
join
on.
All
of
these
calls
everything
is
getting
recorded
and
then
it
can
go
back
on
YouTube
and
watch
the
demos
and
videos
and
all
that
stuff
and
based
on
your
interest
in
general.