►
Description
In this video, you'll create an Adaptive Card Extension (ACE) with the Primary Text Card template that uses the geo-location capabilities in Viva Connections.
This video is part of a series in a playlist and is associated with a Microsoft Learning module: 'Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections'.
⬅️ Previous video on this series - https://www.youtube.com/watch?v=P4x2-xd3QbU&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=5
Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/7-exercise-ace-geo-location-actions
• Create Adaptive Card Extensions (ACE) for Microsoft Viva Connections learning module - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/
Demo Presenter
• Andrew Connell (Voitanos) | @andrewconnell
Supporting materials
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs
• Overview on Viva Connections extensibility - https://aka.ms/viva/connections/extensibility
• Design guidance for Viva Connections cards - https://learn.microsoft.com/en-us/sharepoint/dev/spfx/viva/design/design-intro
• Sample ACEs with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Viva&sortby=creationDateTime-true
Learn more
• 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/m365/community
Sharing is caring! You are awesome! 🧡
A
A
And
save
our
changes?
Okay,
this
is
what
we're
going
to
use
to
store
the
status
of
all
the
different
drivers
on
our
campus,
and
my
scenario
is
going
to
use
a
University
campus,
so
I'm
going
to
do
is
come
back
over
to
my
my
terminal
and
I'm,
going
to
start
by
creating
a
new
folder
where
I
want
to
store
my
shuttle
or
my
store.
My
project.
A
A
Now
the
ace
that
we're
going
to
create
is
going
to
give
the
shuttle
driver
the
option
to
either
select
a
destination
from
a
list
of
known
locations
or
they're,
going
to
be
able
to
select
to
a
specific
point
on
a
map.
What
I'm
going
to
do
is
I'm
going
to
come
over
here
and
create
a
list
of
places
that
they
can
choose
from
so
I'm
going
to
go
to
my
assets,
folder
and
add
a
new
file
called
campus
locations.json
and
paste
it
in
the
project
for
all
the
array
of
locations.
A
A
What
it
did
do,
though,
there's
one
thing
that
it
did
have
is
that
it
did
have
a
couple
different
class
statuses
that
we
could
use
as
well,
that
are
going
to
be
expected
as
the
different
choices
that
we
have
in
our
SharePoint
list.
Now.
The
next
thing
that
we
need
to
do
is
our
project
has
some
core
dependencies
that
have
been
added
to
it.
A
A
So
we'll
have
our
title,
and
this
will
be
the
list
ID
and
the
title
for
this
will
be
the
list
ID,
which
will
be
a
good,
be
expecting
a
good
and
then
what
I'm
going
to
want
to
do
is
if
I
go
back
to
my
extension.
Whenever
that
value
changes
for
the
list,
ID
I'm,
going
to
implement
the
on
property
property
pane
field
changed
event,
so
that
when
the
ID
changes
I'm
going
to
go
fetch
all
my
list
items
and
update
them.
A
In
my
current
trip
now,
obviously
we
haven't
set
our
state,
yet
we've
got
to
do
that.
We've
also
got
to
import
some
stuff
as
well
for
our
service.
So
let's
come
back
up
to
the
top
and,
let's
add
in
an
import
statement
to
import
in
the
values
from
our
service
and
then
I
also
want
to
set
the
state
to
a
current
trip,
which
will
be
an
I
list
item
that
will
pass
in
now.
Once
we've
set
our
state,
we
then
need
to
be
able
to.
A
Dot
Login
name:
that's
the
title
that
we're
going
to
use
the
title
field
for
our
list
is
going
to
contain
the
current
user.
That's
using
the
that's
logged
in
so
it's
going
to
be
the
their
email
address
or
their
UPN.
Their
status
is
going
to
be
set
to
status
of
being
available
because
they're,
not
they
currently
aren't,
set
on
on
a
trip.
A
So
if
we
did
not
get
a
list
item,
then
that
means
the
driver
does
not
have
is
not
currently
on
a
trip.
If
there
is
one
there,
we
are
going
to
display
that
we
want
to
do.
We
know
that
they
are
currently
either
in
route
to
pick
somebody
up
or
they're
on
the
way
to
deliver
a
passenger
somewhere
when
they
are
no
longer
in
a
trip.
A
A
With
this
quick
view
class
as
well,
move
that
to
trash,
and
then
the
last
thing
is:
let's
go
to
our
card
view
that
references
this
and
we
know
we're
not
going
to
use
our
quick
view
right
here.
So
I
can
delete
that
we'll
put
these
on
separate
lines,
because
we
will
be
adding
lots
of
quick
views
to
this.
A
Oh,
let's
just
go
to
from
SP
service
and,
let's
say
status,
available,
we're
going
to
use
that
in
this
class,
and
then
let's
update
our
card
buttons
right
here
and
we're
going
to
replace
it
with
a
switch
statement
that
is
just
going
to
return
back
no
button
for
right
now.
We're
gonna
we're
gonna.
Add
to
this
as
we
go
through
building
this
out.
A
A
If
the
status
is
available,
then
we're
going
to
say
it's
available
for
higher
and
then
otherwise
we're
going
to
have
to
do
this
to
do
which
will
fill
in
later
and
then
our
card
selection
we're
not
going
to
support
the
user
selecting
the
card
so
we're
just
going
to
delete
that.
Now,
let's
go
and
let's
test
our
Ace
out
at
this
point,
so
I'm
going
to
say,
gulp
serve.
A
A
So
we'll
see
this
in
the
future,
the
settings
7B
write
to
7D
and
then
it
goes
right
up
to
the
percent
sign.
So
grab
that
and
we'll
paste
that
in
and
there
we
go
we're
good
saving
our
changes.
So
now
we're
all
good
now,
nothing's
really
changing
in
the
rendering,
because
we
don't
have
any
records
in
the
list
yet
so
at
this
point
the
minimal
stuff
is
working
and
I
can
start
adding
interactivity
to
the
ace
with
the
different
quick
views.
A
So
what
we're
going
to
do
first
is
we're
going
to
add
the
ability
to
create
a
trip
with
a
quick
view.
So
when
they
create
a
trip,
they've
got
three
things:
we
need
to
set
the
origin
or
the
start
location
for
the
trip,
the
destination
of
where
they're
going
on
the
trip.
And
then,
if
the
shuttle
driver
is
in
route
to
pick
the
passenger
up
from
An
Origin
location
or
if
they've
already
picked
the
passenger
up
and
they're
on
their
way
to
the
destination.
A
So
what
is
this
one
going
to
do?
Let's
just
go
ahead
and
I'm
going
to
copy
in
some
code
here
on
how
this
works.
So
a
couple
things
to
point
out
about
this
one:
the
data
that
I'm
returning
back
this
Returns
the
object
to
the
ace
rendering
engine
that's
going
to
be
used
to
bind
properties,
the
Adaptive
card
that
are
used
to
implement
the
quick
view.
A
The
template
tells
it
where
the
cards
quick
view
or
sorry
where
the
Adaptive
card
extensions
is
defined,
and
then
the
on
action
method
is
called
when
certain
actions
occur.
So
at
this
point
the
code
simply
is
going
to
save
the
value
of
the
trip
in
route
and
hired
and
contain
the
placeholder
for
more
quick
view
cards
that
I'm
going
to
add
to
the
project
here.
A
So
you
can
see
we're
just
going
to
save
the
card
and
then
we're
gonna
all
this
other
stuff
we're
going
to
go
through
and
deal
with
later
now
to
make
my
life
easier,
because
I
know
I'm
going
to
have
a
bunch
of
cards
here:
I'm
going
to
Simply
create
a
barrel,
so
an
index.ts
file
where
I'm
going
to
export
everything
from
my
start
trip.
This
is
just
going
to
make
it
easier
to
do
import
statements
later
now.
The
next
thing
we
need
to
do
is
we
need
to
register
and
reference.
A
Now,
let's
define
a
new
constant
that
we're
going
to
export
for
our
start
trip
experience
our
quick
view
experience.
So
now
we
have
our
new
ID
that
we've
listed
I'm
then
going
to
go
in
and
in
the
on
a
knit
I'm
going
to
register
our
a
quick
view,
I'm
a
register
it
right
with
Not
Duplicate,
the
last
line
I'm
going
to
register
it
like
this
and
then
I'm
going
to
add
it
to
the
card
view.
So,
let's
come
back
over
to
the
card.
View
and
I
need
to
import
the
ID.
A
And
now,
when
I
switch
it
over
to
preview
mode,
if
I
select
book
a
trip,
I
now
have
this
new
quick
view.
That's
going
to
display
our
little
form.
So
we
can
say
if
the
status
is
we're
in
route
to
picking
somebody
up
or
starting
the
trip,
and
then
I
can
also
choose
from
these
different
buttons
like
selecting
the
trip,
origin
or
the
destination
or
saving
the
trip.
But
we
don't
have
any
functionality
here,
we're
just
displaying
this.
So
now
we
need
to
add
our
functionality
to
it.
A
A
It's
called
set
origin,
dot,
TS
and
I'll
paste
in
some
code.
So
what
this
one
does
is
that
on
for
my
set
origin,
it's
going
to
return
back
just
some
information
about
the
current
trip.
So
it
was
the
state
of
the
trip,
current
state,
of
the
trip,
the
title
and
the
description
and
then
on
the
template.
A
So
what
we're
going
to
see
in
a
second
The
View
Navigator
we're
going
to
push
new
item
onto
the
quick
view
which
will
render
out
the
card
that
we're
talking
about
right
now
for
setting
the
origin
and
then
once
I've
made
those
changes
and
want
to
get
remove
that
card
I'm
going
to
pop
it
off
the
off
the
off
the
view.
Navigator
now
I
want
to
implement
a
similar,
quick
view
for
setting
the
destination.
A
So
I'm
going
to
come
back
over
here
to
my
template
and
I'll
set
a
new
one
for
set
destination
card.json
and
for
this
one
I'll
paste
in
his
Json
in
this
case
here
you
can
see
that
we're
able
to
get
a
location
on
the
map
the
same
way
we
did
just
a
moment
ago.
That's
one
thing
we
want
to
do,
but
I
also
have
a
just
a
submit
action
to
save
my
changes
now.
A
The
reason
why
I'm
doing
that
is
because
I'm
also
giving
people
the
ability
to
select
from
a
choice
set
a
list
of
predefined
locations,
and
we
did
that
earlier
when
I
created
my
campus
locations
resource
earlier.
So
now,
let's
create
the
quick
view
for
this.
By
going
over
to
our
quick
view
and
creating
a
new
file
called
set,
destination.ts
and
I
will
paste
in
those
my
quick
view.
A
So
let's
give
ourselves
a
little
bit
more
real
estate
to
see
what's
going
on,
and
let
me
explain
what's
going
on
here
so
in
this
case
here,
the
data
that
will
return
back
is
I'm,
going
to
return
back
an
array
of
sorted
locations
that
I'll
bind
to
that
choice.
Set
I've
also
got
the
current
trip
and
then
I've
got
the
title
in
the
description
I'm
setting
as
well
scroll
down
a
little
bit
farther
we're
defining
the
Adaptive
card
that
we
want
to
use
for
our
rendering
and
then
in
the
on
action.
A
If
someone
sets
the
location,
I
want
to
update
the
trip
to
use
that
Geo,
those
geo
coordinates
that
they
selected,
but
otherwise,
if
they
just
click
submit,
then
what
I
want
to
do
and
if
the
submit
button
was
set
to
a
save
I'm
going
to
check
to
see
if
we
have
a
known
destination
selection
right.
If
that
was
actually
passed
in
and
or
it
was
set
to
a
value
which,
if
I
come
back
over
here
to
my
card,
we
can
see.
A
That's
the
ID
of
my
choice,
set
in
my
adaptive
card
extension
or
my
adaptive
card
rendering.
So
if
one
of
these
values
is
set,
then
it
means
that
they've
actually
chosen
a
location
and
if
they
did
then
I'm
going
to
convert
the
known
location
which
the
known
location
selection,
that
the
value
that
I
was
passing
in.
If
we
scroll
up
here,
you
can
see
from
the
data
that
we
passed
in
actually
where's.
A
A
The
last
thing
we
do
is
I
want
to
show
how
to
save
this
item.
So,
let's
come
back
over
here.
I
want
to
confirm
that
we
that
we're
going
to
save
it
so
I'm
going
to
say
save
tripcard.json,
actually,
there's
one
more
that
we
forgot
to
mention.
That
was
our
action
down
here
at
the
bottom.
So
you
can
see
here
we're
safe,
we're
setting
the
state
here
for
these
items
now
the
last
one
is
we
want
to
have
our
say,
our
our
saving
of
a
trip
and
to
save
a
trip.
A
A
So
I'll
then
Implement
that
by
going
to
our
save
trip
or
creating
a
safe
trip,
quick
view,
I
will
add
some
code
to
this
and
we'll
see
that
just
saying
the
trip
was
to
save
successfully
here's
the
card
we're
using
and
we're
just
going
to
close
the
entire
quick
view.
We
don't
want
to
pop
anything
off
the
quick
view,
because
there's
nothing
really
to
show
once
they've
saved
it.
We
can
get
rid
of
it
now
to
use
all
three
of
these
that
we've
just
created.
A
Let's
go
back
to
our
barrel
and,
let's
add
in
references
to
each
of
these,
so
we've
got
our
save
trip.
We've
got
our
setting
the
destination
and
we
also
have
our
setting
of
The
Origin.
So
now
we're
exporting
all
of
those.
And
now,
when
we
come
back
over
to
our
extension
here,
we're
gonna
have
to
register
all
of
these
and
create
the
constants
for
them.
So
I'll
say
start
trip,
save
trip,
set
destination
and
set
origin
are
all
of
our
different,
quick
views
that
we
have.
A
A
All
in
our
start
trip
so
I'm
going
to
go
to
our
start
trip
and
I'm
going
to
add
I'm
going
to
go
through
and
import
our
references
to
all
of
our
our
new
quick
views
that
we
just
created
so
one
for
the
destination,
one
for
the
origin
and
one
for
saving
and
now,
if
I
scroll
down
to
our
on
action,
let's
define
what
happens
here
so
for
the
first
one
for
the
origin,
location,
I'm,
going
to
say
this
quick
view
Navigator.
So
this
is
when
someone's
they
click.
A
The
button
say:
I
want
to
set
the
origin
for
the
trip,
so
I'm
going
to
do
that
by
saying
I'm
going
to
push
onto
the
quick
view,
Navigator
the
quick
view
set
origin
location
and
then
for
the
destination
I'm
going
to
do
the
exact
same
thing
except
I'm,
going
to
choose
the
destination
ID.
That
I
want
to
specify
and
then
for
the
save
same
thing,
I'm
going
to
say
this
quickview
navigator.push,
quickview
Navigator
save
the
truck
and
save
our
changes
notice.
How
each
one
of
these
pushes
a
quick
view
onto
the
Navigator?
A
This
triggers
the
re-rendering
of
the
quick
view
using
the
new
item
on
the
stack.
If
you
recall
previously,
I
was
popping
those
things
off
the
stack
but
now
I'm
pushing
them
onto
the
stat.
The
last
step
is
to
update
the
card
view
so
to
display
that
a
car
that
a
trip
has
been
booked.
So,
let's
come
back
over
to
our
card
View.
A
But
now,
if
it's
in
route,
then
we're
going
to
say
view
the
pickup
location
is
going
to
be,
one
button
will
display
and
if
they
choose
that
that
option,
it'll
use
the
show
location
action
to
display
the
location
of
where
we're
going.
If
they're
currently
hired,
then
we'll
also
give
them
an
option
to
view
the
drop-off
location
as
well
and
they're
all
going
to
be
these.
All
these
changes
will
conditionally
display
different
buttons
and
text
that
are
depending
on
the
state
of
the
current
shuttle
driver.
A
A
But
if
it's
not
the
case,
then
I
want
to
do
another
check.
Do
we
have
the
current
trip?
We
know
that
they're
on
the
way
somewhere,
then,
because,
if
they're,
not
if
they're,
if
they
are
not
available
and
if
they're
not
in
route,
then
that
means
they're
actually
been
hired
in
the
actual
passenger
in
the
car.
A
Now,
let's
test
out
the
entire
experience,
so
I'll
stop
the
web
server
and
restart
it
just
to
make
sure
we
pick
up
our
latest
code
and
everything
builds
correctly
all
right.
So,
let's
refresh
the
page,
let's
see
how
this
works.
So
in
this
case
here
I
we
have
our
list
items
still
set.
So
let's
go
into
preview
mode.
A
So
what
I'm
going
to
do
notice?
Here,
though,
we've
only
got
we're
in
the
medium
view.
We
we've
got
a
chance
of
having
two
buttons
here,
but
the
only
way
two
buttons
are
going
to
show
up
is,
if
we're
looking
at
this,
in
the
large
view
of
the
car,
so
I'm
going
to
switch
this
to
the
large
view
to
make
sure
we
we
can
see
both
of
them
now
I'm
going
to
start
by
selecting
book
a
trip
and
I'm
going
to
choose
to
set
a
trip
origin
on
the
map.
A
So
what
I'll
do
is
I'll
pick
this
location
on
the
map
to
say
this
is
where
I
currently
want
to
be
picked
up,
so
I'll
say,
share
location
and
then
I'm
going
to
specify
where
I
want
to
go
so
I'll
then
pick
set
the
trip
destination.
That
opens
up
a
new
quick
view.
Now
I
can
choose
a
location
on
the
map.
We
just
saw
how
to
do
that,
but
instead,
let's
choose
from
an
existing
location,
so
I'll
choose
the
Hub
and
then
I'll
save
my
location.
A
And
here
we
can
see
now
that
my
card
has
been
updated
to
show
that
I've
currently
been
hired,
I'm
driving
a
passenger
to
the
Hub
location
and
if
I
come
back
over
here
to
my
list,
settings
and
I
look
at
the
data
from
my
campus
shuttle.
We
can
see
that
Megan
is
currently
driving
someone
she's
been
hired
and
she's
driving
from
this
location.
These
GPS
coordinates
to
this
location
right
here.
A
So
now
we
can
see
everything
that
we've
implemented
to
go
collect
that
information,
let's
go
back
and
add
some
additional
functionality
of
when
we're
currently
in
route
to
a
passenger
pickup
or
when
the
driver's
been
hired.
So
what
I'm
going
to
do
now
is
create
a
new
view,
a
new
quick
view.
That's
called
my
update
card.
A
And
I
will
implement
this,
and
what
you'll
see
here
is
that
we're
simply
going
to
say,
update
the
existing
trip
and
this
card
opens
up
and
it's
going
to
have
a
couple
buttons
on
it.
One
button
will
be
to
cancel
and
one
button
will
be
to
Mark
as
a
pickup,
and
so,
if
it's
a
pickup,
all
we're
doing
is
getting
the
current
trip,
changing
it
to
hired
and
then
saving
our
changes
and
then
closing
the
Adaptive
card.
But
if
there's
a
cancel,
we
got
to
do
something
else.
A
Now
our
project
needs
some
sort
of
a
confirmation
step
if
the
driver
wants
to
cancel
or
delete
the
trip,
either
by
canceling
it
or
by
delivering
the
passenger
so
to
implement
this.
Let's
do
like
a
dynamic,
quick
view,
so
we're
gonna
have
like
a
confirmation
that
we're
going
to
use
that'll
dynamically
handle
both
of
these
cases.
So
what
I'm
going
to
do
is
create
yet
another
card
here,
so
my
template
folder
will
create
a
new
file
called
confirmationcard.json.
A
Now,
if
you
notice,
what
this
does
is
all
I'm
doing
is:
is
I'm
going
to
make
this
Dynamic,
where
I'm
getting
the
title,
that's
being
passed
in
I'm,
going
to
change
it
to
the
first
letter
to
whatever
the
title
is
as
a
for
the
confirmation
type
to
either
cancel
or
say
that
I've
delivered
the
passenger
I'm
going
to
change
that
to
uppercase,
so
it's
either
cancel
or
it's
complete
or
the
two
options
that
we
have
here.
There's
the
card
that
we're
going
to
render
out
and
then
I'm
going
to
do
my
confirmation.
A
I'm
just
going
to
delete
the
list
item,
because
if
I
cancel
or
if
I've
dropped
them
off,
I'm
deleting
the
item
from
the
list
and
then
in
that
case,
I'm
just
going
to
set
the
status
back
to
available
and
close
the
close.
The
quick
view.
So
to
use
these
these
two
new
quick
views,
I'm
going
to
come
back
over
here
to
my
interface
and
add
in
references
to
these,
or
so
not
my
interface,
my
Barrel.
So
there's
updating
the
trip
and
there's
my
confirmation
quick
view.
A
A
What
I'm
going
to
do
is
in
the
registration
for
the
quick
view
on
the
Navigator
I'm
going
to
paste
these
in
and
notice
here
that
I'm
pasting
in
the
same
thing,
but
I'm
passing
into
the
Constructor
either
if
the
cancellation,
if
it's
a
cancellation
confirmation
or
if
it's
the
trip,
has
been
completed.
Confirmation.
A
A
The
three
stats
in
my
in
route
status
I
want
to
add
in
another
action.
So,
instead
of
just
viewing
the
pickup
location,
I'm
going
to
want
to
add
in
another
one
for
updating
the
trip-
and
that
was
an
import
I
was
supposed
to
grab
in
actually
I.
Don't
want
the
cancel
here.
I
just
want
the
update,
that's
right
and
once
I've
been
hired.
A
I
want
to
implement
what
happens
when
they
cancel.
So
what
I'm
going
to
do
is
I
need
to
add
in
a
quick
view
here.
So
if
they
say
they
want
to
cancel,
I
want
to
confirm
that
they're
going
to
cancel
and
so
I'm
going
to
do
is
down
when
they
say
they
want
to
cancel
the
quick
view.
Here
we
go
right
here,
I'm
going
to
say
this
dot,
quickview
Navigator
dot,
push
cancel
we're
going
to
do
the
cancel
confirmation.
A
So,
let's
test
this
out,
so
let's
restart
our
web
server
to
make
sure
that
we've
picked
everything
up
there
we
go
and
let's
refresh
the
page,
okay,
there
we
go
so
now.
Let's
preview,
this,
let's
view
the
drop-off
location
there
we
now
we
have
it
implemented.
So
we
can
see
where
we,
where
the
user
said
they
wanted
to
be
dropped
off.
Remember
we
were
starting
right
here
now
they
said
they
wanted
to
go
to
the
hub,
which
is
right
over
here
and
then,
if
I
want
to
complete
the
trip.
I'll,
just
click
complete
trip.
A
It's
going
to
ask
me
if
I
want
to
confirm
that
I
say
yes
and
what
we
should
see
is
our
status
should
go
back
to
available
and
our
item
should
get
should
disappear
from
the
list
and
it
does
okay.
Now,
let's
do
this
again.
So,
let's
book
another
trip
choose
an
origin,
we'll
be
right
here:
the
destination:
let's
choose
a
different
destination:
the
Student
Union
I'll,
save
that
change
and
then
I'll
say
we
are
in
route
to
pick
up
and
save
our
trip.
A
Now
we
can
see
that
it's
been
booked
I'm
in
route
to
the
pickup
I
can
see.
Where
am
I
going
by
clicking
this
button.
It
would
do
the
exact
same
thing
we
saw
earlier
and
then
on
update
trip.
This
is
where
I
can
say
that
I'm,
either
canceling
it
or
I've
picked
them
up
and
if
I
picked
them
up,
I
will
then
be
hired
sure
enough.
Now
I'm
hired
driving
the
passenger
to
the
rights
Union.