►
Description
In this 13-minute developer-focused demo, Anoop Tatti shows how he built an Adaptive Card Extension (ACE) to keep Tenant Admins up to date on tenant service health via mobile and desktop devices. The extension uses card view and multiple quick views to display affected issues and services in a tenant. Microsoft Graph is used to get service health data (issues). Submit action handling in ACE and Quick View, theme-based display. Complete and neatly delivered code walkthrough. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 4, 2021.
Demo Presenter: Anoop Tatti (Content+Cloud) | @anooptells
Supporting materials:
• Sample - Service health | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Service-Health
• Video - Getting started on building Microsoft Viva Connection adaptive card components using SPFx | https://www.youtube.com/watch?v=KQGsY5fvLaY
• Ignite Session – Get started with Microsoft Viva Connections Extensibility – Vesa Juvonen & Waldek Mastykarz | https://aka.ms/CONLL112
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos
A
A
A
quick
introduction
about
myself.
My
name
is
anub
khatti.
I
became
a
mvp
just
recently
and
I'm
a
developer
at
content
and
cloud
here
in
uk,
I
write
blogs
on
a
platform
called
medium
under
the
account
unempty.
My
twitter
username
is
on
hotels
and
github.
Username
is
anukti,
so
you
can
follow
me
on
those
platforms
if
needed
right,
let's
start
with
the
demo
first
and
then
look
at
the
code.
A
A
Currently
so,
as
you
can
see,
the
first
thing
it
shows
is:
there
are
currently
five
issues
and
three
services
have
been
affected
and
then,
when
I
click
on
view
details,
it
shows
me
it
shows
us
each
of
the
services
that
have
been
affected
and
then,
if
you
click
on
one
of
the
services,
it
shows
you
what
those
issues
are
and
then,
when
you
click
on
more
details,
it
takes
you
to
the
service
health,
page
and
unloads
the
issue
itself.
So
I
can
take
a
look
as
to
what
the
issue
is
right.
A
So
this
one,
if
I
just
come
out
of
preview,
then
yeah
I'm
in
the
edit
mode.
So
the
thing
is
because
audience
targeting
is
enabled
on
on
the
asus.
We
can
enable
this
only
for
the
admins
who
are
interested
to
know
what
the
issues
are.
So
when
they
open
the
dashboard
on
their
viva
connections,
mobile,
app
or
say
on
the
desktop,
then
they'll
see
this
card
and
then
they
can
take
a
look
at
what
the
issues
are
and
then
you
know
do
something
about
it
right.
So
that's
the
demo.
A
A
So
with
that
in
mind,
and
let's
have
a
look
at
the
code,
so
I
won't
go
into
a
lot
of
detail
of
the
code,
because
those
two
videos
will
provide
you
a
lot
of
information.
However,
I
I'll
go
through
some
of
the
bits
that
I
think
are
important.
So,
firstly,
all
this
code
is
shared
on
github.
Under
the
sp
dev
fx
asus
repository.
A
So
in
this
case,
we
have
a
file
called
as
cardview.s,
which
is
nothing
but
a
text
card.
So
what
we
do
here
is
based
on
the
data
that
we
have
got
from
graph.
We,
we
compute
the
number
of
issues,
so
we
use
a
low
dash,
one
of
lower
dashes
method
called
as
unique
by
and
then
get
the
length
of
the
unique
services
affected,
which
in
this
case
is,
is
two
and
then
for
the
number
of
issues
we
again
use.
A
Microsoft,
graphs
odata
account.
So,
as
you
can
see
over
here,
I've
just
put
the
the
data
that
is
written
from
graph
there's
an
overwrite
account
of
four.
We
just
display
that
over
here
right
and
then
in
order
to
display
all
the
text.
We
just
format
the
text
accordingly
to
say
how
many
issues
and
how
many
services
have
been
affected
once
that
is
done.
We,
when
we
click
on
view
details.
A
We
need
to
show
the
you
know
the
affected
services
and
the
issues
for
that
we've
got
a
card
button
and
then,
as
you
can
see,
we
just
open
a
quick
view
when
that
button
is
clicked.
So
the
code
for
that
is
pretty
much
simple.
It's
nothing
but
a
an
action,
an
action
of
the
type
quick
view,
and
then
we
tell
you
to
open
a
particular
quick
view
that
we
would
have
created
right.
So
we
need
to
format
the
data
slightly,
so
the
on
the
left
side.
You
see
the
data
that
is
returned
from
graph.
A
This
is
a
custom
icon
that
we
have
in
our
code
and
there's
a
method
to
get
an
icon
for
the
service
based
on
the
name
of
the
service,
so
using
load
dash.
We
formatted
the
data
in
such
a
way
that
all
the
data
is
now
grouped
by
service
once
that
is
done,
you
know
we
need
to
display
this
quick
view,
so
we
have
the
data
which
is
grouped
by
service.
Now
we
need
to
display
that,
in
order
to
do
that,
we
are,
we
have
a
file
called
as
issueview.ts.
A
It's
it's
actually
service.
It
should
be
actually
service
view
dot.
Yes,
but
it
was
my
mistake
while
naming
the
file,
but
anyway,
this
file
needs
to
display
all
the
services
that
have
been
affected.
So
all
we
do
is
the
data
that
we
have
formatted
will
be
present
in
in
the
state
variable.
So
we
we
just
get
that
when,
when
the
quickview
loads
and
then
in
order
to
display
that
data
we
make
use
of
adaptive
card
and
hence
this
is
adaptive
card
extension.
A
The
first
thing
we
do
here
is:
we've
gotten
all
the
services
in
an
array
and
that's
what
we
bind
this
json
file
to
and
then
all
we
have
to
do
is
the
first
thing
we
do
is
show
the
image
for
that.
We
create
an
item
of
the
type
image
and
then
the
we
set
the
url
of
that
to
service
icon
now.
Service
icon
is
nothing
but
the
the
data
that
we
set
earlier
in
the
formatted
data.
So
on
the
at
the
bottom.
A
Over
here,
I've
just
taken
the
the
microsoft
365
suite
object
from
our
services
and
we've
got
a
service
icon
property
in
that,
and
that's
what
we
show
over
here
and
similarly
the
next
thing
we
do
is
we
have
a
text
block
wherein
we
have
to
display
the
name
of
the
service
that
is
affected
again
in
the
services
array.
We've
got
the
name
property
for
each
service,
that's
what
is
displayed
over
here
and
then
we
have
to
display
the
number
of
issues
for
each
service.
A
So
that's
nothing
but
a
an
action
of
the
type
submit.
So
we
add
an
icon
in
the
base64
format.
To
that,
and
then
one
thing
we
do
here
is
we:
we
create
a
custom
object
or
a
custom
property
called
as
service
and
then
set
the
value
of
that
to
the
name
of
the
service.
Now
this
custom
property
name
can
be
anything
based
on
what
we
think
is
relevant.
In
this
case
I
am
using,
you
know,
property
name
as
service,
and
the
value
of
that
will
be
the
name
of
the
service
itself.
A
Now,
let's
look
at
how
we
display
other
issues
issues
themselves
again.
This
is
a
quick
view,
so
we've
got
a
ts
file
wherein
we
set
the
data.
So
what
we
do
here
is
we
get
the
selected
service
and
and
all
of
the
services
from
the
state
and
then
based
on
the
service
that
is
selected.
We
need
to
get
the
issues
of
the
service.
So
that's
what
we
do
here
over
here
in
these
services
we
find
that
service
which
has
been
selected,
and
then
we
get
the
issues
of
that
service.
A
So
in
this
case
the
service
that
was
selected
was
microsoft,
365
suit
and
then
the
issues
where
you
know
the
three
issues
that
were
present
in
or
that
were
associated
with
that
service.
So
that's
what
we
need
and
we
set
the
issues
now
now
all
we
have
to
do
is
display
these
issues.
To
do
that
again,
I've
got
an
adaptive
card,
so
what
we
do
is
we
set
the
date
of
that
to
the
issues
area
that
we've
got
and
then
this
one's
pretty
simple.
A
A
It's
it's
nothing
but
an
action
in
which
we
need
to
open
a
url.
So
when
we
click
on
that
url,
it
takes
us
to
the
service
health
page
and
opens
the
issue.
So
that's
what
we
do
over
here.
We
simply
get
the
url
property
of
the
issue
and
then
associate
that
with
the
with
the
more
details
button
right.
So
that's
the
code
overview
now
here
are
some
resources
that
were
used
in
the
development
of
this
sample.