►
Description
Viva Connections & SharePoint Community call on December 2. Demos on Introduction to HtwoO React library – Fluent UI experiences easily and Getting started with using PnP Search Web Parts v4. SharePoint Framework 1.13.1 released - npm install -g @microsoft/generator-sharepoint. PnP project releases in the last two weeks - SharePoint Framework (SPFx) v1.13.1 GA and CLI for Microsoft 365 v4.2.0 GA. Delivered as well - 2 extension, 2 web part and 2 ACE samples. Terrific twos! 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
viva
connections
in
sharepoint
framework
bi-weekly
sync,
it
is
december
2nd,
I'm
your
host,
patrick
rogers.
We
got
a
great
call
for
you
today.
Our
agenda
latest
updates
on
sharepoint
framework
patterns
and
practices
updates
across
the
program.
Our
new
community
sample
updates
we'll
do
our
optional
picture
time
and
then
we've
got
great
demos.
A
The
first
from
julie
turner,
with
an
introduction
of
the
h2o
react
component
library,
she's
been
working
on
and
frank
cornu
and
some
guy
named
michael
svenson,
getting
started
with
pnp
search,
webparts
v4
very
excited
for
all
of
that,
but
first
opportunities
to
participate
in
the
patterns
and
practices
program,
demos.
So
we
love
love,
love,
folks,
to
do
demos
on
the
call.
So
if
you
can
reach
out
to
myself
or
vasa,
using
the
form
down
below
request
a
spot
on,
the
demo
call
ak
dot.
A
Ms
slash
m365
pnp
request,
slash
demo
we'd
love
to
have
you
on
a
call.
We
might
not
be
able
to
get
you
on
the
exact,
immediate
call,
but
we'll
get
you
on
a
call
just
as
soon
as
we
can
so
love
to
show
off
the
work.
All
of
you
are
doing
for
your
customers
and
your
companies
out
there
in
some
cases,
just
make
sure
it's
okay
to
show
the
work
but
we'd
love
to
have
those
samples
and
those
demos
presented
on
the
call.
A
You
can
also,
of
course,
contribute
on
github
across
any
of
our
repositories
and
that
takes
the
form
of
reporting
issues,
submitting
pull
requests,
helping
with
issues
and
questions.
And,
of
course,
if
you
have
an
opportunity
to
help
others
with
their
issues
and
questions
and
have
a
few
minutes.
Please
welcome
you
in
there
to
do
that
as
well
and
then,
of
course,
we
always
welcome
your
feedback.
How
are
these
calls?
How
is
our
documentation?
A
Where
can
we
help
and,
of
course,
positive
feedback
is
okay
too,
so
we've
got
tons
and
tons
of
great
content
for
you
all
found
at
those
various
links
there,
but
the
first
section
there
is
microsoft,
365
developer
videos,
so
these
are
videos
focused
on
developer
tasks,
so
setting
up
authentication
getting
started
with
spfx,
getting
started
with
viva
connections,
ace
development
and
so
forth.
You
can
find
all
of
those
at
akms,
slash,
m365,
dev,
youtube
and
then
as
well.
The
microsoft
365
community
videos,
those
are
gonna,
be
the
recordings
of
our
community
event.
A
I
always
start
there
when
I
have
a
new
project
or
trying
to
solve
a
new
problem.
I'm
always
curious
to
see
how
others
might
have
approached
that
same
thing
and
then
ak
dot,
msl
m365
pnp
is
your
link
for
the
all
up
patterns
of
practices.
Home
page
that'll.
Give
you
links
out
to
the
rest
of
this
content.
A
So
you
don't
have
to
remember
all
those
urls
just
remember
ak
dot,
ms
slash
m365
pnp
next
tuesday,
which
is
the
7th
of
december,
which
is
crazy
to
say
that
we're
almost
the
end
of
2021
we'll
have
our
microsoft
365
platform
call
that's
at
8
am
pacific
time.
That's
a
weekly
call,
generally
with
microsoft,
presenters
covering
the
latest
across
the
microsoft
365
platform.
A
Next
week,
we'll
have
michael
aldridge
introduction
to
the
microsoft
365,
instant,
sandbox,
very
cool
new
thing,
raj,
deep
chandra,
introduction
to
microsoft,
graph,
connectors,
sdk
and
then
sebastian
levert
with
the
microsoft
graph
toolkit
controls.
Hopefully,
we'll
have
a
little
bit
of
time
for
q
a
there,
but
we
don't
always.
Sometimes
we
have
trouble
getting
to
the
q
a
because
we
have
so
much
great
content
in
the
call.
So
I
hope
everybody
can
join
us
next
tuesday
get
the
invite
at
ak
dot.
Ms
m365-dev
dash
call
moving
on.
B
Sharing
is
caring.
Thank
you,
patrick
well,
friends.
As
we
all
know,
it
is
an
open
source
community
as
patrick
identified,
and
that
means
you
can
absolutely
use
the
resources
or
contribute
back,
although
we
understand
that
either
of
those
options
sometimes
come
with
hurdles
like
navigating
github,
perhaps
you
would
like
to
present
for
the
first
time,
you're,
not
quite
sure
the
the
you
know,
details
on
how
you
could
do
that.
Well,
we
are
here
to
provide
you
hands-on
guidance
in
a
safe
space
opportunity.
All
of
these
sessions
are
hands-on.
B
We're
going
to
guide
you
through
any
of
those
topics
together
in
a
non-recorded
environment,
you're
going
to
collaborate
with
others
in
the
community
and
we're
going
to
get
you
involved
all
together.
They
are
free,
no
cost
and
we
invite
you
to
register
for
any
or
all
of
them.
We
are
going
to
take
it
a
little
light
for
december
just
to
give
everybody
a
break,
but
we've
got
some
of
our
more
popular
like
the
first
time
contributor
and
the
power
platform
first
time
contributor
and
of
course,
we've
got
a
number
of
upcoming
amas.
B
Those
have
been
very
popular,
very
collaborative
and
we're
looking
at
creating
some
open
discussion,
ones
that
are
much
like
the
amas
or
the
the
watch
parties
we
have.
Everybody
can
come
in
it'll,
be
a
few
of
the
pnp
members
there
so
again
register
aka.ms
forward.
Slash
sharing
is
caring.
Now,
once
you
do
contribute
back
to
the
community,
we
want
to
celebrate
it.
So
the
pnp
recognition
program
is
here
to
celebrate
all
of
the
great
work
you're
doing
it
is
powered
by
credley.
B
You've
likely
seen
a
number
of
these
badges
starting
to
come
out,
and
this
is
just
getting
started.
The
independent
publisher,
connectors
is
one
of
the
newest.
We've
got
script,
samples
in
the
loop
spfx
samples,
blog
authors,
the
the
hacktoberfest
are
going
out.
We're
compiling
all
of
those
you're
gonna
see
those
starting
to
trickle.
Out
and
again,
we
want
to
celebrate
all
the
work
you're
doing.
They
are
powered
by
credly,
as
mentioned,
which
is
the
same
badges
that
are
power
in
the
certification
badges
for
microsoft.
B
So
they're
going
to
sit
right
next
to
it,
show
up
on
your
linkedin.
You
can
share
it
on
twitter.
Put
it
on
your
website
and
really
be,
you
know,
proud
of
the
work
you're
doing.
We
do
need
you
to
opt
in
ak.ms4m365,
pnp
recognition
so
that
we
can
track
and
connect
your
credly
account
to
your
github
account
again,
no
cost.
We
cover
the
cost
for
you,
so
we'd
love
to
have
you
part
of
that
program?
Go
in
and
opt
in
patrick
back
to
you.
A
Also,
thanks
for
those
great
updates,
david
thanks
to
everybody-
that's
participated
in
pnp
and
gotten
your
recognition.
Hopefully
you've
all
gotten
that
and
as
well
check
out.
Those
sharing
is
caring
sessions,
fantastic
way
to
get
your
questions
answered
and
just
talk
to
some
folks.
If
you
have
interest
in
getting
started
contributing
to
open
source,
not
just
with
pmp,
but
it
applies
to
any
project
and
now
we'll
hand
things
over
to
vasa
for
sharepoint
framework
updates.
Vasa
take.
C
It
away,
thank
you,
patrick
just
a
reminder
right
after
the
last
time
when
we
had
this
call,
so
the
viva
connection
and
spfx
community
call,
we
released
the
sharepoint
framework
1.13.1,
so
that
was
actually
that's
the
newest
one.
So
1.13
had
a
small,
isolated
regression.
So
there's
a
1.1
version
now
available
on
that.
So
it's
not
a
critical
thing
to
upgrade
into,
but
it's
always
good
to
use
the
latest
version,
just
to
recap
on
the
usage,
so
actually
pretty
cool.
C
So
all
time
highest
usage
on
the
sharepoint
framework
usage
is
of
tuesday
this
week,
because
we're
always
two
days
behind
of
this
particular
report
on
the
usage.
But
this
gives
us
some
sort
of
an
idea
on
the
level
of
a
consumption
of
spfx
extensibility
across
viva
microsoft,
teams
and
sharepoint
online,
and
we
have
more
than
tens
of
thousands
tens
of
millions,
not
thousands
tens
of
millions.
C
C
Now
I
can't
promise
when,
but
it
is
being
actively
looked
on
and
good
to
see
the
reaction,
absolutely
in
the
call
cool
yeah.
I
think
that's
it
from
my
side
for
now.
Oh
just
the
teaser
related
on
modernized
catalogue.
I
completely
forgot
about
that.
I
added
this
one
in
here,
and
this
one
also
is
in
testing
as
we're
looking
into
doing
a
full
fleshed
modernized
at
catalog
for
sharepoint
framework
solution,
actually
also
for
sharepoint
in
solution
which,
sooner
or
later,
are
going
to
go
away.
C
D
Hey
thanks
patrick,
so
we
are
announcing
some
great
news
on
our
version.
Three
update
progress.
We
have
reached
all
tests
passing
status
in
our
local
builds,
so
that
is
absolutely
fantastic
news.
That
means
our
code
base
is
pretty
solid.
We
are
doing
some
cleanup,
though,
on
our
automate
build
automation,
test
passing
to
get
that
tenant
that
we
use
for
that
automation
testing
configured
properly
so
that
those
tests
pass
that
way
as
well.
D
Again,
we
do
that
nightly
build.
So
at
this
point
you
can
call
that
at
pnp,
sp
at
v3
nightly
build
and
try
that
out
in
your
ship
framework
and
your
node
solutions
and
see
how
it
works.
The
1636
issue
has
been
updated,
as
of
yesterday.
Patrick
did
a
bunch
of
work
to
figure
out
what
the
minimum
updates
are
needed
for
sharepoint
framework
to
get
it
working
with
the
v3,
build
and
updated
that
issue.
D
D
So
any
deprecations
or
changes
that
we
did
make
between
v2
and
v3
are
outlined
in
that
changelog
so
check
that
out-
and
I
want
to
give
a
really
huge
thank
you,
and
hopefully
I'm
going
to
pronounce
this
right:
aydah
misu,
edo,
ayodele,
maybe
and
peter
paul
kirschner,
who
did
some
great
work,
some
v3
doc
updates
that
were
just
excellent
and
some
great
v3
testing
that
we
super
appreciated.
So
thank
big
big.
A
Awesome
thanks
for
those
updates
and
we
are
very
excited-
we're
getting
very
close
with
v3,
but
I
appreciate
folks
jumping
in
and
helping
especially
because
there's
not
a
lot
of
documentation
yet
so
it
shows
a
real
dedication
to
jumping
in
so
thanks
to
everybody
there
and
thanks
to
julie
for
all
her
hard
work.
She
won't
toot
her
own
horn,
so
I
will
toot
it
a
little
bit
for
her
cli
for
microsoft.
A
365
updates,
new
release,
4.2
with
upgrading
spfx
projects
to
the
new
v113,
one
retrieving:
files
from
large
folders,
retrieving
content,
types
from
sites,
retrieving
list,
item
attachments,
extending
uploading
files
to
support
resource
specific
consent
and
even
more,
you
can
always
install
version
4.2
with
npm
install
dash
g
at
pnp,
cli
dash,
microsoft,
365.
latest
and
of
course
they
support
this
great
docker
container
experience.
You
can
just
run
a
docker
container
with
the
cli
already
set
up
inside
it
and
use
it
from
that
docker
container.
A
A
Next
up,
spfx,
reusable
components,
react
controls,
340,
modern
taxonomy,
picker
based
on
new
taxonomy
rest
api,
the
documentation
enhancements
and
decreasing
bundle
size
for
the
pagination
control,
as
well
as
various
fixes
working
on
three
five
with
spfx
version.
113
support
coming
soon
and
then
the
property
controls
are
out
with
a
fast
serve
support
and
various
fixes
working
as
well
on
a
version
for
spf
x
113
that
will
hopefully
be
out
as
well
very
soon,
thanks
to
all
the
contributors
here
on
the
reusable
controls.
A
So
if
you
haven't
tried
those
definitely
check
them
out
great
way
to
jump
start
your
project
and
get
a
lot
of
out
of
the
box
looking
functionality
without
a
lot
of
work
on
your
part,
so
certainly
give
that
a
shot.
Next
up
is
modern
search,
and
I
think
we
got
some
special
guests
today
to
talk
about
modern
search
yeah.
So
the
monitor.
E
So
this
is
actually
the
current
version
is
the
4.4.1,
which
is
the
october
version.
We
are
applying
to
really
the
new
version
at
the
end
of
december
as
a
christmas
gift
for
the
community,
of
course,
and
yeah
we
will
see
more
in
the
in
the
demo,
but
basically
a
new
version
for
for
december
is
expected.
That's
great.
F
We
have
lots
of
samples
out
there
available
through
multiple
repositories,
because
there's
two
repositories
in
particular
the
spfx,
webpart
and
espfx
extension
samples
that
you
can
go
download
them.
You
can
look
at
really
cool
design
patterns.
You
know
the
samples
can
be
from
the
simplest
concept
to
some
of
them
are
like
full-on.
You
know
solutions
that
they're
not
designed
to
be
used
in
production,
but
you
can
actually
use
them
and
convert
them
to
do
what
you'd
like
with
them.
F
It's
preventing
calendar
entries
from
showing
up
on
the
next
day
when
they're
all
day,
and
so
that
was
fixed
by
our
friend
mohamed
amir
and
then
on.
The
follow
document
side
again,
we
have
a
web
part
version
of
this
by
andre
elijah
as
well.
We
have
a
lot
of
samples
across
various
versions
of
spfx
versus
various
versions
of
node.js,
so
one
thing
that
I
would
recommend
if
you
and
all
the
samples
are
tested
by
the
way.
F
So
if
you
download
the
samples
it
doesn't
work,
the
first
thing
I
would
recommend
you
do
is
use
the
microsoft
365
or
the
cli
for
microsoft.
365
use
spfx
doctor.
It
will
tell
you
exactly
what's
wrong
with
your
environment,
if
you
have
the
wrong
version
of
node
or
anything
like
that
and
if
you're
looking
for
a
way
to
contribute,
we
always
welcome
people
updating
samples
to
the
latest
version
that
way.
Other
people
don't
have
to
suffer
the
same
trait
that
you
you
had
to
do.
That's
it
for
me.
B
Awesome,
thank
you,
hugo.
Yes,
we
have
adaptive
card
extension
samples
as
well.
This
is
the
newest
on
the
block
for
our
repositories,
so
we
have
two
fantastic
contributions.
The
first
one
is
my
notifications
by
zhao
mendez,
and
the
second
is
follow
documents
by
andre
lager.
Now
you
see,
the
follow
documents
is
also
coupled
with
the
web
parts
there
that
hugo
had
just
mentioned
so
that
is
kind
of
a
package
deal.
B
That's
going
to
be
working
all
together
from
andre
and
we're
going
to
look
forward
to
some
samples
by
both
of
them
here
in
the
next
month
or
so.
So
we
look
forward
to
that
open
for
more
contributions
on
aces,
and
we
know
it's
new,
so
we
have
absolutely
a
sharing.
Is
caring,
viva
connections,
aces
getting
started
session
coming
up
here?
We're
going
to
be
scheduling
it
for
february.
B
It
is
going
to
be
the
first
two-part
session
that
we're
going
to
do
over
the
course
of
a
week
to
get
everyone
involved,
we're
going
to
help
you
set
up
your
environment
and
then
we're
actually
going
to
build
some
aces
together.
So
it's
going
to
be
a
lot
of
fun,
be
on
the
lookout.
We're
going
to
schedule
that
today,
so
later
today,
you'll
be
available
to
register
amazing
work.
Everybody
again
thank
you
for
all
the
samples,
patrick
back
to
you.
A
Thanks
for
those
updates,
I
want
to
thank
everybody
for
the
samples,
such
a
valuable
thing
for
the
community
and
a
great
learning
resource
and
a
great
thing
to
check
out
every
time.
You
start
a
project,
so
thanks
to
everyone
that
submitted
samples,
it's
so
valuable
for
the
community
to
have
those
available
and
now
we're
going
to
step
up
to
our
optional
picture
time.
So,
if
you
are
interested,
please
flip
on
your
camera,
this
is
going
to
get
the.
C
C
There
we
go
okay,
let's
do
some
hand
faving
everybody.
The
quality
is
a
bit
bad
today,
unfortunately,
because
of
the
network
issues
apparently,
but
awesome
to
have
you
all
on
the
call,
so
really
really
cool
and
great
to
see
the
faces
of
the
community
and
a
few
more
people
jumping
in
awesome,
excellent
cool.
I
think
that's
it
for
this
one
thanks.
Everybody
really
really
cool.
A
D
D
And
so,
if
you
go
to
that
style
guide,
you
can
see
all
the
html
and
then
the
names
of
styles
that
you
can
then
import
into
your
various
projects,
to
use
those
styles
to
get
styled
components
that
look
exactly
like
the
fluent
ui
web
design
system.
So
that's
wonderful
and
it's
great!
You
can
build
those
controls
from
scratch,
but
it's
a
lot
of
work
to
do
that.
D
Every
single
time,
and
since
a
lot
of
us
use
react
because
that
is
the
on
the
page
framework,
that's
used
by
microsoft
in
their
pages
themselves
and
is
used
in
the
sharepoint
framework
pretty
easily.
I
decided
that
it
was
a
good
idea
to
try
to
build
all
of
the
components
that
stefan
had
styled
so
that
we
would
have
them
as
react
components
so
that
we
could
just
more
quickly
use
them
in
our
projects.
D
So
I
went
ahead
and
built
that
library
and
so
to
get
started
with
the
library
it's
going
to
be
very
similar
to
using
office
fabric
react.
Essentially
you
just
create
your
sharepoint
framework
solution
with
the
react.js
library.
You
install
h2o
react.
So
it's
right
now
in
a
jokingly,
stefan
made
my
release
pre-alpha.
So
it's
a
pre-alpha
release,
but
we'll
be
updating
that
fairly
soon
as
we're
getting
very
close
to
a
general
general
availability
on
it.
So
you
install
it
using
that
h2o
react
and
that
current
build
is
21..
D
So
then
you
would
create
a
class
or
function
component,
whichever
you
like.
If
you
use
react,
hooks,
that's
fine
or
if
you
use
class
components,
that's
fine
as
well,
and
then
you
import
the
h2o
react
component
that
you
need
and
if
the
component
doesn't
exist,
you
can
create
it
and
so
we're
gonna
sort
of
walk
through
all
that.
Let
me
just
show
you.
This
is
the
example
that
I'm
gonna
build.
So
this
is
a
teams
splash
card
that
was
designed
by
stefan.
D
So
you
can
go
and
look
at
that
and
it
has
multiple
different
sub
components.
So
stefan's,
h2o
and
css
is
built
on
something
called
atomic
design,
which
means
that
he
takes
each
one
of
these
components
and
breaks
them
down
into
their
smallest
pieces.
So
we
have
here
an
image
and
a
title
and
a
description
and
buttons
and
those
are
all
what
we
would
call
atoms
and
then
they
can
get
merged
together
into
higher
order
components.
D
So
two
buttons
together
in
this
layout
becomes
the
footer
for
the
splash
card
and
the
image
title
description
and
footer
all
together
become
the
card
that
is
in
the
card
container.
So
these
are
the
different
levels
of
the
controls
that
we
have
in
the
library
and
that's
how
everything
is
broken
down.
Okay,
so
enough
with
slides,
we're,
gonna
sort
of
stop
this
and
I'm
gonna
move
over
to
the
documentation.
So
I
mentioned
getting
started
in
sharepoint
framework
and
that
I
have
that
documentation
here.
D
Although
this
library
is
not
dependent
on
anything
about
the
sharepoint
framework,
it
could
be
used
in
any
react
project
that
you're
building
it
doesn't
have
to
be
the
sharepoint
framework.
But
since
most
of
us
on
this
call
are
going
to
be
using
the
sharepoint
framework,
we're
starting
there
with
some
getting
started
docs
on
that,
okay,
so
I'm
just
going
to
walk
through
my
getting
started
doc.
D
And
just
put
that
in
here
pattern
labs
documentation,
so
this
is
his
his
html
and
css
documentation,
and
so
I've
been
slowly
but
surely
going
through
here
and
building
out
each
one
of
these
controls.
So
if
I
like
go
to
checkbox,
we
can
see
the
handlebars
template
or
the
html
template
for
an
input
for
a
checkbox,
and
essentially
I've
just
made
that
checkbox
also
a
react
control.
D
Okay!
So
let's
come
back
over
here
we
have
the
getting
started,
and
so
what
you
would
need
to
do
is,
like
I
said,
install
the
library-
and
I
didn't
put
the
version
number
on
the
end
here,
because
this
is
the
documentation,
not
the
pre-documentation,
and
then
what
we
want
to
do
is
add
a
reference
to
the
h2o
core
styles,
and
so
this
library
here
the
h2o
react
library
takes
a
pure
dependency
on
h2o
core.
D
D
In
just
a
second
and
then
we're
going
to
initialize
some
icons,
we're
going
to
show
you
that
and
then
we're
going
to
initialize
theme,
support
by
adding
our
supports
theme
variants
and
adding
some
helper
functions
that
I've
built
into
the
library
and
then
we're
going
to
put
a
component
in
okay.
So
I'm
gonna
minimize
this
now
we're
gonna
come
over
to
our
project,
so
I've
built
a
basic
h2o
react
demo
environment
here,
and
so
this
is
just
a
1.13.
D
I
think
it's
1.13.0
sharepoint
framework
solution.
It's
a
web
part,
it's
just
pretty
basic
and
vanilla.
I
did
uninstall
the
office
fabric
react
because
I
didn't
need
that
library.
I
just
removed
it,
but
it
wouldn't
matter
because
it
does
since
I'm
not
using
it,
it
won't
build
in
and
then
what
I've
done
is
I've
gone
into
my
scss
file
for
my
components
and
again
I
had
commented
this
out
and
we
have
our
baseline
component.
D
There
is
a
base
svg
file
in
the
react
library
that
has
some
of
the
things
that
some
of
the
base
atom
atomic
components
need
like
a
drop
down
box
needs
a
little
carrot,
svg
for
that
pull
down,
and
things
like
that.
So
we
have
a
very
small
set
of
icons
in
the
library
that
are
sort
of
based
to
its
ability
to
function.
D
So
we
need
to
make
a
call
to
initialize
those
symbols
now,
because
I
know
that
you're
going
to
want
to
have
a
lot
more
icons
available
to
your
solutions
than
just
those
very
few
that
we
have
in
the
library.
I
also
made
it
so
that
this
function,
the
symbol,
step
function,
will
also
allow
you
to
add
one
or
more
additional
svg
files
to
it
to
register
a
bunch,
more
controls,
and
so
it
luckily
stefan
has
also
created
another
project
that
he
called
h2o
icons,
which
is
all
the
fluent
ui
icons.
D
So
it's
the
regular
ones,
the
solid
ones
and
there's
some
page
ones.
Let
me
just
show
you
quickly
what
that
looks
like
so
that
package,
it's
from
the
nad,
h2o
github
repo
under
packages,
there's
an
h2o
icons
and
he
is
showing
you
here
how
his
fault
that
package
is
laid
out.
So
when
you
import
this
in
this
build
into
your
solution,
you
will
get
those
svg
files
and
then
you
can
make
reference
to
them.
D
So
you
install
the
nad,
h2o
icons
and
then
those
files
are
in
your
node
modules
and
since
they're,
then
in
your
know,
modules
you
can
import
them
in.
So
what
I
do
is
create
a
string
constant
where
I
require
in
that
svg
file,
and
then
I
passed
that
into
init
symbols,
and
so
once
you
do
that
it
will
not
only
register
those
base,
symbols
that
the
library
needs,
but
also
all
of
the
the
icons
that
are
in
that
svg
file.
Okay,
so
that's
a
that's
a
lot
of
stuff!
D
So
now
we
have
all
of
those
icons.
Now,
if
I'm
doing
this,
if
I'm
doing
this,
I
don't
need
to
do
this
as
well.
It's
just
sort
of
a
demo,
so
I
could
have
this
competent
out,
because
this
one
line
will
not
only
register
the
base
ones,
but
they'll
also
register
these
additional
ones.
So
then,
after
that
we
want
to
use
or
consume
the
theme
provider
that
we
have
set
up.
So
in
our
manifest
here
we
made
sure
that
we
have
added
supports
theme
variants
to
true,
so
that's
in
there
and
then
so
back
here.
D
I've
built
a
special
extra
feature
that
I
called
spfx
themes.
It
has
an
interface
as
well,
and
that
does,
if
you've
read
stefan's
blog
post
about
themes
and
how
you
consume
themes.
I've
basically
put
all
of
that
in
a
class
so
that
you
can
just
with
two
lines
of
code
initialize
all
your
theme
handler.
D
So
if
you're
in
a
web
part
where
the
theme
provider
is
available,
you
would
create
a
instance
of
the
theme
provider
and
then
you
would
make
a
call
to
initialize
the
theme
handler
and
passing
in
the
theme
provider
with
the
dom
element
if
there
is
no
theme
provider.
So
if
you're
in,
like
a
application,
extension
or
something
else
where
theme
provider
isn't
available,
you
can
make
the
call
this
way
which
will
use
the
page
context,
spf
sharepoint
framework
variables
to
initialize
the
theming
support
for
the
controls.
So
that's
how
to
set
everything
up.
D
Okay,
so
now
we've
got
it
all
set
up,
and
now
let's
try
to
do
something
with
it.
So
let
me
let
me
control
s
this
page
and
I
have
gulp
serve
running.
So
let's
take
a
look
and
make
sure
that
everything
is
well
in
the
world
and
I'm
going
to
do
something
I
never
do,
which
is
I'm
going
to
live
code,
which
is
just
crazy
silly.
Why
am
I
doing
that?
All
right,
we're
good
all
right,
so
I'm
gonna
come
back
over
to
here
this
getting
started.
D
I'm
gonna
do
probably
the
most
simple
thing
which
is
to
come
down
here
to
this
team
splash
card
that
I
mentioned
and
so
on
the
docs.
I
have
this
theme
splash
card
and
it
looks
like
that
and
oh
look,
a
kitty
picture.
I'm
actually
not
a
huge
fan
of
cats,
but
that's
fine.
Okay.
So
we
have
a
kitten
picture
and
if
we
come
down
here,
we
can
see
that
we
have
a
code
code
sample.
D
So
I
had
clicked,
you
know
the
show
code,
it
shows
the
code,
and
so
now
I
can
copy
this
section
out
here
and
I'm
going
to
control
c
that
out
and
then
we'll
minimize
this
back
out
and
I'm
going
to
go
over
to
my
demo,
and
so
I'm
going
to
paste
that
demo
code
in
here
and
you'll
notice
a
whole
bunch
of
red
squigglies
and
so
in
the
in
the
instance
of
saving
time.
I'm
going
to
come
up
here.
D
I
have
already
pasted
all
the
imports,
and
so
what
I
want
to
mention
about
the
imports
is
that
they're
selective.
So
when
you
are
bringing
in
each
of
these
react
components,
you're
only
going
to
inflate
the
size
of
your
build
package
by
whatever
pieces
that
you
actually
need.
But
you
know,
certainly
if
you
need
the
whole
library,
if
you
just
import
it
from
there,
it
will
import
the
whole
library
and
you'll
be
good
to
go.
D
D
And
put
some
a
semicolon:
there
it
likes
that
and
then
we
can
do
this
and
we
can
copy
and
we
can
paste
that-
and
I
can
save
that
and
now
hopefully,
if
all
is
running
well
in
the
world-
and
we
have
no
build
errors,
looks
good.
Then,
if
I
come
over
here
and
we
go
back
to
our
hello
world
and
we
refresh
the
empty
cache
and
reload.
D
There
we
go,
we
have
the
component
all
put
in
all
styled
exactly
the
way
we
need
to
so
now.
Let's
say
that
we
wanted
to
sort
of
extend
this
a
little
bit,
so
we
know
that
we
have
the
splash
card
footer
here
with
the
two
buttons
sitting
on
top
of
each
other,
and
so
what
I'm
going
to
just
do
is
say:
hey
how
about
I
wanted
to
have
a
a
selection
for
the
combo
box.
Let's
say
so.
D
If
I
come
back
over
here
and
I
go
up
to
drop
down,
this
is
one
of
our
more
complicated
controls
and
I
show
the
code
for
this.
Here
is
our
drop
down,
and
so
we
have
the
options.
The
value
I'm
actually
there's
one
of
com
piece.
That's
missing
from
these
dots
for
that
in
a
minute,
so
we
copy
that
out-
and
let's
say
we
want
to
put
our
drop
down
here,
so
we
can
put
our
drop
down
here.
We
can
set
that
after
we
can
set
this
after
and
we
can
set
that
after
okay.
D
So
let
me
come
up
here,
so
I'm
adding
the
drop
down,
so
I
need
to
undo
that.
So
we
have
the
drop
down
and
then
I
created
just
a
static,
although
I
could
pass
it
into
a
prop
or
or
whatever
I
need
to
do,
get
it
from
a
service.
But
here
is
the
list
of
items
that
I
want
to
have
for
my
drop
down
options.
So
I
have
you
know
black
white
and
orange
as
my
drop
down
options.
D
So
now
I
have
this
drop
down
options,
values,
and
so
I
can
say
this
dot
drop
down
options
and
that
passes
that
in-
and
this
is
giving
me
an
error,
because
there
is
one
more
missing
attribute
that
I
need
there.
We
go,
and
this
contains
type
ahead
and
I'm
going
to
just
say
false
here,
because
I
don't
need
that
and
one
other
thing
I
have
to
do
here
is
give
it
a
change
event.
So
what
I'm
going
to
do
here
is
I'm
just
going
to.
D
I
have
a
drop
down
value,
state
property,
and
so
I'm
going
to
do
something
that
I
would
normally
not
do,
but
is
to
say
on
change.
And
so,
if
we
hover
over
this,
we
can
get
some
intellisense.
It
says
our
onchange
event
gives
me
the
field
value,
so
I
know
I'm
going
to
have
field
value
here
and
I'm
going
to
pass
that
into
a
function
to
set
the
state.
D
D
There
we
go,
and
now
I
have
my
drop
down
list
note:
there's
no
default
value.
So
if
I
come
back
over
here,
if
you
see
this
value,
it's
set
to
apple.
Well,
that
doesn't
help
me
very
much.
I
need
to
use
the
state
value
so
I'm
going
to
override
this
and
change
this
to
this
dots
state,
dot,
dd
value,
save
that
one
more
time.
C
D
D
Okay,
so
here's
some
references
so
the
documentation
that
I
was
sharing
for
the
react.
Docs
is
there
antlab.nad.studio
h2o
h2o
react.
The
icons
are
at
that
github,
so
just
go
to
github
nad
design,
h2o
and
you
can
go
down
through
the
packages
h2o
icons
to
find
those
icons
files
and
then
again,
the
base
documentation
for
the
h2o
design
patterns
are
right
there
at
the
root
of
that
nad
studio.
Url
all
right.
A
A
A
G
I
do
some
development
on
these
web
parts
every
now
and
then
so
I
just
wanted
to
share
a
page
which
has
been
set
up
using
the
pmp
modern
search
reports,
so
I
actually
had
to
call
call
up
one
of
my
former
colleagues
at
the
puzzle
park.
So
there's
a
guy
called
loftus-ness
to
set
up
this
page,
so
this
is
a
page
using
the
home
layout.
That
means
you
have
a
right
column
here
and
then
the
main
line.
So
we
have
a
filter
web
part
in
the
right
hand,
column.
G
We
have
a
search
box,
we
have
a
vertical
web
part
and
then
we
have
the
result.
Web
parts-
I
also
hidden
the
search
box
in
the
header
to
just
use
this
page,
so
just
to
show
that
you
can
have
pretty
nifty
pages
actually
set
up
using
these
web
parts.
Now,
if
I
just
switch
between
the
verticals,
then
it
just
changes
the
the
the
queries
and
also
the
templates
used.
G
Also,
I
think,
there's
there's
a
custom
template
used
on
these
results.
So
these
are
not
tags.
This
is
actually
the
site
name.
So
it's
just
a
custom
template
used
and
then
we
have
some
filters.
I
can
do
site
say
if
I
pick
my
like
pmp
demo
site,
I
will
get
whatever
files
is
on
there.
So
this
is
showing
you
what
you
can
do
and
now
I'll
hand
it
over
to
frank,
and
he
will
start
with
a
blank
page
and
let's
see
if
he
can
get
up
to
look
something.
Looking
like
this.
E
Yeah,
thank
you,
michael
okay.
So
quick
introduction
about
me.
My
name
is
franconi.
I'm
365,
specialist
and
office
development
mvp.
Today
we
wanted
to
make
this
call
to
do
a
quick
demo
about
the
modern
search
and
how
to
use
it
and
how
to
get
started
with
this
solution,
especially
for
new
people
who
don't
already
know
this
solution.
So
this
will
be
a
very
basic
demo
about
the
installation
and
the
basic
usage
of
this
web
parts.
So,
first
of
all
this
solution-
oh
you,
you
can
get
it!
E
That's
all
on
github
you
have
the
microsoft
search
organization
and
the
pld
model
search
repository
and
you
can
get
the
latest.
The
last
release
sorry
directly
from
here.
So
the
last
version
is
the
october
version.
As
I
said
earlier
in
this
call,
there
will
be
another
version
in
december,
adding
new
features,
so
the
demo
I
will
show
you
here
will
be
based
on
the
upcoming
version.
I
won't
go
through
all
of
this
features,
but
maybe
for
another
call,
but
I
will
focus
on
on
basic
usage
so
to
get
the
package.
E
Basically,
you
get
the
really
is
here,
and
you
have
some
package
here
to
download
you
have
this.
It
is
a
regular
sharpen
firmware
package,
so
you
can
use
it
in
a
site,
collection,
app,
catalog
or
tenant
app
catalog
in
this
demo,
for
instance,
I
have
a
site
here
and
I
just
I
just
enabled
the
site
collection,
app
catalog
and
I
use
it
like
in
an
isolated
way
in
my
site
collection.
So
just
put
your
solution
in
the
app
catalog
click
on
deploy
and
the
web
port
will
be
available
on
your
site.
E
Basically,
when
you
install
the
solution,
you
have
like
four
web
parts
included
the
most
important
one
and
the
main
one
is
the
pnp
search
results.
So
from
here.
Basically,
you
can
configure
you
have
to.
You
will
have
to
choose
the
the
data
sources
and
we
expose
the
sharp
one
search,
which
is
the
the
original
source
from
the
v3
and
earlier
and
now
the
microsoft
search
source.
So
the
first
step
is
to
choose
which
source
you
want
to
use.
So
I
will,
I
will
do
my
demo
with
the
shotgun
search.
E
So
basically,
when
you
click
on
a
source,
you
will
have
a
lot
of
options
specific
to
that
source.
So
if
I
go
to
shop
and
search,
I
will
basically
from
find
sorry
the
option
for
the
shop
on
search
like
query,
templates,
visual
source
and
and
so
on
and
microsoft
search.
I
will
have
other
options
like
entity
ties
and
so
on,
so
hb
depends
on
the
on
the
source.
So,
first
of
all
I
will
configure
the
start,
one
search
so
to
get
result
from
here.
The
easy
way
is
to
configure
the
query
template.
E
So
in
this
specific
field,
you
can
add
your
query
in
the
keyword,
query,
language
format
so
refer
to
the
documentation
to
see
how
you
can
build
this
kind
of
query.
But
basically,
let's
say
I
want
to
grab
all
the
documents
from
my
site.
You
can
use
manage
properties
like
paths,
for
instance,
and
you
can
all
you
can
also
use
tokens.
Tokens
are
resolved
from
the
context
from
the
bank's
context,
and
this
way
you
can
build
like
dynamic
queries
to
get
your
results.
So
let's
say
I
want
to
use.
E
E
So
sorry,
so
when
you
do
this
kind
of
thing,
the
condition
between
managed
property
will
be
your
end,
and
if
you
want
to
specify
an
all,
you
have
to
write
it
explicitly
so
by
default
is
the
end.
So
if
I
do
that-
and
I
click
apply,
as
you
can
see
all
my
results
appear
here
and
from
this
page
I
can
also
control
some
other
options.
E
For
instance,
as
you
can
see
here
in
the
in
the
default
layout,
I
have
some
weird
stuff
in
the
in
the
layout
and
let's
say
I
want
to
use
my
own
managed,
probably
sharepoint
managed
properties.
So,
as
an
example,
let's
say
I
have
a
document
library
with
a
taxonomy
column,
and
I
have
all
my
documents
tagged
with
this
taxonomy
values.
E
I
can
create
a
managed
property
from
this
column.
So
if
I
go
to
the
search
schema-
and
I
I
go
to
the
refinable
stream
managed
property,
which
are
basically
placeholders-
that
you
can
use
for
custom
scenarios
instead
of
creating
new
managed
properly
and
you
can
map
the
crawl
properly
to
a
specific
refinable
that
you
can
use
in
the
moderation.
So
let's
say
I
want
to
use
the
refinement
streak
like
zero
two
maps
to
the
text
version
of
the
taxonomy
term
form
for
my
column.
E
I
mapped
this
and
I
also
created
an
alias
to
to
be
used
in
in
the
component.
So
if
I
go
back
to
my
page
and
let's
say
I
want
this
value
to
be
my
manageability
instead
of
the
default
one,
I
will,
I
will
use
something
called
slots
here.
The
slots
are
basically
placeholders
in
your
layouts,
so
it
depends
on
the
layouts,
avoiding
avoiding
the
the
necessity
to
customize
the
template
and
refer
your
specific
fields.
E
You
won't
see
all
the
custom
managed,
probably
here.
These
are
just
suggestions
and
sometimes
people
are
confused
because
they
don't
see
their
managed
properly.
This
is
this
is
the
expected
behavior
and
we
can't,
technically
speaking,
retrieve
all
the
managed
properties
from
the
schema.
So
if
you
want
to
use
a
custom
property,
you
have
to
go
to
the
dropdown
here
and
type
the
name
of
your
probability.
So
let's
say
it's
refinable
2,
I
add
it
and
I
press
enter
to
be
to
to
make
this
manage
probably
available
for
my
slots.
E
So
if
I
go
back
here
and
want
to
change
this
value,
I'll
go
on
customize
and
say
tag,
and
now
I
will
see
my
manage
property
appearing
in
the
space.
So
if
I
just
switch
the
value
and
save
as
you
can
see,
the
value
will
be
changed
dynamically
without
any
kind
of
custom
development.
So
it's
really
easy
to
configure
the
the
layout
this
way.
E
Regarding
the
the
layout
sorry,
you
have
a
couple
of
options
in
the
next
page,
so
the
first
page
is
delegated
to
the
source
configuration
and
the
next
fetch
is
it's
delegated
to
the
layout.
So
we
provide
like
default
layouts.
So,
for
instance,
the
default
one
is
the
to
the
card,
but
we
have
also
detail
list
the
the
simplest
slider
custom.
E
If
you
want
to
go,
if
you
want
to
to
make
a
customization
on
the
template
and
also
people,
let's
say
to
build
a
people
directory-
and
you
also
the
latest
one-
is
the
debug
option
to
explore
the
result
and
our
values
are
reached
with
within
the
search.
So
let's
say
I
go
to
the
I
choose
the
list
here
for
a
template.
This
is
always
the
same
thing.
You
have
the
html
template
so
on
the
behind
the
scene.
We
are
using
handlebars
html
templates,
so
it's
a
templating
framework
to
build
like
dynamic,
html
templates.
E
You
have
also
a
special
feature
called
result.
Types.
The
result
type
is
basically
to
make
conditions
about
your
results
and
to
make
display
condition
on
it.
So
I
will
show
you
that
if
I
click
on
edit
search
result,
I
can
build
like
conditions
to
render
an
items
in
specific
way.
So
let's
say
I
want
to-
I
don't
know,
choose
the
title
here
and
say
if
the
title
contains
instance,
microsoft,
it's
a
good
example.
I
can
completely
override
the
display
for
this
specific
row
in
the
results.
E
So
I
can
just
go
here.
Let's
say
completely
override
the
ui,
I
can
go
here
and
add
and
save
and,
as
you
can
see,
only
the
result
with
this
specific
condition
will
be
processed
with
the
template.
You
you
provided
in
the
result,
types
configuration.
So
it's
a
pretty
cool
feature
again.
It
does
not
require
a
lot
of
development.
All
you
have
to
do
is
know
some
html
or
some
stuff
or
some
basic
css
rules.
E
So
it's
pretty
simple
or
you
can
start
with
the
default
template
and
just
update
the
default
template.
It
works
as
well.
So
the
next
thing
about
the
layouts.
We
provide
some
default
options
for
each
layout,
so
it
really
depends
on
what
you
are
building,
for
instance,
for
the
list
layout.
You
can
just
add
the
icon
show
the
thumbnail
or
not
something
like
this.
E
E
So
in
this,
in
this
case,
for
instance,
I
can
customize
all
the
columns
and
how
they
are
rendered
within
the
table,
so
a
pretty
cool
option
to
customize
to
to
according
to
your
requirements,
I
won't
go
through
all
of
this
option,
but
basically
you
have
many
options
for
layouts
and
if
it
doesn't
do
the
job
for
you,
you
can
even
customize
the
templates
from
scratch
and
go
with
the
extensibility
framework.
We
we
also
provide.
This
is
not
the
the
purpose
of
this
call,
but
maybe
on
the
network
we
go.
E
We
will
talk
about
this,
this
option
as
well,
so
the
next
thing
you're
gonna,
find
in
the
configuration
option.
So
let
me
go
back
to
my
list,
for
instance,
so
we
choose
the
source
we
choose
the
layout
and
the
next
one
is
how
we
connect
these
things
to
other
web
parts
on
the
page.
So
basically,
oh,
for
instance,
I
can
use
refiners
with
these
search
results.
E
So
I
will
add
another
wordpress
on
my
page,
for
instance,
the
search
filters,
and
I
have
to
make
the
connections
between
the
search
result
and
the
search
filters.
So
the
first
thing
I'm
going
to
do
is
go
back
to
the
search
results
and
on
the
third
page
I
will
have
a
connect
to
filter
by
parts.
If
I
enable
this,
I
can
choose
the
filter.
What
parts
I
just
added
to
the
page-
and
I
will
do
the
same
thing
on
the
search
filter.
So
it
is
a
two-way
connection
between
the
two.
E
It's
really
important
to
do
that.
Otherwise
this
won't
work
properly
and
from
here
I
can
edit
the
filters
so
the
same
as
before
the
field
here
in
the
list
are
just
the
field
available
in
the
current
results.
So
if
you
don't
see
anything
here,
it
means
either.
You
don't
have
any
results
in
your
search
result
or
the
connection
is
not
made
properly
so
in
there
for
something
I
can
choose
to
refine
on
the
file
type.
E
Also,
a
very
important
thing
here:
the
fields
you
are
using
here
for
sharpen
search
or
microsoft
have
to
be
refinable
in
the
short
schema
and
really
important.
For
instance,
if
I
choose,
let's
say
a
title,
this
is
not
a
refinable
managed
property
and
it
won't
work.
So
I
have
to
choose.
Refinable
manage
probably
when
I
say,
refundable,
manage
property
in
your
third
schema
here.
This
column
has
to
have
the
value
refined
here,
that's
why
we
are
using
refinables
date
string
and
blah
blah
blah
placeholders,
and
that's
for
this
reason.
E
So
let's
say
I
want
to
add
the
file
type
I'll,
just
type
a
display
name.
You
have
also
the
choice.
How
many
values
you
want
per
filter
and
you
can
choose
the
template,
but
before
we
provide
checkbox
that
range
intervals
and
combo
box,
I
will
choose
let's
say
checkbox,
then
you
have
a
couple
of
options:
behavior
options.
If
you
want
to
expand
by
default,
the
filter
from
to
show
the
count
if
it
is
multi-values
or
not,
and
if
it
is
many
values,
you
have
the
choice
about
the
operator,
the
default
character.
E
E
It
means
if
I
update
the
query
here,
and
I
said
it
says
the
wildcat
character.
I
will
have
other
values
appearing
automatically
so
from
here.
You
can
just
select
the
value,
search,
the
value
or
select
the
operator
between
the
value.
You
can
do
pretty
much
what
you
want
here
and
apply
and
the
values
will
be
filtered
here.
If
you
want
to
see
the
filters,
the
current
filters
combination
appearing
on
the
web
part,
you
have
an
option
in
the
search
results
in
the
layout
in
the
common
options.
E
Last
thing
or
one
option,
you
can
also
do
with
these
web
parts
connect
to
a
search
box
by
parts.
So
if
I
want
to
use
the
source
block
paper
to
filter
my
results,
the
thing
I
have
to
do
is
create
a
search
box
here.
So
in
this
way
it
just
it
is
just
a
one
way
connection.
So
the
connection
is
made
in
the
search
results
on
the
search
page.
You
will
have
input
query
text
here
and
you
can.
You
can
choose
static,
value
or
dynamic
value.
E
In
this
case
I
I've
added
a
search
box
on
my
page,
so
I
will
select
dynamic
value
and
connect
to
source,
select
my
search
box
and
select
the
search
query
for
the
value
to
be
used
in
the
in
the
query,
template
or
in
the
in
the
query.
You
have
to
use
a
special
token
here,
so
it
can
be
search
terms,
so
it
is
the
default
one
for
support,
or
you
can
also
use
input,
query
text
to
create
text.
E
It's
the
same
thing,
okay,
and
this
way,
if
I
click
apply
and
I
try
to
go
to
search,
say
microsoft.
As
you
can
see,
the
value
will
be
filtered
dynamically
and
it
works
also
with
the
filter
and
so
on.
The
last
thing
I
wanted
to
show
you
is
the
vertical
waypoint,
the
last
web
part
of
the
set.
Basically,
the
vertical
parts
are
used
to
browse
data
as
silos,
and
basically
this
swap
pass
only
controls
the
visibility
of
connected
weapons.
There
is
no
magic
behind
it.
It
just
controls
visibility.
E
E
Apply
and
I
can
go
to
the
tour
spread
the
connection
page
and
I
can
connect
to
a
vertical
tab.
So
let's
say
I
want
this
webpart
to
be
displayed
on
the
specific
tab.
I
will
select
the
documents
and
I
can
do
the
same
as
well
with
the
other
webparts,
so
let's
say,
connect
to
vertical
search
and
use.
So
the
final
results
will
be
something
like
this.
E
Here
I
have
only
one
web
part
displayed
and
if
I
go
on
the
document,
the
order
will
be
displayed,
so
it
covers
pretty
much
the
usage
of
this
web
part.
Just
the
last
thing.
If
you
have
any
issues
of
question
about
the
solution,
please
use
the
issue
start.
We
have
also
a
discussion
tab
we
created
times
ago
so
for
questions
prefer
to
use
the
discussion
staff
instead
instead
of
issues.
So
it
would
be
easier
for
us
to
to
manage
this.
That's
it.
A
All
right,
thanks
to
all
our
presenters,
thank
you
julie!
Thank
you,
frank
and
mikhail
for
those
great
demos,
and
I
want
to
thank
all
of
you
for
attending
the
call
recording
will
be
available
in
about
24
hours
on
our
youtube
channel
ak
dot.
Ms
slash
m365
pmp,
slash
videos
get
all
our
updates
on
twitter.
Our
next
community
call
will
be
december
16th
at
7
a.m.
Pacific
time
and
the
next
general
dev
call,
which
is
next
thursday,
will
be
december
9th
at
7
a.m.
A
Pacific
time
all
the
community
calls
and
all
the
rest
of
the
patterns
and
practices
information
is
available
at
ak
dot.
Ms
m365
pnp
we've
got
developer
community
calls
across
many
different
topics,
encourage
you
to
check
all
of
those
out.
You
can
find
links
again
at
ak
dot.
Ms
m365
pnp.
Thank
you
all
very
much
have
a
great
rest
of
your
week
and
we
will
talk
soon.