►
Description
SharePoint PnP Community - SPFx & JS SIG call on November 4. Demos on Microsoft 365 Tenant Service Health - Viva Connections Adaptive Card Extension, React News Web Part, and SPFx Design Patterns - Custom Properties. Adaptive Card Extensions (ACEs) design guidance is now available. PnP project releases in the last two weeks - PnPjs Client-Side Libraries v3.0.0 Preview, CLI for Microsoft 365 v4.2.0 Preview, and PnP Modern Search v4.4.1 Preview. Delivered as well - 1 extension, 5 web part and 3 ACE samples! Outstanding! The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place as always in chat throughout the call.
Learn more:
• See the full blog post for this call at: https://aka.ms/m365pnp/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
Hello
and
welcome
to
the
sharepoint
framework
in
javascript
bi-weekly
sync:
it
is
november
4th
2021,
I'm
your
host
on
this
call
patrick
rogers,
and
we
have,
of
course,
a
great
agenda
for
you,
as
always
latest
updates
around
sharepoint
framework
we'll
do
run
through
some
updates
on
the
patterns
and
practices
program.
New
community
samples
are
optional
picture
time
with
together
mode
and
then
three
great
demos
from
a
new
allison
and
hugo,
so
a
microsoft,
365,
tenant
service,
health,
viva
connections,
adaptive
card
extension,
a
react
news
web
part
and
an
spf
x,
design
pattern.
A
Custom
properties
excited
to
see
all
of
those
here
shortly,
of
course,
if
you're
interested
in
participating
a
little
bit
more
in
pnp
or
this
call
or
the
program
in
general,
the
first
thing
I
always
encourage
folks
to
come
demo.
Your
work
on
these
calls
there's
a
link
down
there
in
the
bottom
right
corner
ak
dot.
Ms
slash
m365
pnp,
slash,
request,
slash
demo
and
check
that
out.
It's
a
great
way
to
get
some
visibility
for
your
company,
your
work
and
yourself,
of
course,
as
well.
A
The
demos
are
really
fantastic
on
all
of
the
calls
and
love
love.
Love
the
demos-
I
always
learn
something
new,
it's
great
to
see
what
all
of
you
are
doing
out
there
in
the
community,
so
please
reach
out
on
those
demos,
contribute
on
github
as
well,
of
course
always
welcome
your
issue
reports.
As
I
always
say,
we
don't
love
getting
issues,
but
we
love
finding
out
about
them,
so
we
can
get
them
fixed,
submit,
pull
requests
all
of
our
projects
and
the
projects
in
all
of
our
our
partner
repositories
or
partner
organizations.
A
Some
welcome
pull
requests
as
well
in
your
contributions
and
as
well.
If
you
have
a
little
bit
of
time
and
happen
to
know
the
answer,
you
can
always
help
out
with
issues
and
questions.
Others
might
have
if
you
happen
to
know
the
answer
and
as
always,
we
welcome
your
feedback
on
everything
we're
doing
in
patterns
and
practices.
How
are
the
calls
how's
the
documentation?
A
Where
else
can
we
help
and
of
course
positive
feedback
is
okay,
too?
You
know
if
there's
something
we're
doing
you
really
like
it.
Let
us
know
we
can
do
maybe
a
little
bit
more
of
it.
Now
lots
and
lots
and
lots
of
links.
The
first
link
there
is
for
our
developer
videos,
those
are
gonna,
be
content,
focused
videos
on
doing
things
like
auth
or
writing
a
web
part
or
an
ace
extension.
Then
we
have
community
videos
which
are
going
to
be
the
recordings
of
all
of
our
calls.
A
So
this
call
the
the
call
on
the
opposite
thursdays
and
then
the
other
weekly
calls
the
tuesday
call
and
everything
else
will
be
there,
so
you
can
always
catch
up.
If
you
happen
to
miss
one
of
the
calls
you
can
always
catch
up
later
or
you
just
want
to
review
something
we
might
have
covered.
Those
will
all
be
available
there
on
the
youtube
channel,
typically
about
24
hours.
A
After
the
the
actual
call
happens,
we
have
a
bunch
of
open
source
organizations
there
sharepoint
pnp
office,
dev
and
microsoft.
Graph.
All
welcome
your
input,
your
issues,
your
contributions,
so
check
all
of
those
out.
If
you
have
interest,
you
know
in
microsoft,
graph
in
particular,
they're
doing
some
really
cool
stuff
with
their
sdks
across
a
lot
of
different
languages,
certainly
check
that
out,
they're
looking
for
folks
to
join
in
and
help
out
as
well
ak
dot.
A
Ms
slash
team
samples,
spfx
web
parts,
power
platform,
samples,
spfx
extensions
and
list
formatting
samples
are
all
great
places
to
start
when
you're
trying
to
start
a
new
project
or
you
have
some
work
to
do.
It's
always
a
good
place
to
see
how
others
are
solving
these
problems
and
get
ideas
to
build
your
own
solutions
so
check
those
out
as
well.
Of
course,
we
welcome
all
of
your
samples
if
you
are
interested
in
submitting
their
hugo
goes
over
those
every
couple
of
weeks
to
update
folks
on.
A
What's
in
there,
we'd
love
to
highlight
your
samples.
So
please
do
if
you
interested,
submit
your
sample
there
to
the
appropriate
gallery
and
those
a
lot
of
links,
so
you
can
always
just
remember
ak
dot.
Ms
slash
m365
pnp
that'll
get
you
all
the
information
about
the
patterns
and
practices
program,
links
to
all
of
our
calls
and
as
well
links
to
all
of
these
other
resources,
so
be
sure
to
check
that
out.
A
Do
want
to
mention
as
well.
We've
got
the
call
coming
up
next
tuesday.
This
is
the
microsoft
365
platform
call
9th
of
november,
can't
believe
we're
already
in
november
8
a.m.
Pacific
time,
which
is
you
know,
8
a.m,
pacific
time,
so
you
can
work
out
how
that
is
for
for
your
time
zone,
but
shabham
gat
call
introducing
embedded
search
box
and
wall
deck
and
visa
extending
microsoft,
viva
connections
with
adaptive
card
extensions.
A
I
think
that
might
be
a
little
bit
of
a
rehash
of
some
of
what
they
did
at
ignite
with
some
new
content
there
on
the
adaptive
card,
extensions
to
highlight
that
as
well,
we'll
cover
latest
news
and
community
photo
opportunities
there
as
well.
The
recurrent
invite
available
ak
dot.
Ms
slash
m365-dev
dash
call.
A
B
As
you
can
see,
there
is
a
wide
spectrum
of
sessions
and
the
ever
popular
amas
that
are
coming
up,
in
fact
cli
for
microsoft,
365
next
week
and
pmpjs
the
week
after.
So
please
don't
hesitate
to
register.
We
want
to
help
you
get
more
involved.
Aka
ms
ford,
slash
sharing
is
caring
once
you
do
that
we
want
to
celebrate
you.
So
if
we
move
to
the
next
slide,
we
have
the
pnp
recognition
program.
Now
this
is
a
fairly
nourish.
It's
been
getting
a
lot
of
great
press
and
everyone's
been
getting
excited.
B
It
is
powered
by
credly
and
it
is
here
to
celebrate
all
the
amazing
work
that
you
do
in
the
community
in
a
formal
and
official
way.
So
it's
the
same
credly
that
you
get
the
badges
from
when
you
do
microsoft,
certifications,
they're,
going
to
sit
right.
Alongside
of
it,
we've
got
a
whole
host
of
new
ones.
We
had
just
debuted
the
october
oktoberfest,
so
those
are
going
to
start
going
out
now.
That
october
is
ended.
We
start
tallying
up
all
of
those
contributions
and
we
are
working
on
theme,
specific
ones.
B
So
we've
got
the
independent
publisher.
Connectors
we've
got
blogs.
Spfx
we've
got
cli
all
kinds
of
specific
badges
coming
soon
to
celebrate
all
the
amazing
work
you're
doing
we
do
need
you
to
opt
in
so
that
we
can
connect
your
email
address
to
your
credly
profile
to
your
github
account
so
aka
dot.
Ms
four
slash
m365
pnp
recognition.
We
want
to
celebrate
you,
opt-in,
it's
awesome
and
exciting
patrick
back
to
you.
A
Thanks
david
for
those
updates-
and
I
do
want
to
thank-
we've-
had
to
move
the
time
of
the
pmpgs
ask
me
anything
dude.
I
had
some
personal
appointments
that
came
up
so
thanks.
Everybody
for
the
flexibility
hope
to
see
you
there,
but
that
time
has
moved
just
want
to
highlight
that
a
little
bit
and
now
we'll
do
sharepoint
framework
updates
with
visa.
C
Thank
you
just
a
reminder
and
like
few
hours
after
our
previous
sharepoint
framework,
and
we
have
a
connection
call,
we
actually
released
the
sharepoint
framework
1.13,
which
is
really
targeting
the
viva
connection
and
next
extensibility
options
there.
Of
course,
viva
connection
is
also
about
sharepoint
portals,
so
basically
creating
web
parts
and
extensions,
but
it's
not
only
that,
but
it's
also
including
the
mobile
ace
option.
So
that's
all
now,
generally
available
as
part
of
the
sharepoint
framework
1.13.
C
just
to
call
out
viva
connection
has
a
new
logo
which
was
announced
in
the
ignite
this
week.
So
you
can
see
that
connection
style
thing
on
the
lower
corner.
That's
viva
connection
so
now
also
something
what
we
did
pretty
recently
is
that
we
released
a
new
document
related
on
viva
connection
design
guidance,
so
we're
looking
into
evolving
this
documentation
as
well.
C
But
if
you
go
akms
ace
design,
you
will
find
actually
design
guidance
for
those
adaptive
card
components
and
how
to
get
started
and
under
considerations
over
there,
now
we're
looking
into
actually
doing
cool
ace
samples
more
and
more
together
with
our
design
team
as
well.
This
is
something
which
we
used
to
have
on
this
course.
Quite
often,
I
haven't
actually
shown
this
for
a
while.
So
I
wanted
to
actually
just
pinpoint
this
one.
C
It's
it's
pretty
amazing
to
see
the
growth,
but
I
guess
it's
one
of
the
one
of
the
thinking
points
is
also
the
consistency
that
we
keep
on
releasing
new
versions
gradually
and
it's
g8
and
it's
proven,
and
it's
and
it's
pretty
well
it's
reliable
as
well
and
keep
on
addressing
any
issues.
If
there's
any.
C
This
is
more
on.
What's
going
to
happen
now
after
1.13,
so
nothing
new
here
based
on
the
changes.
Since
last
time
we
talked
but
basically
performance
improvements
in
the
pipeline
team
storage,
support
for
partners,
sharepoint
framework
solutions
in
works
and
european
catalog
experience
and
a
lot
of
improvements
on
the
store
sign.
New
yeoman
templates
are
going
to
code
in
1.14.
C
We
previewed
them
already
at
some
point
better
solution,
metadata
support,
enable
service,
principal
extensions
and
a
lot
of
more
stuff
in
here,
so
1.14
beta
is
coming
quite
soon
so
within
a
week
or
two,
and
that's
scheduled
right
now
to
go
out
right
after
the
new
year
so
in
january,
sooner
or
later,
but
that's
it
for
my
time.
Let's
move
forward.
D
D
We
still
have
some
work
to
do
on
client-side
pages
as
well
as
there
have
been
some
breaking
changes
again
in
the
taxonomy
preview
api,
and
we
did
see
some
minor
changes
in
the
graph
team's
endpoint
that
we
need
to
still
work
out,
but
otherwise
you
will
find
that
the
nightly
build
of
our
v3
package
has
some
pretty.
You
know
solid
code
in
it,
so
we
would
really
really
appreciate
it.
D
If
people
could
go
to
that
issue
1636,
it
has
a
little
getting
started
on
how
to
use
that
v3
nightly,
build
and
and
test
it
out
and
see
how
how
it
works
for
you,
and
if
you
have
any
issues
or
feedback.
We
would
love
to
hear
about
those.
Obviously,
knowing
that
we
do
have
some
some
failing
tests
yet
so
there
are
some
pieces
there
that
won't
work,
but
otherwise,
for
the
most
part
we're
finding
that
everything
is
working
and
we're
really
really
excited
about
this
update.
A
Thanks
julie,
for
that,
we
are
very
excited
to
get
v3
out
clicking
through
all
the
animations
there
on
the
slide.
Next
up
is
cli
for
microsoft,
365.,
so
new
preview
version
4.2
with
adding
service
principles
to
azure
ad
apps,
getting
list
item
attachments,
extending
uploading
files
to
support
sharepoint
resource,
specific
consent
and
new
sample
showing
how
to
use
the
cli's
access
token.
A
This
is
the
react.
Controls
are
for
the
body
of
your
web
parts
or
application
customizers.
You
can
drop
those
in
and
get
a
great
out
of
the
box.
Look
modern,
taxonomy
picker
is
using
the
new
taxonomy
rest
api
documentation,
enhancements
decreasing
bundle,
size
for
pagination
control
and
various
fixes
version.
3
5
is
coming
out
soon
with
support
for
spfx
version
1.13.
A
So
look
for
that
in
the
coming
days
and
weeks
and
then
the
react
property
controls.
These
are
designed
to
be
used
in
the
property
pane
of
your
spfx
webparts
art
version
3.2
fast
serve
support
various
fixes
in
that
version
3.3
with
support
for
spfx
1.13,
is
coming
soon.
Thank
you,
as
always
all
the
contributors
to
these
controls.
A
E
A
F
Boy
do
we
have
samples
for
you?
We've
got
two
repositories
from
the
spfx
side.
Well,
we
have
more
than
two
but
two
that
I
wanna
talk
to
you
about
today,
which
are
spfx
extension
samples
and
spfx
webparts.
These
are
samples
that
are
created
by
the
community
and
they're
there
to
help
you
learn
simple
patterns,
and
some
of
them
are
really
like
full-featured
solutions
that
you're
welcome
to
look
at
rip
apart.
You
know,
try
to
figure
out
how
you
can
use
it
in
your
own
environment.
F
Let's
just
remember
that
those
are
not
intended
to
be
supported
solutions
they're,
absolutely
intended
for
you
to
learn
from
them,
but
here's
what
we
have
over
the
last
two
weeks.
We've
got
a
new
extension
by
sudarsan
which
allows
you
to
actually
go
change.
The
page
layout
type
for
your
site
pages,
so
you
can
switch,
let's
say
from
from
an
article
to
a
home
and
vice
versa,
very
cool
extension
and
then
on
the
web
art
site.
We
have
some
updates
one
by
joao
mendez
list
item
menu
where
we've
just
added
support
for
management
data.
F
Columns
alex
trantiv
has
upgraded
the
kanban
board
web
part
to
spf
x,
113,
the
new
react
calendar
or
not
new.
The
updated
react
calendar
by
mohamed
amir
who
fixed
an
issue
with
recurring
event,
not
to
be
confused
with
the
modern
calendar,
which
was
updated
by
peter
kushner,
with
update
for
time
zones,
which
is
probably
a
timely
fix,
and
we
have
a
new
web
part
by
adam
mojic,
which
is
find
parker.
So
if
you've
ever
played
where's
waldo.
Imagine
having
a
web
part
like
that
in
your
page,
just
for
fun.
F
It
was
just
released
for
for
halloween,
but
I'm
sure
it
could
be
repurposed
for
christmas,
easter
and
all
these
all
these
other
fun
things.
So
one
of
the
things
that
we've
done
with
the
samples
is
we've
updated.
The
compatibility
tags
every
sample
or
very
soon
every
sample
will
have
one
of
these
tags.
We'll
tell
you
exactly
where
this
is
going
to
work
or
not
going
to
work,
because
what
we
found,
the
majority
of
issues
that
people
are
filing
were
usually
related
to.
F
I
have
the
wrong
version
of
node,
or
this
is
not
ever
going
to
work
on
a
local
workbench
but
they're,
trying
to
make
it
work
on
local
workbench.
The
other
thing
that
we're
trying
to
do
is
we've
added
for
the
majority
of
samples.
We've
started,
adding
a
section
where
we're
just
showing
you
basically
how
to
quickly
create
an
issue
quickly,
search
for
existing
issues
and
discussions
around
a
given
sample.
That
way,
you
can
actually
you
know
before
you
open
a
ticket.
F
You
can
actually
go
see
if
other
people
have
had
this
conversation
and
of
course
we
created
the
link
to
our
awesome,
spf
x
doctor
as
part
of
the
microsoft
365
cli.
So
you
can
diagnose
issues
with
node
compatibility,
environment
confederately,
that's
it
for
me.
I
think
next
is
my
friend
david
to
talk
to
you
about
our
viva
connections.
B
Thanks
hugo
yep,
one
of
the
newest
repositories
for
the
spfx
samples
is
the
aces
adaptive
card
extensions,
allowing
you
to
extend
viva
connections,
exciting
stuff.
We
have
a
new
sample
from
louis
manas.
Today's
lunch
information,
it's
a
really
cool
way
to
identify
for
those
corporate
office
locations
that
have
cafeterias
and
the
opportunity
to
change
that
menu
every
day,
so
definitely
go
check
that
out
and
we
have
some
updates
from
anew
on
service
health
and
transport
for
london
status,
service
health
you're
going
to
see
today.
So
that's
an
exciting,
very,
very
cool
adaptive
card
extension.
B
We
are
open
for
more
extensions
and
contributions
in
this
repository
reach
out.
If
you
have
any
questions,
hugo
myself
and
derek
peterson
are
the
the
three
amigos
that
are
helping
manage
this,
so
don't
hesitate
to
reach
out
to
any
one
of
us
and
we're
working
with
louisa
and
hugo
and
derek
on
getting
started
with
viva
connection
aces
in
a
new
sharing
is
caring
session.
So
we're
trying
to
get
all
that
information
together.
That's
going
to
be
exciting!
Look
for
that
over
the
next
while
and
get
more
involved.
So
definitely
thank
you.
A
Thanks
guys
and
thanks
to
everybody
for
submitting
all
these
samples
and
updating
any
samples,
it's
really
an
incredible
resource
for
the
community
and
if
you're
interested,
please
do,
as
we
mentioned
before,
submit
your
samples
and
with
that
we
are
on
to
optional
picture
time.
So
if
you
all
would
like
to
turn
your
cameras
on
and
get
on
to,
the
picture
show
yay.
C
C
For
all
of
us,
so
let's
actually
do
some
handwaving
everybody.
So
thank
you,
everybody
for
joining
again
today,
great
to
have
you
in
a
call,
hopefully
we'll
see
you
in
las
vegas
or
in
dusseldorf
later
this
month
for
next
early
next
month,
thanks
everybody,
absolutely
brilliant
and
let's
stay
in
dutch
in
the
community
channels,
brilliant
excellent!
Thank
you.
Let's
go
back
on
the
demos.
A
C
G
G
I
became
a
mvp
just
recently
and
I'm
a
developer
at
content
and
cloud
here
in
uk
I
write
blogs
on
a
platform
called
medium
under
the
account
anub
d.
My
twitter
username
is
on
hotels
and
github.
Username
is
anupti,
and
so
you
can
follow
me
on
those
platforms
if
needed
right,
let's
start
with
the
demo
first
and
then
look
at
the
code.
So
if
I
go
to
my
dev
tenant
refresh
this
page
so
over
here,
we've
got
an
adapter
card
extension
in
the
mobile
view
called
as
service
health.
G
What
this
does
is,
it
shows
the
issues
that
are
present
in
our
tenant.
Currently
so,
as
you
can
see,
the
first
thing
it
shows
is:
there
are
currently
five
issues
and
three
services
have
been
affected
and
then,
when
I
click
on
view
details,
it
shows
me
it
shows
us
each
of
the
services
that
have
been
affected
and
then,
if
you
click
on
one
of
the
services,
it
shows
you
what
those
issues
are
and
then,
when
you
click
on
more
details,
it
takes
you
to
the
service
health,
page
and
loads,
the
issue
itself.
G
G
So
when
they
open
the
dashboard
on
their
viva
connections,
mobile,
app
or
say
on
the
desktop,
then
they'll
see
this
card
and
then
they
can
take
a
look
at
what
the
issues
are
and
then
you
know
do
something
about
it
right.
So
that's
the
demo.
Now,
what
we'll
do
is
we'll
have
a
look
at
the
code
before
jumping
into
the
code.
I
would
recommend
you
all
to
watch
this
demo
by
patrick
in
one
of
the
pnp
calls
it's.
G
G
So
with
that
in
mind,
let's
have
a
look
at
the
code,
so
I
won't
go
into
a
lot
of
detail
of
the
code,
because
those
two
videos
will
provide
you
a
lot
of
information.
However,
I
I'll
go
through
some
of
the
bits
that
I
think
are
important.
So,
firstly,
all
this
code
is
shared
on
github.
Under
the
spdev
fx
asus
repository.
G
So
what
we
do
is
the
first
thing
is:
we
need
to
get
all
the
issues,
so
we
call
a
method
called
as
get
get
health
overview
and
that
is
present
in
a
file
called
servicehealth.ts,
and
all
we
do
here
is
using
microsoft
graph.
We
hit
this
end
point
called
as
service
announcement
issues,
and
then
we
get
all
those
issues
where.
H
G
We
we
compute
the
number
of
issues,
so
we
use
a
low
dash
one
of
low
dashers
method
called
as
unique
by
and
then
get
the
length
of
the
unique
services
affected,
which
in
this
case
is,
is
two
and
then
for
the
number
of
issues
we
again
use
microsoft,
graphs
or
data
account.
So,
as
you
can
see
over
here,
I've
just
put
the
the
data
that
is
written
from
graph.
There's
an
overweight
account
of
four.
We
just
display
that
over
here
right
and
then
in
order
to
display
all
the
text.
G
We
just
format
the
text
accordingly
to
say
how
many
issues
and
how
many
services
have
been
affected
once
that
is
done.
We,
when
we
click
on
view
details.
We
need
to
show
the
you
know
the
affected
services
and
the
issues
for
that
we've
got
a
card
button
and
then,
as
you
can
see,
we
just
open
the
quick
view
when
that
button
is
clicked.
So
the
the
code
for
that
is
pretty
much
simple.
G
It's
nothing
but
an
action,
an
action
of
the
type
quick
view,
and
then
we
tell
it
to
open
a
particular
quick
view
that
we
would
have
created
right.
So
we
need
to
format
the
data
slightly,
so
the
on
the
left
side.
You
see
the
data
that
is
returned
from
graph.
It
is
the
list
of
issues
of
and
the
service
to
which
the
issue
belongs.
G
G
G
It
should
be
actually
service
view.s,
but
it
was
my
mistake
while
naming
the
file,
but
anyway,
this
file
needs
to
display
all
the
services
that
have
been
affected.
So
all
we
do
is
the
data
that
we
have
formatted
will
be
present
in
in
the
state
variable.
So
we
we
just
get
that
when,
when
the
quickview
loads
and
then
in
order
to
display
that
data
we
make
use
of
adaptive
card
and
hence
this
is
adaptive
card
extension.
G
The
first
thing
we
do
here
is
we've
gotten
all
the
services
in
an
array
and
that's
what
we
bind
this
json
file
to
and
then
all
we
have
to
do
is
the
first
thing
we
do
is
show
the
image
for
that.
We
create
an
item
of
the
type
image
and
then
we
set
the
url
of
that
to
service
icon
now.
Service
icon
is
nothing
but
the
the
data
that
we
set
earlier
in
the
formatted
data.
So
on
the
at
the
bottom.
G
Over
here,
I've
just
taken
the
the
microsoft
365
suite
object
from
our
services
and
we've
got
a
service
icon
property
in
that,
and
that's
what
we
show
over
here
and
similarly
the
next
thing
we
do
is
we
have
a
text
block
wherein
we
have
to
display
the
name
of
the
service
that
is
affected
again
in
the
services
array.
We've
got
the
name
property
for
each
service,
that's
what
is
displayed
over
here
and
then
we
have
to
display
the
number
of
issues
for
each
service.
G
So
that's
nothing
but
a
an
action
of
the
type
submit.
So
we
add
an
icon
in
the
base64
format.
To
that,
and
then
one
thing
we
do
here
is
we:
we
create
a
custom
object
or
a
custom
property
called
as
service
and
then
set
the
value
of
that
to
the
name
of
the
service.
Now
this
custom
property
name
can
be
anything
based
on
what
we
think
is
relevant
in
this
case.
I'm
using
you
know,
property
name
as
service,
and
the
value
of
that
will
be
the
name
of
the
service
itself.
G
The
reason
why
we
do
that
is,
I
will
come
to
know
in
a
minute
so
once
that
button
is
clicked,
what
we
do
is
we
show
another
quick
view:
that's
using
the
quickviewnavigator.push
and
then
the
other
thing
we
do
is
we
update
the
state
and
there's
a
variable
called
a
selected
service.
We
update
that
with
the
with
the
value
of
the
service
that
we
set
earlier
in
the
json,
so
in
this
case
the
selected
service
will
be
microsoft,
365
suit.
G
Now,
let's
look
at
how
we
display
other
issues
issues
themselves
again.
This
is
a
quick
view,
so
we've
got
a
ts
file
wherein
we
set
the
data.
So
what
we
do
here
is
we
get
the
selected
service
and
and
all
of
the
services
from
the
state
and
then
based
on
the
service
that
is
selected.
We
need
to
get
the
issues
of
the
service.
So
that's
all
we
do
here
over
here
in
the
services
we
find
that
service
which
has
been
selected,
and
then
we
get
the
issues
of
that
service.
So
in.
G
The
service
that
was
selected
was
microsoft,
365
suit
and
then
the
issues
where
you
know
the
three
issues
that
were
present
in
or
that
were
associated
with
that
service.
So
that's
what
we
need
and
we
set
the
issues
now
now
all
we
have
to
do
is
display
these
issues.
To
do
that
again,
I've
got
an
adaptive
card.
G
So
what
we
do
is
we
set
the
date
of
that
to
the
issues
area
that
we've
got
and
then
this
one's
pretty
simple.
So,
firstly,
in
order
to
show
the
issue
itself,
we
insert
a
text
block
and
we
display
the
title
of
the
issue.
So,
as
you
can
see
over
here
in
the
issues
array,
we've
got
our
title
and
that's
what
is
displayed
over
here
and
then
in
order
to
display
the
the
button
itself.
G
G
A
H
A
A
F
Okay,
so
these
sessions
are
called
spfx
design
patterns
and
what
we're
trying
to
do
is
we're
trying
to
level
up
everyone.
So
you
might
say:
hey
you
know
what
these
are.
Some
boring
topic
entry-level
topics,
but
we're
always
trying
to
cover
some
kind
of
easy
stuff
to
learn,
as
well
as
some
more
complicated
stuff,
and
today
we're
going
to
be
talking
about
custom
properties
and
by
custom
properties.
F
I
would
say
well,
first
of
all,
I
can't
hear
you,
but
second
of
all,
you
know
we're
gonna,
I'm
gonna
try
to
show
you
a
few
things
that
you
may
not
already
know
about,
and
if
you
already
knew
about
it,
then
it's
a
good
refresher,
all
right
so
out
of
the
box
and
we'll
talk
about
some
ways
that
you
can
extend
this.
But
out
of
the
box
there
there
are
a
few
property
field
types
that
are
available
to
you.
You've
got
some
check
boxes,
some
radio
buttons
or
choice
groups.
F
F
And
if
you
remember
our
last
session,
we
talked
about
how
the
property
pane
configuration
is
done
through
exposing
or
kind
of
responding
to
this
event,
which
is
a
get
property
pane
configuration
and
it
expects
you
to
pass
an
interface
of
I
property,
pane
configuration
objects
and
ultimately,
what
you're
going
to
be
doing
is
you're
going
to
be
passing
a
bunch
of
group
fields
or
a
bunch
of
fields
that
are
going
to
expose
the
properties.
This
is
a
standard
one.
F
F
The
first
thing
that
we
do
and
if
you're
doing
by
the
way,
spfx
get
an
older
version
of
spfx,
because
you
need
support
for
2019
or
2016..
You
know
these
objects
are
actually
still
found,
I
believe
in
the
bayes
web
part
library,
but
in
the
newer
versions
of
spfx.
All
these
objects
are
found
in
the
sp
property
pane
which
we'll
cover
shortly.
F
So
we
have
a
few
things
that
we
want
to
import
here
and
in
this
case
I'm
importing
kind
of
every
single
thing
that
I
want
to
use.
You
probably
don't
need
to
import
as
many
controls
when
you
do
it
for
yourself,
but
it's
all
coming
from
the
sp
property
pane
library
all
right.
So
let's
look
at.
Let's
start
with
the
first
one.
Oh
I
don't
know
where
that
microsoft
logo
showed
up.
F
Let's
look
at
the
boolean
field
right.
The
boolean
field
is
actually
implement
through
implemented
through
a
checkbox,
and
so
the
control
is
a
rightly
named
property
pane.
Checkbox
again
I
created
a
property
in
my
web
part
that
I
called
the
from
check
box.
You
could
call
it
whatever
you
want
and
then
I
have
a
label
associated
to
it
and
then
I
say
is
it
checked?
Yes
or
no,
and
one
thing
that
you'll
notice
here
is
that
you
know
you
could
just
say:
is
a
check
and
just
bind
to
the?
F
Is
it
checked,
boolean
control,
but
one
thing
you
have
to
remember
is
your
web
part
may
not
have
been
initialized
when
you
first
drop
it,
so
it
might
not
either
be
true
or
false,
or
you
might
not
be
getting
the
behavior
that
you're
looking
for
right
that
you're
expecting
so
one
little
trick
here.
Is
you
know
I
always
do
this?
You
can
you
can
choose
not
to
do
it
if
you
want,
but
I
always
make
sure
that
I
do.
Is
it
checked
and
is
it
equal
to
true
right
that
way?
F
I
know
that
if
it's,
you
know
a
falsie
value,
it's
going
to
be
evaluated
properly,
and
I
know
the
truthy
values
are
going
to
be
evaluated
properly,
just
a
little
trick,
all
right,
let's
go
quickly
because
we
have
a
lot
of
stuff
to
cover.
We
also
have
choice,
fields
and
choice.
Fields
allows
you
to
put
a
bunch
of
radio
buttons
and
allows
you
to
do
kind
of
a
mutually
exclusive
set
of
choices.
F
So,
for
example,
I
can
only
pick
one
season
here,
but
there's
also
other
ways
that
you
can
use
it.
You
may
have
already
have
seen
this
control
in
use
in
the
out
of
the
box
web
parts.
You
know,
for
example,
the
layout
grid
is
actually
or
layout
attribute
of
some
of
the
web.
Part
is
done
using
this
type
of
control
and
I
did
a
custom
one
below
where
I'm
using
kind
of
custom
shapes
and
custom
icons.
F
Let
me
show
you
how
we
do
that.
The
first
thing
we
do
is
we'll
import,
the
property,
pane
choice,
group
and
obviously
we'll
bind
to
the
choice,
free
property
that
we
want
and
then
we're
going
to
pass
the
options.
Now
all
I'm
doing
is
I'm
showing
text
like
I
showed
for
the
seasons
you
just
put
the
key
and
value
or
the
key
in
the
display
text
that
you
want.
That's
pretty
easy,
but
if
you
want
to
show
oh,
that
was
funky.
F
If
you
want
to
show
some
icons
or
images,
one
of
the
things
that
you
can
do
is
you
can
actually
pass
up
to
two
images,
one
which
is
the
selected
image
and
one
which
is
the
image
source.
That
is
when
the
item
is
not
selected.
So
if
you
want
to
have
a
fun
image,
that's
different
when
you
select
the
item
and
it's
the
current
active
one,
you
can
absolutely
do
that
in
my
case.
F
What
I'm
using
is
I'm
using
the
exact
same
image
for
when
it's
selected
and
unselected,
and
how
do
I
answer
these
images?
Well,
one
of
the
ways
you
can
do
that
is.
You
can
just
use
something
like
this,
where
you're
using
require.
I
happen
to
like
defining
a
variable
for
my
requires,
so
that
I
can
reuse
that
object
multiple
times
in
in
my
class.
F
Let's
move
forward,
we
also
have
a
choice.
Field
and
choice.
Field
is
really
a
a
property
pain,
drop
down
control
and
that
control
is
actually
what
it
will
do
is
we'll
list
a
whole
bunch
of
options.
So
in
this
case
I
listed
a
list
of
months
right
now.
One
thing
that
I
want
to
point
out
for
from
a
user
experience
perspective,
because
we
see
this
all
the
time.
You
know
if
you
see
a
drop
down
and
you
see
the
word
january
or
you
know
alabama
or
I
don't
know
something
like
that.
F
You
can
probably
guess
what's
behind
that
drop
down,
and
you
know
you
got
a
good
idea,
but
what
if
you
know,
I
put
something-
I
picked
a
picked
a
random
word
here,
but
what,
if
there's
a
word
like
this
and
that's
the
medical
term
for
ice
cream
headache?
But
so
what?
If
I
have
this
word
right?
What
does
it
mean
to
the
users?
F
It
might
not
mean
anything
and
using
a
drop
down
box
for
terms
that
people
are
not
familiar
with
is
usually
not
a
good
idea,
because
they
won't
know
what
other
choices
are
behind
the
drop
down
box.
So
if
you
have
situations
like
this,
it
might
be
better
for
you
to
show
them
the
previous
control
right,
which
will
list
all
the
options.
F
The
other
thing
that's
important
is
that
when
you
show
them
a
list
of
drop-down
options
may
sound
obvious,
but
you
want
to
make
sure
that
it
is
a
predictable
order
right.
It's
either
alphabetically
or
in
this
case,
by
order
of
month,
just
so
that
people
don't
have
to
read
through
every
single
choice
in
order
to
find
the
right
one.
Because
remember
last
time
we
talked
about
miller's
law
and
higgs
law
and
how
people
feel
stupid
when
they
can't
find
things
and
it
slows
them
down.
This
is
one
choice.
F
We
also
have
the
slider
field
right,
which
is
just
for
numbers
and
things
like
that.
But
let's
move
on
to
the
the
fun
stuff.
I
don't
want
to
show
you
this
boring
stuff.
Let's
move
quickly
to
this
this
control
here,
so
we
have
the
toggle
field
in
the
toggle
field.
Remember
I
showed
you
the
checkbox
field
area.
Now
we
have
a
toggle
field
and
it
seems
to
be
doing
the
same
thing
it's
pointing
to.
F
F
Well,
if
you've
ever
used
an
iphone,
I'm
not
lucky
enough
to
use
an
iphone,
but
if
you
ever
use
an
iphone
or
our
android
phone,
you
know
that
there's
toggle
buttons
that
are
used,
and
one
of
the
trick
is
that
the
toggle
button
should
always
have
an
instant
reaction,
and
it
should
be
reflected
immediately.
So,
for
example,
when
I
toggle
the
airplane
mode
on
my
phone,
you
can
see
that
I
go
from
having
connection
to
you
know.
H
F
It's
turned
on,
I
don't
have
connection
it's
reflected
immediately
and
if
those
actions
are
not
immediate,
one
of
the
things
that
we
want
to
make
sure
is
that
maybe
we
don't
want
to
use
a
a
toggle.
Maybe
we
want
to
use
a
check
box
right
and
again,
it's
just
a
part
of
being
consistent
in
your
behavior.
A
H
All
right
here
we
are
so
hi
everyone,
I'm
alison
collins
and
I'm
an
spfx
developer.
I've
been
programming
for
more
than
six
years
and
I
love
doing
it
every
day,
but
below
I've
got
some
links
to
my
blog
linkedin
and
the
web
part
I'm
presenting
the
day.
So
speaking
of
that,
let's
see
a
demo
on
it,
and
here
I
am
in
my
browser
you
can
see.
I
have
two
react
to
webparts,
just
one
with
the
default
generic
settings.
H
So
then
we
have
the
description,
some
other
stuff
and
what
I
think
is
really
nice
is
that
you
can
go
into
here
and
there's
several
different
things.
You
can
do
so
there's
styling.
Currently
I
have
stack
style
selected,
but
you
can
also
go
to
single
style
and
then
it
just
change
the
look
and
then
you
can
go
to
different
sites
that
you
want
to
select.
You
can
deselect
sites
and
it
will
remove
those
sites
and
any
news
posts
that
it
has
on
there.
And
then
you
can
also
change.
H
If
the
author
is
shown
or
hidden
so
see,
the
author
is
hidden
and
then
it's
not
there.
We
go
all
right
and
then
that's
it.
You
have
the
thumbnail
of
each
site
displayed
here
and
all
right.
Well,
let's,
let's
show
more
code
show
you
guys
that
we're
gonna
kick
off
with
the
first
component
rendered
named
react
news
webpart.
We
have
some
cool
stuff
going
on
in
here.
So
let's
dive
into
it.
When
the
web
part
mounts,
we
call
the
get
method.
A
Okay,
no
worries
there
allison
great
work
up
to
that
point.
Hope
the
tech
issues
there
get
resolved
on
your
end,
we'd
love
to
have
you
come
back
and
revisit
that
demo
on
a
future
a
call
well
at
this
point
I
think
we
won't
flip
back
to
hugo,
but
we
will
go
ahead
and
close
out
for
today.
So
I
want
to
thank
all
three
of
our
presenters,
anoop,
allison
and
hugo.
A
All
three
of
you
great
work,
appreciate
you
taking
the
time
and
if
you
are
interested
in
presenting,
please
do
fill
out
that
form
we
had.
The
link
to
earlier
recordings
will
be
available
about
24
hours
on
the
microsoft
365
community,
pnp
youtube
channel
ak
dot,
msm,
365,
pnp,
slash
videos.
You
can
always
subscribe
there,
of
course,
to
get
the
latest
updates
and
you
can
follow
us
on
twitter
at
microsoft,
365,
dev
and
m365
pnp.
A
Next
spfx
call
is
going
to
be
in
two
weeks
on
november.
18Th
at
7
am
pacific
time,
and
next
m365
general
dev
call
is
going
to
be
november.
11Th,
that's
next
thursday
at
7
00
a.m.
All
available
community
calls
on
ak
dot.
Ms
slash
m365,
pnp
and
as
well,
you
can
catch
all
of
our
other
developer
community
calls
encourage
you
to
check
out
the
microsoft
365
platform
call
for
updates
across
the
entire
platform,
as
well
as
the
tech
specific
calls
listed
down
there
below.
So
thank
you
again
to
our
presenters.