►
Description
Viva Connections & SharePoint community call on December 16. Demos - Building advanced Enterprise Search Center with PnP Search Web Parts v4, Building a custom React based Microsoft Graph Group Viewer experience, and Introduction to Adaptive Card Extensions (ACEs) for Microsoft Viva Connections. Project releases - SharePoint Framework (SPFx) v1.14 public developer preview, CLI for Microsoft 365 v4.3 beta, Reusable SPFx React Controls v3.5.0, PnP Modern Search v4.5.2 & v3.23.0 and one ACE sample delivered. New dates in January-February for Sharing is Caring events. 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
Welcome
to
the
sharepoint
framework
and
viva
connections-
bi-weekly,
sync:
we've
renamed
the
call,
I'm
your
host,
patrick
rogers.
It
is
december
16th.
This
will
be
my
last
call
of
the
year.
So
I'm
wishing
everybody
a
happy
holidays
and
hope
you
get
some
time
off
here
at
the
end
of
the
year
to
relax
and
recharge.
A
Viva
connections
excited
to
see
all
of
those
shortly,
but
first
real
quickly
go
through
opportunities
to
participate
in
the
patterns
practice
program,
or
this
call,
if
you'd
like
to
demo,
please
reach
out
at
the
link
in
the
bottom
right
of
this
slide
to
request
a
demo
spot.
We'd
love
to
have
you
demo,
as
I've
always
said
is.
A
I
think
the
most
valuable
part
of
these
calls
is
to
see
all
the
great
work
you
all
are
doing
out
there
in
the
community
as
well
on
github,
you
can
report
issues,
submit
pull
requests
or
help
others
with
issues
and
questions,
and
as
always,
we
appreciate
your
feedback
about
how
the
calls
are
going.
Documentation
needs.
Where
else
would
can
we
help
positive
feedback?
Is
okay
too?
A
This
is
a
slide
of
links.
There
are
a
lot
of
links
on
this
slide.
This
will
take
you
to
our
developer
videos,
our
community
videos,
our
open
source
repositories,
our
various
sample
galleries.
The
only
link
you
need
to
remember
is
aka
dot.
Ms
slash
m365
pnp
coming
up
next
week
is
the
microsoft
365
platform
call
on
22nd
of
december.
This
is
just
me,
a
social
call
come
and
hang
out
got
questions
we'll
have
a
nice
chat.
A
A
B
C
Samples
sharon
is
carrying
david,
patrick.
Thank
you.
Well,
friends.
As
you
may
know,
this
is
an
open
source
community
and
we
invite
any
and
all
contributions
and
usage
of
these
resources,
but
we
know
there
are
hurdles
that
may
prevent
you,
so
we
want
to
remove
all
those
hurdles
and
you
can
do
that
via
the
sharing
is
caring
program,
they're,
hands-on,
safe
space
opportunities
for
you
to
collaborate
with
the
community,
we'll
walk
you
through
a
guided
session
on
all
of
these
topics,
as
well
as
our
ever
popular
amas,
all
three
scheduled
multiple
times
a
month.
C
We
just
scheduled
out
january
and
february:
please
join
aka
dot.
Ms
forward
slash
sharing
is
caring.
Now,
once
you
join
and
you
get
involved
in
the
community,
we
want
to
celebrate
you,
and
that
is
where
our
recognition
program
comes
in
powered
by
credly
you've
seen
all
those
beautiful
awesome,
badges,
they
can
be
yours
as
well.
We
need
you
to
opt
in
aka.ms
forward,
slash
m365,
pnp
dash
recognition,
and
we
will
ensure
that
you
are
recognized
in
a
variety
of
ways.
We
had
a
lot
of
fun
programs
coming
up
for
2022..
C
A
Awesome
stuff,
thank
you,
david
really,
thank
you
to
everybody.
That's
participated
this
year.
It's
been
fantastic
to
see
the
growth
in
the
patterns
and
practices
community
just
want
to
say.
Thank
you.
Thank
you.
Thank
you
to
all
of
you
for
all
the
hard
work
and
contributions.
It
really
is
outstanding.
Now,
sharepoint
framework
updates
with
facebook
go.
B
Double
down
so,
first
of
all,
1.14
and
public
preview
is
now
available.
We
are
looking
into
your
feedback
and
and
if
there's
any
issues-
and
of
course
we
are
open
for
the
feedback
as
well.
So
there
have
been
a
lot
of
mvps
and
community
members
already
participating
on
the
discussion
around
the
new
features
in
here,
and
thank
you
for
your
feedback
on
that,
because
we
are
building
sharepoint
framework
for
you
and
that's
why
these
beta
previews
are
available.
B
It
is
expected
to
go
ga
in
january
just
to
again
recap
on
the
on
the
growth
of
spfx
right
now.
The
the
highest
spfx
daily
usage
is
actually
from
this
week,
which
is
pretty
cool
before
the
usage
will
stop
up
just
slowing
down
because
of
the
holiday
season.
So
we
are
seeing
really
really
great
growth
again
during
this
autumn
and
we're
expecting
this
to
continue
now
that
we're
extending
spfx
more
and
more
across
the
other
services
as
well.
B
Quick
recap
in
here
and
nothing
too
traumatic,
no
chances
as
such
as
a
1.14
preview
was
released
in
december.
It
is
not
intended
for
production
usage,
but
we
would
be
highly
interested
on
your
feedback
on
that
and,
of
course,
the
new
thing
here,
which
we
mentioned
already
two
weeks
ago,
is
that
we're
looking
into
adding
a
support
for
overriding
the
new
and
edit
panels,
new
view
and
edit
panels
in
the
in
the
listing
libraries,
and
that
is
now
planned
to
be
in
1.15
or
so
within
the
spring
time
frame.
B
D
I
don't
know
if
I
can
go
this
fast,
so
just
to
let
everybody
know
version
2.12
has
been
delayed.
We
didn't
have
any
updates
and
there's
a
couple
things
we'd
like
to
look
at,
but
we've
been
working
really
hard
on
v3,
so
we
have
delayed
the
2.12
release
version.
3
we've
been
talking
about
it
for
a
couple
months.
Now
we
have
that
nightly
build
going
on,
so
you
can
try
out
the
new
version.
Three
branch:
all
the
tests
are
passing
documentation
updates
are
ongoing.
D
So
please
check
out
that
pinned
issue
1636,
which
gives
you
instructions
on
how
to
try
it
out
and
give
us
any
feedback
you
might
have.
We
have
two
open
topics
for
this
week
that
we'd
love
to
see.
If
you
want
to
put
some
comments
in
the
chat-
or
you
know,
respon
put
an
issue
in
the
issues
list.
Either
way
would
be
great.
D
So
because
of
that,
and
because
of
all
the
work
we've
done
to
fully
support
esm
modules
in
in
version
three
we're
strongly
considering
dropping
common.js,
so
we'd
love
feedback
on
what
you
know.
What
your
thoughts
are
on
that,
whether
you
feel
like
that's
a
a
significant
issue,
and
so,
if
you
could,
please
provide
feedback
on
that
we'd
love
it.
The
other
thing
is,
we
have
decided
to
change
well,
mainly
because
it
feels
like
it
would
help.
D
A
A
Retrieving
information
about
aed,
app
registrations,
external
connections
for
microsoft,
search
install
web
languages
and
even
more
working
on
commands
to
manage
apps,
csv
output
and
more
as
well.
You
can
always
install
the
beta
there
with
that
command
line
at
next,
and
you
can
always
install
the
really
slick
docker
container
to
test
out
the
cli
or
use
the
cli
without
having
to
do
any
local
setup.
You
can
run
it
right
there
in
docker
release,
notes
available
there
at
the
link
at
cli,
microsoft,
365
on
twitter,
hashtag,
cli,
microsoft,
365
ak
dot.
A
Ms
slash
cli
dash,
m365,
more
speed,
more
speed,
spfx,
reusable
controls,
reasonable
controls,
react
controls,
350
is
out
spfx
113
branch
support,
enhancements
for
multiple
controls,
updated
localization
for
german
norwegian
and
portuguese.
Various
fixes
release,
notes
there
as
well
and
the
react
property
controls.
Three
two
zero
is
out
with
fast
serve
support
and
various
fixes
330
with
spfx
113.
Star
support
is
coming
soon,
special
thanks
as
always
to
all
the
contributors
there
on
the
reusable
controls.
A
E
Sure
so
version
4.452
is
out
and
then
version
3.23
is
out
version.
4.5
has
some
new
additions
where
you
can
link
more
web
parts.
Frank
will
cover
that
in
the
demo,
so
you
don't
have
to
pass
it
over
to
me
for
the
demo.
There's
also
some
fixes
on
the
smart
navigation
in
sharepoint,
where
the
search
box
broke.
If
you,
if
you
navigate
it
back
and
forth
between
a
pnp
page,
there's
also
a
fix
on
templates,
because
someone
changed
the
indexing
back
in
without
letting
it
anyone
know.
A
F
Wonderful,
thank
you.
So
we
have
a
couple
repositories
available
to
you
where
we
have
samples
for
spfx
extensions
and
spfx
webparts
they're
available
at
a
aka.ms,
slash,
spfx,
extensions
and
parts.
I
don't
know
why
my
fancy
animations
just
stopped,
but
you
know,
if
you
look
at
the
samples
that
we
have
in
those
repositories
right
there.
You
know,
spfx
has
been
around
for
a
long
time
and
sp
affects
every
version
of
spfx
is
potentially
compatible
with
a
a
very
specific
or
set
of
specific
versions
of
node.js.
F
So
one
of
the
things
that
I
would
like
to
propose
for
over
the
holidays
is:
let's
take
a
look
at
these
samples
if
you're
looking
for
a
way
to
contribute,
you
can
actually
look
at
some
of
these
samples
that
are
like
older
or,
let's
say
one
one:
seven,
one,
eight
one
nine
and
upgrade
them
to
the
most
recent
version.
Now
the
web
parts
will
still
work
in
the
older
versions
of
node.js
and
and
spfx.
F
That's
not
what
it's
about
these
samples
are
about
teaching
new
people
or
people
who
want
to
get
started
with
sharepoint
framework.
How
to
do
certain
tasks-
and
you
know
normally
they'll-
have
the
latest
version
of
spfx
installed
and
asking
them
to
go
back
and
forth
between
versions
of
node.js
and
spfx.
It's
probably
not
the
best
way
for
them
to
learn
so
and
if
the
animation
was
working,
I
don't
know
patrick
if
you
can
fast
forward
to
the
the
next
slide,
but
I
am
proposing
a
there.
F
You
go
a
holiday
break
challenge
where,
if
you
contribute
over
the
holidays,
if
you
take
some
of
your
time
off
to
actually
upgrade
a
sample,
we
will
give
you
a
special
badge
and
that's
going
to
be
another
one
of
those
crazy
badges,
so
the
gauntlet
is
thrown
or
whatever
the
holiday.
Equivalent
of
that
is
so
thanks
to
everyone
who
have
contributed
this
year,
I
can't
wait
to
see
what
we're
going
to
do
over
the
next
year,
but
I
know
it's
going
to
be
awesome.
Thank
you.
Everyone
back
to
you,
patrick.
C
He
was
so
caught
up
in
the
festive
spirit
that
he
forgot
all
about
aces
all
right.
Thank
you.
Yes,
aces
aces
aces.
We
got
aces
of
plenty,
so
we
have
a
new
sample
from
jiao
mendez
a
covet
indicator,
a
very
cool
way,
to
kind
of
keep
track
of
the
the
state.
I
know
a
lot
of
organizations
want
to
provide
that
transparency
to
their
organization,
so
go
check
that
out.
We
are
open
for
more
contributions,
feel
free
to
reach
out
to
myself
hugo
or
derek
cash
peterson.
C
We
are
the
maintainers
of
that
and
again
coming
in
february,
we're
going
to
have
that
getting
started
with
viva
connection
aces
sharing
his
caring
session,
our
first
two
part
session,
so
we're
gonna
go
over
all
the
information.
Give
you
a
little
homework.
One
week
later,
we're
gonna
get
together
and
build
aces
together,
it's
going
to
be
really
really
cool.
Look
for
that
to
be
schedulable
or-
or
you
can
sign
up
for
that
here
soon
and
we
invite
the
rest
of
the
community
to
start
taking
advantage.
A
B
B
I
know
I
know
I
know
and
there's
high
five
on
the
back
side,
I
can
say
that
cool
excellent.
Let's
do
some
hand
waving
we're
going
to
do
a
keep
animation
out
of
this
as
well.
So
thank
you
for
everybody
again
joining
today,
really
great
to
have
you
here.
We
will
keep
on
doing
a
community
goal
throughout
the
holiday
season
as
well,
but
not
necessarily
as
this
busy
course
as
this
one.
So
thank
you.
Everybody
awesome,
stuff,
excellent,
patrick.
Let's
get
back
to
you.
A
G
Okay,
so
in
this
quick
demo
I
wanted
to
show
the
extensibility
option
and
customize
up
customization
options
for
the
pnp
modern
search.
So,
let's
jump
in
then
this.
So,
as
you
may
know,
the
pnp
modern
search
web
part
provides
provides
some
default
layouts
that
you
can
use
to
display
the
information.
But
if
you
want
to
fit
exactly
your
requirements,
you
have
some
possibilities
to
extend
this.
The
first
one
is
really
to
use
the.
G
I
will
go
from
basic
to
advanced,
so
the
the
main,
the
most
basic
option
you
could,
you
could
have
to
customize
your
results
would
be
to
use
the
something
called
the
slots.
So
let's
say
I
have
a
cards
layout
here
and
my
data
source
is
sharp
on
such
I
have
the
slot
option
that
can
customize
to
replace
some
fields
in
the
layout.
G
So
let's
say
I
want
to
use
another
property
for
the
title
I
can
use
a
built-in
property,
like
whatever
fight
type,
for
instance,
doesn't
make
any
sense,
but
anyway
and
as
you
can
see,
I
can
just
customize
the
information
display
on
the
on
the
layout
just
by
updating
the
slots.
So
it's
very
basic:
you
don't
have
to
know
any
technical
requirements
here.
G
So
we
go
to
the
next
step
where
we
have
some
options
within
some
layouts.
So
let's
say
cards
and
detail.
Is
they
have
some
options
directly
in
the
layouts
to
customize
a
part
of
the
layout
so,
for
instance,
the
cards?
You
have
managed
cards
fields
here
and
the
detail
list.
You
have
managed
columns.
So
if
we
click
there,
you
will
have
some
options
to
customize
the
column
value.
So,
as
you
may
already
know,
the
sharp
points-
sorry,
the
pinky
modern
search
use,
html,
css
and
handlebars
to
render
the
results.
G
So
in
there
you
can
use
html
and
handlebars
to
customize
completely
the
output
for
this
specific
fields
in
the
layout.
So
in
the
detail
list,
let's
say
I
want
to
create
a
column
with
this
field
and
I
want
to
completely
override
the
result.
I
can
do
that
with
html
css
and
android
bars,
so
in
handlebars,
as
you
can
see,
you
have
some
available
properties
that
you
can
use
inside
the
templates.
G
This
properties
here
comes
from
the
data
context
pro
that
is
provided
to
your
template.
So
to
know
how
the
to
know,
sorry,
what
properties
are
available?
You
can
just
click
on
the
debug
layout
here
and
you
can
see
all
the
properties
that
can
be
used
inside
your
templates.
Okay.
So
if
I
say
I
want
to
use
the
properties
from
my
property
pane,
I
have
the
properties
here
and
can
just
look
up
for
the
probability
I
want
with
the
value,
and
I
can
I
can
use
it
directly
in
my
template.
G
So
that
is
another
option
here
that
you
can
use
so
to
complete
my
example.
Just
modify
the
title
render
here.
You
can
just
use
a
plain
html
or
even
text,
it
works
whatever
whatever
and
I
can
and
I
can
completely
override
the
rendering
for
this
specific
field.
So
this
is
the
step
at
a
layout
level
with
the
card.
Sorry
layout
specific
options.
G
The
next
step
is
to
create
like
custom
templates,
so
you
can
start
from
an
existing
template.
So
let's
say
the
list.
Template
is
the
the
one
I
want
and
I
want
to
write
some
condition
conditional
rendering
I
have
another
option
called
result
types.
So
let's
say
I
want
to
use
the
just
go
back
to
my
slot
and
go
back
to
the
title.
It
would
be
easier
here
for
the
condition
so,
okay,
so
let's
say
I
want
to
condition
to
have
conditional
rendering
for
rows.
G
G
G
So
this
is
another
option
to
run
to
customize
the
the
display.
The
other
version
is
to
go
full
custom.
So
to
do
that,
we
provide
like
a
starter
template
the
custom
template
that
you
can
use
to
completely
override
the
results.
So
from
here.
If
you
click
there,
you
have
the
template
the
old
template
available
here,
so
it's
html,
css
and
handlebars.
So,
like
I
said
you
can
grab
the
values
from
the
data
context
and
use
them
inside
your
templates,
and
you
can
also
use
css
rule
ears
that
only
apply
inside
your
web
parts.
G
So
if
you
declare
some
css
classes
here,
they
are
only
available
inside
your
components.
So
if
you
inspect,
for
instance,
the
the
output
of
this,
you
will
see
the
pnp
template
here
is
prefixed
by
an
id.
It's
not
really.
There
is
always
an
id
here
that
isolates
the
old
css
classes
inside
your
component,
so
to
prevent
any
conflicts
with
global
css
classes.
So
you
can
safely
create
your
styles
here,
what
else?
G
You
have
a
complex,
dedicated,
there's,
also
a
repository
dedicated
to
this
handlebars
and
helpers,
and
you
will
see
all
the
available
helpers
that
you
can
use
to
format
your
html
inside
a
template,
and
you
can
also
refer
to
the
web
part
documentation
to
to
see
the
custom
helpers.
We
we
provide
as
well
okay,
so
this
is
another
option
to
customize,
so
you
can
just
customize
the
template
like
in
place.
G
This
is
not
really
the
recommended
approach,
because
the
content
of
the
template
is
embedded
in
inside
the
web,
probably
back,
which
is
not
a
really
good
thing
if
you
like,
remove
the
web
part
from
the
page.
So
the
recommended
approach
is
to
use
an
external
template,
so
a
basic
html
file
that
you
can
upload
in
the
same
site
in
a
document
library,
it
works
the
same,
so
you
can
just
manage
your
templates
in
a
more
centralized
way.
G
The
last
customization
option
you
will
have
is
using
the
extensibility
library
and
that's
really
what
I
want
to
cover
in
this
call
is
the
extensibility
library.
So
we
provide
an
extensibility
model
for
the
pnp
model,
search
through
the
pnp
modern
search,
extensibility
samples
repository
that
you
can
see
on
the
microsoft
search
organization.
So
it
is
not
the
modern
search,
it
is
the
pnp
model,
search
extensibility
symbol
so
from
here
just
clone
the
solution-
and
you
will
have
some
awesome
example.
Code
example
that
you
can
use
to
extend
the
experience.
G
So
when
we
say
extend
the
experience
and
write
extensions,
you
can
write
custom
components,
web
components
inside
a
template,
so,
for
instance,
the
pnp
stuff
are
web
components.
So
you
can
write
your
own
custom
layouts
for
the
new
version.
We
all
owe
these
options,
custom
suggestion
providers
for
the
search
box
and
also
custom
enterprise
helpers,
and
that's
will.
I
will
show
you
right
now,
so
I've
downloaded
the
solution
and
just
executed
in
vs
code,
and
it
is
a
sharepoint
framework
library
component,
so
it
works
the
very
same
like
a
web
part.
G
So
whatever
it's
the
same,
so
you
you
create
a
you,
you
do
a
gulp
bundle
you
have
to
serve
or
whatever
it
all
works.
So
basically
you
have
to
package
the
application
with
the
gulps
girl
package
solution
command
and
then
upload
it
to
your
app
catalog,
the
same
app
catalog
where
the
pnp
mono
search
web
parts
are
deployed.
G
So
you
choose
your
extensibility
package
here
and
you
update
it
in
your
catalog.
So
it's
really
important
for
a
sharpened
framework
library
component
to
to
check
this
option
to
make
this
solution
available
to
our
site,
because
it's
not
really
an
application
on
its
own.
So
you
have
to
check
this
option
to
make
it
work.
So
you
click
on
deploy
and
now
I
will
show
you
how
to
debug
this
thing.
G
So
it's
like,
I
said
it's
a
regular
shopping
framework
solution,
so
you
can
debug
the
application
the
same
way
you
you
do
for
weapons,
so
I
have
a
workbench
here
so
on
this
on
the
same
site,
I
will
just
add
the
pnp
search
results
on
the
page,
and
I
can
quickly
go
to
the
layers
to
see
if
my
extensions
are
correctly
deployed.
If
you
see
that
the
custom
layout
that
it
means
the
the
extensibility
blurry
has
been
currently
deployed
and
to
or
to
register,
to
make
sure
the
registration
is
correct.
G
G
G
G
So
in
a
component
when
you
write
a
layout,
you
can
pass
some
objects
from
the
con.
The
context
with
this
specific
notation,
the
data
blah
blah
blah
and
you
can
just
write
you
can
just
use
the
probably
from
the
contest
like
a
I
said
earlier,
and
the
typing.
If
the
tag
conversion
is
done
automatically
for
you,
for,
for
instance,
you
can
pass
string,
object,
date,
number
or
boolean
and
in
your
component
it
will
be
resolved
in
the
proper
type
already.
G
G
In
the
base
web
component
class,
you
will
have
a
service
code
which
is
the
root
server
scope
to
resolve
the
shared
services
on
the
page
and
when
we
are
talking
about
search,
sorry,
shared
services,
we're
talking
about
sp,
http,
client,
ms
graph
client,
or
something
like
this,
and
you
can
just
use
this
service
scope
to
consume
an
instance
of
sp
http
clients
or
whatever.
You
need
to
do
your
call
and
do
the
the
call
you
want
to
grab
data.
G
It's
very
useful
if
you
want
to
write
like
dynamic
components,
and
is
this
the
same
for
all
all
components
in
terms
of
customization
you
can
make
inside
the
extension
extensibility
library.
You
have,
of
course,
the
custom
components
you
have
also
the
custom
layouts.
Basically,
the
custom
layouts
allows
you
to
save
properties
inside
the
web,
app,
probably
back
so
you
can
use
them
in
your
comp
in
your
template.
G
So
you
just
you,
just
have
to
define
the
fields
in
the
property
plan
you
want
to
to
use.
You
have
also
the
option
with
the
custom
suggestion
provider.
So
basically
the
custom
suggestion
provider
is
typed
into
the
search
box
here
and
if
I
go
to
the
enable
query
suggestions,
I
will
see
now
my
custom
suggestion
provider
loaded
and
I
can
just
enable
or
disable
it
and
and
when
I
click
here
I
can
just
customize
the
results
that
are
displayed
here
and
it's
all
configurable
all
configurable
here.
G
As
you
can
see,
I
can
really
completely
override
the
experience
and
provide
custom
results
for
my
for
my
users,
so
custom
components,
custom,
layouts,
custom,
suggestion
provider
and
the
last
one
is
the
handlebar
customizations
that
you
can
also
use
to,
because
so
use
to
create
your
own
helpers
as
well.
Within
your
templates,
these
help
us
will
be
available
for
all
the
templates,
the
web
parts
and
the
the
searches
that
were
parts
and
the
filters.
What
parts?
G
A
All
right,
thank
you
very
much
for
that
very
cool
to
see
all
those
advanced
capabilities.
A
lot
of
great
work
has
gone
into
that
encourage
everyone
to
check
that
out,
not
just
to
use
it,
but
maybe
to
learn
from
it
a
little
bit
as
well.
Zach
roberts.
You
are
up
next
with
react.
Graph
group
viewer
all
right.
Let's
get
going.
H
All
right
so
I'll
tell
every
long
demo
here
so
we'll
pop
into
the
web
part
to
look
at
it
first.
So
simple
part,
just
a
text
field
here
start
searching
for
your
groups
once
you
start
typing
in
a
name
of
a
group,
this
will
start
to
populate
this
list
down.
Here
it's
going
to
make
a
graph
a
microsoft
graph
call
searching
on
the
display
name
as
you
type.
You
can
then
select
a
group
here
from
the
list
and
down
here.
It's
going
to
load
this
component
in
here.
B
H
So
clicking
the
view
members
button
will
load
the
members
of
that
group.
You
can
see
here
there's
an
email
address
attached
to
that
user.
They'll
show
here
as
well.
You
can
use
the
search
bar
here
to
just
filter,
that's
a
oops
free
search.
They
will
put
a
test
in
their
name,
but
you
can
filter
them
out.
If
you're
looking
for
a
larger
group,
you
can
filter
that
down
there
export
to
csv.
This
is
say
using
a
react
component.
H
H
So
we
have
our
that
text
field
right
here
and
the
other
and
on
change
event,
we're
going
to
take
the
the
text
value
and
pass
it
into
our.
The
search
groups
function
right
down
here
and
that's
going
to
make
this
graph
call
right
here.
So
it's
going
to
turn
the
top
five
results.
You
know
it
could
be
some.
You
know
improvements
to
this.
Where
you
know
you
could
have
a
in
the
properties
palin.
We
could,
you
know,
adjust
how
many
results
we
want
to
turn.
H
H
H
We
have
the
selection
mode
of
single,
so
I'll
use
select,
select
just
one
component
at
a
time
on
selection.
We're
going
to
calling
this
function
here
and
getting
or
passing
all
the
items
and
the
details
into
this
module
here
or
the
model
display
name
description
id
for
the
group
and
we're
setting
the
selected
group
here
with
the
selected
group
when
it's
the
state
value
is
not
null
we're
going
to
display
this
component
or
here
so
group
details
is
that
that
component.
H
That
shows
right
here,
the
group
description
or
the
name,
and
so
that
will
be
right
in
here,
and
so
we
have
that
the
button
on
this
component,
where,
when
you
on
click,
it's
going
to
you
know
control
showing
that
panel.
You
know
just
that
the
the
state's
not
not
true
or
false
there,
and
during
that
members
list.
H
We
have
another
component
here
with
some
props
that
we're
passing
into
with
the
group
name
and
the
group
id
so
based
on
the
group
id
that
members
list
that
loads
in
we
will
have
when
this
component
loads
when
it
mounts
here.
So,
let's
react
component
on
mount,
we're
going
to
run
the
load
members
and
so
we're
going
to
set
our
state
to
loading.
H
So
if
you
have
a
slow
connection
there,
it's
going
to
have
a
little
loading
bar
there
we're
calling
the
the
get
members
function
passing
in
the
the
selected
group
id
and
we're
going
to
wait
for
that
response
here.
So
it's
going
to
do
the
tmp
graph
call
get
the
group
members
by
the
id
it's
going
to
return
that
and
then
we're
going
to
once
we
get
that
response
back
we're
going
to
set
our
state
into
the
values
here,
so
that's
kind
of
how
it
all
flows
together
there
and
yeah.
A
I
I
We
have
four
different
products:
dividend
sites,
viva
topics,
learning
and
connections
well,
design
sites
is
the
service
or
the
product
that
will
help
people
to
achieve
a
better
work-life
balance.
So
it
is
a
service
which
provides
insight
to
the
user
to
the
employees
of
a
company
in
order
to
better
understand
how
to
manage
their
time
and
how
to
manage
their
work-life
balance,
and
it
will
also
provide-
and
it
provides
information,
for
example,
to
managers
or
leaders
about
how
the
employees
are
performing
and
managing
their
life
and
work
balance.
I
Of
course,
in
the
full
respect
of
privacy,
then
we
have
viva
topics
which
is
focused
on
helping
people
to
manage
and
organize
and
find
their
content
in
the
company.
We
have
a
viva
learning,
which
is
the
solution
for
helping
people
to
learn
and
to
train
employees
through
an
offering
of
training
material,
fully
integrated
with
the
max
25
ecosystem,
but
provided
not
only
by
microsoft,
but
mainly
by
external
partners,
training
partners
and
at
the
end
we
also
have
the
viva
connections
offering,
which
is
the
we
can
call
it.
I
The
company
branded
experience
for
employees.
All
of
these
products
are
fully
integrated
with
the
microsoft
ecosystem,
accessibility
and
specifically,
with
microsoft
teams
and
especially
viva
connections,
can
provide
its
own
interface
either
through
the
mobile
experience,
with
a
connection
or
through
a
viva
connection,
desktop
experience,
which
is
fully
integrated
with
microsoft
teams.
I
Now,
as
developers,
we
can
extend
the
microsoft
viva
connections
using
sharepoint
framework,
which
is
as
I've
wrote
in
this
slide,
the
uppercase
t
extensibility
framework
for
the
whole
micro365
ecosystem.
In
fact,
we
can
use
spfx
to
extend
sharepoint
online
clearly,
but
we
can
also
use
it
to
extend
the
teams
and
we
can
use
it
to
extend
microsoft,
viva
connections
as
well,
and
we
can
do
that
with
multiple
options.
I
One
is
to
create
the
so-called
adaptive
card,
extensions
that
we
will
cover
now,
but
we
also
have
other
options
like
creating
a
part
or
application
customizer
with
sharepoint
framework.
In
fact,
the
viva
connection
desktop
experience
is
nothing
more
than
a
sharepoint
online
page
enriched
with
viva
connections
with
the
viva
connection
dashboard.
But
at
the
very
end
we
can
extend
it
with
web
parts
or
application
customizer
that
we're
used
to
building
with
the
spfx.
I
I
Just
to
give
you
an
idea.
This
is
just
a
screenshot
of
the
viva
connection,
desktop
on
the
left
side
and,
as
you
can
see
here,
we
have
the
dashboard
with
a
set
of
cards,
rendering
different
kind
of
information,
helping
employees
to
live
a
better
work
life
in
their
company
and
on
the
right
side
we
have
the
mobile
experience
still
with
the
adaptive
card
extensions.
I
How
can
we
create
adaptive
card
extensions
and
let's
try
to
understand
what
adaptive
card
extension
are
from
a
developer
point
of
view?
Well,
an
adaptive
card
extension
is
nothing
more
than
a
card,
so
a
ui
component
rendered,
as
we
already
said,
in
the
desktop
or
in
the
mobile
experience
of
viva
connection,
which,
from
a
sharepoint
framework
point
of
view,
are
implemented
simply
like
a
new
flavor
of
extension
that
we
can
create
with
hpfx.
I
So
you
know
nowadays
with
spfx
we
create
webparts.
We
can
create
application.
Customizer
we
can
create
a
list
customize
or
list
view
customize
and
stuff
like
that.
We
can
also
create
with
113
the
adaptive
card
extensions
and
when
we
do
that,
we
can
rely
on
two
different
main
flavors
of
ui
components,
the
card
views
and
the
quick
views,
and
we
will
dig
into
them
shortly.
In
this
demo.
I
The
card
views
render
a
really
simple
ui
and
at
the
entry
point
of
any
adaptive
card
extension,
the
quick
views
are
more
complex,
potentially
more
complex,
ui
components
which
will
be
rendered
based
on
the
adaptive
card,
json
syntax
provided
by
microsoft,
not
only
for
the
adaptive
card
extensions
but
generally
speaking,
for
a
lot
of
or
most
of
the
workloads
that
we
have
in
microsoft.
365.
I
In
fact
we're
going
to
use
the
adapted
countries
on
when
we
create
extensions
for
teams
when
we
create
both
what
we
want
to
extend
the
ui
of
the
power
platform
with
power
automate,
providing
input
to
the
users
and
stuff
like
that,
so
the
adaptive
cards
are
nowadays
almost
everywhere,
including
in
the
hpfx
development
experience
when
we
create
adaptive
card
extensions
for
viva
connections.
So
let
me
move
to
my
demo.
I
Environment
and
let
me
explain
you
how
to
create
step
by
step,
your
very
first
adaptive
cab
extension
with
fpfx
and
before
starting
to
creating
the
real
elliptical
extension.
I
just
want
to
show
you
what
the
result
will
be
so
that
we
can
be
all
on
the
same
page.
While
I
will
work
on
the
visual
studio
code,
side
of
the
story
and
in
the
command
line
tool.
So
this
is
the
hello
world
of
an
adaptive
card
extension
rendered
in
the
workbench
of
sharepoint
framework.
I
I
Of
course,
these
cards
can
also
be
configurable,
so
I
can
go
to
the
edit
mode
of
the
workbench
and
we
can
see
that
by
clicking
on
the
pencil,
we
can
also
configure
the
adaptive
card
extensions
to
define
what
kind
of
rendering
we
want
to
have
and
eventually
what
kind
of
properties
we
want
to
provide
to
configure
the
relative
code.
It's
like,
as
it
happens
for
any
other
web
part
that
we
have
that
we
can
create
with
spfx.
I
I
Like
always,
we
have
to
provide
a
solution
name
and
the
target
for
our
solution
will
be
sharepoint
online.
Only
in
this
scenario,
because
we
are
creating
something
which
will
work
on
the
cloud
only
in
mexico
365
only
I'm
going
to
use
the
current
folder
for
storing
the
scaffolded
files,
and
I
want
to
make
my
solution
tenant
wide
available
to
make
it
easier
to
use
it
in
the
in
the
viva
connection
dashboard
right
now.
I
I
will
not
select
to
use
an
isolated
permission
model,
and
here
we
are
now
we
can
also
in
version
113
choose
if
we
want
to
create
not
only
a
web
part,
an
extension
or
a
library,
but
also
an
adaptive
card
extension,
which
is
the
new
option
that
we
have
by
selecting
this
option,
we
will
also
have
the
capability
to
define
or
to
choose
what
card
view
flavor.
We
want
to
create
first.
What
do
I
mean?
I
Well,
when
you
create
an
adaptive
cut
extension,
you
will
have
at
least
one
card
view
defined
in
the
adaptive
card
extension,
and
through
these
set
of
options
we
can
select
the
flavor,
the
behavior,
the
ui,
rendering
of
the
very
first
curve
view
that
we
are
going
to
scaffold
in
our
solution.
That
means
that
we
can
add
additional
curve,
views
and
quick
views
if
we
like,
and
we
will
be
able
to
choose
different
layouts,
but
here
we
can
make
the
choice
for
the
very
first
one
and
I
will
go
with
the
default
ones.
I
I
I
Adaptive
card
extension
type
that
we
have
now
in
sharepoint
framework.
So
just
a
new
base
type
that
we
can
extend
to
create
our
own
extensions
and
components,
notice
that,
like
it
happens
for
most
of
the
components
that
we
have
in
spfx
and
for
sure
for
react.
We
have
the
definition
of
an
interface
for
the
properties
and
the
state
of
our
adaptive
card
extension.
So
the
properties
will
be
those
that
we
can
configure
using
the
property
pane
in
the
ui.
I
So
this
area
of
the
ui
and
as
you
can
see
here,
the
interface
defining
the
properties
simply
defines
a
title.
A
description
and
an
icon
property,
then
we
have
this
data
which
will
be
used
and
again
we
will
cover
more
deeply.
This
topic:
the
management
of
state
and
properties
in
one
of
the
upcoming
sig
demos.
But
again,
through
this
data,
we
can
manage
the
state
of
the
adaptive
graph
extension
in
the
unit
method
of
our
ace.
We
simply
define
the
initial
state
and
then
this
is
really
important.
I
We
register
through
a
set
of
navigators,
the
card
navigator
and
the
quickview
navigator.
We
register
the
cars
that
we
want
to
use
to
render
the
ui
of
our
adaptive
card
extension.
As
I
told
you,
we
have
two
main
categories
of
cards.
We
have
the
card
views
and
the
quick
views
and
we
have
two
different
navigators,
one
for
the
car
views
and
another
one
for
the
quick
views.
I
So
here
I'm
just
saying:
okay,
please
register
in
the
collection
of
card
views,
the
card
view
that
got
generated
by
this
scaffolding
tool
and
we
will
see
it
shortly
with
a
specific
card
id,
which
is
nothing
more
than
a
unique
string,
identifying
the
card
I'm
going
to
register,
and
the
same
applies
for
the
quick
view,
which
will
be
yet
another
type
scaffolded
by
the
scaffolding
tool.
And,
of
course
you
can
create
your
owns
and
it
will
be
registered
in
with
quick
view
navigator.
I
Then
we
also
have
a
section
emitted
actually
to
render
the
property
pane,
and
this
is
an
interesting
behavior
for
the
generated
code.
We
have
the
property
pane
stored
in
an
external
file,
so
there
is
a
dedicated
class
this
one
in
which
we
still
render
with
the
same
behavior.
We
are
used
to
using
in
any
sharepoint
framework
web
part,
but
we
are
rendering
here
the
groups
of
properties
and
the
fields
that
we
want
to
make
configurable
in
the
ui
of
the
property
pane.
I
I
Now
we
are
using
the
base
primary
text
card
view,
because
I
made
the
choice
to
use
the
primary
text
flavor
when
I
scaffolded
the
solution,
but
we'll
see
that
there
are
additional
options
that
we
can
choose
from
and
again.
This
card
view
component
extends
this
type,
providing
the
type
of
the
properties
and
of
the
state
that
will
be
used
to
manage
and
to
provide
property
state
to
the
current
component
and,
as
you
may
notice,
these
interfaces
are
exactly
those
that
I
defined
in
the
extension
class.
I
In
fact,
those
are
exported
and
imported
right
here
in
this.
Oh
sorry,
in
this
card
view
source
code
file,
you
see
import
and
I'm
importing
those
files
from
the
extensions
meaning
that
they
are
exactly
the
same
interfaces
and
that's
because
and
again
we
will
go
deeper
on
this
topic
in
one
of
the
upcoming
sequels.
But
again
we
are
sharing
the
same
properties
in
the
same
state
across
all
of
the
card
views
and
all
of
the
quick
views
in
your
adaptive
card
extensions.
I
So
the
properties
and
the
state
of
the
main
extensions
are
also
available
and
shared
with
all
of
the
card
views,
and
you
will
see
also
with
all
of
the
quick
views
now
in
the
card
view,
we
have
a
pre-defined
rendering
provided
by
microsoft.
We
have
three
different
flavors
and,
depending
on
the
choice
we
will
make,
we
will
have
a
specific
rendering
for
the
card
view.
This
one
will
simply
render
a
text
message.
I
In
fact,
if
we
go
back
to
the
ui,
you
can
see
that
we
just
have
a
title
and
a
text
and
eventually
can
render
one
or
two
buttons
no
more
than
that,
either
one
or
two
buttons.
How
does
it
work?
Well,
we
have
a
get
card,
buttons
method,
that
we
will
be
invoked
by
the
spfx
infrastructure
and
the
result
can
be
undefined
or
one
icard
button
instance,
or
an
array
of
two
I
card
button
instances,
meaning
that
we
can
return
one
button,
two
buttons
or
no
buttons.
I
A
single
button
will
be
defined,
providing
the
type
of
the
action
that
we
want
to
associate
with
the
button
and
right
now,
the
action
that
we
have
is
quick
view,
meaning
show
a
quick
view
which
one
the
one
with
the
id
that
we
registered
defining
our
adaptive
card
extension
right
here.
So
at
the
very
end,
it
means
by
clicking
on
this
button,
simply
render
the
quick
view
which
is
defined
here
in
yet
another
class,
the
quickview
class,
which
again
inherits
from
a
specific
base
class,
the
base,
adaptive
card
view
and
again,
one
more
time.
I
It
leverages
the
same.
Exactly
the
same
properties
and
state
interfaces
that
we
defined
in
the
adaptive
card,
extensions
that
we
saw
first
so
again,
the
properties
and
the
state
are
shared
with
this
quickview
and
with
any
other
quickview
that
we
have
in
this
adaptive
code
extension.
But
whenever
you
create
a
quickview,
you
also
have
the
option
to
provide
another
interface
which
will
define
a
specific
container
of
data
which
will
be
used
to
render
the
ui
of
the
quick
view.
I
This
is
a
fully
customizable
interface
and
again
this
scaffolded
one
simply
provides
a
subtitle,
a
title
and
description,
and
the
purpose
of
this
interface
is
that
we
have
a
get
data
method
provided
by
the
quick
view
class,
which
will
simply
return
an
instance
of
this
interface
and
which
will
be
used
by
the
adapter
card,
json
associated
with
the
quick
view
in
which
we
are
for
rendering
the
actual
ui
of
the
quick
field.
So
here
we
say
in
the
get
template
method
that
the
template
for
this
quick
view
is
defined
in
this
json
file.
I
I
Actually,
this
is
based
on
version
1.2
and
we
can
go
up
to
1.3
in
the
elapsed
card
extensions
built
with
spfx,
so
you
can
use
the
sk,
the
syntax
of
the
adaptive
card,
json
schema,
and
here
we
simply
define
through
the
adapter
card
syntax,
that
we
have
a
card
with
a
specific
body
which
will
have
a
text
box
block
in
the
boulder
text,
which
will
render
the
title
property
of
the
interface
that
we
defined
here.
So
this
property,
which
means
this
value,
which
will
come
from
the
resources
of
our
sharepoint
framework
solution.
I
And
then
we
say
that
we
have
a
column
set
in
which
we
want
to
render
just
one
column
with
yet
another
text
block
still
bolder,
which
will
render
the
subtitle
of
the
object
that
we
defined
in
the
quick
view.
So
this
property
and
last
but
not
least,
we
render
one
last
text
block
with
the
description
still
coming
from
the
quick
view.
Data
type
definition
so
really
simple.
I
I
I
A
Awesome
stuff,
thank
you,
paulo
thank
you,
zach!
Thank
you,
frank
and
mikhail
for
those
great
demos
and
bringing
us
in
under
time.
We
got
a
few
minutes
left.
So
just
want
to
thank
everybody
again
for
everything
this
year.
We
do
have
a
couple
more
community
calls,
but
this
will
be
my
last
one
for
the
year.
So
just
wanted
to
say
thank
you
to
all
of
you
out
there
in
the
community
for
everything
you
do
and
for
participating
and
helping
each
other
out.
It
really
is
fantastic
to
see.
A
I
hope
everybody
gets
some
time
off
and
some
time
to
reflect
and
relax
here
at
the
end
of
the
year
and
wish
everyone
the
very
best
for
the
new
year.
So
thank
you.
Thank
you.
Thank
you
from
myself
and
everybody
else
on
the
team.
As
always
a
recording
video
of
about
24
hours.
You
can
follow
us
on
twitter.
Our
viva
connections,
spfx
call,
will
be
december.
30Th.
That
call
will
happen.
A
David
warner
is
going
to
cover
the
hosting
duties
there
and
we
have
the
next
general
dev
call
december
23rd
developer
community
calls
if
you're
interested
in
any
of
our
other
calls
microsoft.
365
platform
call
every
tuesday,
as
well
as
adaptive
cards
and
a
bunch
of
other
great
calls.
If
you'd
like
to
check
those
out,
you
can
find
the
invites
there
aka
ms
slash
m365
pnp.