►
Description
In this 16-minute developer focused demo, Paolo Pialorsi reviews capabilities of cards and rendering devices. QuickView and CardView cards (ACEs) can be created with no-code (configurable), low-code (designable) or pro code (customizable). Step through ACE creation using yeoman generator, creating a CardView card with specific elements (images, text, buttons). Scaffold and explore the code. Discuss getting data from external sources, data binding, deep linking, and usage of secured Azure Functions in back-end. Add a button and register views.
This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 13, 2023.
Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials
• Sample - Contoso Retail Dashboard | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-samples-react-retail-dashboard/
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Demo - Extend SPFx apps across Microsoft 365 - Contoso Retail scenario (2023-06-06) – Paolo Pialorsi (PiaSys) | @PaoloPia
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
A
To
this
demo,
here
we
are
going
to
talk
about
how
we
can
leverage
Microsoft,
Viva
connections,
adaptive
card
extensions
to
create
end-to-end,
Solutions
integrated
with
Microsoft
teams.
So
just
a
few
words
about
myself,
I'm,
Paul
and
I'm,
a
solution
architect
working
in
the
area
of
Microsoft
2c5.
As
you
can
imagine,
you
can
read
everything
else
on
the
slide.
I
don't
want
to
stay
here
too
long,
so
I
will
like
I,
will
just
move
to
the
real
content
and,
first
of
all,
let
me
try
to
briefly
set
the
context.
A
This
is
a
demo
which
is
part
of
a
big
demo
that
you
can
find
also
on
the
samples
gallery
that
Fabian
was
talking
about
and
the
demo
covers
how
you
can
use
and
how
you
can
create,
first
of
all,
with
SharePoint
framework,
a
solution
to
extend
Microsoft
teams,
as
well
as
with
the
connections
and
with
the
back-end
ecosystem,
based
on
the
main
workloads
of
Microsoft
365.
We
have
been
playing
with
these
demo
solution
already
in
some
of
the
previews
Community
course,
and
we
will
do
again
in
the
future
today.
A
A
Whenever
you
do
that,
you
use
a
SharePoint
framework,
because
SharePoint
framework
is
nowadays
at
the
framework
for
extending
a
Viva
connection
dashboard
and
you
create
cases
so
the
Adaptive
card
extensions.
Actually,
whenever
you
want
to
extend
the
Vivo
connection
dashboard,
you
can
do
that
either
using
a
fully
customized
approach.
So
the
so-called
Pro
code
approach.
But
you
can
also
use
the
no
code,
one
which
relies
on
just
configuring
on
the
dashboard,
a
set
of
cards
provided
by
Microsoft,
the
so-called
first
party
cards.
A
What
you
see
right
now
on
the
screen
right
now.
In
this
moment,
the
retail
inventory
is
called
quick
view
because
it
is
a
popping
up
screen
which
allows
you
to
provide
an
advanced
UI
in
your
cards.
While
all
these
rectangles
or
squares
that
you
see
are
called
card
views
and
are
the
main
entry
point
of
every
single
adaptive
card
extension.
A
This
is
the
solution
on
the
samples
gallery
and
later
at
the
end
of
this
demo,
I
will
share
with
you
a
direct
link
and
a
QR
code
to
download
it.
So
you
don't
need
to
write
down
the
URL
right
now
and
here
in
the
GitHub
repository
you
will
find
both
the
source
code
of
the
front
end
with
SharePoint
framework,
as
well
as
of
the
back
end.
A
With.Net
Azure
functions,
then,
when
you
use
it
from
an
end
user
point
of
view
now
I'm
in
the
desktop
version
of
the
Viva
connection,
dashboard,
you
can
click
on
the
all
products
button
and
you
get
access
to
this
item,
which
is
called
quick
view,
while
the
other
one.
This
rectangle
here
is
called
car
view.
As
I
told
you,
when
you
click
on
the
quick
view
button
right
here,
you
are
brought
to
the
themes
app
that
we
have
in
this
Solution.
That's
why
I
told
you
that's
an
end-to-end
solution,
because
we
have
components
inside
teams.
A
We
have
components
inside
Viva
we
have
a
backend
on
Azure
and
many
more
items
will
come
in
will
be
shared
in
the
future
about
this
demo.
Here,
as
you
can
see,
I
simply
clicked
on
a
product
and
let's
say
I
want
to
get
this
pink
cotton
t-shirt.
If
I
click
on
it,
I
will
be
brought
to
a
teams
up
directly
with
a
deep
link
which
will
bring
me
to
the
detailed
information
about
the
selected
product.
A
So
now
let
me
explain
you
how
we
created
this
solution
and
how
you
can
easily
do
the
same
in
your
own
custom,
developed
Solutions.
First
of
all,
I
created
an
Adaptive
card
extension.
In
order
to
do
that,
we
need
to
run
the
Yeoman
generator
for
SharePoint
framework,
so
yo
at
Microsoft
SharePoint.
You
provide
whatever
name
you
like
for
your
solution
and
you
choose
to
create
an
Adaptive
card
extension.
A
When
you
do
that,
you
then
need
to
choose
what
kind
of
first
UI
you
want
to
have
for
the
card
View
for
the
first
card
view
that
will
be
rendering
the
UI
of
your
adaptive
card.
In
fact,
whenever
you
create
create
an
ace
or
an
Adaptive
card
extension,
you
can
have
as
many
card
views
and
as
many
quick
views
as
you
like,
but
for
sure
you
will
have
at
least
one
card
view
which
will
be
the
one
you
will
be
able
to
see
in
the
dashboard.
A
The
very
first
time
you
will
add
your
adaptical
extensions
to
the
dashboard.
So
this
question
right
here
is
to
let
you
choose
how
the
first
card
view
will
look
like,
and
it
can
be
a
basic
card
just
with
the
basic
text
can
be
a
card
with
an
image
like
the
one.
We
see
right
here.
This
one
is
a
card
with
an
image.
In
fact,
we
have
an
image
which
is
changing
and
we
have
some
text
on
the
left
side
plus
additional
custom
buttons.
A
This
scaffolding
tool
will
generate
for
you
a
bunch
of
code,
and
then
you
will
find
something
like
the
following
solution.
That
is
the
real
one
I'm
going
to
share
with
you.
I
hope.
The
font
size
is
good
enough.
So
here
we
have
the
automatically
folded
code
for
my
inventory
adaptive
card
extension
that
I
created
in
this
solution,
and
whenever
you
create
an
ace,
you
get
a
class
which
extends
the
base,
adaptive
card
extensions
provided
by
the
basic
infrastructure
of
SharePoint
framework
and
by
in
editing
from
this
one.
A
In
the
on
init
method
of
this
extension,
you
can
configure
all
the
card
views
and
quick
views
that
you
want
to
have
in
the
UI
of
your
solution.
As
I
told
you,
you
can
have
as
many
cards
as
you
like
and
as
many
quick
views
as
you
like
for
all
of
them.
You
need
to
register
them
in
the
only
method
in
this
sample.
I
just
have
one
card
View
and
one
useful
I
register
those
two
objects
and
I
simply
then
need
to
do
proper.
A
Setting
up
of
my
solution
here,
for
example,
we
work
using
a
service,
actually
a
couple
of
service
classes,
one
to
manage
the
settings
of
the
ace
and
want
to
manage
the
access
to
the
actual
data
which
is
exposed
through
a
rest
API
in
the
back
end.
So
the
service
that
I'm
going
to
use
to
access
data
is
nothing
more
than
a
support
service
class
which
will
make
all
of
the
rest
requests
targeting
the
big
and
the
rest
API
I'm,
using
right
here.
A
Information
that
I
have
also
in
the
SharePoint
framework,
custom,
Solutions
and
once
I've
done,
that
I
simply
trigger
a
in
a
synchronous
reload
of
my
data
through
the
service,
so
that
I
can
initially
do
a
first
rendering
of
my
card
and
then
in
background.
I
can
do
the
actual
download
of
data
and
render
my
data
in
the
UI
of
the
card
view.
The
car
view
itself
is
really
simple.
A
Any
card
view
is
a
class
which
extends
one
of
the
three
templates
that
we
have
out
of
the
box
in
SharePoint
framework
can
be
the
base
image
card
can
be
the
one
based
on
text
or
or
the
basic
one.
So
the
tree
that
we
saw
previously
now
this
one
is
based
on
the
basic
Magic
card
view.
So
whenever
we
want
to
implement
this
kind
of
card,
we
simply
need
to
provide
three
information:
the
primary
text,
the
URL
of
the
image
we
want
to
render
and
a
title
for
our
card.
A
These
three
formation
will
be
used
by
the
infrastructure
of
SharePoint
framework
and
of
the
aces
to
render
the
actual
UI
of
the
card
Plus.
In
my
card,
sorry,
not
here,
but
here
we
have
the
buttons.
So
how
do
we
render
the
buttons?
We
have
a
card
buttons
method
that
we
can
expose,
which
can
return
just
one
button
or
two
buttons
or
no
buttons
up
to
you.
A
So
you
can
return
one
two
or
zero
buttons
and
inside
the
logic
of
this
method,
you
can
return
an
array
of
zero
one
or
two
items
which
will
simply
say
what
every
single
button
will
do.
My
scenario,
my
button
will
simply
be
of
type
quick
view,
meaning
that
it
will
activate
a
quick
view
and
will
render
a
quick
view
which
will
be
identified
by
ID.
A
This
ID
is
precisely
the
ID
that
we
registered
in
the
on
init
method
of
my
card
and
which
is
defined
as
a
static
content
here
in
my
as
a
constant
here
in
my
card
definition.
So
let's
have
a
look
at
the
quick
view.
The
quick
view
is
a
little
bit
more
complex,
despite
the
name
quick
view,
because
it
is
quick
when
rendering,
but
not
necessarily
when
you
develop
it,
but
you
need
to
know
the
Adaptive
card
Json
syntax.
In
order
to
do
that.
A
In
fact,
we
still
have
a
class
which
implements
the
actual
base
logic
of
the
quick
view,
but
then
we
inherit
for
from
a
type
which
will
rely
on
property
and
state
of
our
adaptive.
Car
extension
so
notice
that
here,
in
the
definition
of
the
Adaptive
card
extension,
we
have
an
interface
for
the
properties
and
an
interface
for
the
state,
almost
like
what
happens
with
react,
even
if
it
is
not
exactly
the
same
story
and
then
the
same
properties
and
states
are
available
in
the
card
View,
as
well
as
in
the
quick
view.
A
But
in
the
quick
view,
we
also
have
the
definition
of
an
additional
interface,
which
will
be
the
data
description
interface
through
this
interface,
with
a
clear
what
kind
of
data
we
want
to
provide
for
data
binding
inside
our
quick
view.
We
then
have
a
get
data
method
which
we
can
use
to
provide
actual
content
for
the
object
which
will
implement
the
data
interface
and
in
the
template
folder.
We
have
a
Json
file
which
will
Define
the
actual
rendering
of
our
quick
view
in
this
file.
A
We
use
the
syntax
of
the
Adaptive
cards,
which
you
should
learn
about.
If
you
want
to
develop
this
kind
of
solutions-
and
here,
for
example,
I
Define,
a
body
with
an
initial
text
which
will
be
the
title
property
of
my
data
source
object
and
then
with
a
table
which
has
been
released
in
version
1.55
of
these
schema
and
we
Define
it
a
table
which
is
made
of
columns
and
rows
and
all
of
the
rows
will
be
data
bounded
to
the
products
array
property
that
we
have
in
the
data
source
object.
A
Where
we
have
a
product
array
of
retail
product.
Every
retail
product
is
made
of
code
description
and
so
on
so
forth
and
as
such
in
the
Json.
We
simply
rely
on
the
picture
on
the
product
code
using
this
syntax,
so
dollar
curly
bracket
and
the
name
of
the
property
that
we
want
to
bind
to
our
interface.
So
basically,
we
use
this
approach.
A
One
interesting
thing
is
the
Deep
link,
which
is
the
last
thing
I
want
to
cover
in
the
data
source
object
that
I'm
providing
to
the
Json
I
also
provide
a
deep
link,
ID
and
the
app
URL.
These
two
properties
simply
rely
on
the
URL
of
my
teams
app
inside
micro
teams.
The
app
ID
is
a
unique
ID
which
identifies
my
application,
the
one
in
which
I
am
and
then
I
simply
provide
data
inside
the
Json,
the
following
Behavior.
A
So
the
input
argument
that
we
provide
followed
by
a
set
of
context,
information
which
will
include
the
product
code
that
we
want
to
render
and
the
unique
ID
of
the
deep
link
that
we
are
rendering
right
now
in
the
UI.
So
at
the
very
end,
when
I
click
on
this
little
arrow
I'm,
targeting
the
user
to
the
app
and
I'm
providing
in
the
query
string
the
ID
of
the
product
that
I
want
to
render.
A
A
You
can
do
data
binding
inside
the
quick
views
simply
by
defining
a
custom
data
source
object
and
providing,
for
example,
an
array
of
items
that
you
can
use
in
the
Json,
and
you
can
eventually
also
use
the
open,
URL
action
to
bring
the
user
from
the
Viva
connection
dashboard
to
a
teams
application
or
to
whatever
else
you
want
to
bring
the
user
to
that
said,
let
me
switch
briefly
back
to
the
presentation
here.
You
can
find
a
QR
code
to
access
the
source
code
of
the
demo
solution
that
I
showed
you
and
just
below.