►
Description
This module introduces you to creating custom Adaptive Card Extensions (ACEs) with the SharePoint Framework (SPFx) that can be used in Viva Connections or in Viva Home.
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'.
➡️ Next video on this series - https://www.youtube.com/watch?v=kefrLAS2DRw&list=PLR9nK3mnD-OUjNKUMsWJwYnRnsmxXojYs&index=2
Microsoft Learning Module
• Microsoft Learning article - https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-adaptive-card-extension-card-types/2-adaptive-card-extension-basics
• 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
Welcome
to
the
Microsoft
learning
module
on
creating
adaptive
card
extensions
for
Viva
connections.
This
Microsoft
learning
module
will
introduce
you
to
the
creating
custom
adaptive
card
extensions,
also
known
as
Aces,
with
the
SharePoint
framework,
also
known
as
spfx,
that
can
be
used
in
Viva
connections,
dashboards
and
Viva
Home.
These
Aces
will
work
with
all
Viva
connections,
clients,
including
the
desktop
and
mobile
apps.
A
A
Home
is
with
adaptive
card
extensions,
also
known
as
Aces
aces
are
similar
to
web
Parts,
but
primarily
use
adaptive
cards
to
implement
the
user
experience
in
this
unit,
you're
going
to
learn
what
aces
are,
how
they
work
and
the
basics
of
creating
a
custom
Ace
to
extend
your
users,
Viva
connections
and
Viva
Home
experience,
the
Viva
home
and
Viva
connections.
Dashboard
and
mobile
experience
can
be
customized
and
extended.
Using
Aces
developers
can
use
the
spfx
to
create
custom
Aces
to
enable
customized
experiences
and
Viva
connections,
dashboards
and
the
Viva
connections.
A
Mobile
app
the
aces
enable
users
to
quickly
view
information
at
a
glance
or
interact
with
cards
in
a
focused
and
mobile-friendly
experience.
Developers
can
create
a
new
ace
using
the
SharePoint
framework
and
Microsoft
added
support
for
creating
Aces
to
spfx
version
1.13
that
was
released
in
late
2021.
A
This
added
a
fourth
component
type
capability.
In
addition
to
the
existing
support
for
web
Parts,
extensions
and
Library
components
and
Ace
has
a
similar
structure
to
a
web
part.
So
if
you
haven't
experienced
creating
web
Parts,
the
process
for
creating
Aces
will
look
quite
familiar
like
web
Parts
Aces
can
be
developed
and
tested
using
the
SharePoint
hosted
workbench
in
an
existing
SharePoint
online
site.
A
Now,
let's
look
at
the
different
types
of
cards.
Viva
connections
and
the
SharePoint
framework
support
a
few
different
types
of
cards
for
Aces.
These
include
the
basic
card
view:
the
image
card
View
and
the
primary
text
card
view.
Each
of
these
different
card
types
has
subtle
differences
in
the
properties
that
you
can
set
on
the
card.
View.
A
The
basic
card
template
supports
two
properties.
The
first
is
the
title
of
the
ace
typically
set
when
creating
the
project
with
the
Yeoman
generator
for
the
SharePoint
framework,
and
the
second
is
the
primary
text
of
the
ace
that's
used
to
provide
some
context
to
the
user
about
the
card.
The
image
card
template
supports
three
properties.
The
first
is
the
title
of
the
ace
just
like
the
basic
card
has,
and
this
is
typically
set
when
creating
the
project
with
the
Yeoman
generator
for
the
SharePoint
framework,
also
like
the
basic
card.
A
The
second
property
is
the
primary
text
of
the
ace
that's
used
to
provide
some
context
to
the
user
about
the
card,
and
then
the
third
property
is
the
image
URL
of
the
image
that
is
used
to
display
on
the
card
when
the
card
size
is
set
to
large.
The
image
is
going
to
be
rendered
to
the
right
of
the
card,
as
you
see
in
the
picture
here
on
the
slide,
but
when
the
image
card
is
set
to
size
medium,
the
image
is
going
to
be
rendered
above
the
card's
title.
A
Now.
The
primary
text
card
template
supports
three
properties,
just
like
the
other
two.
The
first
property
of
title
is
the
title
of
the
ace
that's
typically
set
when
creating
the
project
with
the
SharePoint
framework,
Yeoman
generator.
The
second
property,
also
like
the
other
two,
is
the
primary
text
of
the
ace.
That's
used
to
provide
some
context
to
the
user
about
the
card
and
the
third
property
is
the
description
of
the
ace
and
that's
used
to
display
more
textual
information
to
the
user.
A
A
Now,
when
you're,
creating
a
new
ace,
you'll
select
one
of
three
available
card
templates
that
we
went
over
in
the
previous
slide
that
Define
what
properties
are
going
to
be
available
within
the
card
View.
The
other
type
of
view-
that's
supported
by
Aces,
is
the
quick
view.
The
quick
view
is
rendered
based
on
an
interaction
with
the
card
view.
Now
these
can
be
displayed
when
the
user
selects
the
card
view
or
when
one
of
the
buttons
is
selected
or
when
some
other
action
happens.
A
But,
unlike
the
card
view,
the
quick
view
rendering
is
implemented
with
an
Adaptive
card
Json
schema
developers
can
make
the
quick
view
Dynamic
by
using
the
Adaptive
card
templating
capability,
where
placeholders
can
reference
data
that's
bound
to
the
to
the
template
as
a
separate
object.
The
way
this
is
done
is
that
you
provide
a
Json
object.
A
That's
just
a
bunch
of
name
value
pairs
that
can
also
contain
an
array
of
data
and
then
within
the
adaptive
card,
Json
you're
going
to
use
the
nomenclature
of
a
dollar
with
the
curly
brackets
around
it
as
the
property
that
you
want
to
Define.
It
looks
very
much.
The
syntax
looks
very
much
like
a
JavaScript
or
a
typescript
template
literal.
A
A
This
optimization
makes
it
so
users
who
are
consuming
the
ace,
don't
always
load
the
property,
paying
script
that
they
won't
use.
For
example,
just
like
a
viewer
of
the
ace,
the
property
pane
is
only
accessible
to
editors
on
the
site
and
then,
finally,
the
render
card
method.
This
is
similar
to
the
web.
Parts
render
method
it
Returns
the
ID
of
the
card
view
that
should
be
used
to
render
out
the
ace-
and
here
in
this
slide
we're
just
listing
that
out
as
a
constant.
A
Now
the
card
view
for
an
ace
is
implemented
in
the
cardview.ts
file,
and
these
are
generally
stored
in
the
card
view
subfolder
within
the
Adaptive
card
extension
component.
The
initial
card
view
file,
that's
created
by
The.
Omen
generator
contains
three
methods:
the
card,
buttons
method,
returns,
0,
1
or
2
objects
of
type
icard
button,
these
Define,
the
buttons
that
are
rendered
on
the
card
View
different
car
view
templates
restrict
how
many
buttons
can
be
displayed
depending
on
various
factors.
A
A
The
properties
on
this
object
should
match
the
properties
that
are
supported
by
the
current
adaptive
card.
Extension
card
template,
that's
selected
when
creating
the
project,
for
example,
and
then
finally,
the
card
selection
method.
This
is
used
to
control
what
happens
when
the
card
view
is
selected
now,
like
SharePoint
framework
web
Parts,
Aces
support
configurable
properties
to
give
editors
the
ability
to
customize
each
instance
of
an
ace.
A
The
implementation
is
similar
to
web
Parts
in
the
sense
that
properties
are
defined
in
an
interface
in
the
same
file
as
the
component
now
like
webparts,
the
default
values
can
be
set
in
the
components
manifest.json
file
in
the
property
called
pre-configured
entries.properties
object.
Now.
One
difference
from
a
web
part
is
that
an
ace
is
designed
around
a
mobile
first
approach
for
the
property
pane
as
I
previously
discussed.
This
is
implemented
by
separating
the
code.
That's
used
to
define
the
property
pane
rendering
from
the
rest
of
the
component.
A
So
here
you
can
see
an
example
of
a
adaptive
card
extension
where
I've
opened
it
up
in
edit
mode
and
then
I've
clicked
on
the
pencil
icon
to
launch
the
property
pane
in
the
right
hand,
side-
and
here
you
can
see
where
I
can
modify
public
properties
that
are
defined.
On
my
what
my
adaptive
card
extension
if
you've
built
a
SharePoint
framework
web
part
using
react,
you're,
probably
familiar
with
the
concept
of
component
State
Aces,
implement
the
same
concept
in
that
when
the
state
changes
it
triggers
the
ace
to
be
re-rendered.
A
The
state
of
the
component
is
accessible,
not
just
in
the
Ace
itself,
but
in
all
its
views,
and
this
includes
both
the
card
View
and
all
quick
views
that
are
used
by
the
ace.
The
components
State
like
its
public
properties,
is
defined
in
the
interface
in
the
same
file
as
the
component.
In
this
section
we
learned
what
aces
are,
how
they
work
and
the
basics
of
creating
a
custom
Ace
to
extend
your
user's
Viva
Connections
in
Viva
Home
experience.