►
Description
In this video, you'll create an Adaptive Card Extension with the Image Card template that displays images taken by one of the cameras on the selected Mars Rover.
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=plePKkwZU-c&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=3
➡️ Next vide 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/5-exercise-ace-image-card
• 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
Now,
when
prompted
I'm
going
to
go
ahead
and
just
accept
the
default
solution,
name
I'm
going
to
choose
the
type
of
component
I
want
to
create,
is
an
Adaptive
card
extension
and
then
I'm
going
to
choose
the
image
card
template.
As
my
template
I
want
to
start
with,
and
I'm
going
to
name
this.
My
Ace
image
viewer
now
after
provisioning,
the
folders
required
for
the
project.
The
generator
is
then
going
to
install
all
the
dependency
packages
by
running
npm
install
automatically
and
when
npm
completes
downloading
all
the
dependencies.
A
Now
this
Ace
component
that
I'm
going
to
create
in
this
exercise
is
going
to
retrieve
and
display
images
that
are
taken
by
a
Mars
Rover
using
one
of
the
open,
API
endpoints
from
NASA.
So
if
we
take
a
look
at
this,
go
to
api.nasa.gov,
we
can
see
we
have
a
bunch
of
apis.
So
if
I
go
jump
down
to
browsing
the
apis,
there's
one
here
called
the
Mars
rover
photos
where
I
can
issue
a
bunch
of
requests.
Now
these
apis
are
all
public
they're.
All
accessible
and
they
are
all
freely
available
as
well.
A
One
of
the
things
with
them
is
there
are
limits
associated
with
them
as
far
as
the
API
goes
or
requests
that
you're
going
to
make
we're
going
to
use
the
demo
API
key
if
I
scroll
down
to
the
bottom
of
the
page
or
if
I
go
to
here,
we're
going
to
use
the
demo
key,
but
just
know
there
are
rate
limits
associated
with
the
demo
key.
You
can
always
create
your
own
account.
A
A
A
The
Mars
rover,
which
is
a
bunch
of
drop
down
options
with
the
selected
item,
is
the
one
that
we
are
passing
in
and
then
the
Martian
Soul
as
well
that
I'm
going
to
want
to
set
now
that
little
enhancement
that
I
added
about
the
currently
selected
item
right
here.
I
need
to
go
back
to
my
extension
and
I
need
to
make
a
change
to
one
of
the
methods
here
when
I'm
getting
the
Deferred
yeah
the
property
pane
right
here,
I
want
to
actually
pass
back
pass
into
this.
A
A
Take
a
look
at
this,
but
in
your
own
time,
but
all
it's
really
doing
is
just
exporting
a
single
method
here
called
Fetch
Rover
photos
and
an
actual
photo
and
making
a
call
using
the
different
values
that
we
pass
in
to
get
the
request
to
get
images
from
the
endpoint.
Now
the
next
thing
we're
going
to
do
with
the
public
properties
and
the
helper
service
created
I,
now
need
to
update
the
components.
A
All
those
are
just
saying
these
squigglys
are
just
warning
us
that
we're
not
using
it
yet
that's
fine,
because
we're
still
coding
now,
let's
now
go
down
to
the
state
and,
let's
add
in
a
couple
properties,
to
keep
track
of
what
photo
we're
looking
at.
So
we
have
the
current
index,
which
will
be
a
number
and
then
we're
also
going
to
have
a
bunch
of
Rover
photos
that
we're
going
to
have
there's
our
collection,
which
are
Mars,
Rover
photos
right.
A
The
next
thing
we'll
do
is
we'll
come
down
into
our
on
init
method
to
initialize
it
because
we
want
to
set
our
current
index
equal
to
zero
in
our
row
of
our
photos
to
an
empty
array
now
in
the
on
init
method,
I
also
want
to
go
through
and
fetch
all
those
images
from
the
API
if
I
have
all
the
values
that
are
that
are
set,
that
I'm
expecting
for
my
properties,
so
I'm
going
to
do
that
by
setting
it
like
this,
and
it
looks
like
Mars
Soul.
Why
isn't
that
working
here?
A
Oh
because
we
want
this
to
be
marked,
we
don't
want
this
to
be
and
Mar.
We
don't
want
to
be
a
NASA,
so
we
want
to
be
a
Mars
soul,
and
then
we
also
have
to
make
this
kind
of
weight.
Async,
sorry,
async,
keyword,
let's
go
back
and
double
check
and
make
sure
we're
setting
those
properties
right.
So
we
wanted
this
to
be
yep.
There's
the
Marshall
right
there,
that's
what
we
wanted
and
over
here
yep.
That's
not
right,
Marshall
right
there,
that's
what
we
want.
A
A
Now,
let's
handle
one
more
scenario:
what
happens
if
the
user
changes
the
selected
Rover
or
the
selected
Mars
day
in
the
property
pane,
we
want
to
go
fetch
the
images
from
and
put
them
in
the
state
for
the
new
values.
So
I'm
going
to
do
this
by
adding
a
new
method,
and
we
did
this
in
our
last
demo,
so
I'm
just
going
to
paste
this
in
and
all
this
does.
A
Is
it
checks
to
see
if
we
change
the
Rover
or
if
we
change
the
saw,
then
I
want
to
go
change
all
the
values
that
we
got
back
so
just
checking
either
one
of
those
things
now
now
that
the
component
is
set
up
to
get
photos
from
the
rest,
API
and
store
them
in
the
state.
I
can
now
update
the
rendering
to
display
the
photos.
So
let's
do
this
by
updating
our
card
view.
First,
so
in
my
card
View,
let's
go
add
in
a
reference
to
an
I
action
arguments.
A
Now
again,
we
can
return
one
two
or
no
buttons
and
if
I
want
to
show
two
buttons
like
a
previous
index
button
when
I'm
not
at
the
start
of
the
end
of
the
collection
photos,
I
can
do
that
I'm
going
to
add
these
buttons
here
by
simply
just
replacing
the
values
that
we
have
in
our
existing
card,
buttons
method
or
the
existing
code.
So
what
does
this
do?
Well?
I'm,
going
to
first
have
nothing
that
I'm
returning
back
I'm
going
to
check
to
see.
A
Now,
let's
update
our
data
method,
our
data
accessor
method
with
some
code
here,
so
what
I'm
going
to
do
is
I'm
going
to
replace
this
returns,
replace
this
return
statement
with
the
following.
So
what
does
this
do?
What
this
is
going
to
do
is
I'm
checking
to
see
if
I
have
a
Rover
set
and
if
or
if
I
don't
have
a
Rover
set
or
if
I
don't
have
the
Martian
Soul
set.
A
Then
I'm
going
to
say
I'm
going
to
display
some
sort
of
an
error
message
here,
I'm
going
to
say
you
got
to
select
the
Rover
and
a
day
or
so
to
display
photos
and
so
I'm
just
going
to
give
them
a
bit
of
a
warning
here.
Notice
here,
I
can
also
set
up
for
accessibility.
I
can
also
set
the
alt
text
of
the
images
and
then
this
image
I'm
using,
is
just
a
picture.
A
default
picture
of
Mars
from
Wikipedia
like
this
okay,
so
just
giving
credit
to
the
to
Wikipedia
there.
A
A
I'm
gonna
go
fetch
that
image
and
then
I'm
going
to
return
back
the
primary
text
saying
which
Rover
and
which
day
the
image
URL
I'll
pass
in
the
URL
to
the
image
I'll
pass
in
some
alt
text
and
I'll
set
the
title
to
whatever
the
name
of
our
component
is
now.
The
last
thing
I
want
to
do
is
I
want
to
update
the
the
on
view
card,
select
the
card
selected
button
here.
So
this
is
when
you
actually
select
the
card.
A
A
And
then
finally,
I
want
to
have
I
want
to
I
want
to
update
what
happens
when
they
click
one
of
my
buttons
to
go
either
previous
or
next
so
I'll
do
that
by
just
pasting
in
this
on
action.
That'll
do
the
same
thing
that
we
did
in
our
previous
demo
that
we
saw
earlier
and
then,
in
this
case
here
I,
don't
think
we're
using
our
strings,
we're
not
so
I'm
going
to
go
ahead
and
just
delete
that
line
right
there.
A
A
I
don't
need
this,
and
instead,
what
we're
going
to
do
is
I'm
going
to
replace
the
interface
that
we're
defining
here,
I'm,
going
to
replace
that
with
the
with
the
Mars
with
the
Mars
Rover
Rover
that
we
want
to
display
because
we're
going
to
be
displaying
back
the
actual
icon
that
we
got
back
from
the
API,
so
I'm
just
fetching
it
back.
This
way.
A
So
here,
what
we're
going
to
have
is
we're
going
to
show
the
image
of
our
of
the
from
the
Rover
we're
going
to
display
a
little
bit
of
text
about
the
image
and
then
I'm
going
to
set
up
a
text
block
with
a
fact
set,
and
what
that's
going
to
do
is
just
write
out
some
details
about
the
actual
photo
that
was
taken.
So
let's
go
ahead
and
build
this
and
see
it
work.
So
we'll
test
all
of
our
code
by
saying
gulp
serve
no
browser
and
it
looks
like
everything
worked.
A
Okay,
so
now
that
we've
got
it
running,
let's
come
over
here
and
let's
enter
our
workbench
I'm
going
to
add.
In
my
adaptive
card
or
my
my
adaptive
card
extension
that
we
created
called
my
image
viewer,
and
here
we
can
see
that
the
the
initial
experience
here
is
showing
the
image
from
Mars,
and
it's
saying
that
we
have
to
select
the
Rover
and
a
soul
to
display
photos.
A
So
if
I
come
over
here
into
edit
mode
or
sorry,
I
want
to
stick
in
edit
mode
and
let's
go
select
edit
mode,
and
we
can
see
we're
using
the
demo
API
key.
What
I
need.
What
I
need
to
do
here
is
I
need
to
add
in
the
soul
and
once
I've
gone
through
and
I've
added
in
1000.
What
we
can
see
is
that
it's
already
fetched
an
image
here
from
the
from
that
day
for
the
Curiosity
Rover.
A
So,
if
I
put
this
in
display
mode,
I
can
then
start
to
cycle
through
these
different
images
and
if
I
select
the
actual
card.
It's
going
to
show
me
the
quick
view
of
our
image,
giving
me
the
ID
of
the
image,
as
well
as
some
details
about
the
image
as
well.
So
in
this
demo
we
saw
how
to
create
a
SharePoint
framework,
adaptive
card
extension
with
the
image
card
template
that's
going
to
display
images
taken
by
one
of
the
cameras
of
this
on
the
selected
Mars
rover.