►
Description
Viva Connections & SharePoint community call on April 21. Demos - Introduction to Adaptive Card Design Gallery reusable reference sample, Using Adaptive Cards control from the PnP control gallery in SPFx solutions, and Navigating Cards in Viva Connections ACEs. Project releases for SharePoint Framework – v1.15 (Beta), CLI v5.2, and PnP Modern Search – v4.6.1. Announced new Microsoft 365 Unified Sample Gallery and delivered samples – 1 extension, 9 web part, and 4 ACE. Registration open for Ask me anything (AMA) – Viva ACE event, Tuesday, April 26th. 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
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365pnp
A
Hello
and
welcome
to
the
sharepoint
framework
and
viva
connections-
bi-weekly
sync,
it
is
april
21st
2022,
I'm
your
host
on
this
call,
patrick
rogers
back
again
got
a
great
agenda
for
you.
This
week
latest
updates
on
sharepoint
framework,
some
updates
across
the
patterns
and
practices
program.
New
community
samples
are
optional
picture
time
and
together
mode,
as
well
as
three
great
demos,
from
derek
on
adaptive
card
design,
gallery
fabio
on
using
adaptive
cards,
controls
for
the
pmp
to
control,
gallery
and
spfx
solutions
and
paulo
from
navigating
cards
and
viva
connections
aces.
A
So
three
great
adaptive
card
based
demos
coming
up
for
you
today,
so
excited
to
see
that,
but
first
some
updates
across
the
program
here.
So
as
always
opportunities
to
participate
in
this
call
or
the
program
all
up,
we
would
love
love
love
to
have
you
join
our
call
to
do
a
demo
to
show
off
the
great
work
you
are
doing
for
your
company
or
your
customers,
and
to
do
so,
please
follow
that
link
in
the
bottom
right
corner.
A
There
ak
dot,
ms
m365
pnp,
slash,
request,
slash
demo
and
we
would
love
to
get
you
scheduled
in
for
a
demo.
It
might
be
a
couple
of
weeks
couple
of
months
out,
potentially
depending
on
how
things
are
scheduled.
You
know
at
the
current
time,
but
we
will
definitely
get
you
on
a
call
and
encourage
you
to
reach
out.
I
would
love
to
have
you
be
on
the
call
and
demo
with
us
as
well.
A
You
can
always
contribute
on
github
across
the
many
organizations
that
are
involved
in
the
open
source
at
microsoft,
all
of
which
mostly
accept
your
issues,
pull
requests
and
as
well.
The
great
way
to
help
is
to
jump
in
with
issues
and
questions.
Others
might
have
if
you
happen
to
have
an
answer
for
them
and
as
well
always
welcome
your
feedback
on
everything
we're
doing
in
patterns
and
practices.
How
are
these
calls?
How
is
our
documentation?
Where
else
can
we
help
and
positive
feedback?
Is
okay
too?
A
If
you
like
something
we're
doing,
perhaps
we
can
do
a
little
bit
more
of
it.
We
have
tons
and
tons
of
great
content
for
you
to
review,
all
of
which
can
be
found
by
going
to
ak
dot.
Ms
m365
pnp.
That
link
is
on
the
far
right
of
the
screen
and
there
you
will
find
links
and
descriptions
to
get
you
to
our
developer.
Videos,
which
are
topic,
focused
videos
and
how
to
perform
various
development
tasks.
So
perhaps
some
authentication
setting
up
a
web
part
things
like
that.
A
We've
got
community
videos
which
are
going
to
be
the
recordings
of
all
of
our
community
calls.
So
this
one
and
our
other
calls
as
well.
So
if
you
miss
an
episode
or
want
to
catch
up
on
something
you
heard,
you
can
always
check
those
out
on
youtube.
Recordings
are
typically
available
about
24
hours
after
the
given
call.
A
We
have
a
ton
of
great
open
source
organizations,
pnp
office,
dev,
microsoft,
graph
and
sharepoint,
all
of
which
are
open
and
welcome
your
participation,
feedback
and
ideas,
so
encourage
you
to
get
involved
in
all
the
places
that
you
are
interested
in
they're,
all
very
welcoming
and
all
great
places
to
jump
in
and
get
involved.
We
have
a
bunch
of
great
sample
galleries,
all
of
which
can
be
found
from
ak
dot.
Ms
slash
m365
pnp
that
main
link
again
and
those
are
going
to
be
team
samples.
A
A
I
think
we
first
announced
this
last
time,
but
this
is
a
great
way
to
find
samples
across
many
many
repositories
so
without
having
to
go,
find
them
yourself.
This
is
a
great
way.
It's
got
a
searchable
interface.
Everything's
categorized
hugo
actually
walked
me
through
this
yesterday,
really
exciting.
To
see
how
easy
it
is
so
we'll
be
working
to
add
even
more
samples
into
this.
A
That's
a
fantastic
resource
that
can
be
found
at
ak
dot,
ms
slash
m365
samples,
and
that
is
sourced
from
a
bunch
of
different
places
covering
a
bunch
of
different
technologies,
so
really
a
really
valuable
place
to
check
out
and
really
excited
to
see
that
start
to
grow
and
get
even
more
content
there.
For
folks,
I
think
yesterday,
when
we
look
there's
already
over
a
thousand
samples
listed
in
the
gallery
there,
so
a
wonderful
resource
for
the
community
to
get
started
there,
and
then
next
tuesday,
we've
got
our
microsoft.
A
365
platform
call
it's
on
the
26th
of
april
at
8
a.m,
pacific
time
and
that's
the
weekly
call
where
microsoft
folks
walk
you
through
what
the
latest
stuff
from
engineering
is,
and
then
we've
got
two
demos
or
explanation,
or
example,
call
or
whatever,
we'll
just
call
them
demos
from
devyanka
and
michelle
for
about
creating
an
app
that
extends
across
teams,
outlook
and
office,
and
we've
got
waldek
and
alex
talking
about
easily
fixing
errors
in
your
spf
x
projects
with
the
cli
for
microsoft.
365.
A
both
of
those
are
going
to
be
very
cool
demos.
To
see,
I'm
excited
the
more
and
more.
We
can
get
apps
that
cross
the
boundaries
in
m365.
I
think
that's
super
valuable
to
both
us
and
the
community
and
everybody
building
solutions,
because
your
solution
can
appear
in
so
many
more
places
so
much
easier
than
it
is
today.
So
an
area
that
I
love
seeing
improvements
in-
and
I
know
it's
gonna-
be
a
great
session
next
week
on
that
so
encourage
you
to
join
us
next
tuesday
and
as
well.
B
His
caring
excellent,
thank
you,
patrick
well,
friends,
as
you
mentioned,
there
are
so
many
samples
out
there
guess
how
they
got
there
by
amazing
contributors.
Like
yourself,
we
welcome
anyone
and
everyone
to
contribute
back
to
the
community,
but
we
understand
that
there
may
be
times
where
some
of
those
hurdles
like
I
don't
know
how
do
I
do
a
pull
request?
What
is
a
pull
request?
How
do
I
get
more
involved?
All
these
questions
we
want
to
answer
for
you
and
we're
going
to
do
it
in
sharing
is
caring
opportunities.
B
These
are
sessions
that
are
live,
hands-on,
safe
space,
not
recorded.
You
can
ask
any
and
all
questions,
and
we
will
walk
you
through
a
variety
of
topics.
The
session
topics
that
you
can
see
there
are
available
and
they
are
live.
We
will
do
it
together,
so
don't
hesitate
to
take
advantage
of
them
aka
dot.
Four
slash
sharing
is
caring
and
they
are
all
free
and
available
to
start
scheduling
for,
and
we
also
have
an
upcoming
ama
specifically
on
viva
connections.
Extensibility
adaptive
card
extensions-
this
is
happening
next
week,
don't
hesitate.
B
This
is
going
to
be
with
the
engineering
team.
So
this
is
a
really
fantastic
opportunity
to
collaborate.
Ask
questions
live
it's
a
lot
of
fun
because
it's
always
just
spontaneous
questions.
A
lot
of
good
conversation,
a
lot
of
amazing
opportunities
and
features
have
even
come
from
these
amas,
so
don't
hesitate
to
register.
B
It
is
going
to
occur
next
tuesday,
directly
after
the
platform
call
that
patrick
had
mentioned
just
previously
so
register
for
it
we'll
get
you
the
link
and
we'll
invite
everyone
to
it's
gonna
be
a
lot
of
fun.
Now,
once
you
have
contributed
to
our
community,
we
want
to
celebrate
and
recognize
all
the
amazing
work
that
you're
doing
so.
The
recognition
program
is
here
to
provide
that
celebration
and
recognition.
It
is
absolutely
free.
It
is
powered
by
credly,
yes,
that
same
credly.
That
gives
you
those
badges.
B
When
you
get
a
microsoft
certification,
our
community
badges
sit
right
next
to
them.
You're
able
to
share
them
with
clients
and
managers
show
how
involved
you
are,
how
you're
making
a
difference
in
the
community
and
in
the
industry.
It
is
absolutely
free.
We
do
need
you
to
opt
in
ak,
ms
forward
slash
m365
pnp
dash
recognition.
You
only
need
to
do
that
once
and
we'll
track
you
from
there
going
forward
year
after
year,
so
don't
hesitate
to
take
advantage.
We
want
to
recognize
and
celebrate
patrick
back
to
you.
C
Framework
yay
so,
first
of
all,
there's
a
new
update
on
sharepoint
framework
1.15,
so
this
is
still
in
public
preview,
but
this
latest
update,
which
came
out
two
days
ago,
if
I
remember
correctly,
whenever
I
push
the
button
anyway,
we
introduced
the
first
version
of
the
list,
form
extensibility,
and
so
you
can
actually
start
building
sharepoint
framework
based
list
forms
for
editing
views
and
new
experiences.
So
this
will
be
the
first
well
first
time
ever
and
that's
actually
possible
in
support
right
now.
C
We
are
actually
missing
a
detailed
tutorial
on
that.
That
is
actually
on
me
because
all
of
the
things
on
the
table,
but
there's
a
video
where
we
walk
through
the
process
on
how
to
get
started
and
how
you
walk
through
and
create
one
of
those
components.
So
you
can
use
that
video,
which
is
in
the
associated
blog
post
announcement,
blog
post
and
in
the
in
our
youtube
channel.
C
C
C
So
still
some
time
on
on
adjusting
on
things.
We
keep
on
introducing
the
new
features
as
part
of
these
preview
releases
as
we
get
closer
and
closer
to
the
gi
version.
The
last
point
on
this
line
is
also
calling
out
something
really
cool.
What
we're
also
building,
which
is
a
microsoft
bot
framework
driven
adaptive
card
extensions.
D
D
We
also
did
some
the
fix
and
doc
update
for
using
esm
modules
in
typescript
solutions
that
output,
common
js
module
types.
So
that's
that
had
been
a
sticking
point
for
a
few
people
getting
to
v3.
So
hopefully
that
solves
some
problems.
There's
a
bunch
of
fixed
bugs
as
well
send
email
get
our
all
children
as
ordered
tree.
The
stale
request
digest
issue
and
render
list
data,
as
stream
had
some
bugs.
So
those
are
all
fixed.
D
We
added
some
stuff
to
the
graph
or
get
id
by
site
trends
and
member
of
for
user
installed,
apps
for
teams
and
then
some
other
doc
updates.
So
there's
a
big
release
there
so
feel
free
to
check
that
out
as
soon
as
you
can,
and
also
just
a
reminder
that
any
prs
that
end
up
getting
merged
will
show
up
in
the
nightly
builds.
D
So
we're
doing
nightly
builds
every
night
and
you
can
check
that
out
by
doing
a
an
install
with
at
pmp,
slash,
sp
v3
nightly
dash,
save
and
that
will
add
the
nightly
build.
So
if
you
have
a
fix,
you
know
if
you've
submitted
a
bug
you
that
fix
has
been
merged
in
you
can
check
it
out
to
make
sure
that
it's
working
for
you
before
the
official
release
for
the
month
and
then,
as
always,
follow
us
m365pmpjs
on
twitter.
A
Thanks
julie
for
that
and
updates
for
cli
for
microsoft,
365.,
we
got
a
new
preview
version
5.2
out
with
the
updates
for
spfx
project
upgrade
guidance.
I
think
we're
going
to
see
a
little
bit
of
some
of
this
a
little
bit
later
in
the
call
here:
support
for
adding
private
teams
channels,
managing
teams,
chat
messages,
managing
power
platform
management,
apps,
and
that's
a
lot
of
management
and
retrieving
aad
sign
in
information.
A
You
can
always
install
the
previews
there
with
npm
install
dash
g
at
that
stuff
at
next,
and
you
can
always
run
the
docker
containers,
which
is
a
really
great
capability
to
try
things
out
easily
with
all
the
dependencies
and
everything
set
up
and
ready
to
go.
So
you
can
use
the
command
line
there.
The
docker
run
command
line
there
and
as
well.
A
You
can
follow
up
on
the
release,
notes,
cli,
pmp.github.io,
microsoft,
365,
slash
about
slash
release,
dash,
note,
slash
v520,
so
check
that
out
and
as
well
encourage
you
to
follow
them
on
twitter
and
the
aka
link
down
there
at
the
bottom
is
a
little
shortened
way
to
say.
The
thing
I
just
said
so
certainly
try
out
the
cli
and
I'm
looking
forward
to
seeing
the
demo
about
the
cli
here.
In
just
a
few
minutes,
then
we've
got
the
spfx.
Reusable
controls
is
a
set
of
two
packages.
The
first
is
the
react.
A
Controls
designed
to
be
used
in
the
body
of
your
web
parts
or
application.
Customizers
and
you've
got
the
react,
property
controls
designed
to
be
used
in
the
editing
pane
of
your
web
parts.
To
give
you
a
great
out
of
the
box
experience
in
both
cases
integrated
very
tightly
into
your
solutions
and
saving
you
a
lot
of
time
and
energy
having
to
build
this
kind
of
functionality
on
your
own.
So
it's
great
to
see
these
continue
to
evolve
and
get
better
with
new
variant
theme
provider
controls.
A
Seeing
the
monaco
editor
in
there
is
really
exciting
enhancements
for
multiple
controls,
as
well
as
spfx
114
support.
Spfx
115
support
will
be
coming
soon,
but
114
support
for
now
is
fantastic
and
then
we've
got
various
other
miscellaneous
fixes,
all
of
which
can
be
found
in
the
two
respective
release,
notes
so
check
out
the
reusable
controls
for
your
projects
and,
finally,
modern
search,
aka
pmp-search,
building
search
experiences
with
flexible
web
parts
version.
461
is
our
april
release
there.
A
So
you
can
follow
the
link
for
all
the
information
and
see
the
release,
notes
for
all
the
fixes
and
new
features
to
encourage
you
to
upgrade,
as
you
can
and
again
want
to
remind
folks,
the
v3
branch
of
things
is
really
in
maintenance
mode.
Not
a
lot
of
work
is
happening
there
and
all
the
new
features
and
work
is
in
the
v4
branch
of
things.
So
when
you
are
able
and
able
to
work
that
into
your
planning,
I
encourage
you
to
upgrade
to
that
v4
set
of
pnp
modern
search.
E
Thank
you.
So
we
have
lots
of
extensions
and
web
part
examples
that
are
available
for
you
to
play
with.
So
these
are
the
updates.
Since
the
last
time
I
presented,
which,
which
was
two
calls
ago,
so
we
have
the
news:
ticker
updated
to
spf
x,
114,
that's
a
new
sticker
extension
that
displays
some
news
at
the
top
of
the
page
and
that
was
updated
by
sudarsan.
E
On
the
webparts
side,
we
have
nick
brown,
provided
us
with
a
new
fluent
ui
version,
9
web
part,
which
should
start
showing
up
on
the
sample
gallery
very
shortly,
very
cool
sample,
and
it
uses
the
theme
provider
as
well.
We
have
a
new
tab,
accordion
and
rich
text
content
web
part
by
arun,
kumar
perumal.
E
We
have
an
update
by
christoph
on
the
cherry
pick.
Content
christopher
created
this
web
part
a
few
weeks
ago
and
he's
already
submitted
a
fix
for
us,
which
is
awesome.
Milan
holman's
has
updated
the
birthday
webpart
to
upgrade
it
to
spf
x,
114
and
nader.
Hajibe
has
updated
the
dynamic,
scalable
vector
graphic.
E
E
My
comal
has
updated
the
tool
webpart
to
display
the
order
of
the
web
part.
So
now
we
have
full
control
over.
Like
the
section
the
columns
of
the
web
part
are
ordering
and
the
to
do.
Client
web
part
with
the
ugs
was
updated,
with
replacing
node
sas
to
sas,
and
the
page
is
the
hierarchy
by
nick
brown.
We've
added
a
tree
view
as
well
as
as
a
new
web
part
called
group
members
by
nick
brown
as
well,
which
well
pretty
much
does
what
the
name
says.
E
I
just
wanted
to
point
out
that,
over
the
last
two
weeks,
we've
processed
over
172
pull
requests
across
various
updates
and
things
of
that,
including
security
fixes.
The
one
thing
that
we
don't
mention
is
we
are
constantly
scanning
the
code
and
updating
the
code
dependencies
to
make
sure
that
we
have
the
latest
version
of
everything,
but
thank
you
for
giving
me
so
much
hard
work
to
do,
because
this
is.
This
is
amazing
to
see
with
that.
Let's
pass
it
back
to
david
to
talk
about.
B
Aces
awesome
thanks,
you
go.
We
have
some
incredible
new
demos
for
aces
and
samples
for
demo
or
samples
for
aces
this
week
as
well.
Two
one-drive
carousels
from
guido
zambarda
on
image
cards
and
base
cards
allowing
you
to
scroll
through
your
onedrive
files,
which
are
really
really
cool,
he's
also
got
another
one
he's
going
for
the
hat
trick.
Recent
files.
B
It
provides
a
counter
and
a
view
of
those
files,
so
very
very
cool
way
to
see
a
highlight,
wonderful
way
to
use
the
aces
and
provide
that
high
level
information
and
then
being
able
to
drill
in
and
then
great
minds,
think
alike.
There's
another
recent
files
by
xiaomendez
on
quick
access.
So
it's
nice
to
see
of
multiple
views
on
how
you
can
utilize
these
tools
and
new
resources
within
the
sharepoint
framework,
really
cool
open
for
more
contributions.
A
C
Don't
know
if
you
have
multiple
cameras
and
I'm
gonna
share
my
screen
in
a
second
I'm
just
setting
the
together
mode,
50c
it's
in
the
room
and
was
it
fabian
who
sat
down
to
stay?
You
just
call
it
the
room.
Yes,
this
is
actual
room,
we're
all
in
the
same
room
right.
So
let
me
put
on
the
camera.
If
I
can
see
fit
in
still,
I
will
put
the
recording
on
we'll
still
have
few
seats
in
the
room.
C
Room
good
question,
patrick:
let's
do
some
hand
faving
everybody.
Thank
you
for
joining
once
again
awesome
to
see
this
many
faces.
We
are
close
to
200
attendees
again
on
this
week
on
the
community
called.
Thank
you.
Thank
you.
Thank
you
for
being
part
of
this
community
and
keep
the
feedback
coming.
We
are
building
all
of
these
capabilities
for
you.
So
thank
you.
Thank
you.
Awesome
stuff.
Thanks,
everybody.
Let's
go
to
the
real
stars
of
today
to
the
demo
side
of
the
house.
F
Okay,
so
I'm
presenting
today
a
project
that
I
worked
on,
that
in
conjunction
with
microsoft,
to
create
an
adaptive
card,
extensions
design
gallery
and
so
a
little
bit
about
me.
I'm
derek
cash
peterson,
I'm
a
principal
architect
at
some
praxis,
consulting
we're,
a
small
consulting
company
based
out
of
boston,
but
with
offices
all
over,
I'm
also
on
the
pnp
team
and
I'm
one
of
the
co-maintainers
of
learning
pathways
and
the
spfx
aces
repo,
and
I
promise
I'll
get
to
processing
those
pr's
really
soon.
F
Okay.
So
what
are
some
of
the
goals
of
the
projects
before
I
dive
in
and
start
showing
it?
The
first
thing
we
wanted
to
do
was
make
sure
that
we
provided
examples
to
show
visually
appealing
designs
in
the
quick
view.
You
know
a
lot
of
them,
especially
when,
when
aces
were
first
available,
were
very
very
stark.
They
were
black
text
white
background,
a
few
icons,
so
we
really
wanted
to
up
the
design
level
game
and
provide
some
more.
You
know
references
for
you
to
use
in
your
designs.
F
F
And
finally,
we
wanted
to
also
provide
an
example
of
how
to
do
localizations
for
strings
and
pull
that
data
into
the
adaptive
cards
in
the
quick
view.
So
not
all
the
text
is
hard
coded
into
the
json
file
and,
finally,
we
wanted
to
provide
an
example
of
how
to
do
deep,
linking
from
an
adaptive
card
extension
into
teams.
So
all
of
those
things
are
sort
of
wrapped
up
in
the
work
that
I've
been
doing
here
and
so
there's
a
couple
of
different
components
to
to
the
design
gallery.
F
The
first
is
that
it's,
it
consists
of
12
different
aces
in
one
solution.
So
when
you
download
or
you
install
it,
you
have
the
ability
to
get
all
12
of
them
they're
all
in
there
and
you
can
sort
of
pick
and
choose
which
ones
you
want
to
put
on
your
dashboard
there's
also
a
personal
app
and
the
personal
app
is
really
there
to
serve
two
main
goals.
The
first
and
foremost
is
to
serve
as
that
spot.
F
For
that
deep
linking
to
go
to
so
you
get
to
see
when
you
click
through
from
the
aces
into
teams.
You
get
to
see
some
sort
of
identifying
information
to
indicate
the
content
that
got
pushed
through,
and
the
other
is
about
making
sure
that
it
serves
as
a
gallery
for
you
to
show
folks
whether
or
not
you're
using
the
dashboard.
F
F
But
if
that's
not
enough,
if
you
want
to
tinker-
and
you
want
to
see
what
how
we
did
stuff,
you
can
absolutely
do
that
the
source
code
is
available
for
you
to
get
out
of
the
reference
repo,
and
so
you
can
download
it
see
what
functions
I
used
and
see
how
I
built
the
service
layer
and
all
those
kinds
of
things.
So
you
can
take
all
of
that
and
use
it
all
on
your
own
all
right.
So,
let's
see
what
this
looks
like
so
the
first.
F
The
first
thing
that
I
wanted
to
show
is
the
cards.
So
here's
the
dashboard,
it's
all
set
up,
I
sort
of
pre-filled
it
and
put
all
of
the
all
12
cards
on
at
once.
We've
got
an
event
schedule:
we've
got
sort
of
benefits,
information,
cafe,
menus
sort
of
a
covid
booster
thing,
faqs
team
calendar,
which
is
kind
of
fun
holiday
timelines,
all
12
just
sort
of
sitting
out
there.
So
here's
the
event
schedule.
You
can
see
we
here
for
this
one.
F
F
F
And
here
we
have
a
team
calendar.
This
one
is
kind
of
fun
it
it
pulls
in
sort
of
out
of
office.
Information
lets
you
click
forward
and
back
on
the
different
calendars.
All
of
the
data
in
this
is
dynamic,
so
it
takes
month
current
month,
plus
one
and
populates
some
data
in
it.
So
if
you
put
this
in
your
tenant,
it's
not
going
to
expire.
F
F
F
So
there's
a
lot
of
these
in
here,
I'm
going
to
pick
one
to
just
sort
of
go
through
and
show
a
little
bit
more
detail
and
that's
going
to
be
the
event
schedule
so
for
this
one
you
can
click
on
it
and,
like
I
showed
before
it
has
the
the
different
calendar
events
for
each
day.
But
it's
also
going
to
register
button
at
the
bottom,
and
here
you
can
have
your
users
type
their
content
in,
so
they
can
register
for
this
particular
conference.
F
F
There's
also
information
specifically
about
adaptive
cards,
how
to
get
more
information
design
guidelines
access
to
the
sample
code.
For
this
there's
also
a
link
to
the
adaptive
card
designer,
and
what
this
does
is.
This
is
kind
of
cool.
If
you
want
to
play
with
this
on
your
own,
if
you
click
that
link,
it
actually
pre-loads
the
adaptive
card
designer
with
our
content,
and
so
you
can
sort
of
play
with
it.
F
This
is
what
it
looks
like
if
you
don't
click
in
and
connect
to
it,
to
the
personal
app
from
an
ace,
it's
a
listing
of
all
of
them,
and
so
you
can
use
this.
You
know
with
your
key
stakeholders
to
show
them.
What's
there
give
them
a
little
link
for
more
information
and
then
let
them
explore
for
themselves.
This
is
also
great
if
you
need
to
do
a
demo
for
somebody,
whether
it's
a
key
stakeholder
or
whether
it's
a
client
or
whatnot,
I'm
going
to
jump
in
and
show
the
code
in
a
minute.
F
So
I
got
a
couple
more
minutes,
I'm
going
to
show
a
little
bit
of
code,
so
the
one
thing
I
want
to
I
want
to
say
is
because
this
is
demo
and
meant
to
be
sort
of
evergreen.
For
you
to
do
your
demos,
we
we
loaded
all
the
data
into
json
files,
and
this
is
an
example
of
the
data
that
I
created.
So
you
know,
there's
an
array
of
cafeterias
and
each
cafeteria
has
their
own
type
of
cuisine.
F
Each
one
of
those
cuisines
has
an
id
a
name,
a
description,
a
food
type,
which
is
just
a
different
value
for
me
to
help
separate
it
out
in
the
layout
and
then
a
link
to
the
image
that
we're
going
to
use
in
that
that
data
is
pulled
in
using
the
service
layer,
and
so
you
can
see.
I
have
a
get
cafeterias
function
here
in
my
service
layer
and
it's
pulling
in
the
data
that
the
data.json
file.
F
F
You
can
customize
that
for
yourself
in
order
to
generate
the
link
to
get
into
teams,
we
have
to
sort
of
do
some
massaging
of
the
data
and
I'm
creating
a
custom
object
that
I'm
passing
in,
which
is
what
we're
doing
right
here
on
this
line,
and
I
have
a
custom
object
that
I've
created
I'm
passing
in
the
name
of
the
app
so
that
all
12
of
them
can
have
a
different.
You
know
I
know
which
one's
getting
clicked
on
and
then
the
link
type
not
super
relevant
to
this
particular
example.
F
But
you
get
the
picture
that
you
can
sort
of
take
this
and
push
as
much
as
you
want
through
there.
Okay.
So
then,
if
we
move
over
to
the
adaptive
card
extension,
you
can
see
on
the
init
method,
I'm
making
a
call
to
that,
get
cafeteria's
function
and
then
I'm
assigning
it
into
the
state
so
that
it's
going
to
be
available
inside
my
quick
view.
F
So
inside
the
quick
view-
and
I've
only
got
a
couple
more
minutes-
there's
a
couple
of
things
I
want
to
share
and
specifically
here
and
the
first
is
that
localization
piece.
So
what
we
ended
up
doing
here
is
in
the
data
interface
I
created.
I
created
something
called
you
know:
a
property
called
strings
and
I
assigned
a
property
of
the
adaptive
card
extension
strings,
which
is
exactly
what
you
would
use.
F
I
just
started
sort
of
prefixing
all
the
stuff
that
was
at
the
root
with
dollar
sign
root,
because,
if
you're
in
a
loop
that
can
get
sort
of
confusing,
so
I
just
wanted
from
from
a
consistency
standpoint
and
I
wanted
to
make
sure
that
it
was
easy
to
you
know,
identify
what
was
what,
but
this
is
going
to
pull
the
value
from
the
localized
string
in
called
open
status
all
right.
The
other
thing
that
I
wanted
to
show
is
that
sort
of
toggle
menu
with
the
with
the
the
tabbed
interface.
F
So
you
can
see
here
we're
using
we're
setting
up
the
menu
header
and
then
we've
got
the
info
header.
So
one's
on
one's
off
one's
got
the
little
divider
line,
the
gray
line
underneath
it
and
one
doesn't
we're
using
the
select
action,
we're
using
action.togglevisibility
and
so
we're
showing
and
hiding
different
elements
of
the
card
when
that
element
is
clicked,
and
so
that
way,
there's
no!
You
know
you
don't
really
need
to
go
back
and
do
any
work
there.
You
just
sort
of
click
the
button
and
things
show
or
hide,
and
the
visibility
toggles.
F
If
you
need
to
pass
data
to
your
adaptive
card
extension
to
a
loop
like
if
you're
going
to
loop
through
something
you
can
do,
use
the
dollar
sign
data
property,
and
then
you
can
put
in
your
array
and
in
this
instance
I
had
one
array
of
cuisines,
but
I
wanted
to
split
it
out
into
two
different
categories,
and
so
I'm
using
the
built-in
function
called
where
right
here
and
passing
in
the
array
of
cuisines.
Now
there's
ten
things
in
there.
F
All
of
them
have
a
different
food
type,
and
so
we're
going
to
go
in
and
this
particular
column
set,
is
going
to
use
a
subset
of
the
cuisine
items
where
the
food
type
is
equal
to
special.
So
you
don't
need
to
do
all
of
this
processing
on
the
back
end,
you
may
decide
you
want
to
you
know
in
your
ts
file,
but
you
could
also
do
it
as
well
inside
your
quick
view-
and
I
think
that's
about
it.
F
A
Stuff,
thanks
derek,
really
excited
to
see
that
design
gallery
out
there
and
encourage
folks
to
check
that
out
great
resource
to
show
people
what
is
possible
with
adaptive
cards
and
the
kind
of
rich
solutions
you
can
build
with
them
to
help
your
users
get
more
connected
to
your
organizations
and
information,
and
with
that
we're
going
to
go
over
to
fabio
for
using
adaptive
cards
from
the
pmp
control
gallery
in
spfx
solutions.
Take
it
away.
G
So
hello,
everyone
in
this
very
quickly
session.
I
want
to
show
you
a
control
that
I
created
for
the
pmp
control
gallery
and
the
control
is
the
adaptive
card
host
control.
So
let
me
explain
the
agenda.
I
want
to
show
you
the
reason
behind
the
implementation
of
this
control.
Why
I
choose
the
adaptive
card
sdk
to
implement
this
control,
just
an
introduction
on
how
to
use
this
control
and
then
I'll
show
you
the
code
and
different
scenario
on
use
the
control,
then
I'll
show
you
the
next
steps
of
the
implementation
and
some
references.
G
G
G
G
Almost
all
these
property
are
not
required,
but
there
are
some
properties
like
the
card
it's
required,
because
I
need
to
pass
the
template
to
to
render
the
adaptive
card
and
then
some
properties
like
the
data,
if
you
want
to
pass
an
object
that
contain
the
data
that
you
want
to
apply
by
using
the
adaptive
card
template
and
some
callbacks
to
intercept
the
actions.
For
example,
if
you
invoke
on
a
submit
action,
you
are
able
to
catch
this,
this
action
or
the
error.
G
If
there
are
some
error
in
the
rendering
of
the
of
the
card
and
another
good
part,
it's
some
callbacks
to
add
custom
elements
and
custom
action,
because
adaptive
card
it's
open.
If
you
want
to
create
new
elements,
you
are
able,
and
then
you
have
to
register
this
new
element
or
action
inside
the
adaptive
card.
Sdk
object.
G
This
control
provides
some
callbacks
to
register
new
card
element
and
new
card
action,
and
there
are
another
callback
to
inject
inside
the
host
capability
object
of
the
adaptive
card,
some
custom
properties,
for
example.
If
you
want
to
pass
a
specific
property
to
all
the
action
or
all
two
elements
of
the
adaptive
current
you
want
to
render
you
are
able
to
use
the
host
capability
and
then
set
your
custom
property
with
the
proper
value.
G
Okay,
this
is
the
two
different
scenario:
the
first
one.
It's
a
web
part
that
it's
hosted
inside
the
on
a
sharepoint
page
and
by
this
control
we
are
able
to
use
a
different
kind
of
theme.
For
example,
we
are
able
to
use
the
the
default
team
applied
to
the
site
or
the
team
applied
to
the
specific
section
when
the
web
part
is
it's
rendered
or
we
can
set
different
team.
G
For
example,
I
implemented
three
team,
one
for
the
default
team
for
teams,
one
for
dark
team
and
for
I
contrast
or
if
you
want
to
use
the
same
web
part
but
hosted
as
a
team
stub,
you
are
able
to
do
and
automatically
so.
The
web
part
are
able
to
check
the
the
team,
apply
the
tool
to
an
asset
to
the
team
client
and
then
pass
the
correct
value
to
the
control.
G
So
the
good
part
you're
able
to
see
in
in
this
slide
it's
that
all
the
ui
it's
rendered
with
the
current
theme
and
the
control
like
the
buttons
or
the
actions
or
the
input
of
the
the
card
are
rendered
by
using
the
fluent
ui
component.
This
is
the
very
interesting
feature
because
if
you
try
to
use
the
default
sdk
directly
inside
your
code,
you
are
not
able
to
render
the
fluent
ui
components
it's
rendered
by
using
the
standard
ui
of
the
action
and
element
for
for
adaptive
card.
G
But
you
know
that
exists
on
a
library
implemented
by
microsoft
to
render
the
input
end
actions
by
using
the
front
ui,
but
it's
not
working
with
the
last
version
1.5
of
the
adaptive
card.
So
basically
I
create
this
control
by
rebuild
from
scratch
all
the
controls,
all
the
input,
all
the
actions
by
using
the
lattice
version
of
the
fluent
ui
available
for
sharepoint
framework.
G
So
let
me
show
just
the
demo
and
the
code,
so
this
is
the
demo
of
the
the
web
part.
Basically,
the
web
part
that
you
can
find
inside
the
pmp
web
part
examples.
You
are
able
to
select
the
car
that
you
want
to
render
just,
for
example,
okay,
and
you
are
able
to
set
the
theme
that
you
want
to
apply
to
the
control.
Okay.
G
Inside
the
example,
I
implemented
the
all
the
sample
that
I
found
inside
the
the
the
github
repository
for
adaptive
card,
and
this
is
one
of
the
most
complex
card
in
term
of
a
ui
that
you
can
find
for
the
examples,
and
you
are
able
to
see
that
all
the
ui
will
be
rendered
by
using
the
correct
theme.
If
I
select
the
sharepoint
and
I
try
to
change
the
section
background,
you
are
able
that
you're
able
to
see
that
the
the
theme
is
completed,
change
it.
G
G
G
I
created
on
a
pr-
and
I
think
that
it's
we
will
be
available
very
soon
by
adding
a
new
property
to
pass
the
context
object
of
the
web
part.
And
if
you
pass
this
property,
this
context
you
the
control,
automatically
inject
some
of
the
context
property
inside
the
data
object
and
you
will
be
able
to
use
these
the
context
property
directly
inside
the
template
of
your
card.
G
So
the
control,
basically,
it's
implemented
by
using
the
adaptive
card
sdk
and
it's
implemented
by
a
function,
react
component
by
using
a
lot
of
react
books
like
user
reference
or
user
context
to
save
some
informations
when
we
set
some
properties.
Like
the
theme,
there
are
some
code
to
create
the
theme
for
team
default,
dark
high
contrast
or
convert
the
theme
that
come
from
the
web
part
to
full
team
for
for
the
object,
and
there
are
a
lot
of
code,
but
the
the
main
part
is
this
one.
G
We
can
expand
this
evaluation
context
inside
the
the
the
template
of
the
card
and
then
at
the
end
we
are
able
to
parse
the
card
and
then
inject
directly
inside
the
div
element
of
the
component,
all
the
the
card.
It's
positioned
inside
on
a
team
provider
to
apply
automatically
inside
this,
this
div
all
the
the
team
that
come
from
from
sharepoint
framework.
G
G
So
few
words
about
me:
I'm
the
ceo
I'm
fabulous
frenzy,
I'm
the
ceo
of
the
apv
solution
and
I'm
accident
mvp
into
category
office,
office,
development
and
business
application.
So
you
can
find
some
links
like
my
email,
the
twitter
account
or
linkedin
or
github.
If
you
want
to
contact
me,
please
use
this
information.
G
So
there
are
some
references,
the
adaptive
cards,
that
I
owe
it's
the
entry
point.
If
you
want
to
learn
about
the
adaptive
cards,
the
second
line
link
is
the
page
of
the
adaptive
card
host
control
for
the
pmp
react,
control,
library
and
the
last
link
is
the
repo
that
contains
the
web
part
that
I
show
you
in
this
demo.
A
H
Yes,
yes,
thank
you,
patrick
and
yes,
we
are
going
to
talk
about
how
we
can
manage
navigation
inside
adaptive
card
extensions
with
spfx.
So,
first
of
all,
just
just
to
set
the
context
when
you
develop
an
adapter
card
extension,
you
can
get
access
to
some
properties
like
the
car
navigator
and
the
quickview
navigator,
together
with
the
navigator
property
which
is
available
in
the
base,
adapter
cab
extension,
so
inside
the
main
adaptive
card
extension
component
that
you
build
and
through
those
components
you
can
manage
the
navigation
across
card
views
and
quick
views.
H
So
you
can
push
pop
a
card
in
stock.
You
can
replace
the
currently
selected
card
or,
of
course,
in
the
initialization
code
of
your
electric
card.
You
can
register
the
card
that
you
want
to
render.
So
let
me
quickly
move
to
the
demo
and
let
me
show
you
a
sample
adaptive
card
that
I
built
just
for
the
sake
of
explaining
you
how
to
navigate
across
cards.
So
it
is
not
a
real
solution,
but
it
is
just
a
solution
for
the
sake
of
explaining
you
how
the
navigation
works.
H
This
is
a
card
based
on
the
basic
image
template.
This
is
a
card
view
and
just
to
give
you
an
idea
of
how
it
works,
there
is
a
button
we
can
start
the
rendering
of
a
quick
view
by
clicking
on
the
button,
and
here
we
can
play
with
the
replace
or
with
the
push
functionality
of
the
quickview
navigator.
When
you
click
the
push,
when
you
invoke
the
push
method,
you
will
push
a
new
quick
view
or
a
new
card
view
into
a
stack,
and
you
can
always
go
back.
You
can
see
here.
H
H
Unless
you
do
that
manually,
replacing
again
the
card
to
go
to
another
one
and
then,
when
you
do
that
playing
with
the
navigation
of
quick
views,
for
example,
you
can
also
then
switch
back
to
the
card
view
rendering,
like
I
can
do
right
here.
If
I
click
on
the
finish
button,
as
you
can
see
now,
I
updated
the
currently
rendered
card
view
in
the
rendering
of
my
adapter
card
extension,
and
we
can
also
eventually,
if
needed,
implement
the
logic
from
within
a
card
view
to
restart
or
resume
our
wizard
or
our
complex
navigation
logic.
H
Inside
the
ace
that
we
are
developing,
and
here
you
can
see,
we
are
back
and
ready
from
scratch.
So
how
did
I
implement
this
sample
so
that
you
can
do
the
same
in
your
own
real
life
solutions?
Well,
first
of
all,
I
created
a
bunch
of
card
views
and
quick
views.
As
you
can
see,
I
have
the
start
card
view
which
is
registered
inside
the
on
init
method,
together
with
all
of
the
other
card
views
and
quick
views.
H
So
when
I
go
to
the
start,
quick,
quick
view
that
one
is
a
really
simple
one
from
a
code
based
perspective,
but
in
the
json
of
the
adaptive
card,
I
have
a
couple
of
columns
a
column
on
the
left,
as
you
probably
remember,
in
which
I
have
an
image
which
will
be
the
double
chevron
to
allow
the
user
to
replace
the
current
quick
view.
With
another
one,
and
as
you
can
see,
this
image
is
a
select
action
option
which
will
be
of
type
action.submit
and
we
we
will
be
we.
H
It
will
be
with
an
id
of
type
replace,
which
is
a
custom
one
that
I
created.
The
same
applies
for
the
other
button,
which
is
again
an
image
with
a
select
action
of
type
submit
and
with
an
id
of
push
so
inside
the
on
action
of
my
quick
view,
I
can
simply
say:
okay:
if
the
action
is
the
push
one,
let's
go
through
the
quick
view
navigator
that
I
have
and
push
a
new
card
if
it
is
the
replace
one.
H
Instead,
we
will
call
the
replace
method
and
we
will
provide
the
id
of
the
quick
view
that
we
want
to
use
to
replace
the
current
one.
When
we
do
the
push,
then,
in
the
push
quick
view,
we
can
easily
do
the
pop
to
go
back
to
the
previous
one
by
code
or
we
can
push
in
the
card
navigator.
The
end
card
to
complete
our
navigation
flow
in
the
replaced
quick
view.
H
On
the
contrary,
whenever
we
get
the
focus
and
the
rendering
of
the
current
replaced
quick
view,
we
can
go
to
the
final
card
view
again
using
the
push
method,
or
we
can
go
back
to
the
previous
one
using
the
replace,
because
we
landed
to
this
quickview
card
using
the
replacement.
So
we
don't
have
a
stack
and
if
we
want
to
navigate
back,
we
can't
simply
do
a
pop,
but
we
need
to
replace
the
current
quick
view
with
another
one
which
could
be
again
the
starting
one.
H
This
is
really
useful
whenever
you
want
to
create
a
complex
ui
with
your
adaptive
cab
extensions,
because
you
can
easily
switch
across
different
options.
Last
but
not
least,
I
want
to
show
you-
and
this
will
be
the
last
part
of
my
quick
demo,
how
I
managed
to
do
the
restart
logic.
So
here
you
see,
I
can
click
on
the
restart.
I
see
a
dialog
I
can
cancel
or
I
can
confirm
and
restart
from
scratch.
Well,
in
the
card
buttons
method
of
my
card
view,
I'm
providing
an
icard
button
which
will
be
of
type
submit.
H
I
can
eventually
even
provide
custom
arguments,
custom
parameters
to
the
submit
that
will
happen.
I
provide
an
id
to
my
button
and
I
can
eventually
this
is
optional,
provide
a
confirmation
dialog
with
the
title
and
the
message,
which
is
the
one
you
saw
when
I
click
on
the
button,
to
confirm
what
I
want
to
do.
H
A
Thank
you,
paulo
fantastic
job
to
to
get
through
that
topic
really
quickly,
but
it's
a
great
topic:
you
could
build
a
ton
of
rich
experiences
using
those
capabilities.
Paulo
talked
about
there,
the
push
pop
and
replace,
giving
you
pretty
much
unlimited
control
over
how
your
aces
behave
and
allowing
you
to
present
lots
of
exciting
scenarios
to
your
users.
I
want
to
thank
derek
fabio
and
paulo
for
the
fantastic
demos
today
great
content,
look
forward
to
seeing
folks
build
on
top
of
those
capabilities
and
see
what
more
you
can
produce
there.
A
I
want
to
thank
everybody
for
joining
us
here
on
the
call
the
recording
will
be
available
in
about
24
hours
on
the
youtube
channel.
You
can
always
follow
us
on
twitter,
at
microsoft,
365
dev
at
m365
pnp,
our
next
viva
connections
call
will
be
next
thursday
may
5th
same
time,
and
the
next
general
dev
call
will
be
next
thursday
april
28th.
At
the
same
time,
you
can
get
a
link
to
all
of
the
community
calls
recordings
and
the
rest
of
the
content
at
aka
dot.
Ms
slash
m365
pnp.