►
Description
SharePoint PnP Community - SPFx & JS SIG call on October 21. Demos on At-a-Glance Web Part and Viva Adaptive Card Extension, Share to Teams – SPFx Command Set Extensions, and SPFx Design Patterns - Property Panes. Released SharePoint Framework v1.13, PnPjs Client-Side Libraries v2.10.0 GA & v3.0.0 early preview, CLI for Microsoft 365 v4.1.0 Preview, Reusable SPFx React Controls v3.4.0 and PnP Modern Search v4.4.0 Preview. Additionally, 1 extension and 6 web part and 1 ACE samples. Grrrreat! 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
sharepoint
framework
and
javascript
bi-weekly
sync:
it
is
october
21st
2021,
I'm
your
host
for
this
call
patrick
rogers,
and
we
will
bring
you
another
great
call
here.
Is
our
agenda
for
today
latest
updates
on
the
sharepoint
framework,
we'll
go,
of
course
across
the
patterns
and
practices,
program
updates,
new
community
samples
picture
time
and
together
mode,
and
then
we
got
three
great
demos
today
from
manup,
kunj
and
hugo.
A
So
at
a
glance,
web
part
and
viva
adaptive
card
extension
share
to
teams,
spfx
command,
set
extension
and
spfx
design
patterns,
property
panes
a
little
bit
of
a
meta
discussion
there.
So
I
want
to
get
into
that,
but
first
real
quick
opportunities.
Often
we
get
asked:
how
can
I
participate
in
patterns
and
practices?
I
want
to
be
involved.
How
do
I
do
that?
Well,
one
of
the
best
ways
or
one
of
my
favorite
ways-
is
to
have
folks
demo
on
these
calls.
Love
love
love
to
have
the
demos
from
the
community.
Please
go.
A
There's
a
link
down
there
in
the
bottom
right
corner
to
request
a
spot.
To
do
a
demo
would
love
to
show
off
the
work
you're
doing
for
your
customers
and
for
your
companies,
sometimes
maybe
double
check
it's
appropriate
to
share
it
publicly.
That's
just
want
to
make
sure
that's
okay,
but
love
to
have
those
demos,
so
anything
around
spfx
anything
around
adaptive
cards
and
ace
extensions,
as
well
as
anything
around
any
of
the
pnp
offerings,
pnp
program
offerings
and
any
combination
of
that
stuff
love
to
have
that.
A
We
can't
always
get
you
on
the
immediate
next
call,
sometimes
we're
scheduled
out
a
little
bit,
but
we
will
get
you
scheduled
love
to
have
those
demos,
so
please
reach
out
using
that
form
on
the
slide
as
well
contribute
on
github.
You
can
do
so
by
reporting
any
issues
you
find
with
our
stuff.
We
don't
love
issues,
but
we
love
hearing
about
them,
so
we
can
get
them
fixed.
A
You
can
also
submit
pull
requests
if
you
have
ideas
for
new
functionality
enhancements
or
to
fix
existing
issues
always
welcome
pull
requests,
and
then
you
can
always
help
others
with
issues
or
questions
they
might
have
there
in
the
issues
list.
If
you
have
a
little
bit
of
time
and
happen
to
know
the
answer,
that's
a
great
way
to
help
out
too
as
well.
You
can
always
provide
feedback
to
us
on
these
calls
how's
our
documentation.
A
A
Well,
how
can
I
find
out
all
the
things
that
the
patterson
practice
program
is
doing?
Well,
we've
got
this
giant
page
links
for
you,
the
first
section.
There
is
developer
videos,
those
are
going
to
be
videos
focused
on
developer
content,
so
it
might
be
how
to
do
authentication
in
spfx.
It
might
be
how
to
build
an
adaptive
card.
Things
like
that
developer
scenario.
Focused
videos
so
link
there
for
those
as
well.
We
have
our
community
videos.
Those
are
going
to
be
recordings
of
all
our
calls.
A
So
this
call
the
other
bi-weekly
call
our
monthly
calls.
Some
other
one-off
calls.
I
believe
the
ama
calls
the
sharing
is
carrying
not
the
sharing
is
carrying
sessions,
those
aren't
recorded,
but
the
sharing
is
carrying
ama
sessions.
I
believe,
will
be
up
there
as
well
and
then,
of
course,
open
source.
We've
got
four
great
organizations:
sharepoint
pnp
office,
dev
and
microsoft
graph
in
github,
all
of
which
welcome
your
feedback.
Welcome
your
contributions.
A
If
you're
interested
in
one
or
more
of
those
areas
go
check
them
out,
go
see,
ask
around
everybody
is
very
welcoming
and,
of
course,
would
love
to
have
you
participate
as
well
sample
galleries.
We've
got
tons
of
great
samples,
so
team
samples,
spfx
web
parts,
spfx
extensions
power
platform
list,
formatting
samples
and
more
lots
of
great
samples.
It's
a
really
neat
way
to
go
see
how
other
folks
have
solved
a
problem
or
an
issue
you
might
be
encountering
in
your
dev
day
and
can
sort
of
learn
from
that.
It's
a
place.
A
A
Ms
slash
m365
pnp,
that's
going
to
get
you
the
patterns
and
practices
landing
page
with
links
out
to
all
of
our
calls
and
all
of
this
content
that
I've
just
talked
through,
and
with
that
I
want
to
mention
our
upcoming
microsoft
365
platform
call.
This
is
a
new
call
starting
this
fall.
It's
happened
four
or
five
times
now
at
this
point,
but
it
is
now
on
tuesdays.
The
next
one
is
26th
of
october
at
8
a.m.
Pacific
time
and
it's
a
new
weekly
call.
A
It's
microsoft,
presenters
covering
the
latest
news
and
updates
from
the
platform
you
get
the
rio
current,
invite
there
aka
dot.
Ms
slash
m365-dev,
and
this
is
going
to
be
latest
engineering
updates,
community
together
mode
photo
and
then
next
week,
we'll
have
cathy
do
talking
about
getting
started
with
hub
associations
in
sharepoint,
that's
building
the
hub
of
hubs
and
then
andrew
essepov,
doing
a
progressive
web
apps
and
beyond
so
understanding.
A
So
we've
got
as
well.
We
are
in
pnp
supporting
hacktoberfest
2021.
That's
this
year.
In
fact,
so
register
today
runs
through
the
month
of
october.
Pull
requests
could
be
submitted
to
any
pnp
github
labeled
with
hacktoberfest,
and
if
you
see
a
github
one
of
our
repositories,
you
would
like
to
submit
a
pr
to
that.
Isn't
labeled.
A
Just
let
us
know,
please
open
an
issue,
and
let
us
know
it's
probably
an
oversight
rather
than
a
decision
submit
four
approved,
pull
requests
in
the
month
of
october
in
any
time
zone.
The
first
fifty
five
thousand
will
receive
a
t-shirt
it'd
be
interesting
if
they
excluded
a
single
time
zone.
That
would
just
be
mean,
look
for
good,
first
issues
or
help
wanted
within
any
of
the
repositories,
and
this,
of
course,
not
just
pnp
repositories.
B
Awesome,
thank
you
patrick.
Well,
as
we
mentioned,
there
are
a
number
of
opportunities
to
get
involved
in
the
community,
whether
that's
using
the
resources
or
contributing
back,
but
we
also
know
that,
if
you're
new
in
the
community
or
new
to
some
of
these
areas,
the
hurdles
to
do
so
might
prevent
you
from
getting
involved.
We
want
to
remove
those
hurdles.
Sharing
is
caring.
B
Is
a
program
that's
going
to
provide
you
hands-on
assistance
and
guidance
in
a
number
of
the
topics
you
see
in
the
upcoming
sessions
section
our
newest,
of
course,
power
platform,
samples
first
time
contributor
is
next
week.
We
are
super,
excited
sign
up
for
that
and
any
of
the
other
ones,
as
patrick
mentioned,
they're
all
inclusive,
safe
space
opportunities,
don't
record
them.
So
it's
a
great
opportunity
to
collaborate,
ask
questions
and
the
ever
popular
next
week,
pnp
powershell
followed
up
with
cli
and
pnpjs
in
the
coming
weeks,
all
free
to
join
aka.ms
forward.
B
Slash
sharing
is
caring.
Now,
if
we
move
the
next
slide,
when
you
do
start
getting
more
involved,
we
want
to
celebrate
it.
We
want
to
recognize
it.
The
pnp
recognition
program
is
here
to
do
exactly
that:
we're
partnering
with
credly
to
provide
you,
badges,
digital
eco-friendly
badges
that
you
can
assign
to
your
linkedin
profile
that
you
can
share
with
the
community.
They
will
sit
right
next
to
your
microsoft,
certification,
badges
and
we've
got
more
and
more
coming
be
on
the
lookout.
B
You
saw
the
bavarian
bavarian
parkers
out
there,
we've
got
the
hacktoberfest
badge
coming
any
moment.
Super
excited
with
even
more
achievement
levels
coming
soon.
So
opt-in,
we
need
to
know
how
to
connect
you
to
your
credly
account.
It
is
free
again.
We
cover
the
cost
for
that
aka
ms4,
m365,
pnp,
dash
recognition,
patrick
back
to
you.
C
Thank
you.
Thank
you.
Let's
go
to
the
following
slides
a
quick
update
in
here
nothing
much
new
from
the
two
weeks
ago,
but
I
can
probably
say
that
now
it's
a
matter
of
hours,
hopefully
crossing
fingers
that
will
get
the
1.13
out.
You
heard
it
here
first
so
hopefully,
within
two
to
three
hours.
1.13
is
out
unless
there's
a
really
really
last-minute
critical
things.
C
We've
been
testing
that
super
super
carefully
internally
and
there
have
been
a
public
release,
previews
and
release
candidates
also
available
and-
and
we
are
pretty
confident
or
pretty
confident,
sounds
really
bad.
We
are
super
confident
that
we
are
good
to
go
forward
with
that
and
that's
going
to
basically
provide
them
general
availability
for
adaptive
card
extensions
for
viva
connection.
Now
the
viva
connection
hasn't
been
g8,
so
we
need
to
be
super
clear
on
the
messaging
here.
C
We
would
love
to
go
to
4.x
already
because
it's
been
already
actually
a
while,
since
the
typescript
4.x
actually
was
released,
but
there
are
underlying
platform
level
dependencies
which
are
blocking
us
to
do
so
until
sharepoint,
online
and
the
platform
is
actually
updated
on
the
understood,
support,
typescript
4.x.
So,
unfortunately,
the
sharepoint
framework
has
those
dependencies
which
are
a
bit
delaying
always
on
jumping
forward
and
a
lot
of
other
stuff
there
as
well.
C
Let
me
let's
go
to
the
flying
slide,
just
a
quick
recap,
a
lot
of
a
lot
of
stuff
coming
in
the
future
as
well,
so
we're
looking
into
having
a
1.14
quite
fast,
most
likely
it
will
not
happen
by
end
of
this
calendar
year
because
we're
already
in
the
last
quarter,
but
then
immediately
in
early
january
or
late
january,
1.14,
with
additional
templates
and
improvements
available
as
well
and
then
crossing
fingers.
It
is
still
the
objective
to
go
to
the
quarterly
based
release
cycle
with
sharepoint
framework.
D
There
they
are
so
we
had
a
release.
On
october
15th
2.10
came
out.
There
was
some
documentation
updates
in
a
small
search.
Query
bug
fix
the
bigger
fixes
in
that
was
we
finally
tracked
down
the
fix
for
the
image
web
parts
and
setting
the
banner
image
in
client-side
pages.
Just
want
to
remind
people
that
that
that
is
not
a
first
party
supported
api,
where
we're
sort
of
reverse
engineering,
those
things
and
they
can
break
and-
and
that
is
effectively
what
happened.
D
D
If
you
want
to
know
more
about
what's
happening
in
v3,
you
can
check
out
the
pinned
issue,
number
1636.
It
has
all
the
details
on
what
we're
doing
for
v3,
so
you
can
check
that
out
and
obviously
there
is
a
change
log
in
the
v3
branch,
and
that
is
up
to
date.
So
that's
going
to
show
you
what
we've
changed,
what
we've
removed,
what
we've
updated,
what
we've
added
all
of
that
is
in
that
change
log.
So
please
check
that
out.
Also
on
that
pinned
issue,
1636
is
some
getting
started
for
the
preview.
D
A
Thank
you,
julie,
great
updates
there
and
do
encourage
folks
to
start
to
check
out
v3
give
it
a
try,
give
us
a
little
bit
of
feedback.
It's
not
ready,
but
it's
getting
closer,
so
we'd
love
to
hear
from
folks.
Now
we
got
updates
on
the
cli,
which
I
will
cover
new
preview
v
4.1
with
retrieving
service
principles,
updating
user
profile
information.
A
Many
commands
upgraded
to
use
the
graph
v1
so
that
stuff
that
was
previously
pointing
to
beta
has
now
been
able
to
move
to
v1
upgrading
spfx
projects
to
the
latest
release
candidate
and
improved,
creating
of
content
types
commands.
Are
there
to
install
the
v1
or
v4.1?
Excuse
me
beta
and
as
well
about
the
release,
notes
there
for
the
v4
stuff,
if
you're
still
using
the
v3
stuff,
that's
great,
keep
working
but
start
thinking
about
migrating
to
the
v4.
A
When
you
can
lots
of
great
fixes
improvements,
especially
under
the
hood
things
run
a
little
bit
smoother
so
excited
to
see
the
cli
continue
to
grow
and
evolve
and
congrats
to
everybody.
Working
on
that,
and
next
up
is
the
spfx
reusable
controls,
so
react
controls
3.4.0
is
releasing
today.
I
will
assume
that
means
today.
A
Modern
taxonomy,
picker,
based
on
the
taxonomy
rest
api
documentation,
enhancements
decreasing
the
bundle
size
for
a
lot
of
things
and
various
fixes,
and
then
the
property
controls
3.2.0
we'll
do
fast
serve
support
as
well
as
various
fixes.
Thank
you
to
all
the
contributors
there
on
all
of
those
things.
It
really
is
fantastic
to
see
these
continue
to
grow
as
well,
and
if
you're
not
using
them,
would
encourage
you
to
check
them
out
for
your
projects.
A
It's
a
great
way
to
save
yourself
a
lot
of
time
and
build
in
a
lot
of
great
out
of
the
box
looking
functionality
without
having
to
put
in
a
lot
of
work.
So
you've
got
the
react.
Controls
for
the
body
of
your
web
parts,
your
application,
customizers
and
the
property
controls
designed
to
work
in
the
edit
pane
of
your
web
parts,
and
with
that
we'll
move
over
to
modern
search
ak
dot,
m,
slash,
p
p
search
will
get
you
all
the
information
about
the
pnp
modern
search
web
parts.
A
This
allows
you
to
build
a
flexible
search
experience
for
your
users.
V4
v4.4
4.4.0
is
out.
That's
the
october
release.
That's
in
preview,
so
you
can
check
that
out.
Tons
of
fixes,
read
the
release,
notes,
give
feedback
a
lot
of
accessibility
updates
as
well,
and
then
the
v3.22.0
is
the
october
release
for
the
v3
branch
and
then
the
the
v3
branch
is
in
sort
of
maintenance
mode
at
this
point
so
as
possible,
encourage
you
to
look
at
upgrading
to
the
v4
branch
of
things.
A
E
Awesome,
thank
you,
patrick,
so
we
have
some
samples
for
you.
We've
got
spf
extension
samples
and
we've
got
web
part
samples
that
you
can
use
to
learn
how
to
whatever
to
do
a
little
pattern
or
to
actually
do
a
full-on
solution.
These
are
the
latest
samples
for
the
last
two
weeks.
We
have
a
new
animated
progress
bar
by
arigunawan.
That's
an
extension
that
you
can
add,
and
then,
on
the
webparts
side,
we
have
a
new
emoji
reactions
by
siddharth
vageja.
E
The
react
or
chart
has
been
updated
by
tom
daley
to
actually
read
users
and
managers,
and
we
have
a
new
sharepoint
news:
star
ratings
web
part
by
takashi,
shinohara,
that's
subarashides,
and
then
we
have
react
groups,
but
that's
actually
added
team
stab
support
with
allison
collins.
Finally,
we
have
react
documents
accordion
by
joao
mendez.
These
are
these
samples
are
awesome,
we're
going
to
be
actually
pushing
them
through
the
repo
very
shortly,
but
I
wanted
to
thank
everyone
for
their
contributions.
If
you
want
to
contribute,
you're
always
welcome
to
contribute
again.
B
Thanks
hugo,
as
mentioned,
we
have
a
new
repository
for
these
spfx
adaptive
card
extensions,
so
they
are
open
for
more
contributions.
The
one
most
recent
is
from
zach
roberts.
On
upcoming
events.
You
can
see
the
screenshots
there
in
the
image.
Very
cool,
allows
you
to
cycle
through
your
upcoming
events
and
open
the
event
and
make
some
modifications,
so
very,
very
cool
open
for
contributions
want
to
see
you
get
involved.
B
We
are
going
to
begin
a
getting
started
with
viva
connection
aces,
sharing
his
caring
session,
so
be
on
the
lookout
for
that
and
it's
not
just
how
to
contribute
them,
but
how
to
kind
of
start
using
them.
We'll
walk
you
through
some
of
the
initial
steps
on
building
them
and
the
like.
We
want
everyone
to
get
involved.
It
is
a
bright
future
for
these
and
would
love
to
see
everyone
get
more
involved.
Patrick
back
to
you.
A
Thank
you,
hugo
and
david,
for
those
updates
definitely
really
excited
to
start
seeing
the
ace
samples
start
to
come
in
and
see
what
folks
are
building
there.
I'm
it's
going
to
be
a
cool
new
platform,
so
optional
picture
time
so
go
ahead
and
flip
on
your
video,
and
I
think
vasa
will
take
over
here
on.
C
Let's
wait
for
50
people
fill
in
we're
more
than
200
again
on
a
call
225
or
so
so
we'll
probably
get
the
full
in,
and
I
can
see
a
sharepoint
monkey
again
on
the
crowd.
That's
always
good.
I
actually,
my
wife
found
yahoo
monkey
last
weekend
in
the
closet.
That
was
pretty
weird,
but
those
are
rare
things
from
the.
I
can't
remember
sharepoint
conference
2018.,
I
think
we're
hitting
the
50..
So
let's
do
some
hat
waving
everybody
and
I
well
one
second
one.
C
Second,
I'm
not
recording
my
bad,
my
bad
sorry
doing
too
many
things.
Okay,
here
we
go
some
handwriting
everybody
thanks
everybody
for
joining
awesome
to
have
you
in
a
call
again
excellent,
have
a
great
rest
of
the
week
as
well,
and
we
have
awesome
demos
coming
up
next.
Thank
you.
Everybody,
brilliant.
A
F
F
So
the
plan
is
I'll,
go
through
some
slides
and
then
a
demo
and
then
some
slides
again
for
the
code
right
so
just
quickly
about
myself
my
name
is
anuk
tatti,
I'm
a
sharepoint
developer
at
content
and
cloud
here
in
uk,
I
write
blogs
under
the
platform
medium
and
that's
my
link
to
the
blog
on
the
dot
medium.com
and
I'm
on
twitter
as
well,
and
my
github
username
is
anupti
right.
So,
firstly,
you
know
the
idea
for
this
at
a
glance.
F
Webpart
and
ace
came
from
the
bbc
news
app,
so
in
the
in
the
beta
version
of
the
app
you
know
what
they
have
is.
Whenever
we
open
the
news
article
at
the
top,
you
know
we
can
see
that
there's
a
you
know,
there's
a
box
over
here
which
provides
the
summary
or
the
first
few
sentences
of
the
article
and
then
you
can
scroll
through.
You
know
the
first
few
sentences.
So
in
a
way
you
get
to
read
the
news
at
a
glance
before
reading
the
entire
news
article.
F
So
I
showed
this
to
one
of
our
clients
and
asked
them
if
they
would
want
this
in
sharepoint
for
the
news
pages,
and
they
said
yes,
so
you
know
we
went
ahead
and
created
the
web
part
and
once
we
did
that
the
next
thing
obviously
was
to
share
it
on
github
in
the
pnp
repository
and
now
I'm
doing
the
demo
of
the
same
right.
So
the
web
part
itself.
These
are
a
couple
of
screenshots,
but
we'll
we'll
have
a
look
at
the
web
part.
F
So
all
it
does,
is
you
know
on
the
right
side
here
we
can
see
it
on
on
on
a
page
on
desktop.
As
soon
as
we
add
this
web
part,
it
gets
the
first
three
sentences
of
the
article
and
shows
the
news
at
a
glance
and
in
mobile
view.
We
have
this
carousel,
like
the
bbc
news
app,
wherein
we
can
click
through
the
dots
and
then
read
the
news
at
a
glance
and
then
what
we.
What
we
have
also
done
is
created
an
ace
for
the
same
say.
B
F
On
the
viva
connections
dashboard,
then
we
can
use
this
this
sample
and
then
all
we
have
to
do
is
add
the
sample
and
then
set
the
id
of
the
or
yeah
id
of
the
news
page
that
we
need
to
display
and
then,
as
you
can
see
it,
it
displays
the
the
first
few
sentences
of
the
news
article
and
then
clicking
on
on
the
card
itself,
takes
you
to
the
news
article.
So
in
a
way
you
are
reading
the
important
article
at
a
glance
right.
F
So
what
we'll
do
now
is
we'll
have
a
quick
look
at
the
and
the
web
part
and
the
ace
card
itself
and
then
go
through
the
code.
So
if
I
open
this
site
so
here
in
my
developer,
dev
tenant
I've
got
a
news
article.
What
I'll
do
is
I'll
just
edit
this
page
and
then
go
ahead
and
add
the
add,
a
glance
webpart
and,
as
you
can
see,
the
first
thing
it
does
is
gets
the
first
three
sentences
of
the
article
and
shows
it
over
here.
F
If
I
edit
the
web
part,
I
can
control
the
number
of
sentences
that
need
to
be
displayed.
So
I
know
three
or
four
whatever
and
then,
if
we
do
not
want,
you
know
it
to
pick
up
the
first
three
sentences,
then
you
know
we
can
write
our
own
sentence.
You
know
if
I
can
spell
that
correctly,
yeah
and
then
all
the
other
sentences,
so
that's
the
web
part
I'll
just
go
ahead
and
save
that
and
then,
if
we
view
it
in
in
mobile.
F
F
So
now,
if
I
go
to
the
the
dashboard
page
now,
there
are
a
lot
of
articles
about
this
dashboard
page
how
to
set
it
up,
etc.
I
won't
go
into
the
details
of
that,
but
I've
just
gone
ahead
and
created
the
dashboard
page.
It's
it's.
Basically,
you
know
clicking
on
this
button
and
that
should
do
it
for
you.
What
I'll
do
is
I'll
go
ahead
and
add
a
card
which
is
called
as
at
a
glance.
F
So
if
I
go
to
the
slides
again
so
now,
let's
walk
through
the
code.
All
this
code
is
present
in
github.
Under
the
sp
dev
fx
web
parts
repository
and
the
sp
dev
fx
asus
repository
so
first
we'll
go
through
the
web
part
itself
in
the
web.
Part
we've,
you
know,
got
this
file
called
as
news
clients
webpart.ts,
and
the
first
thing
that
we
do
here
is
using
a
sp,
http
client.
F
We
get
the
the
current
page
where
the
web
part
is
in
and
then
what
we
do
is
we
we
get
a
few
details
like
the
title.
The
pan
is
image
url
and
the
content
of
the
page
itself.
The
other
option
is,
we
can
use
pnpjs
to
do
the
same.
So
what
I've
done
is
in
the
in
the
code.
I've
included
the
this
file
pnpjs.ts.
F
F
F
F
After
that,
what
we
do
is
in
the
render
method.
We
use
the
this
dot
width
property
of
the
web
part.
If
it
is
less
than
400,
then
we
render
a
component
called
as
news
glass
small,
which
is
in
the
mobile
view.
We'll
have
a
look
at
that
component
quickly
and
then,
if
the
width
is
greater
than
400,
then
we
render
the
the
desktop
view
right.
So
in
the
news
class
small
component,
that
is
the
mobile
view.
What
we
have
here
is
an
npm
package
called
react,
multi
carousel.
F
We
can
either
use
this
or
there
is
a
pnp,
reusable
component
called
as
carousel.
We
can
use
that
one
as
well,
so
we
we
import
that
particular
carousel
and
then
all
we
do
in
the
render
method
is
just
render
that
carousel
by
passing
all
the
sentences
to
that.
So
that
goes
ahead-
and
you
know,
like
you
see
on
the
right
side-
shows
all
the
sentences
in
the
carousel
and
with
respect
to
the
news
glance
large,
which
is
the
desktop
view
of
the
card.
This
is
very
simple.
B
F
F
One
thing
I
recommend
is
watching
this
video
by
patrick
on
getting
started
with
viva
connection
aces,
it's
a
brilliant
video
that
covers
a
lot
of
a
lot
of
information
on
these
aces,
the
different
types
of
them
and
how
we
can
how
we
can
you
know,
start
working
with
those,
it's
a
it's,
a
brilliant
video
and
yeah.
So
using
that
I
have
developed
this
extension
and
then
I
have
this
is
all
available
in
the
repository
again.
F
F
We
will,
you
know,
expand
this
object
to
get
more
details
so
this.
So
this
is
the
a
method
called
as
low
details
which
gets
called
when
the
s
itself
loads.
So
what
we
are
doing
here
is
we
are
creating
a
custom
type
called
as
glance
card
which
has
certain
properties,
like
you
know,
image,
url,
title
and
primary
text.
This
is
simple.
You
know
this
is
an
extension
to
the
out
of
the
box
image
card
extension
interface.
I
think
I
might
be
wrong,
but
you
know
we.
F
F
We
go
ahead
and
push
the
first
card.
So
if
I
just
show
it
over
here,
the
first
card,
as
you
can
see,
has
the
primary
text
as
the
article
title.
So
we've
got
the
image
url
and
then
we've
got
the
title,
which
is
at
a
glance
that
we
have
over
here
and
then
the
primary
text
is
the
title
of
the
article.
So
that's
the
card
we
saw
earlier
so
basically
in
in
this
process.
F
We
are
building
up
the
content,
so
we
have
built
up
our
first
card,
which
has
to
show
the
title
of
the
page
or
the
title
of
the
news,
article,
its
image
and
then
the
title
for
the
card
and
after
that,
what
we
do
is
like
we
did
earlier
in
the
web
part
we
go
into
the
article.
Can
content,
remove
all
the
html
tags.
Remove
the
codes
get
all
this
get
the
sentences
and
then
for
each
of
the
sentence.
F
We
build
a
new
card
and
then
that
that
card
will
will
have
the
again
the
image
and
then
the
title,
and
then
the
primary
text
or
the
main
content
of
the
card
will
be
the
sentence
itself.
So
if
I
bring
this
up
over
here,
you
can
see.
We've
got
the
image
and
the
title
at
the
top
and
then
the
sentence
itself,
so
there'll
be
one
one
card
for
each
sentence:
yeah,
so
that
was
building
the
the
content
itself.
F
So
we
built
the
title
and
then
we've
built
all
the
sentences
that
we
need
to
display.
Now
we
need
to
display
these
cards.
So
how
do
we
do
that?
We've
got
something
called
as
card
views.
There
are
different
types
of
card
views,
one
for
the
image
and
the
other
ones
for
quick
view,
etc.
Again,
patrick's
video
explains
all
the
different
card
views.
F
So
what
we
are
doing
here
is
we
are
using
the
image
card
view
and
then
the
first
thing
we
do
is
if,
if
we
do
not
have
the
data,
yet
we
just
show
a
loading
image.
That's
what
is
seen
over
here
and
after
that,
what
we
do
is
we
return
the
the
first
card
that
needs
to
be
shown,
which
is
nothing
but
the
card
with
the
title,
and
then
we
have
the
next
and
the
previous
buttons,
and
all
we
do
here
is
whenever
the
next
button
is
clicked.
F
We
show
the
the
next
item
in
the
array.
So,
for
example,
when
we
click
the
next
button
here
we
show
the
first
sentence
and
then
the
second
sentence
and
the
third
sentence,
and
then
similarly
for
for
the
previous
button,
we
just
decrease
the
index
and
that
will
automatically
re-render
the
whole
card
right.
So
those
were
the
web
parts
and
the
ace
cards.
So
I
have
the
links
for
them
over
here
and
then
I've
also
included
a
link
for
patrick's
video.
F
A
G
F
G
Hello,
everyone.
I
would
like
to
thank
pnpt
members
and
the
community
for
giving
me
this
opportunity
sharing
my
sample.
This
is
very
simple
extension
so,
but
I
think
sometimes
small
things
also
are
helpful.
So
today
I
would
be
presenting
a
small
sample
of
type
spfx
extension
of
command
set.
The
main
use
of
this
extension
is
to
share
site
pages
documents
and
list
items
directly
from
sharepoint
to
microsoft
teams.
G
So
before
we
go
into
the
detail
a
little
bit
about
myself,
my
name
is
kunsan
ghani
and
I
am
a
technical
consultant
and
a
shisha
corner
mvp.
I
like
to
learn
and
share
my
knowledge,
and
I
am
very
grateful
to
this
great
community
because
everyone
is
sharing
their
knowledge,
I'm
trying
to
create
my
own
website.
So
if
anyone
has
any
good
tips,
please
do
reach
out
to
me
on
any
of
this
social
media
handlers
or
channels
the
code
for
today's
extension.
G
You
can
find
it
in
pnp's,
sp,
dev,
fx
extension
repository
and
you
can
even
get
the
glimpse
of
this
extension
from
pnp.github.io
website
as
well,
so
driving
factor
for
this
extension.
So
before
going
into
it,
I
would
like
to
give
a
shout
out
to
siddhartha,
because
he
helped
me
shape
this
idea
and
yeah.
G
So
one
day
I
uploaded
a
document
to
sharepoint
document
library,
but
I
wanted
to
share
it
to
teams,
but
there
was
no
direct
way,
so
the
only
way
was
to
copy
the
link
and
paste
it
in
the
channel
microsoft
teams
channel,
but
here
was
a
biggest
catch.
So
I
I
switch
my
context
from
sharepoint
to
teams
so
which
is
a
very
very
it's,
not
a
good
user
experience,
and
hence
we
come
up
with
this
extension,
where
you
can
directly
send
your
links
to
microsoft
teams
channel
with
only
just
a
small
click.
G
So
let
us
go
to
the
demo,
so
I
I
have
deployed
this
extension
in
in
my
site:
collection,
development
environment.
So
if,
if
you
do
not
select
any
of
the
item,
it
does
not
appear
once
you
select
it,
it
appears
and
when
you
click
on
share
two
teams,
a
pop-up
appears.
So
if
you
are
not
logged
in
it
would
ask
for
credentials.
G
G
So,
let's
check
yeah
see
this
gets
added
and
yeah.
You,
like
you,
know
like
you,
do
not
require
to
go
to
teams
or
copy
the
link
and
paste
it
in
the
channel
window.
So
you
can
even
do
this
for
the
folders
as
well.
So
when
you
click
on
this,
this
is
here
to
team
button
and
in
in
the
folder
you
can
then
just
provide.
G
And
all
the
documents
would
be
shared
inside
this
folder,
so
you
can
get
a
link
and
you
can
directly
click
on
this
and
navigate
to
that.
Even
this
works
for
list
item
so
currently
in
list
item.
We
are
using
this
play
form
only,
but
you
can
just
change
it
as
per
your
requirement.
You
can
just
the
channel
and.
G
Okay,
so
now
going
back
to
the
code,
so
it's
a
simple
spfx
extension
of
type
command
set
and
the
first
thing
which
we
come
across
is
the
on
init
method.
So
if
you
see
in
the
on
init
method,
I
have
added
a
function
called
share
to
teams
js
load,
what
it
does.
It
adds
a
js
file,
so
this
js
file
is
coming
from
microsoft
itself,
so
teams
team
is
providing
share
to
teams
functionality
for
a
third
party
website.
G
G
G
So
first
thing
I'm
adding
the
javascript
and
then
I
am
creating
a
div,
I'm
not
displaying
this
button
because
we
are
using
this
command
set
to
click
that
we're
using
this
command
set
to
click
that,
and
so,
if
you
see,
we
are
creating
a
div
and
we
are
editing,
a
display
is
none.
We
are
appending
it
and
on
execute
of
that
particular
command
set.
What
we
are
doing
is
we
are
first
fetching
that
particular
div
which
we
have
created
and
we
are
updating
its
property
called
as
data
hyphen
href.
G
G
A
E
E
What
we've
started
to
do
is
a
series
of
sessions
around
design
patterns
around
sharepoint
framework,
and
the
ultimate
goal
is
at
the
end
of
the
season
right,
we'll
actually
have
kind
of
establish
some
best
design
patterns,
both
in
terms
of
user
experience
and
coding,
but
we're
also
hoping
to
start
going
towards.
You
know
creating
ace
cards
as
well
and
make
that
transition
easy
for
everyone.
E
Last
time
we
spoke,
we
covered
performance
on
asynchronous
rendering
that
was
a
bit
of
a
of
a
heavier
session.
This
session
is
going
to
be
a
bit
lighter
we're
going
to
talk
about
property
pains,
so
I'm
sure
everyone
knows
what
a
property
pain
is.
But
again,
these
sessions
are
about
making
sure
that
everyone
has
the
same
level
of
knowledge.
So
the
property
pain
are
those
things
in
a
web
part
when
you
click
on
the
edit
properties
or
edit
web
part.
It
pops
up.
E
This
this
property
pane
that
shows
the
web
part
name
and
then
gives
you
some
options
right.
It's
pretty
straightforward,
it's
very
cool,
but
let's
talk
about
the
proper
way
of
using
these
property
panes
and
one
of
the
things
that
we
should
probably
start
by
pointing
out
is
the
the
property
paying
itself.
When
you
start
a
web
part
is
designed
to
be
300
and
pixels
wide,
and
that's
not
a
random
number
that
like
visa
picked,
because
you
like
that
number.
E
It's
actually
because
320
pixels
wide
is
exactly
the
the
ideal
resolution
or
dimension
to
actually
have
on
a
mobile
device.
So
your
web
property
pane
will
actually
take
over
the
entire
mobile
device
screen
if
you,
if
you
enter
in
edit
mode
and
it's
going
to
render
pretty
awesome.
Of
course,
if
you
have
a
cool
surface
deal
like
I
do,
then
it's
it's.
You
know
it's
irrelevant,
but
let's
go
back
to
the
properties,
property
pain.
Let's
talk
about
the
first
type
of
property
pane,
which
is
the
single
pane.
E
One
thing
that
you'll
notice
is,
if
you
just
drop
it
in
it,
gives
you
a
nice
placeholder
and
it
says:
hey,
you
need
to
pick
a
web
part
an
image,
and
if
you
don't
have
an
image
selected,
you
kind
of
get
the
first
stage,
property
pane,
which
says:
hey.
You
need
to
select
something
right
once
you
pick
an
actual
image,
we'll
just
pick
stock
photography
here
there
we
go,
I'm
suddenly
hungry.
It
actually
gives
you
a
a
different
property
pain,
a
second
stage,
property
pane
which
actually
asks
you
to
configure
this.
E
E
The
the
text
web
part
has
kind
of
some
advanced
property
pane
here
notice
that
it
doesn't
really
tell
you
what
you're
expected
to
do.
It
just
shows
you
for
some
formatting
options,
and
things
like
that.
We'll
come
back
to
that,
because
that's
actually
another
cool
design
pattern
that
we
can
talk
about
and
the
stream
video
I've
noticed
it's.
I
always
have
to
click
a
few
times
before
I
get
it
stream.
Video
again
gives
you
some
nice
instructions
at
the
top.
E
This
is
what
we're
expected
to
do,
because
it
might
not
be
as
intuitive
for
people
how
to
use
the
stream
video
and
then
it
gives
you
some
options
right.
So
the
single
property
pane
is
actually
very
easy
to
to
do
by
the
way
all
these
sample
web
parts
that
I've
created
are
going
to
be
made
available
in
the
spfx
repository
in
case
you're
wondering
so
the
single
pane
web
part.
E
Here
again,
I
just
created
a
simple
description
and
I
know
I
have
my
gigantic
mouse
gets
in
the
way
here,
but
I
got
a
description
and
then
I've
just
got
kind
of
a
simple
label,
and
that's
what
I'm
going
to
show
you
the
code
for
but
you'll
notice
that
I
have
another
flavor
here,
which
is
just
no
description
with
just
a
simple
text
and
we'll
show
you
how
to
do
that
right
now,
cool.
So
let's
talk
about
some
of
the
code
that
we're
doing
right.
E
So
the
first
thing
that
you
do
when
you
have
a
property
pane
in
your
web
part,
is
you
kind
of
need
to
define
a
method
called
get
property
pane
configuration
when
people
click
on
that
button?
To
edit
the
web
part,
this
function
will
get
called
and
what
the
function
is
supposed
to
do
is
it's
supposed
to
return
a
I
property,
pane
configuration,
and
so
really
what
we're
doing
is
we're
just
doing
a
return
here
of
stuff.
E
I
property
paint
configuration,
has
a
bunch
of
pages
now
in
a
single
property.
Pane
you'll
actually
have
one
page,
but
that
page
can
actually
have
a
few
things.
One
of
the
things
is
the
header
right,
so
the
the
header
is
basically
that
text
that
that
helpful
text
at
the
top.
That
tells
you
what
to
do
and
then
it'll
also
give
you
the
option
to
give
some
some
groups.
E
So
you
have
some
groups,
you
return
some
groups
and
those
groups.
What
I've
done
for
this
sample
is
I've
actually
returned
a
series
of
group
fields
in
this
case,
I'm
only
returning
a
single
field
and
that's
what
you
saw
where
it
says
this
is
the
field
label.
Please
enter
some
text
right,
that's
kind
of
simple,
but
let's
look
at
what
we
got
out
of
that
right.
So
there
was
a
single
pane
web
part
with
a
description,
a
field
label
and
the
text.
E
Why
am
I
saying
this
is
as
you'll
see
as
we
explore
some
of
the
out-of-the-box
web
parts
and
their
property
panes?
Some
of
them
are
actually
using
kind
of
weird
variations
of
of
this,
and
you
know
some
of
you
may
have
kind
of
navigated
through
a
lot
of
documentation,
to
try
to
figure
out
how
to
make
these
configurations
all
right.
E
Now,
let's
talk
about
what,
if
I
have
a
web
part
like
this
right
that
has-
and
this
is
actually
out
of
the
box
web
part-
that
I've
rewritten
to
show
highlighted
content,
but
look
at
all
the
options
are
available
on
this
web
part
lots
of
options.
There's
got
to
be
a
better
way
to
do
this.
Well,
thankfully,
there's
a
law
right:
the
law
is
called
hymen
law.
E
E
So,
let's
talk
about
a
new
type
of
web
part
property
pane.
That
is
called
the
accordion
web
part
and
with
the
accordion
web
part,
what
you
can
do
is
you
can
actually
just
create
the
same
webpart,
but
you
can
create
sections
here
and
these
sections
are
designed
to
actually
make
the
choices
a
lot
easier.
E
And
yes,
I,
like
louise,
calls
it
choice,
paralysis.
So
now
the
question
is
well
how
many?
How
many
categories?
Do
I
create
how
many
choices
within
each
category?
Is
there
a
rule?
Well,
it
turns
out.
There
is
another
law
right,
miller's
law
and
again
this
may
or
may
not
be
the
right
picture
for
george
miller.
I
just
googled
it
but
george
miller
in
1956.
E
E
Now
a
lot
of
people
actually
say
he
meant
it
as
a
joke
and
it's
not
really
the
number,
but
it's
actually
a
good
rule
of
thumb.
So
in
average,
if
you
have
seven
choices,
what
will
happen
is
most
people
will
be
able
to
deal
with
all
those
choices,
but
there's
going
to
be
a
few
people
that
are
not
going
to
be
able
to
make
sense
of
the
last
two
choices.
It
just
won't.
Remember
those
last
two
choices
are
available.
E
E
So
how
do
I
do
that?
Well,
the
only
thing
that
I
really
need
to
do
is
when
I'm
defining
my
property
pane,
I
say
display
groups
as
accordion
equals
true
and
then,
instead
of
having
a
single
group
like
I
had
before,
I
can
add
more
than
one
group
and
then
in
that
group
I
can
actually
say
whether
I
want
that
group
to
be
collapsed
from
the
start
or
expanded
and
so
see.
E
Here
I
have
one
group,
I
have
another
group
and
I
have
a
third
group
I
like
to
start
them
as
collapsed,
but
you
don't
have
to
now
one
thing
that
we
have
to
make
clear,
though,
if
you
give
choices
to
people,
just
remember
that
those
choices
should
make
sense,
don't
put
cryptic
choices
behind
property
pains
that
are
collapsed
because
people
are
not
going
to
know.
You
know
how
to
make
sense
and
how
to
pick
the
which
one
is
the
right
door
right.
E
It's
going
to
be
more
a
game
of
guacamole,
yes
display
group
as
an
accordion
is
an
out
of
the
box
parameter
unless
I
misspelled
it
right.
Okay,
so
really
quickly,
because
we're
trying
to
cover
a
lot
today,
we
also
have
another
type
of
property
pain,
which
is
steps
and
the
steps.
Property.
Panes
are
kind
of
a
specific
thing,
because
one
thing
that
we
want
to
do
is
we
always
want
to
avoid
the
types
of
things
where
you
know.
E
I
have
options
in
one
group
and
they're
related
to
another
option
in
another
group,
and
then,
if
you
put
the
wrong
value
in
one
group,
then
we're
telling
you.
Oh,
you
know
this.
Other
group
has
an
issue
with
the
choice
you
made
and
stuff
that
it
just
becomes
a
nightmare
from
a
user
experience
perspective,
so
you
can
actually
use
steps
right
where
you
can
say
hey.
You
know
we're
gonna
start
with
step,
one
where
we're
gonna
pick
and
we're
gonna
pick
a
data
source
step.
Two
we're
gonna!
Do
this
step
three
we're
gonna!
E
Do
this,
so
we're
gonna
make
these
choices
based
on
on
what
you've
done.
So
this
is
where
you
can
guide
your
users
through
it
to
make
I'll
skip
the
demo
for
the
the
steps
here,
but
I'm
going
to
show
you
the
one
thing
that
you
do
again
is
we
continue
using.
You
know
before
we
had
groups,
but
we
defined
only
one
page
that
we
return
in
this
case,
we're
actually
going
to
return
a
whole
bunch
of
pages.
This
is
going
to
be
the
first
page.
E
That's
going
to
have
a
couple
groups
we're
going
to
have
a
second
page:
that's
going
to
have
a
whole
bunch
of
other
groups,
and
now
we're
going
to
have
the
third
page
and
the
great
thing
about
that
is
when
you're
using
pages
again,
it
will
render
this
in
a
nice
flow-through
wizard
that
you're
able
to
guide
your
user
through
now.
The
question
is:
when,
should
I
use
a
property
pane,
because
you
know
I've
seen
a
lot
of
people
that
will
actually
use
property
pains,
sometimes
where
it's
not?
E
So
the
more
users
can
directly
interact
with
something
the
better
it
is
for
them,
and
here's
an
example
we're
going
to
go
to
the
web
parts
again
and
we're
going
to
look
at
the
text
web
part
right
there
text
web
part.
Imagine
if
I
wanted
to
actually
enter
text
here
and
the
only
way
that
I
could
do
it
would
be
through
the
the
property
pane
right.
It
would
be
kind
of
unnatural
for
me
to
actually
go
in
here
to
edit
the
text.
E
I
want
to
be
able
to
type
the
text
here
and
I
want
to
be
able
to.
If
I
have
advanced
functions,
then
I
want
to
be
able
to
go
the
property
pane
and
make
those
changes
so
wherever
possible,
you
want
to
make
sure
that
the
the
stuff
that
people
will
edit
will
be
as
direct
as
possible.
Here's
another
example
here:
the
sites
web
part
right.
E
E
That's
the
most
natural
experience.
Don't
force
people
to
go
to
property
pain
because,
especially
in
a
property
pain
like
this,
where
you
have
a
lot
more
choices
to
offer,
it
might
just
overwhelm
the
user
all
right.
I've
got
one
more
minute,
so
we're
gonna
skip
some
stuff
today,
but
let's
talk
about
what
we
want
to
do
next,
I
don't
know
if
you're
old
enough
to
remember
these
choose
your
own
adventure
books,
but
we've
decided
to
start
leaving
it
up
to
the
audience
to
vote
on
what
they
want
to
talk
about.
E
Next
choose
your
own
spfx
adventure.
There's
three
choices.
We
want
to
talk
at
our
next
session
about
how
to
handle
custom
properties,
including
saving
things,
but
also
making
properties
that
can
be
searched
by
sharepoint,
how
to
extend
property
panes
and
how
to
improve
performance.
Now,
don't
worry
we're
going
to
cover
every
one
of
those.
We've
got
lots
of
content
to
to
cover
these,
but
what
we
want
to
know
is
which
one
do
you
would
you
like
to
see
next,
which
one
is
the
most
urgent
for
you,
so
we
have
a
form
that's
available
here.
E
I
think
david's
going
to
be
pasted.
The
link
he's
already
done
it
and
we
have
a
qr
code
because
we
are
cool
like
that.
So
we're
going
to
open
the
poll
for
the
next
week
until
next
thursday's
committee
call
and
then
we'll
be
presenting
what
people
voted
for.
That's
it
for
me.
Thank
you
back
to
you,
patrick.
A
All
right,
thank
you,
hugo.
Let
me
switch
back
over
to
the
slides.
I
want
to
thank
anup,
kunj
and
hugo
for
their
great
demos
today.
Thank
you
to
everyone,
a
reminder.
If
you'd
like
to
demo,
please
reach
out
using
the
url
on
the
previous
form
or
on
the
previous
slide,
thank
you
to
everyone
for
joining
us
on.
Today's
call.
Thank
you
to
all
our
presenters
recording
will
be
available
in
about
24
hours
on
the
youtube
channel.
We
cannot
make
the
recordings
available
through
teams,
so
they
will
be
available
on
youtube.
A
Follow
us
on
twitter
there
at
microsoft,
365,
dev
and
m365
pnp.
Our
next
spfx
call
is
in
two
weeks
and
november.
4Th
can't
believe
it's
already
november
next
m365
general
dev
call
will
be
next
thursday.
At
the
same
time,
that's
october,
28th,
all
the
community
calls
there
aka
dot.
Ms
slash
m365
pnp
for
the
invites,
and,
of
course,
there's
a
lot
of
other
community
calls
available
to
you
as
well.