►
Description
Viva Connections & SharePoint community call on January 13. Demos - Building Emoji Rating Web Part with SharePoint Framework, Introduction to Adaptive Card Extensions (ACEs) for Microsoft Viva Connections, and SharePoint Framework Design Patterns – Custom Web Part Properties (Part 3). Project releases for CLI for Microsoft 365 v4.3 and PnP Modern Search v4.5.3. Samples 8 web parts and 2 ACEs delivered. Added 2 AMA events on Sharing is Caring. Announced the updated Microsoft 365 ISV Benefit program. The host of this call is Vesa Juvonen (Microsoft) | @vesajuvonen. 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
It
is
like
not
luckily
friday
and
my
name
is
cesar
yogan,
I'm
a
principal
program
manager
in
the
microsoft
365
platform
site
responsible
of
some
of
the
open
source
and
community
assets,
and
typically
this
call
is
actually
hosted
by
patrick
rogers,
but
he
has
some
family
runs
and
surprises
this
morning.
So
I
stepped
in
on
that.
That's
why
we
work
as
a
team,
which
is
great
now
today
we'll
have
again
a
full
agenda,
so
we'll
do
a
quick
update
on
what's
happening
on
the
sharepoint
framework
side
of
the
house.
A
So
sitart,
paolo
and
hugo
are
gonna,
have
demos
after
that
now
quick
recap
on
on
some
of
the
slides,
which
we
are
always
repeating
in
here:
fair
feedback
from
julie
as
well-
and
we
talked
about
this
one
but
before
we
started,
but
there
are
multiple
ways
of
getting
involved
in
our
community
and
the
key
point
here
is
that
please
please,
please
let
us
know
how
we
can
improve
the
community.
First
of
all,
if
you
want
to
do
a
demo,
let
us
know
reached
out.
A
You
can
use
the
form
we
actually
reached
out
to
all
of
the
people
who
have
submitted
a
request
to
do
a
demo
on
that
form.
Just
today,
so
there's
a
our
community
leads
in
this
case
lewis,
a
freeze
is
actually
contacting
all
the
people
and
get
them
queued
up.
You
can
also
contribute
in
any
of
our
github
repositories
or
provide
feedback,
which
is
the
most
important
thing.
A
If
nothing
else,
let
us
know
how
what
works
and
what
doesn't
work
in
the
chat
of
these
community
calls
and
we
can
gradually
start
reacting
all
of
that
stuff.
That
is
the
key
point
for
microsoft
as
well.
Now,
if
you
think
about
all
of
the
different
assets
which
we
provide
you
to
get
started
or
to
improve
your
existing
skills
in
a
microsoft
resistive
platform,
we
have
two
different
youtube
channels.
So
we
have
the
official
microsoft
365
developer,
video
channel,
where
we
have
videos
which
are
coming
mainly
from
marketing
and
also
from
our
cloud
advocates.
A
Then
we
have
our
microsoft
365
community,
video
channels
where
we
have
all
of
the
community
call
recordings
and
all
of
the
demos
from
this
community
course
and
many
many
other
videos
from
the
community
members
as
well.
We
have
a
lot
of
open
source
assets
available
and
as
it's
hard
every
now
and
then
to
find
those
individual
samples
from
github
directly
and
we
have
different
set
of
sample
galleries,
which
will
make
it
easier
for
you
to
find
the
relevant
sample
for
you
and,
if
you're
wondering
that,
there's
too
many
urls
to
remember.
A
Luckily,
there's
only
one
from
where
you
can
access
all
of
these
assets,
which
says
akms,
m365,
bmp
and
that's
well.
I
should
actually
update
the
picture,
the
bmp
by
the
way,
to
term
where
we
talked
about
this
one
a
few
times
already,
but
I'm
going
to
shuffle
that
on
20
seconds,
because
somebody
got
confused
in
that
site.
We
called
this
as
a
microsoft,
365
platform
community
and
that's
what
the
bmp
is
just
a
nickname
on.
A
A
Now
in
the
microsoft
365
platform
side
of
the
house,
we
do
have
another
weekly
community
call,
which
is
happening
on
every
single
tuesday,
and
this
is
a
community
club
where
we
have
microsoft,
employees,
so
engineering
people,
cloud
advocates,
pms
and
and
so
on,
doing
live
demos
on
different
capabilities,
so
every
single
tuesday
8
am
pacific
time.
This
call
is
happening
and
it
typically
has
three
different
demos
and
also
updates
on
the
microsoft
side,
on
what's
happening
across
the
microsoft
365
platform
and
last
tuesday,
by
the
way
did
all-time
highest
record
on
that
one.
A
So
296
are
10
days,
which
was
really
really
cool
cool
to
see
the
high
demand
on
that
next
week,
we'll
have
dan
valen
violin
talking
about
show
user
emails
in
my
asp.net
core
app
with
microsoft
craft.
We
have
patrick
rochas,
jumping
in
to
deep
dive
on
the
viva
connection,
adaptive
card
extension,
development
and
sebastian
liver,
just
kind
of
cover,
and
yet
another
microsoft
craft
toolkit
control,
which
are
super
cool
demos
as
well.
B
Slide,
I
will
directly
throw
it
to
david
david.
Take
it
away
awesome.
Thank
you,
vessa!
Well,
friends,
you're,
going
to
see
a
number
of
opportunities
that
you're
able
to
reach
out
be
part
of
the
community
contribute
back
to
the
community,
but
we
understand
there
may
be
some
hurdles
that
prevent
you
from
getting
involved
to
the
level
that
you'd
like
to,
for
example,
perhaps
you'd
like
to
contribute
a
sample
or
present
on
a
demo
but
you're
not
quite
sure
how
and
where
to
get
started.
Well.
These
sharing
is
caring.
B
Sessions
are
live,
hands-on
sessions
that
will
guide
you
through
how
to
do
things
like
your
first
github
pull
request
or
some
guidance
on
presenting
within
the
community
or
you
might
want
to
buddy
up
with
someone
in
the
community
or
a
member
of
the
pnp
team,
and
we
are
here
to
support
you
in
that
aka.ms
sports
last
sharing
is
caring,
they're
all
free,
safe
space
opportunities
not
recorded,
and,
of
course
we
have
our
ever
popular
amas.
We
had
one
just
a
couple
days
ago
on
pnp
modern
search.
We've
got
some
coming
up
on.
B
Pnp
react
controls,
february,
22nd
with
alex
torrential
and
joel
rodriguez
and
then
graf
and
mgt
with
sebastian.
Libert
again,
this
program
is
provided
to
give
you
assistance
hands-on,
get
you
involved
in
many
many
ways.
We
look
forward
to
you
getting
more
involved
and
want
to
help
you
so
aka
dot.
Ms
forward,
slash
sharing
is
caring.
Now,
once
you
have
contributed,
we
want
to
celebrate
you.
The
year
has
just
turned
to
2022
and
we
have
a
whole
host
of
recognition
opportunities
to
ensure
that
you
are
celebrated
and
recognized
for
the
work
that
you're
doing.
A
Excellent,
thank
you
david
on
that
one.
Now,
let's
move
on
the
on
the
agenda
of
today,
because
we
do
have
quite
a
cool
demos
coming
up
as
well,
so
quick
update
on
the
sharepoint
framework
side
of
the
house.
So
a
few
updates
in
here
this
is
a
relatively
new
thing
for
those.
If
you
are
a
partner
building
an
extensibility
for
microsoft
365,
we
actually
have
an
updated
isv
benefit
program,
which
you
probably
want
to
check
out
if
you're
falling
into
this
category.
A
So
we
as
microsoft,
we
are
providing
different
kind
of
benefits
if
you
are
building
extensibility
for
microsoft,
365
and
this
used
to
be
all
about
microsoft
teams.
Now
it's
all
about
microsoft,
teams,
plus
microsoft,
viva,
extensibility
and
microsoft.
Viva
extensibility
includes
microsoft,
viva
connection
extensibility,
which
includes
sharepoint
frameworks,
just
to
be
clear
on
that.
A
So
if
you
are
building
extensibility
or
solutions
with
those
technologies,
you
probably
want
to
check
out
this
opportunity
for
getting
benefits,
basically
free
usher
credits
and
a
few
promotions
from
microsoft,
marketing,
which
is
a
great
great
opportunity
for
you
to
take
advantage
now,
a
few
other
things
on
the
sharepoint
framework
side
of
the
house.
It's
always
interesting.
A
So
I
obviously
because
I'm
working
in
the
engineering
and
principal
pm
on
on
the
platform
side
of
the
house,
I
can
get
access
on
all
of
the
data
and
what
the
number
one
the
most
highest
usage
all
time
of
sharepoint
framework
on
the
daily
usage
is
tuesday
this
week
actually
funny
enough.
On
monday,
I
was
so
excited
that
we
broke
the
all-time
record,
that
I
already
did
some
social
media
tweeting
on
that
one.
But
then,
on
tuesday
we
broke
even
the
monday,
so
it's
pretty
cool
to
see
the
growth.
A
Maybe
I
can
actually
say
this:
we
are
planning
to
get
it
released
on
the
valentine's
day,
which
is
14th
of
february,
which
is
the
monday
on
the
second.
Well,
it's
second,
I
guess
second
monday
of
february
then,
but
it's
monday,
14th
of
february,
and
that
is
the
target
date
for
1.14
we're
looking
into
doing
a
better
release,
one
more
beta,
pre-release
and
then
a
release
candidate
release.
The
beta
is
coming
most
likely
next
week
and
then
a
release
candidate
released
before
done
and
then
actual
ga
release
of
1.14
in
the
valentine's
day.
A
To
give
you
some
sort
of
a
french
well
valentine's
day
gift
and
in
here
most
likely
the
biggest
thing.
What
is
visible
is
the
new
yeoman
yeoman
template.
So
basically,
outputs
from
the
projects
are
a
bit
different
and
there's
some
modifications
on
the
on
optimizations
in
the
yeoman
generator,
so
we're
getting
rid
of
additional
questions
and
all
of
that
stuff
to
simplify
the
process
and
then
there's
a
lot
of
further
development.
In
here.
Our
development
team
is
actually
getting
duplicated,
pretty
much
from
a
resources
perspective
for
spfx,
which
is
awesome
internally.
A
So
there's
a
lot
of
other
investments
on
this
platform
related
on
sharepoint
framework,
especially
on
viva
and
team
side
of
the
house,
but
of
course
not
forgetting
about
sharepoint,
because
sharepoint
is
the
backend
behind
microsoft,
teams
and
viva
connection.
So,
even
though
you
wouldn't
necessarily
always
understand
that,
but
the
sharepoint
is
behind
the
scenes.
Now,
let's
move
in
then
into
the
bmpjs
side
of
the
house.
I
think
julie
you'll
be
covering
the
latest
on
this
one.
C
Yep,
I
will
be-
and
I
don't
actually
have
much
to
report
since
the
last
time,
patrick
and
I,
as
just
two
people
with
full-time
jobs,
have
been
putting
all
of
our
efforts
in
the
version
three
updates
and
we're
getting
really
really
close,
we're
just
down
to
documentation
getting
all
of
that
ready
to
go
so
that
it
is
fully
comprehensible
to
everyone
to
do
the
upgrade
from
v2
to
v3
and
have
all
the
documentation
they
need.
So
we're
focused
on
that.
C
A
Cool
excellent,
thank
you
julia
on
that
one,
I'm
just
watching
the
old
animation.
That
is
really
cool
animation
by
the
way.
So
a
lot
of
a
lot
of
stuff
happening
on
the
on
the
slides.
It's
getting
pretty
overwhelming
from
animation
perspective
cool,
let's
move
in
then
on
the
cli
for
microsoft,
365
side
of
the
highest
and
quickly
looking
on
the
attendees.
So
it's
it's
probably
me
covering
this
one.
So
no
problems,
so
latest
version
is
version.
A
One
four
points
three
so
cli
for
microsoft,
365,
if
you're
using
it
and
if
you're
tracking,
always
what's
the
latest
and
greatest.
The
this
project
has
a
really
great
and
active
social
media
presence.
So
please
subscribe
on
cli
microsoft,
365
to
stay
up
to
date
on
that
in
the
4.4.3
version,
and
the
latest
capabilities
are
upgrading
our
sharepoint
framework
solution
projects
to
1.14
the
beta
version.
If
you
want
to
test
out
your
solution,
how
they
will
be
working
with
1.14,
there
isn't
really
massive.
A
A
Now
moving
on
on
the
protests,
sharepoint
framework,
reusable
components
in
this
side
of
the
house
and
the
latest
version
on
react.
Controls
is
3.5
which
has
the
sharepoint
framework,
1.13.1
or
0
support,
so
they're
basically
aligned
on
the
latest
version.
So
this
is
basically
needed
because
there's
a
react
dependencies
and
all
of
that
making
sure
that
everything
is
aligned
properly
and
then
on
appropriate
controls.
The
3.3
is
the
latest
one,
and
the
latest
development
here
is
related
on
the
taxonomy
control
improvements.
A
So
there's
there's
a
constant
feed
of
new
capabilities
in
these
controls
as
well
have
a
look
on
the
on
the
urls
which
are
provided
on
the
slide
now
on
the
bmp
modern
search,
not
a
significantly
new
things
in
here,
so
the
latest
version
is
4.5.3,
which
is
the
december
release,
and
the
new
version
is
queued
up
already.
So
it's
coming
up
also
quite
soon.
There's
a
lot
of
excitement
actually
with
the
four
point
x:
release
related
on
the
modern
search
web
parts-
and
we
just
did
quite
a
few
community
call
demos
on
this.
A
D
E
D
You
know
frankly,
get
inspired.
Sometimes
that's
definitely
what
I
do.
These
are
the
latest
samples
of
over
the
last
two
weeks.
On
the
extension
side,
we
don't
have
any
new
updates,
but
on
the
web
part
side
boy
do
we
have
some
some
new
stuff.
So
we've
got
an
update,
the
property
control
by
jonah
where
he's
updated.
This
is
probably
one
of
the
oldest
samples
it
was
originally
created
by
chris
kent.
It's
been
updated
now
to
spfx113
eve.
D
Abrasad
has
updated,
both
the
quotes,
webpart
and
the
my
team's
web
part
he's
upgraded
them
to
spfx1131
and
that
was
kind
of
his
holiday
challenge
contributions.
So
thank
you
for
doing
that.
The
list
search
web
part
by
alberto
gutierrez
perez
has
been
upgraded,
also
dspfx113,
and
then
we
have
a
new
drag-and-drop
web
part.
The
drag-and-drop
followed
sites
by
adam
which,
who
can
actually
you
know,
drag
and
drop
some
some
sites
in
a
in
a
grid
to
actually
decide
which
which
sites
you
want
to
follow.
D
You
know
local
and
then
finally,
andre
has
updated
the
graph
because
it
wasn't
returning
files
anymore
and
he's
updated
the
query
so
that
it
does
not
allow
files
of
a
size
of
zero
bytes
and
that's
pretty
much
it
for
today.
Thank
you,
everyone
for
your
contributions
and
I
look
forward
to
seeing
more
contributions
from
everyone.
A
B
Yep
absolutely
thank
you.
Vessa
we've
got
two
fantastic
samples
that
were
contributed
this
last
week.
My
emails
from
siddharth,
who
is
actually
presenting
today,
but
he'll,
be
not
presenting
on
this
on
something
else.
We'll
get
him
on
a
presentation
for
this
particular
ace
here
in
the
next
coming
weeks,
and
then
we
also
have
my
groups
from
deep.
Both
fantastic
samples
you'll
be
able
to
take
advantage
of
them.
We're
processing
them
right
now
we
are
open
for
more
contributions.
B
We
have
a
few
more
in
the
pipeline,
we'll
be
processing
and,
of
course,
we're
building
up
on
the
getting
started
with
adaptive
card
extensions
sharing
his
caring
session,
it's
going
to
be
a
two-part
session
that
we're
excited
to
get
everyone
involved
with
to
get
you
building
those
adapter
card
extensions,
so
keep
up
again.
Thank
you
for
all
the
fantastic
work
bessa
back
to
you.
A
Excellent,
thank
you.
Thank
you
david
on
that
one
and
then
we'll
do
the
ever
popular
to
get
a
mode
picture
for
those
who
are
willing
to
enable
the
video
and-
and
I
will
actually
start
recording
already,
but
let's
not
do
hand
waving
again.
I
will
move
the
video
in
here,
so
you
can
actually
see
what
we're
recording
and
let's
wait
for
the
50
people
limits
to
hit,
and
then,
after
that,
we'll
go
to
the
demos
a
few
more
a
few
more
seats
available.
It
always
takes
a
while
to
to
get
to
the
together
mode.
A
Still
more
still,
a
few
seats
still
a
few
seats,
still
a
few
seats
available,
I'm
not
going
to
enable
my
videos,
so
we
can
get
this
in
in
the
bright
screen
resolution
few
more
seats.
Are
we
full?
I
guess
we
are
filling
in
the
50
seats
in
there.
Let's
do
some
hand
faving
everybody.
Thank
you
for
joining.
Thank
you
for
being
here
awesome
to
have
you
in
the
call
great
great,
great,
great
and
awesome
and
growing
community.
Thank
you.
Thank
you.
Thank
you
for
helping
us
on
building
better
microsoft.
365
platform
awesome
really
really
cool.
A
E
E
E
So
what
I
have
seen
was
we
have
public
news
which
are
there
on
the
new
site
or
the
public
blog
post
or
articles
which
we
have
wherein
I
have
seen
an
emoji
based
feedback,
which
we
will
see
at
the
down
of
the
page
where
people
can
basically
react
to
that
particular
news
or
articles.
So
I
thought
of
you
know
what,
if
we
can
build
something
similar
which
can
be
used
by
the
organization
who
are
using
microsoft,
365
and
publishing
their
internal
news
as
in
news
in
the
organization?
E
What
if
we
can
build
something
similar
and
collect
employees
or
users
feedback
as
an
emoji
reaction
on
this
news
and
everything
right
so,
but
this
webpart
is
not
just
limited
to
news,
it's
basically
an
spfx
webpart.
So
what
we
can
do
is
we
can
use
this
webpart
on
wiki
articles
if
we
have
a
knowledge
base
to
basically
collect
the
user
feedback
on
a
particular
knowledge
base,
and
also
it
can
be
used
in
the
blog
post
if
you
are
having
an
internal
blog
on
sharepoint
right.
E
E
We
can
choose
the
rating
from
basically
one
rating
to
maximum
file
rating,
so
it
means
if
you
want,
and
the
feedback
rating
based
on
just
one
two
and
three
that
also
can
be
done.
There
is
a
configurable
option
to
show
the
total
count
of
the
rating
which
user
has
given
on
a
particular
news
as
in
badge,
then
there
is
an
also
configurable
option,
wherein
you
can
choose
the
whether
you
want
allowed
to
add
comment
while
they
are
providing
the
feedback,
and
this
can
be
disabled.
E
Also,
if
you
just
want
a
pure
emoji
based
web
part,
it
will
also
display
current
users
rating
selection.
If
I
would
have
already
rated
a
particular
news
or
an
article,
it
would
display
that.
Okay,
I
have
rated
this
by
having
an
highlighted
background.
It
does
also
have
an
update
way
to
change
the
rating.
E
All
of
this
rating
would
be
stored
as
in
sharepoint
list
and
to
make
it
more
usable.
There
is
an
option
in
the
webpart
config
and
the
webpart
property
configuration
thing
wherein
we
can
basically
create
the
list
on
the
flies
where
we
wanted
to
choose
the
where
to
choose
the
list
we
wanted
to
create,
and
then
that
list
can
be
configured
as
in
the
webpart
property,
where
the
whole
rating
data
should
be
stored,
and
there
is
an
also
option
too
for
the
admin
to
basically
choose
the
background
color.
E
So
these
are
some
of
the
features,
so,
let's
quickly
see
the
demo
so
consider.
This
is
the
news
or
an
article
or
news
of
an
organization.
What
I
have
did
I
have
added
that
web
part.
So
this
is
how
the
web
part
would
look
like,
and
as
of
now
I
have
already,
my
logged
in
user
would
have
already
reacted
to
this
particular
news.
So
I
can
see
the
color
in
the
highlighted
thing
and
we
can
also
see
how
many
people
have
basically
selected
a
particular
rating
for
this
particular
user
for
this
particular
page.
E
E
So
from
here,
basically,
we
would
be
able
to
choose
where
we
wanted
to
store
the
rating
data.
If
we
basically
are
kind
of
using
the
same
web
part
for
at
multiple
places
in
the
single
site
it
it
will
allow
you
to
basically
choose
the
list
and
which
will
be
configurable
using
this
button.
It
will
automatically
create
a
new
list
based
on
the
list
name
which
we
have
provided.
If
at
all,
we
wanted
to.
E
Basically,
it
will
allow
us
to
configure
the
titles
of
the
rating,
and
it
will
also
allow
us
to
set
the
emoji
or
the
image
which
we
wanted
to
use.
While
we
wanted
to
display
as
a
part
of
the
feedback
collection.
So
here,
as
I
said,
you
can
either
choose
from
one
to
five.
You
can
either
put
if
you
want
three
rating
system,
just
configure
three
rating
system
and
it
will
automatically
only
put
the
three
ratings
images
in
the
web
part
right.
Then
there
is
an
option
to
enable
and
disable
comment.
E
There
is
an
also
option
to
enable
and
disable
count,
and
we
can
also
choose
to
basically
configure
the
background
color
of
the
web
part
right
now
to
make
this
more
usable
like.
We
would
know
that
whenever
a
news
has
been
created,
it
might
be
created
by
some
content
team
or
probably
somebody
who
would
be
handling
the
news
and
everything
I
was.
I
thought
of
you
know
having
this
and
automation
wherein
as
soon
as
the
news
has
been
created,
we
should
be
able
to
add
that
news
into
the
web
part
right.
E
So
my
friend
koonch
helped
me
write
and
power
automate
through
which,
once
we
would
be
once
we
will
basically
able
to
whenever
we
add
a
new
part
or
a
new
news,
post.
Okay,
it
will
basically
automatically
add
this
webpart
onto
that
page
so
that
the
actual
content
writer
don't
have
to
go
and
configure
this
web
part
every
time
we
wanted
to
do
it.
So,
let's
quickly
see
that
demo
I'll
just
use
any
blank
page.
E
The
sharepoint
rest
api
to
when
an
item
has
been
created
or
modified
on
that
particular
page
library,
where
we
are
first
seeing
that
if
the
current
page
has
been
a
news
page
or
not,
the
promoter
state
is
either
news.
Then
check
out
the
page
and
get
the
webpart
id
the
webpart
id.
We
will
be
able
to
see
from
the
webpart
manifest
file,
then
what
it
will
do.
E
This
can
be,
they
done
other
ways
also,
but
it's
just
that
the
whole
use
case
which
I
was
trying
to
demonstrate
would
create
would
be
incomplete.
If
you
don't
have
automation
in
place,
because
whenever
the
news
is
being
created,
we
don't
expect
the
content.
Writer
to
basically
go
and
add
this
webpart
to
the
page
right
now,
let's
quickly
see
if
the
web
part
would
have
been
added
here,
it
has
not.
Yet
probably
it
might
take
time
while
we
are
waiting
for
that.
E
Basically,
we
are
using
pnp
for
all
the
rest
operation
pnpgs
for
all
the
rest
operation
which
we
have,
and
for
that
I
have
created
an
sp
service,
a
provider
class
wherein
we
have
all
the
methods
which
we
have
to
use,
while
basically
interacting
with
the
sharepoint,
so
starting
with
get
items
will
basically
get
all
the
items
from
the
particular
list,
the
gate
rating.
Sorry,
this
method
is
not
used.
This
method
is
used.
It
will
basically
get
all
the
rating
list
items
from
that
particular
list.
E
So
this
is
typically
crude
operation
on
that
particular
sharepoint
list,
which
we
are,
which
we
will
be
doing,
and
this
is
the
create
list
with
column
method
which
will
basically
check
whether
the
same
name
list
already
exist
or
not
if
it
exit
it
won't
create,
but
it
will
display
some
error
message.
If
not,
it
will
create
it
once
the
user
clicks
on
it
right
now
coming
to
the
component.
What
we
have
is
in
the
render
method,
the
typical
user
interface,
which
we
create.
E
We
are
using
pnp
placeholder
control
to
basically
allow
user
to
configure.
If
the
property
are
not
been
set,
then
there
is
an
d
which
displays
the
rating
text
on
the
top,
which
is
basically
the
header
text
and
then
using
the
emoji
collection,
property
field,
property
collection
data.
We
are
looping
through
it
and
we
are
creating.
E
The
badge
is
enabled
it
means
if
the
count
is
enabled,
then
only
we
are
creating
the
batch.
Otherwise
we
are
just
simply
using
the
displaying
the
rating
images
which
user
would
have
selected
and
below
that
we
would
be
displaying
the
rating
title
right
and
if
the
comment
is
enabled
we
have
a
text
field
which
will
basically
capture
the
user's
comment
and
add
it
in
the
sharepoint
list
right
and
then
on
the
button
click
we
have
a
submit
rating
which
basically
calls
the
sp
service
provider
methods.
E
What
we
are
using,
we
are
using
the
switch
index
wherein
we
are
selecting
the
indexes
and
everything
and
basically
making
that
rating
field
dynamic
in
the
nature
right
and
then
the
page
name
to
be
stored
and
then
a
typical
method
wherein
we
are
adding
the
rate
item,
and
if
it
is
successful,
we
just
display
a
dialogue
saying
that
your
rating
has
been
successful,
successfully
submitted,
etc.
So
this
is
the
typical
code.
Walkthrough
I
mean
typically
in
a
way
the
operations
are
simple
which
we
are
doing
in
the
sharepoint
thing.
E
E
We
are
planning
to
write
a
blog
post
also,
so
this
like
how
to
automate
this
thing,
which
we
would
share
later
on
the
social
media,
and
the
last
point
which
I
wanted
to
cover
is
the
sharepoint
list
schema
which
we
have,
which
is
very
simple
in
nature.
We
have
title
of
the
user,
current
logged
in
user,
the
page
name,
the
user,
who
has
added
the
rating.
E
So
we
are
storing
the
email
address
to
have
the
uniqueness,
and
then
we
have
the
columns
like
rating
one,
two,
three
four
and
five
and
the
comment
which
we
have
done
so
yeah.
All
the
data
has
been
stored
here
and
basically
been
captured
in
the
basically
been
captured
in
the
rating
way.
We
wanted
to
do
it
and
if
anything
we
wanted
to
update
here
as
in
comment
what
it
will
do,
it
will
basically
update
the
rating,
and
it
will
also
change
the
rating
to
that
particular
item
which
we
have
selected
so
yeah.
A
Thank
you,
sweetheart
really
really
cool,
stuff
and
and
super
clean
implementation,
and
don't
worry
about
the
small
demo
hiccup
there.
But
it's
it's
great
to
see
that
automation
thinking
behind
of
the
scenes
as
well.
It's
all
about
the
inspiration
as
well
for
the
community,
but
let's
then
moving
the
paulus
site
and
paulo
is
going
to
talk
about
and
sharepoint
framework
adaptive
card
extension
implementation
for
viva
connections,
so
paula.
We
can
see
the
screen,
take
it
away.
F
Thank
you
visa.
Yes,
today
we
keep
on
talking
about
how
to
develop
adaptive
card
extensions
with
the
sharepoint
framework,
and
specifically
today
we
will
cover
how
we
can
manage
state
and
properties
while
developing
ac's
with
spfx.
So,
like
always
few
words
about
the
topic
by
itself,
with
the
help
of
a
few
slides
and
then
I
will
move
to
some
demos.
F
Whenever
we
define
an
adaptive
card
extension,
we
can
declare
the
interfaces
defining
the
layout
of
both
the
properties
interface
and
of
the
state
interface,
which
will
be
managed
inside
the
adaptive
card
extension,
but
which
will
also
become
available
in
all
of
the
card
views
and
quick
views
related
to
the
adaptive
card
extension
in
which
we
are
just
as
a
reminder.
Whenever
you
create
an
adaptive
card
extension,
the
ui
is
based
on
two
different
flavors
of
cards.
There
are
the
car
views
and
the
quick
views.
F
So,
for
example,
whenever
we
generate
an
adaptive
card
extension,
we
know
that
we
have
the
adaptive
card
extension
type
and
in
the
declaration
and
definition
of
the
type
we
extend
the
based
optical
extension,
including
an
interface
definition
for
the
properties
and
one
for
the
state.
As
you
can
notice
here,
those
two
interfaces
are
defined
with
the
export
keyword
and
inside
these
interfaces.
We
simply
define
the
properties
that
we
want
to
have
to
configure
the
adapter
card
extension
and
the
state
that
we
want
to
use
to
manage
the
current
state
of
the
component.
F
Even
if
right
here
in
the
auto
generated
code,
we
have
a
an
isolated
file
for
the
definition
of
the
get
property
pane
configuration
method.
But
here
we
can
simply
recognize
all
of
the
code
that
we
are
used
to
using
whenever
we
create
a
sharepoint
framework
web
part
in
order
to
manage
the
fields
to
add
it,
to
let
the
users
edit,
the
values
of
the
properties
like,
for
example,
here,
title
icon,
property
and
description
are
the
three
pre-generated
properties
by
generated
by
disk
folding
tool
and
those
mapped
to
the
properties
that
we
have
in
this
state.
F
As
such.
We
can
then
use
those
interfaces
as
the
type
of
the
properties
property
of
this
object,
referring
to
the
card
view
as
well
as
we
can
access
with
the
same
technique.
Also
this
state
and,
for
example,
if
we
go
to
the
quick
view,
auto
generated
for
this
project,
we
can
see
that
we
can
of
course,
still
use
the
same
logic.
F
So
we
have
the
interface
for
the
properties
and
for
the
state
imported
in
this
file
and
used
in
the
definition
of
our
quick
view,
and
we
can
always
say
this
dot
properties
or
this
dot
state,
and
we
can
access
the
properties
and
state
of
the
adaptive
card
extension,
and
this
is
really
useful,
because
when
we
do
that,
then
we
can
use
the
properties
and
state
as
the
content
or
to
create
the
content
that
we
want
to
data
bind
in
the
ui
of
our
adaptive
code.
Extensions
now,
I'm
already
running
this
project.
F
So
if
I
will
quickly
switch
to
the
workbench,
let
me
refresh
this
page.
I
hope
the
zoom
is
good
enough.
Here
we
have
the
really
simple
adaptive
code
extension
just
generated
with
this
holding
tool,
and
we
can
see
that
we
have
the
property
pane.
I
was
talking
about
just
few
seconds
ago,
which
has
been
generated
based
on
the
fields
that
we've
defined
and,
of
course
you
can
create
your
own
property
pane
and
make
your
properties
configurable
now
talking
about
something
a
bit
more
deep
or
interesting
about
properties
and
state.
F
I
have
another
example
that
I
want
to
share
with
you.
So,
first
of
all,
let
me
stop
this
one
and
let
me
switch
to
another
example
here
we
can
see
an
adaptive
current
extension
that
I
created
just
for
the
sake
of
explaining
how
specifically
state
and
properties
work
in
aces,
and
here
we
have
an
electrical
extension
with
a
state
with
the
time
property
of
type
string
in
this
adaptive
card
extension
in
the
on
init
method.
F
I
simply
rely
on
the
set
interval
of
javascript
to
invoke
every
second,
a
function
which
will
get
the
current
time
and
will
show
the
current
time
so,
as
you
can
imply
from
the
name-
and
let
me
in
the
meantime
start
this
project
so
that
you
can
save
some
time.
Gulp
serve
no
browser,
okay,
but
this
will
be
an
adaptive
card
extension
to
show
the
current
time
so
really
simple.
Just
for
the
sake
of
explaining
you
something
now.
F
What
is
interesting
to
notice
is
that
when
we
do
that
and
when
we
have
such
an
adaptive
card
extension
and
we
set
in
the
state
of
the
component
the
current
time-
and
we
do
that
every
second
then,
in
the
card
view
we
can
rely
on
the
state.time
property
here
as
well
as
we
can
do
the
same
in
the
quick
view
and
we
can
bind
the
current
time
in
the
ui
of
the
quickview.
Now,
if
I
will
go
back
to
the
workbench
and
in
the
meantime,
hopefully
the
project
will
be
running
hopefully,
but
not
yet.
F
F
What
I
want
to
show
you
is
that,
based
on
the
architecture
of
the
adaptive
card,
extensions
and
thinking
about
the
fact
that
now
we
are
ready,
we
should
be
ready
and
thinking
about
the
scope
and
the
idea
behind
the
scene
of
building
adaptive
card
extensions.
When
you
create
an
adaptive
card
extension,
the
card
view
and
the
quick
view
of
the
erupticut
extension
will
be
showed
to
the
ui
and
to
the
user
just
once
per
time.
F
F
One
last
thing
that
I
want
to
share
with
you
and
then
I
can
give
the
screen
back
to
visa
or
to
hugo.
Actually
is
that
when
you
do
that,
when
you
define
properties
and
state
and
specifically
now
properties
in
your
adaptive
code
extension,
you
can
also,
for
example,
think
about
using
the
properties
in
order
to
hold
a
reference
to
useful
functions
that
you
want
to
make
available
to
the
car
that
you
have
in
your
adaptive
card
extension
solution.
F
F
This
is
the
mobile
preview
of
the
viva
connection
dashboard
on
my
tenant,
for
example,
I
can
see
a
list
of
orders
and
I
can
eventually
edit
orders-
or
I
can
add
new
orders
to
the
list
of
orders
that
I
can
manage
through
these
adaptive
card
extension.
Well,
what
is
interesting
here
is
that
in
the
properties
I
also
defined
the
functions
to
load,
add
update
or
delete
orders,
so
that
when
I
am
in,
for
example,
a
quick
view
like
this
one,
the
add
order
quickview.
I
can
always
rely
on
these
properties
dot.
A
Awesome,
paulo
thank
you
really
really
great
stuff
and
great
demo
on
the
on
the
concepts
and
to
understand
how
acs
can
be
implemented.
This
is
just
a
kind
of
a
recap,
I
think
paulo
said
it
many
many
times,
but
chester
rica
for
those
who
are
still
wondering
what
are
those
but
their
intention
on
the
adaptive
card.
Extensions
for
viva
connection
is
that
you're
able
to
build
your
own
company
mobile
portal,
so
you
can
design
your
mobile
experience,
which
can
be
then
extended.
A
You
can
surface
first,
the
the
company
information
for
first-line
workers
who
only
have
a
mobile
device
not
necessarily
sitting
right
next
to
desktop
device
all
the
time
now.
Next,
on
on
the
demo
queue
we
have
hugo-
and
I
don't
know
what
you're
going
to
show
today.
So
this
is
interesting,
something
related
on
design
patterns
right.
D
Well,
I
guess
I
have
to
show
something
about
the
same
patterns
now.
Thank
you,
visa
all
right
welcome.
We
can
see
the
screen.
Take
it
away.
Perfect.
Thank
you.
So
this
series
of
calls
right
it's
about.
We
call
them
the
spfx
design,
series
and
or
design
patterns
right.
The
whole
idea
here
is:
how
can
we
make
every
single
developer
a
designer
and
or
maybe
the
better
way
to
say
it
is?
How
can
we
make
every
single
developer,
whether
they're
building
solutions
for
web
parts,
teams,
apps
or
viva
connections?
D
How
can
they
do
it
and
they
look
awesome
without
having
to
be
a
designer
right
and
that's
really
what
these
sessions
are
about?
So,
yes,
we
do
talk
about
some
of
the
code,
but
you
also
talk
about
some
of
the
design
ideas
behind
the
scenes.
So
this
is
the
third
session
that
we've
done
about
custom
properties
and
we'll
talk
a
little
bit
more
about
it.
D
Panes
is
how
you
allow
your
users
to
configure
your
web
parts,
your
team's
apps
and
your
viva
adaptive
carts,
but
you
might
be
asking
well
hugo
like
why
are
we
spending
so
much
time
on
design
patterns
for
properties
and
property
panes,
when
most
users,
who
aren't
owners
or
administrators
will
probably
never
get
to
see
the
property
pane?
And
that's
a
very
good
point
but
think
about
it?
D
Right
properties
is
really
how
you
can
go
from
designing
a
single
used
component
to
something
that
is
versatile
right
that
can
be
used
in
many
many
scenarios,
and
this
is
where
the
being
lazy
part
pays
off,
because
you
can
actually
use
the
same
code
to
do
a
lot
of
things
with
a
single
solution.
Let's
use
an
example.
D
Just
take
the
quick
links
web
part,
for
example,
and
you
can
use
that
same
web
part
by
changing
a
few
properties
like
the
layout
property.
You
can
use
it
many
different
ways.
The
sharepoint
lookbook,
which
we
have
examples
here,
is
a
great
example
of
using
quick
links
in
different
ways
to
achieve
different
designs.
In
fact,
let
me
show
you:
we've
got
some
here
and
we've
got
a
few
more
samples
here
and
a
few
more
here
right.
D
Lots
of
variations
of
the
exact
same
web
part
with
the
exact
same
code,
but
it
just
renders
it
in
a
different
way
and
it
achieves
very
different,
look
and
feel
how
to
do
that
behind
the
scenes.
Is
you
know
with
this
configuration
option
where
you
can
pick
the
layout
and
depending
on
the
layout,
that
you
pick,
for
example,
the
button
layout
or
the
list
layout?
You
see
that
you
get
actually
different
choices,
so
the
button
layout
has
the
option
to
pick
what
type
of
icon,
but
the
list
layout
does
not
do
that.
D
It
actually
only
allows
you
to
pick
show
descriptions
and
the
icon
or
the
tiles
one
allows
you
to
pick
the
size
of
the
icon.
So
that's
interesting,
but
why
would
you
design
a
web
part
property
to
do
that?
Remember
our
friends,
hick
and
hyman
right.
We
talked
about
them
a
little
while
ago,
their
psychologists
who
came
up
with
kind
of
a
they
found,
a
relationship
between
the
number
of
choices
present
and
a
person's
reaction
time
to
that
given
number
of
choice.
D
So
when
you
bombard
your
users
with
too
many
choices
at
once,
they
have
to
take
the
time
and
they
have
to
take.
You
know
exponentially
more
time
to
look
at
all
the
choices
that
are
available
and
giving
them
more
work
that
they
don't
want,
and
that's
one
of
the
reasons
why
people
you
know
what,
if
who
are
not
in
it,
people
don't
like
computers,
because
computers
make
them
feel
stupid.
They're,
like
oh
there's,
too
many
choices.
All
I
want
is
a
display
list
of
links
right.
D
I
don't
really
want
to
have
to
pick
72
choices
and
that's
what
we're
going
to
try
to
talk
about
today
is
how
can
we
build
these
relationships,
where
I
only
need
to
show
the
number
of
choices
that
are
relevant
to
the
user
at
the
time
that
they've
selected
it?
This
is
a
concept
in
user
experience,
design,
that's
called
progressive
disclosure.
We
progressively
disclose
more
information
or
more
choices,
as
the
user
indicates.
They
want
to
see
more.
D
D
D
So
the
first
thing
is
a
group
called
layout
options,
which
is
the
one
that
you
saw
at
the
top
and
then
what
I
pass
here
is
I
pass
a
property
pane
choice
group,
which
is
those
buttons
that
you
saw
and
then
I
just
kind
of
design
a
button
for
every
choice.
Now
one
thing
I
want
to
point
out
here:
well,
there's
a
few
things
I
want
to
point
out.
D
The
first
thing
that
I
should
point
out
is
just
for
legibility:
to
make
it
easier
to
read
the
code
for
this
demo,
I'm
using
words
like
compact,
film
strip
grid
and
so
on
and
so
forth.
You
probably
wouldn't
want
to
do
that
in
the
code
behind
the
scenes.
In
fact,
if
you
open
the
the
web
part,
sorry
what
is
called
the
workbench
and
you
drop
microsoft's,
quick
link
web
part,
and
you
look
at
the
show
data
link
it'll.
D
Actually
show
you
the
data
that
the
web
part
is
storing
and
you'll
notice
that
behind
the
scenes,
they're
actually
storing
numbers,
not
not
words,
but
again,
I
didn't
want
the
code
to
be
boring
and
or
more
boring
than
it
is
right
now
by
having
to
interpret
numbers.
So
if
you
see
text,
just
forgive
me
for,
for
you
know
not
necessarily
being
cool
about
it
all
right.
D
So
what
we
do
is
we
store
an
attribute
called
layout
and
we
make
that
choice
right,
but
then
here's
the
thing
is,
we
also
add
all
the
fields
that
we
needed
like,
for
example,
do
I
show
an
image
in
a
layout
and
so
on
and
so
forth?
We
just
do
one
little
thing,
that's
kind
of
sneaky
here
we
actually
do
a
conditional
and
method
where
we
say
if
the
layout
that's
currently
selected
is
the
compact
layout
and
then
give
me
a
property
pane
toggle,
and
we
do
the
same
thing
for
the
fumes
film
strip.
D
D
This
is
what
we
do
here
and
at
the
end
we
get
kind
of
the
results.
We've
just
talked
about
now.
Here's
a
little
problem,
though,
and
there's
a
few
things
that
you
may
have
noticed
from
from
from
this.
The
first
thing
take
a
look
at
the
space
that
shows
up
see
like
right
there
that
space-
that's
not
in
the
original
web
part.
D
D
So
the
method
that
I
just
showed
you
it
works
if
you
have
a
few
choices
and
it
works
if
it's
probably
like
the
last
item.
But
if
you
don't
want
that
ugly
space,
you
know
we
probably
have
to
think
of
a
different
approach,
and
I
don't
know
I
always
do
this
david,
probably
laughing
now,
because
I'm
always
trying
to
use
the
zoom
it
function
to
highlight
stuff.
D
D
I
property
pane
configuration
object,
but
you
could
also
change
your
code
to
say
well,
I'm
going
to
create
a
variable
called
configuration
and
it's
going
to
be
an
I
property,
pane
configuration
and
then
I'm
going
to
actually
populate
it
and
then
I'm
going
to
return
that
configuration
at
the
end
of
the
function.
Essentially
I'm
doing
exactly
the
same
thing
that
the
get
property
pane
configuration
method
is
doing,
except
that
now
I
can
actually
do
things
like
manipulate
my
my
groups.
D
So,
for
example,
the
first
thing
I'm
going
to
do
before
I
return
that
object,
I'm
going
to
get
the
groups
and
I
get
the
first
groups
in
the
sorry,
the
groups
in
the
first
page
and
then
I'm
going
to
get
in
my
layout
group,
which
is
the
first
group
in
that
first
page
and
I
could
have
used
names.
I
could
have
used
different
approaches
like
that.
You
know
what
I'm
doing
here
is
I'm
getting
that
group
and
now
what
I
can
do
is.
D
I
can
actually
add
my
if
statements
and
it's
actually
a
lot
cleaner
in
terms
of
legibility,
because
what
I
can
do
here
is,
I
can
say,
look
if
the
layout
is
compact,
I'm
going
to
push
right,
it's
an
array
of
fields,
so
in
typescript
you
can
actually
in
javascript.
You
can
just
do
pop
and
push
to
modify
an
array,
so
I'm
just
adding
my
property
pane
toggle
field
and
then
I'm
adding
my
other
property
pane
toggle
fields,
and
then
I
do
the
same
thing
with
the
film
strip
and
then
I
return
my
configuration.
D
So
that's
a
very
simple
way
to
actually
kind
of
create
one
of
those
conditional
fields
and
by
the
way
you
could
do
the
same
thing
for
con
conditional
field
groups
and
see
how
I
don't
have
that
ugly
space
anymore.
So
I
don't
have
to
lose
sleep.
I
don't
have
to
feel
bad
because
I've
told
everybody
how
to
add
extra
faces
in
their
web
part
panes
and
that's
cool
and
that's
more
than
likely
the
same
behavior
that
microsoft
is
using
to
render
the
property
property
paying
web
parts
all
right
so
next
time.
D
Well,
what
we're
going
to
talk
about
is
we're
going
to
start
talking
about
property,
pain,
validation
because
now
you're
asking
people
to
configure
web
parts,
we
should
always
validate
the
input
again
so
that
people
don't
feel
stupid
right.
Let's
show
them
hey.
You
know
what
you
selected
this
option.
You
should
have
probably
entered
a
value
here
or
the
url
you've
just
entered
is
invalid.
D
We're
also
going
to
take
talking
about
the
property,
pane
controls,
the
pnp
property,
pane
controls
and
then,
at
a
later
session,
we're
going
to
show
you
how
to
build
your
own
property
pain,
controls.
We've
barely
scratched
the
surface.
We
haven't
even
started
talking
about
the
content.
Part,
that's
going
to
be
the
most
awesome
part,
but
that's
it
for
me
for
today.
A
Awesome,
thank
you,
hugo
really,
really
cool
stuff
and
those
are
really.
I
think
these
design
sessions
and
discussions
are
really
good
because
there's
a
lot
of
kind
of
inspirational
thing
as
well.
So
considerations
and
you're
raising
really
really
great
points
on
the
from
a
thinking
perspective.
So,
let's
not
just
focus
on
doing
things
rather
focus.
Why
are
we
doing
things
and
how
we
can
make
it
better,
which
is
pretty
good?
Thank
you,
hugo
and
thank
you
super
cool
stuff
now,
thank
you.
Sweetheart
really,
really
cool
web
part
awesome
stuff
on
that
one.
A
Looking
forward
also
on
the
follow-up
sequence
and
follow-up
series
on
that
one
related
on
the
automation
piece
that
looks
really
really
awesome.
Thank
you,
paulo
as
well,
and
thank
you
hugo
on
this
one,
just
to
recap,
on
the
on
the
recordings,
as
a
recording
will
be
available
within
24
hours
in
microsoft,
365
community
pmp
youtube
channel
at
akms
entries
instead
of
dmp
videos.
If
you
go
to
the
akmspm365dmp
blog,
you
can
actually
find
a
summary
blog
post
during
that
time.
A
Next
week,
we'll
have
the
microsoft
trees
for
general
development
call
on
january
20th
and
the
next
diva
connection.
Spfx
call
is
happening
on
january
27th.
It
is
pretty
soon
february.
This
is
crazy.
Time
flies
when
you're
having
fun.
Now
we
do
have
quite
a
few
different
community
calls
happening
still,
so
we
have
the
the
m365
platform
call
every
single
tuesday,
then
on
thursdays,
and
this
time
we'll
have
to
the
recurrent
calls
happening
as
well
and
on
top
of
them
we
have
few
individual
courses
happening
as
well.
A
The
some
of
these
might
be
might
be
again
merged.
The
sum
of
the
calls
in
the
future
we'll
see
how
this
evolves
we're
trying
to
get
you
as
much
as
possible
valuable
material
without
also
confusing
you,
so
your
feedback
is
always
important
for
us
on
what's
needed,
but
thank
you
everybody
for
joining
today.
Thank
you,
one
more
time
for
all
of
the
presenters,
absolutely
brilliant
job
and
thanks
everybody
for
a
lovely
discussion
in
the
chat.
It's
always
good
to
see
that
discussion
being
so
lively
as
it
was
again
on
today.