►
Description
SharePoint Framework Community call on January 14. Demos delivered: 1) Developing SPFx web parts for different section designs using CSS, 2) Building SharePoint Migration Dashboard with SharePoint Framework, and 3) Getting started on using SharePoint Framework samples. Project releases include: CLI for Microsoft 365 v3.5, React Controls 2.4.0, and React Property Controls 2.3.0. Also released PnP SPFx Generator v1.16.0. and PnP Modern Search v3.17.0 and v4.0. PnPjs v2.1.0 – to be released on January 15th. SPFx Samples include 2 extensions and 2 web parts. The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.
Demos:
• Developing SPFx web parts for different section designs using CSS – Stefan Bauer (N8D) | @StfBauer
• Building SharePoint Migration Dashboard with SharePoint Framework – Denis Molodtsov (CleverPoint) | @Zerg00s
• Getting started on using SharePoint Framework samples – David Warner (Catapult Systems) | @DavidWarnerII & Hugo Bernier (Tahoe Ninjas) | @bernierh
Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-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
A
feels
like
it's
a
little
bit
extension
of
2020
sometimes,
but
here
we
go,
I'm
your
host
for
this
call
patrick
rogers.
We
have
a
great
agenda
as
always
for
you
today.
We
have
latest
updates
on
sharepoint
framework
updates
from
the
patterns
and
practices
program,
new
community
samples,
we'll
do
our
optional
picture
time,
and
then
we've
got
three
great
demos
from
stefan
dennis
and
david
and
hugo,
covering
some
really
exciting
topics,
so
very
excited
to
see
that
so,
let's
get
moving
so
we
can
get
to
the
demos.
A
Often
we
are
asked:
how
can
you
participate
in
the
patterns
and
practices
program,
or
this
special
interest
group
specifically
so
the
best
way
and
my
favorite
way
is
demos-
would
love
to
have
your
downloads
on
the
call.
I
know
you
are
all
doing
amazing
stuff
for
your
customers
and
for
the
companies
you
work
for
and
as
appropriate.
A
So,
if
you're
interested
in
doing
a
demo
reach
out
to
myself
or
visa,
we
will
get
you
scheduled
on
a
call.
It
might
not
necessarily
be
the
next
call,
as
sometimes
we
are
scheduled
a
few
weeks
out,
but
do
get
in
touch.
We
will
get
you
on
the
schedule
and
would
love
to
host
your
demos,
so
please
reach
out
to
us
as
well.
You
can
contribute
on
github,
so
you
can
report
issues
submit
pull
requests
as
well.
A
If
you
see
people
with
questions
or
issues
that
perhaps
you
already
know
the
answer
to
feel
free
to
jump
in
and
help
them
out,
that's
great
community
helping
each
other,
everybody
gets
answers
a
little
bit
faster
and
we
all
improve
the
work
we're
doing
and
then.
Finally,
of
course,
we
welcome
your
feedback
on
all
of
the
things
pnp,
so
our
calls
our
documentation.
Where
else
can
we
help
and
of
course,
positive
feedback?
A
Is
okay
too,
if
we're
doing
something
you
really
like,
let
us
know
we
might
be
able
to
do
a
little
bit
more
of
it
with
that,
we
will
open
up
our
slider
links
and
we've
got
developer.
Videos
which
are
sort
of
developer
topic
focused
videos
around
certain
things,
maybe
authentication,
maybe
making
certain
types
of
calls
building
certain
types
of
components
as
well.
We
have
community
videos
which
are
going
to
be
all
of
the
recordings
of
community
calls
such
as
this
one,
our
monthly
calls
and
other
community
events.
A
So
those
are
all
there
as
well
open
source.
We've
got
a
bunch
of
different
repositories
in
the
kind
of
the
I
don't
know:
microsoft,
open
source
sphere,
so
sharepoint
pnp
office,
dev
and
microsoft.
Graph
orgs
on
github
all
have
various
repositories
under
them
and
all
of
them
welcome
contributions
and
feedback.
So
if
you're
interested
in
the
work
we're
doing
in
pmp,
please
join
in
help
out
get
involved
on
github
same
with
office,
dev
or
microsoft
graph.
If
you're
excited
about
the
work,
they're
doing
do
get
involved.
A
We
also
have
a
ton
of
great
samples,
web
parts,
extensions
list,
formatting
and
teams
samples,
tons
and
tons
and
tons
of
great
samples
out
there.
I
know
when
I
am
starting
a
solution
or
looking
up
some
use
cases.
I
often
start
with
the
samples,
because
it's
a
great
way
to
see
how
people
have
already
solved
these
real
world
problems.
That's
a
lot
of
links.
A
You
can
always
go
to
aka.msm365pnp,
which
is
the
patterns
and
practices
landing
page
which
will
get
you
linked
out
to
all
of
this
great
content,
including
all
of
the
patterns
and
practices
offerings.
Our
community
calls
our
videos
all
this
other
stuff.
Aka.Msm365
pnp
is
your
main
landing
page
for
that,
as
well
sharepoint
framework
documentation.
B
Yes,
thank
you,
patrick,
as
you
may
know,
or
if
you're
new
to
the
community.
It
is
important
to
know
that
patterns
of
practices
is
an
open
source
community,
which
means
that
we
are
inclusive
and
welcoming
of
all
types
of
contributions,
as
well
as,
if
you
desire
simply
just
to
use
some
of
the
resources.
But
we
know
that,
along
with
those
resources
or
the
desire
to
contribute,
may
come
with
a
little
intimidation
or
unawareness
of
how
to
do
some
of
those
things
like
work
with
github
etc.
So
sharing
is
caring,
is
an
initiative.
B
That's
been
set
up
and
is
being
ran
by
hugo
bernier
april
dunham
and
myself,
and
we
are
focused
on
providing
hands-on
guidance
in
the
process
of
using
the
resources
and
tools
available
to
you,
as
well
as
contributing
back
to
the
community.
Via
these
resources
and
tools,
we've
got
a
whole
host
of
sessions
available
for
you
in
january,
first
time,
contributor,
community
docs,
using
some
of
the
spf
examples
which
we'll
see
a
little
bit
of
a
demo
on
today
and
setting
up
your
developer.
Workstation
coming
soon
are
a
number
of
sessions.
B
In
addition
to
what
you
see
there
on
the
screen,
we've
got
a
new
site
coming
and
we
just
had
our
first
ama
on
tuesday
after
the
monthly
call.
We've
got
the
next
one
set
up
for
next
february
february
after
the
monthly
call
and
the
pnpjs
team
is
going
to
be
our
subject
matter.
Experts
that
day
so
bring
all
your
questions
and
we'll
get
answers.
A
C
C
But
basically
we
are
now
locking
down
on
what's
going
to
be
in
a
japan
frame
at
1.12
and
we're
planning
to
get
it
out
as
soon
as
possible,
and
we
are
so
we're
updating.
The
note
js
support
to
note
js
14,
which
is
the
mainstream
super
mainstream
version
right
now,
with
the
golf
4
support
as
well.
We're
also
adding
a
more
access
on
the
bait
structure
and
context
to
our
dependency
implementation,
and
this
means
that
you
get
stuff
like
with
part
of
white
and
events
being
raised
for
your
web
parts.
C
Whenever
the
section
wide
will
be
adjusted
by
the
end
user.
So
then,
you
can
actually
change
the
rendering
of
the
web
part
based
on
this
white,
which
have
been,
which
is
available,
something
which
is
actually
available
and
has
been
available
for
first
party
web
parts,
but
for
whatever
reason
we
didn't
expose
that
for
third
party,
so
we're
fixing
all
of
this
stuff
right
now.
C
There's
a
few
other
properties
there
as
well
and
then
we're
adding
a
support
for
complex
microsoft
team
solution-
and
this
basically
means
if
you
have
a
microsoft
team
solution
which
consists
from
a
sharepoint
framework
components
and
then
also
azure
components.
You
can
actually
create
the
microsoft
themes
manifest
by
yourself
and
embed
that
inside
of
the
sbb
kg
file.
C
So
we
actually
use
that,
rather
than
auto,
generate
the
microsoft
teams
manifest
and
in
the
last,
but
certainly
not
the
list,
we're
looking
into
adding
a
support
for
microsoft,
teams,
meeting
applications
and
meeting
apps,
which
are
relatively
complex
to
do
given
the
implementation,
but
with
sharepoint
framework.
That
should
be
quite
easy.
Given
the
fact
that
within
automatic
you
have
the
automatic
hosting
and
everything
else
available
through
sharepoint
framework,
but
that's
planned
to
go
out.
C
Hopefully,
in
mid
february
time
frame
but
again
we're
still
locking
down
the
exact
tasks
and
finalization
of
the
after
version,
but
will
be
certainly
out
during
this
quarter,
which
is
by
end
of
march,
hopefully
already
in
in
mid
february
or
so.
But
that's
all
from
my
side
showing
back
to
you,
patrick.
A
D
We
will-
and
I
am
also
wicked
excited
about
the
1.12
drop.
That's
going
to
be
really
awesome,
so
we
are
about
to
patrick
release
the
2.1.0
release
of
pmpjs.
Now
this
is
something
that
we've
had
in
the
works
for
several
months.
Hopefully
a
bunch
of
you
have
had
a
chance
to
try
out
our
beta
release.
There
is
so
much
in
this
release.
It
is
really
one
that
I
would
suggest
no
one
take
lightly.
D
You
know
definitely,
if
you're
going
to
try
to
move
to
this
release,
please
test
it
thoroughly
before
you
know
rolling
into
production,
but
we're
going
to
have
iso
the
isolated
runtimes.
That's
been
in
there
for
several
months
that
we've
been
testing
and
I
think
that
that's
code
looks
really
solid
right
now.
We
are
also
another
huge
change:
support
for
node
15
and
webtec
webpack
5
module
resolution.
That's
another
absolutely
ginormous
change
that
took
a
a
lot
of
time.
D
So
hopefully,
we've
got
everything
solid
on
that
one
we
added
or
andrew,
I
believe,
added,
add
chunk
stream
for
version
for
node,
and
we
did
some
patrick
did
some
performance
updates
for
list
item
updates
and
inserts
patrick
also
added
the
graph
search
endpoint
for
pmp
graph.
We
have
azure
m
cell
browser
support
now
through
through
a
sample,
and
we
did
a
bunch
of
other
smaller
bug
fixes
and
documentation
updates.
A
A
So
cli
for
microsoft,
365.,
I
will
talk
to
that
so
release
new
beta
3.5,
with
converting
files
to
pdf
using
graph,
send
sending
adaptive
cards,
creating
azure,
ad
apps,
passing
content
from
files
and
files
using
at
token,
just
like
the
azure
cli
does
more
performance
improvements
and
more
so.
The
cli
continues
to
grow
and
evolve
and
become
a
more
fantastic
tool.
Every
day,
npm
install
dash
g,
p,
p,
slash
cli,
microsoft,
365
at
next
to
always
get
the
latest
beta
version.
That
is
available,
more
information.
A
Aka.Mscli-M365
definitely
check
out
the
cli
another
fantastic
tool
for
your
tool
belt
and,
with
that
we'll
move
over
to
the
reusable
components,
react
controls.
240
is
out
so
an
accessible
accordion
control,
a
placeholder
people,
picker
taxonomy
picker
list,
picker
and
various
fixes
excited
to
see
all
of
those.
Those
are,
of
course,
controls
designed
to
be
used
in
the
body
of
your
web
part
or
application
customizer
and
then
react
property
controls.
A
Are
the
controls
designed
to
be
used
in
the
edit
pane
of
your
web
parts,
so
property
field,
icon,
picker,
property
field,
term,
picker
and
list
picker
are
all
really
exciting
to
see
those
get,
updates,
improvements
and
additions
to
the
library
so
check
these
out.
Thank
you
to
all
of
the
contributors
that
have
helped
out
here.
This
is
another
area
that
is
great
to
see,
grow
and
have
an
increase
in
contributors
and
increase
in
the
amount
of
capabilities
in
these
controls.
A
So
it's
a
great
way
to
jump
start
your
project
and
save
yourself
a
lot
of
time
and
get
some
great
out
of
the
box.
Looking
functionality
with
not
a
whole
lot
of
work
on
your
part,
so
certainly
check
out
the
controls,
and
with
that
we
will
move
over
to
the
community
yeoman
generator,
and
I
believe
stefan
is
actually
on
the
call
and
can
update
us
here.
F
Yes,
I
am
so
with
we
recently
on.
On
sunday,
we
released
the
version
1.16
now,
which
also
supports
angular
11.
The
angular
elements
be
more
specific
and
has
also
now
new
in
there
for
all
the
angular
versions,
because
we
support
from
angular
6
to
11.
The
broad
range
is
source
maps
in
angular
because
we
have
two
projects.
One
is
an
angular
project
and
one
is
the
spfx
project
where
actually
the
output
of
the
angular
project
is
included.
F
You
see
now
directly
in
in
spfx.
Where
is
the
source
coming
from
in
your
angular
project?
It's
a
great
work
by
chandi
that
what
she
did
there
other
than
that
we
have
some
minor
upgrades
to
newer
versions.
So
we
have
now
fluent
ui
fabric
7
in
there,
as
well
as
the
older
office
cr
fabric
versions,
pnp
controls
have
been
updated.
F
The
pmpjs
has
been
updated
not
yet
to
the
really
latest
ones
and
did
some
up
some
smaller
updates
on
vujers
and
fuji
improvements
are
the
upgrade
to
wuja's
version
three,
and
if
you
want
to
install
it
or
use
it,
the
pnp
generator,
you
simply
can
install
it
with
npm
install
minus
g
at
pmp,
slash
generator
spfx,
and
if
you
want
to
find
more
documentation
on
this
generator,
then
you
can
go
to
aka
dot.
Ms
team
slash
pnp
generator,
and
that's
basically
it
for
my
update.
A
Awesome,
thank
you
for
that
great
to,
as
with
everything,
continue
to
see
all
these
programs
projects
evolve
and
grow
very
exciting
to
see
so
modern
search.
I
think
I
am
going
to
talk
to
that,
so
ak
dot,
ms
slash
pnp
search,
gets
you
all
the
info
on
the
modern
search
components.
So
these
are
a
composable
set
of
modern
spfx
web
parts
that
allow
you
to
build
up
a
search
experience
for
your
users,
so
v4
release
this
week.
So
that's
january
2021,
and
then
you
could
read
all
the
details
there.
A
It's
gonna
have
graph
search
api
as
well
as
sharepoint
search
api.
It's
re-architected
to
be
a
little
bit
more
modular.
You
have
a
little
bit
more
control.
You
can
do
a
little
bit
more
kind
of
templating
in
it
really
cool
to
see
these
great
way
to
build
out
a
search
portal
and
as
well
working
to
have
the
v3,
docs
and
and
deprecation
messages
updated
and
back
public,
so
excited
to
see
the
search
work
coming
to
fruition.
A
I
know
v4
has
taken
a
little
bit
longer
than
was
originally
planned,
but
it
is
out
and
exciting
to
see
that
and
start
to
get
that
used
on
that
team
as
well.
Please
use
that.
Please
provide
any
feedback
you
might
have
on
the
functionality
there
and,
if
you're
really
interested
in
search
another
great
project
to
get
involved
in
and
help
that
grow,
and
so
with
that
we'll
move
over
to
the
samples
and
that's
going
to
be
hugo.
G
On
the
web
part
side,
we
have
abdurahman
mujahid,
who
updated
the
support
for
daylight
saving
times
on
the
calendar
and
the
accordion
section
faq
faq
builder,
by
ravi
chandra
and
jack
vanitsky,
who
updated
the
web
part
title
styles
and
dependencies
and
I
suspect,
we're
going
to
see
a
lot
of
updates
on
the
web
part
titles
because
of
the
changes
that
have
been
happening
in
the
look
and
feel
on
the
sharepoint
side.
That's
it
for
me
today,
back
to
you,
patrick.
A
C
F
Of
the
box
web
part
that
you
got
with
it,
but
we
actually
what
I'd
show
you
here
is.
I
do
a
lot
of
things
with
this
because,
as
you
see
here,
actually
it
is
embedded
on
a
page
and
the
page
theme
here,
which
also
has
a
new
header
that
is
coming
out,
pretty
soon
says
that
it's
a
teal
theme,
but
my
web
part
is
still
blue
in
here
right.
There
is
also
one
another
option
that
you
have
to
consider
when
you
develop
or
design
your
web
part
is
the
section
background.
F
So
when
you
edit
the
page
and
you
go
over
here
and
say
you
want
to
edit
the
section,
then
you
have
different
color
variants
right,
so
you
have
these
neutral
one.
You
have
these
soft
one
and
you
also
have
the
strong
one
which
is
actually
inverts
the
complete
web
parts,
the
the
complete
side,
theming
that
you
have
on
the
sharepoint
side
right
and,
as
you
see
now,
we
are
have
pretty
fixed
colors.
F
Actually,
the
official
name
of
css
variables
is
css
custom
properties,
because
it
allows
you
to
define
custom
properties
in
css,
and
I
have
here
on
a
code
pen,
a
small
sample,
and
what
you
see
up
here.
Root
means
the
document
root
in
this
case,
and
I
have
here
dash
dash
primary
minus
color
is
defined
as
pink,
and
this
is
exactly
how
you
define
a
variable,
so
this
defines
my
primary
color
as
pink.
F
Then
I
have
another
variable
in
here
dash
dash
text
minus
color
to
black,
and
this
defines
actually
my
the
text
color
that
I
want
that.
I
want
to
use
what
you
see
on
the
on
the
left
side.
I
here
I
have
a
small
box
diff
with
some
laura
mibsum
in
there
and
when
I
want
to
use
this
variables.
Actually
I
say
just
background.
Color
then
use
the
keyword,
var
and
define
which
custom
properties
in
css
I
want
to
use
dash.
F
So
it
just
defines
for
this
box
and
the
following
elements
in
there:
the
primary
color
to
black
and
the
text
color
to
yellow.
So
when
I
copy
now
the
box
template
from
the
first
box
below.
Actually,
after
I
redefined
my
variables,
you
see,
the
box
is
actually
again
pink
with
with
a
black
text
on
it.
This
is
somehow
we
are.
F
F
So
what
we
actually
do
in
the
web
part
and
we
have
javascript
and
we
want
to
convert
javascript
somehow
to
css
back
and
css
variants
variables.
Allow
us
to
do
us
this
right.
So
when
we
take
a
look
at
the
web
part
code,
so
then
you
have
to
import
actually
some
objects
from
the
esp
component
base
and
what
you
do
on
the
init
of
the
web
part.
This
is
a
new
function
that
you
need
to
write.
F
You
request
the
server
scope
and
the
theme
provided
in
this
case
and
then,
if
you're
lucky
you
get
you
try
to,
you
can
say,
try
get
theme,
and
then
you
get
the
theme
of
the
current
section
back
this.
The
thing
why
I
say
it
is
because
there's
some
things
that
are
actually
not
supported
in
there
right
now,
but
I
I
think
they
will
be
changed.
F
For
example,
if
you
have
your
web
part
on
a
full
canvas
page,
then
you
won't
get
anything
back
from
the
theme
variant,
so
you
cannot
use
it
and
for
this
scenario
we
have
a
really
really
old
object,
which
is
the
window
theme
state.
The
theme
which
actually
has
also
the
css
colors
the
theme
colors
actually
in
there,
and
this
is
also
supported
in
sharepoint
2019
right.
F
So
this
windows
theme
object,
exists
in
sharepoint,
2019
still
and
the
other
theme
variants
up
here
only
exist
on
the
sharepoint
online
version,
so
what
we
actually
get
back
from
from
the
theme
variant.
Let
me
go
over
to
my
browser
here
and
we
get
back
an
object
which
has
then
in
their
the
effects
like
the
elevation.
They
are
defined
in
office
ui
fabric.
F
F
So
what
else
do
we
have
in
here
beside
the
palette?
We
have
semantic
colors
in
here
also
because
the
palette
only
gives
us
a
seam
darker,
seam,
alternative
button
backgrounds
and
so
on
and
so
forth.
So
what
I
actually
do
this
is
the
the
object.
Actually
I
get
back
when
I,
when
I
request
the
scene
and
is
in
here
when
I
say
trigger
theme,
then
I
get
the
theme
variant
back
and
then
I
have
the
semantic
colors.
I
have
the
palettes.
F
I
have
the
effect
in
here
there's
the
the
reason
why
I
use
this
in
this
area.
Notation
is
because
there
is
still
there's
a
small
issue
because
it
is
and
should
be
supported
in,
I
guess
in
1.12.
It
will
come
out
that
we
have
all
these
slots
that
are
available
on
the
seam
variant
object
available
in
sharepoint
framework.
For
now,
I
need
to
help
myself
and
trick
a
little
bit
typescript
to
get
access
to
these
effects,
so
this
is
actually
the
console.
Debug
is
actually
this
piece
that
you
have
seen
that
outputs
me.
F
So
when
I
actually
check
my
web
part
from
a
css
perspective,
what
I
have
then,
is
you
see
it
here
on
the
element
on
this
element?
I
have
dash
dash
background
color.
I
have
the
background
framework.
I
have
a
link
color.
I
have
a
primary
button
background
and
all
these
theme
variants
are
now
available
as
a
css
variable.
F
F
So
when
we
take
a
look
at
all
the
section
variants
that
we
have
in
here-
and
I
created
a
separate
page
for
this-
where
we
have
a
white
where
we
have
a
gray
where
we
have
a
some
bluish
soft
tone
and
then
we
have
the
inverted
ones.
So
what
happens?
Actually
here
when
I
refresh
the
page,
you
see
the
first
ones.
This
is
a
some,
I'm
not
sure
if
you
perfectly
see
it,
but
this
is
a
one.
A
little
bit,
lightish
lighter
green
that
we
have
in
here.
F
So
when
I
go
over
to
my
web
part
again,
then
we
have
something
like
in
here-
ms
minus
font,
color
white
and
what
I
can
see
in
here-
and
I
don't
do
it
like
this-
because
I
want
to
have
here
another
thing
in
here.
I
guess
the
button
background
text-
and
I
have
so-
we
have
the
theme
dark
in
here-
yeah
button
background
text
of
this.
Instead
of
the
color
white,
I
use
the
button
background
color
the
button
text
color.
F
Actually
again,
I
use
a
css
variable
in
here
and
when
I
refresh
now
the
page,
so
I
have
the
white
ones
in
here,
because
the
button
text
is
white
on
this
first
three
variants
of
the
theme
of
the
theme
and
on
the
inverted
one
I
actually
get
also
an
inverted
color
for
that.
So
I
get
here
the
green
one,
and
I
can
do
this
with
all
the
properties
that
are
or
all
these
these
says
variables
that
are
using
here-
and
I
actually
have
done
this
already.
F
F
I
want
to
have
the
primary
button
text
and
when
I
compile
now
this
and
then
I
have
everything
looking
and
matching
perfectly
theme,
so
there's
might
a
little
bit
an
issue
here
with
with
the
with
the
contrast
of
the
web
part,
but
overall,
this
is
how
you
can
make
your
web
part
work
pretty.
Well,
whatever
the
user
chooses
and
from
a
coding
perspective.
What
we
also
have
in
here,
so
not
only
that
I
have
defined
in
here
that
the
css
variables
directly
on
the
dom
element,
but
what
we
also
have
in
here.
F
F
We
get
a
new
object
in
there,
which
is
our
change
seam,
and
what
I
do,
then,
is,
I
simply
redefine
the
css
variables
and
because,
as
css
variables
can
set
at
any
time
in
the
browser
directly,
it
automatically
starts
all
my
elements
that
use
this
css
variable
and
what
you
see
here
is
actually-
and
I
could
do
at
this
dot
render.
But
I
actually
don't
need
to
do
this
because
css
variables
is
always
like
this.
F
F
So
this
is
the
orange
version
it
just
up,
so
it
just
triggers
the
event
handler
in
my
web
part
and
then
redefines
the
css
variables
in
there
or
even
if
I
want
to
use,
for
example,
a
dark
yellow,
which
is
also
an
inverted
theme
that
is
out
of
the
box
and
sharepoint
available.
So
I
have
here
now
the
yellow
background
and
of
course
I
have
a
inverted
one
on
the
on
the
because
it
turns
it
back
to
light.
I
have
the
yellow
one
in
here,
and
this
is
basically
how
it
works.
F
F
Well,
you
can
use,
and
this
webparty
theme
in
teams-
and
I
already
deployed
it
to
one
of
my
teams
in
here
in
my
demo
tenant
and
what
we
have
here
now
is
the
blue
one,
where
it
doesn't
pick
up
a
styling
or
theming
like
that.
So
what
I
can
do
now
is-
and
I
haven't
refreshed
this
one-
let's
refresh
this,
because
it
now
supports
our
themes
and
it
actually
should
also
support
here
theme
as
well.
F
F
So
what
do
you
actually
have
to
do?
You
just
have
some
sort
of
sample
web
part.
You
can
go
in
here,
creative
style
or
fetch
a
style
that
only
has
the
tesla
css
variables
on
it.
Go
in
here,
just
paste
it
in
and
define
it
as
a
css
yeah
have
some
yeah.
It
doesn't
know
it
probably,
but
you
can
pass
this
file
then
to
a
designer
and
he
can
use
it
even
when
you
just
use
html
and
css.
F
F
F
One
caution
here
is
the
css
variables
are
not
supported
in
internet
explorer
11,
but
internet
explorer
11,
on
the
other
hand,
will
won't
be
supported
in
office
365
in
august.
So
you
still
can
have
the
border
colors
here
defined
like
this.
So
then
you
have
at
least
a
fallback
variant
of
this
and
then
define
the
variables
or
use
the
variables,
because
css
is
doesn't
throw
an
error
when
it's
simply
internet
explorer.
11
ignores
when
some
variable
definition
is
in
there
that
they
don't
understand
and
that's
basically
it
are
there.
Some
questions.
A
Well,
I
think,
thank
you,
stefan
that
was
really
awesome
demo
great
to
see
the
use
of
variables.
I
I
certainly
am
not
an
expert
in
this,
so
it's
always
cool
to
see
the
latest
css
tricks
and
with
that
I
think
some
questions
can
be
in
the
chat,
but
do
you
want
to
bring
dennis
in
now?
So
he's
got
some
time
for
his
demo
dennis
if
you're
ready.
H
Thank
you,
patrick
hello.
Everyone
I'll
show
you
an
open
source
project
called
migration.
Dashboard
migration.
Dashboard
is
a
sharepoint
web
part
that
tracks
migration
progress
from
sharepoint
on-prem
to
microsoft.
365.,
my
name
is
dennis
malatsa.
I
help
my
clients,
automate
business
processes
using
sharepoint
online
azure
services
and
the
power
platform,
and
I
leave
in
toronto,
canada.
H
H
H
H
The
migration
is
scheduled
for
october
this
year
and
I
can
also
see
the
future
target
site
url,
which
is
a
huge
help
already
also
for
my
convenience.
I
have
access
to
other
important
information,
such
as
site,
size,
number
of
sub
sites,
site
access
status
and
also
I
have
access
to
interesting
settings
like
source
site
settings
and
similar
settings
for
the
target
site.
H
H
H
H
H
H
H
H
A
Awesome
this
is
a
super
cool
tool.
I
hadn't
seen
this
and
this
is
really
neat.
So
thank
you
for
doing
this
demo
really
cool
you
could,
but
let's
please
step
into
david
and
hugo.
If
you
all
are
ready
to
go,
let's
jump
in,
and
I
know
we're
a
little
short
on
time,
but
hopefully
y'all
can
get
that
in.
So
thank
you
dennis
for
that
really
cool
demo.
That's
a
really
neat
thing
there.
Thank
you.
B
Absolutely
thanks,
patrick
nice
job
business.
All
right!
Yes,
as
mentioned
we're
short
on
time,
so
we'll
try
to
make
this
efficient
as
possible.
We're
going
to
talk
a
little
bit
today
about
getting
started
using
sharepoint
framework
samples.
We
know
that
there
are
many
new
ones
into
the
community.
That
may
not
be
aware
of
these
samples
and,
as
some
of
the
long-term
veterans
of
the
community
may
know,
there
could
be
some
challenges
in
using
some
of
these
samples
as
well.
B
So
we
wanted
to
show
you
some
of
the
new
features
that
have
been
added
and
also
show
everyone
how
they
can
take
advantage
of
the
features
to
better
their
use
cases.
When
wanting
to
use
these
samples,
the
makeup
of
the
samples
is
significant
they're
by
the
community
for
the
community,
as
you
can
see
over
250
contributors,
we're
all
really
working
on
this
together
and
that's
what
makes
it
so
amazing
and
powerful.
G
Also,
if
you're
looking
for
samples
by
specific
technology
and
microsoft,
technology,
like
microsoft,
graph
or
the
graph
toolkit
for
example
or
github,
you
can
see
there's
quite
a
few
samples
there.
If
you
have
a
favorite
author,
you
can
also
find
your
authors
right
here.
So,
for
example,
here
joao
mendes
who's,
a
frequent
contributor
has
a
lot
of
great
samples.
G
So
that's
one
way
to
do
that.
Finally,
you
can
find
samples
by
keywords
or,
if
you're,
looking
for
a
specific
keyword
like
content,
query
web
part,
one
of
my
favorite
web
parts,
you
can
find
it
there
and
you'd
be
surprised
the
keywords
that
return
some
results
like
yesterday
when
david
and
I
were
practicing
this
we're
searching
for
soccer
and
we
found
a
web
part
that
actually
shows
you
how
to
get
started
with
soccer
now,
when
you
click
on
a
sample.
G
So,
for
example,
if
we
go
into
the
content,
query
webpart
you'll
see
that
the
first
thing
you'll
see
is
that
it
takes
you
to
the
repository
with
the
source
code
for
that
webpart
sample.
Again,
let's
keep
in
mind
that
these
samples
are
intended
to
be
used
as
a
starting
point.
You
you
can,
if
you
want
use
them
in
production,
but
they
are
absolutely
intended
to
be
a
sample
for
you.
So
there's
always
a
description.
There's
there's
always
a
screenshot.
G
Often
it's
an
animated
screenshot
that
shows
you
how
the
web
part
works
and
below
there's
a
new
feature.
We
we
are
starting
to
update
every
sample
to
add
compatibility,
and
the
reason
for
that
is
because,
if
you've
tried
to
use
the
samples
in
the
past-
and
maybe
you
tried
to
use
an
older
sample-
and
you
had
a
newer
version
of
the
sharepoint
framework,
you
may
have
received
issues
or
noticed
issues
with
compatibility.
G
That's
all
included
in
here,
and
then
we
always
have
a
solution.
History
with
the
authors
that
author
section
by
the
way
is
what
you
should
refer
to
if
you're
planning
on
opening
an
issue
regarding
a
web
part
and
the
version
history
which
shows
you,
you
know
all
the
updates
that
have
been
done
so
you
can
see.
G
G
This
is
absolutely
intended
to
be
sample
code.
However,
we
do.
The
community
does
try
to
provide
support.
If
you
go
to
the
issues
list
in
the
repository,
you
can
create
issues
and
we'll
try
to
help
you.
The
next
part
here
in
every
sample
is
how
to
get
started.
It's
all
usually
called
minimal
path
to
awesome.
So
these
are
the
minimal
steps
that
you
should
do
to
get
started,
and
with
that,
why
don't
we
get
david
to
show
you
how
to
get
started
with
using
a
web
part
david.
B
Absolutely
thank
you,
hugo.
So,
let's
set
up
the
context
for
finding
some
samples
we
would
like
to
use.
Let's
begin
with
the
content,
query
web
part,
and
I'm
going
to
open
this
in
a
new
tab
and
then
we're
going
to
search
by
author
and
we're
going
to
look
up
hugo
and
we're
also
going
to
see
that
he's
got
a
sample
called
upgrade
me.
So
if
we
also
search
by
keyword,
we
could
do
that
and
upgrade.
We
use
this
for
our
sharing
as
caring
sessions.
B
So
as
we
go
and
look
at
each
of
these,
we
want
to
now
start
utilizing
that
compatibility
section.
We
see
that
the
content
query
web
part
was
built
on
spfx1.11
and
node10.x
now
contrasting
that
with
the
upgrade
me,
which
is
a
little
older,
we're
using
spfx141,
and
it
of
course
uses
an
older
version
of
node
lts,
six
or
eight.
B
So
this
is
important
information,
because,
historically,
without
this,
it
may
have
been
confusing
on
how
to
utilize
these
samples,
and
you
may
have
been
using
an
incompatible
version
of
node
when
you
downloaded
the
sample
and
when
you
tried
to
gulp,
serve
or
gulp
build.
It
may
have
spectacularly
exploded
on
your
screen,
which
we'll
see
shortly.
So
how
do
you
take
advantage
of
this
new
found
information
as
well
as
getting
access
to
these
samples?
B
Well,
let's
briefly
go
and
look
at
the
github
repo,
and
this
is
going
to
take
us
to
the
root
of
the
repo
and
we
cover
this
more
in
our
sharing
as
caring
sessions.
So
we
invite
you
to
join
those,
but
this
is
your
primary
location.
You
don't
have
to
have
git
installed.
You
can
just
download
the
zip.
It
is
available
to
you.
It
has
large
downloads,
so
we're
not
going
to
do
that
now,
but
if
you
have
git
installed
or
github
desktop,
you
can
use
either
of
these
options
as
well.
B
Now
I've
already
pre-downloaded
this
entire
repo
here
available
for
us.
I've
also
already
installed
all
of
the
node
modules
to
save
us
time,
so
we're
going
to
quickly
go
into
our
sample
here
and
we're
going
to
find
our
react.
Content,
query
web
part
and
we're
going
to
try
to
gulp
serve
it
or
go
build
it.
Let's
see
right
there,
we
see
it's
there
and
we'll
take
a
look
just
to
confirm.
We
have
node
and
the
version
is
10.23
and
that's
what
we
know
we
needed.
B
The
10.x
is
the
necessary
version,
we're
using
the
most
recent,
and
so
we
can
go
ahead
and
typically,
at
this
point
once
we've
downloaded,
we
would
do
an
npm
install
now.
I've
already
done
that
to
save
us
time.
We
see
those
node
modules
already
loaded
here,
so
I
can
just
do
a
gulp
build
and
see
if
this
works
now
again
having
this
compatibility
has
helped
us,
because
otherwise
we
may
have
had
to
try
to
determine
what
was
used
to
build
this
solution
and
we
may
not
have
been
able
to
find
it.
B
So
we
might
have
had
to
do
some
trial
and
error.
We
see
this
is
succeeded
for
us
great,
that's
fantastic.
So
now,
let's
jump
over
to
our
other
demo.
The
react
upgrade
me
and
if
we
scroll
down-
and
we
find
that
right
down
here,
upgrade
me
I'm
going
to
grab
that
url
and
we're
going
to
change
the
directory
here,
clear
the
screen
and
we're
going
to
try
to
do
a
gulp
build.
B
If
we
go
back
over
to
the
compatibility
for
this,
we
see
it's
using
node,
6
or
8..
So
as
this
tries
to
to
execute
at
some
point
here,
we're
going
to
see
that
it
has
failed
on
us
and
it's
going
to
spectacularly
explode
and
we're
going
to
think
something
is
wrong
with
this
particular
sample.
The
truth
is,
though,
that
when
hugo
is
importing
these
or
publishing
them
they're
all
tested.
So
if
something
is
in
the
sample
browser
repository,
it
has
been
tested
and
is
successfully
running
at
some
point.
B
But
now
we
have
a
better
understanding
of
why
this
might
be
failing
we're
using
a
newer
version
of
node
that
was
not
necessarily
compatible
or
even
around
when
this
particular
sample
was
built.
Well,
there's
a
way
that
you
can
take
advantage
of
technology
and
tools
to
ensure
you
can
still
use
this
sample.
You
don't
have
to
uninstall
node.
You
certainly
could
and
reinstall
an
older
version.
If
you'd
like
you
could
use
docker,
we
really
recommend
using
nvm
node
version
manager.
B
It
allows
you
to
quickly
switch
between
versions
of
node,
so
in
this
case
I've
pre-installed
node
version
8.
So
I
will
use
nvm
use
88.0.0
and
I
will
just
approve
that,
and
we
see
it's
now
using
node
8..
Now,
if
you're
not
familiar
with
nvm
guess
what
we've
got
a
sharing
is
sharing
his
carrying
session
that'll,
show
you
how
to
utilize
it
and
go
into
much
more
depth.
So
now,
if
we
check
our
version,
we
see
we're
using
node
version,
8.,
absolutely
fantastic.
B
So
now
I
can
do
a
gulp
build
build
on
this
and
at
this
point,
we've
already
preloaded
the
npm
modules.
Again,
if
I
go
back,
we
can
see
they're
loaded
here.
I
did
that
in
the
interest
of
time,
and
we
see
that
it's
successfully
built
awesome.
That
is
fantastic
success,
and
so
now
we
know
that
we
are
able
to
utilize
all
this
newfound
information.
That's
available
to
us
to
take
advantage
of
using
all
these
samples
they
all
work.
We
don't
want
you
to
feel.
B
Like
things
are
broken
in
the
repository
and
they're
all
available
there
for
you
to
be
able
to
use
now,
you
may
say
why
don't
I
just
upgrade
this
well
we're
gonna
talk
more
about
that
in
our
other.
Sharing
is
caring
sessions
and
we're
running
a
little
short
on
time.
So
we're
going
to
run
back
to
our
slides
here
and
provide
you
with
some
links.
A
Awesome
stuff,
thank
you
very
much
for
that,
and
all
the
hard
work
on
sharing
is
caring
and
keeping
up
the
fantastic
community
resources
for
everyone.
We
had
three
great
demos
today
from
stefan
dennis
and
david
and
hugo,
so
fantastic
work.
Thank
you
all
four
of
you
very
much
appreciate
those
really
interesting
stuff
across
all
those
demos.
I
wish
I
had
that
migration
dashboard
back
when
I
was
doing
all
my
migration
work.
That
would
have
been
super
helpful.
So
if
you
could
go
back
in
time
and
get
that
to
me,
that
would
be
much
appreciated.
A
Our
next
call
is
coming
up.
Next
thursday.
This
recording
will
be
available
in
24
hours
on
our
youtube
channel.
You
can
always
follow
us
on
twitter.
Our
next
spfx
call
is
january
28th,
that's
in
two
weeks.
At
the
same
time,
our
next
general
development
call
is
next
thursday,
at
the
same
time,
january
21st,
2021,
and
then
all
of
our
calls
are
available
on
ak
dot.
Msm
365
pnp
look
forward
to
everybody
getting
to
catch
up
on
that.
Thank
you
all
for
watching
this
call.
A
Thank
you
all
for
participating
in
the
pnp
community,
appreciate
everybody's
hard
work
and,
if
you
have
interest
in
other
community,
calls
here's
a
great
list
of
fun
stuff
going
on
across
microsoft,
development
and
microsoft.
Technologies
encourage
you
to
attend
any
of
these
you're
interested
in
always
welcome
the
audience.
So.
Thank
you.
Thank
you.
Thank
you.
Everybody
have
a
great
rest
of
your
week
and
look
forward
to
talking
again
soon.