►
Description
In this 14-minute developer focused demo, Paolo Pialorsi and Vesa Juvonen step through a new reference (Order management) solution that shows surfacing relevant partner hosted business data from a secured API hosted through Azure AD and how to consume a multi-tenant API within a set of Microsoft Viva Connections Adaptive Card Extensions (ACEs) developed with SharePoint Framework (SPFx). ACE front-end, Azure functions back-end, and Azure AD secures communications. The API needs to be consented and API permissions approved to be called in the customer’s tenant. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 30, 2021.
Demo Presenters:
• Paolo Pialorsi (PiaSys) | @PaoloPia
• Vesa Juvonen (Microsoft) | @vesajuvonen
Supporting materials:
• Article - Guidance for implementing partner offerings for Viva Connections with ACEs and custom APIs | https://devblogs.microsoft.com/microsoft365dev/guidance-on-implementing-partner-offerings-for-viva-connections-with-aces-and-custom-apis/
• Sample - Consume a multi-tenant API within a set of Microsoft Viva Connections Adaptive Card Extensions (ACEs) | https://github.com/pnp/spfx-reference-scenarios/tree/main/samples/ace-pnp-contoso-orders
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
Pretty
recently,
we
did
a
a
reference
solution
related
on
consuming
a
multi-tenant
apis
within
the
microsoft
viva
connection,
adapter
card
extensions
and-
and
we
wanted
to
have
a
15-minute
story
related
on
what
is
available,
and
this
is
a
reference
solution,
a
kind
of
a
blueprint
which
is
demonstrating
how
to
make
these
things
happen.
But
let's
have
a
quick
look
on
a
few
slides
first
on
on.
Why
would
you
do
this?
So,
first
of
all,
just
a
recap.
Of
course,
the
microsoft
resistive
opportunity
is
huge
for
the
partner
ecosystem.
A
We
have
more
than
250
million
monthly
active
users
in
microsoft
teams,
and
we
have
more
than
200
million
monthly,
active
users
and
sharepoint
online.
Of
course,
a
lot
of
the
people
are
overlapping
between
these
things,
because
sharepoint
is
powering
the
content
within
the
microsoft
teams,
but
related
on
viva
connection.
We
were
connection
is
exposed
in
the
teams,
but
it's
powered
by
sharepoint
behind
of
the
scenes
and
is
powered
by
the
sharepoint
framework.
A
Now,
in
this
particular
case,
we
basically
are
going
to
show
a
the
steps
and
requirements
of
building
a
isv
partner
offering
for
viva
connection.
So
what
we
actually
need
to
do
here
and
having
a
new
viva
card
exposed
in
the
viva
connection,
either
in
a
desktop
or
in
a
mobile,
so
you'll
see
the
mobile
experience
in
the
in
this
line.
A
But
technically
as
part
of
this
viva
connection
journey
and
before
the
ga,
we
worked
with
quite
a
few
partners
on
helping
them
to
build
their
offerings
in
the
app
source
for
viva
connections
and
as
part
of
those
that
work.
We
learned
about
the
challenges
and
we
learned
about
the
questions
what
the
partners
were
having
and
we
realized
that
we
certainly
need
to
have
a
better
guidance
and
a
reference
solution
available
for
the
following
partners
to
adapt
the
viva
connection
story.
A
And-
and
what
do
we
need
to
do
here
and
just
to
kind
of
explain
what
the
partner
needs
to
be
doing
here.
So,
first
of
all,
viva
connection
experiences
are
being
built
with
using
sharepoint
framework
again
a
bit
of
an
interesting
terminology
to
call
it
still
a
sharepoint
framework.
But
we'll
we'll,
hopefully
get
the
name
chance
pretty
soon.
Marketing
is
in
charge
of
running
that
now
you
use
the
sharepoint
framework
to
create
those
rework
cards
and
application
customize
and
web
parts,
and
we
actually
the
story
relates
in
all
of
them.
A
The
the
sample
solution
focuses
on
cards,
but
in
the
same
way,
if
you
would
be
using
or
creating
a
partner
with
part
for
the
viva
connection
desktop,
and
it
would
be
hitting
a
multidown
api,
you
would
actually
have
the
similar
requirements
now,
quite
typically,
a
partner
api
offering
is
based
on
some
sort
of
an
api
or
a
service
being
hosted
in
the
cloud.
So
the
the
cart
or
the
web
part
or
an
application.
A
Customizer
heats
that
api
to
surface
relevant
information
for
the
customer
or
for
the
tenant
or
for
the
user,
and
that's
basically
the
setup
which
we
have
available
within
the
solution.
So
deployment
of
this
one
we
have
actually
a
a
ready-to-use
sample
available,
actually
hosted
live
on
the
internet,
which
is
pretty
cool.
A
So
you
can
actually
step
through
the
steps
and
in
the
location,
we'll
share
the
location
and
guidance
and
all
of
that
and
we'll
show
some
assets
in
a
second,
but
we
need
to
have
an
api
which
needs
to
be
consented
in
a
customer
tenant.
So
the
customer
needs
to
be
aware
of
this
multitenant
api
so
that
they
can
start
using
it
and
then
ask
the
solution.
The
sharepoint
framework
solution
is
getting
installed
the
solution.
A
B
Okay,
yes,
thank
you
visa.
So,
first
of
all,
let's
start
having
a
look
at
the
solution
in
action
so
that
we
can
play
with
it
and
we
can
understand
the
overall
goal
from
a
functional
point
of
view,
and
the
idea
is
to
provide
an
order
management
solution
with
a
ui
for
end
users
based
on
an
adaptive
card
extension
and
in
the
back
end
we
have
an
azure
function
which
will
provide
just
a
fake
list
of
orders
for
the
sake
of
simplicity
but
which
is,
as
visa
said,
already
hosted
on
azure
for
you.
B
So
you
can
play
with
this
solution
without
any
need
to
host
anything
on
your
site,
but
you
can
just
play
with
it
and
learn
from
it.
Of
course,
if
you
want,
you
will
also
find
in
the
source
code
of
the
solution,
the
azure
function,
so
that
you
can
take
inspiration
from
it.
So
now,
let
me
show
you
the
adaptive
card
extension
in
action.
This
is
my
adaptive
card
to
manage
the
orders.
B
I
can
show
you
that
in
the
settings
of
this
adapter
card,
we
configure
the
url
of
a
back-end
service,
which
would
be
the
one
we
are
going
to
use
in
order
to
show
the
functionalities,
and
if
I
will
go
to
the
preview
mode
of
my
workbench,
we
can
see
that
we
can
easily
click
on
this
button
to
see
a
list
of
orders,
a
fake
list
of
orders.
As
I
said,
because
this
is
just
for
the
sake
of
providing
an
example.
B
And
here
we
can
see
what
kind
of
experience
the
end
users
can
have
in
adaptive
card
extensions.
So,
for
example,
we
can
expand
an
item.
We
can
have
a
dynamic
ui.
I
can
say
that
as
a
person
in
charge
of
managing
the
orders,
I
can,
for
example,
say
that
this
order
is
now
under
processing
and
I
can
update
it.
So
imagine
this
kind
of
experience
from
a
mobile
device
where
the
user
in
storage,
for
example,
can
start
processing
an
order
received
by
the
system,
and
you
can
also
insert
a
new
order.
B
Okay,
new
order
and
you
can
use
another
card
to
insert
a
new
order
in
the
system.
Just
for
the
sake
of
making
an
example,
it
will
be
the
order,
number
11
or
11
2021
or
whatever
else,
and
this
will
be
my
customer
id
a
fake
one
for
sure,
and
the
order
will
be
inserted
today
with
a
specific
status
which
can
be
any
of
these
values.
When
I
will
click
on
insert
order,
we
will
see
that
right
now
we
have
10
orders
in
the
system,
but
by
clicking
on
insert
order.
B
B
Now,
how
did
we
build
this
solution?
We
have
the
adaptive
card
by
itself
and
we
can
really
briefly,
without
digging
into
the
code,
see
that
we
have
a
sharepoint
framework
solution
built
with
all
the
technology
landscape
that
we
already
know
if
we
are
sharpened
framework
developer.
This
is
just
an
extension
built
with
sharepoint
framework.
B
I
mean
just
the
class
built
with
typescript
and
all
the
beauty
and
the
capabilities
that
we
have
in
sharepoint
framework,
and
then
we
can
build
all
the
ui
elements
of
this
solution,
relying
on
the
adapter
card,
json
syntax,
which
is
one
of
the
killer,
features
in
my
opinion
of
the
adaptive
card
extensions,
because
in
order
to
define
the
ui,
you
simply
need
to
rely
on
a
well-known
and
broadly
adopted
technology
like
the
adaptive,
cart
json.
Here,
for
example,
you
can
briefly
see
the
json
we
are
using
to
render
the
list
of
orders.
B
B
So
we
also
have
thanks
to
the
capabilities
that
we
have
in
sharpening
framework
the
possibility
to
use
a
backhand
api
secured
with
azure
active
directory,
and
that's
why,
in
our
solution,
we
have
in
azure
active
directory
an
application
registered
as
a
multi-tenant
app,
which
is
provided
to
any
tenant
willing
to
consume
our
solution.
In
fact,
if
you
have
a
look
at
this
application,
we
can
easily
see
that
it
is
configured
to
support
authentication
in
multiple
organization,
meaning
that
it
targets
multiple
tenants.
B
How
can
you
use
it
well
in
order
to
have
this
application
available,
registered
or
known
in
your
target
tenant,
you
will
simply
need
to
go
through
a
constant
flow,
exactly
the
one
we
were
talking
about
in
the
previous
demo.
Actually,
so
the
user
is
willing
to
use
this
solution
in
their
tenant
will
simply
to
go
through
a
registration
flow
called
constant
flow
and
we
left
the
application
registered
in
their
tenant.
B
Then
we
provide
a
backend
infrastructure
based
on
an
azure
function,
hosted
on
azure,
which
will
provide
the
actual
backend
functionality
to
manage
the
list
of
orders
and
to
provide
all
the
create,
read,
update,
delete
and
query
functionalities
for
the
list
of
orders.
So
the
key
components
are
the
end
built
with
the
adaptive
card
extensions,
the
back
end
built
with
the
azure
functions
and
in
the
middle
we
have
azure
active
directory
to
secure
the
communication.
B
B
An
aadhttv
client
object
to
consume
a
specific
api
which
one
well
the
one
that
we
registered
as
an
obstacle
as
a
multi-tenant
application
in
our
azure
directory.
So
this
id
is
precisely
the
one
we
have
in
azure
ready
for
our
multi-tenant
application
right
here.
So
here
we
are
just
matching
that
application
unique
id
in
order
to
get
back
a
client
object
which
will
make
it
possible
for
us
to
easily
consume
the
backend
api,
an
api.
I
said
it
is
a:
is
your
function
one?
B
So
if
we
look
at
the
function
sections
we
can
see
that
we
have
some
okay.
We
need
to
refresh
this
guy,
or
I
can
even
switch
here
to
show
you
the
visual
studio
side
of
the
story.
We
have
functions
like
functions
to
get
the
list
of
orders
or
functions,
to
get
a
specific
order
and,
generally
speaking,
all
the
create
read,
update
capabilities
well
on
the
sharepoint
framework
side
in
the
order
service
that
we
are
using,
we
simply
have
the
same
functionalities
in
typescript
on
the
client
side.
B
So
when
we
want
to
get
the
list
of
orders,
we
will
target
the
url
of
the
api,
followed
by
the
api,
slash
orders
endpoint,
and
it
worked
almost
like
when
we
used
the
microsoft
graph
from
sharepoint
framework.
But
now
we
are
using
a
custom
api
that
we
are
consuming
to
provide
additional
functionalities.
B
So
here
in
the
spfx
reference
scenarios
repository
on
github,
you
can
find
the
whole
source
code
of
the
solution.
Under
the
ac
pnp
contoso
orders
sample
solution,
and
in
there
you
will
find
the
source
code,
as
I
said,
both
of
the
spfx
adapter
cap
extension
and
of
the
function
app
together
with
a
script
to
do
the
provisioning
in
your
own
tenant
and,
of
course,
a
set
of
documents
of
md
documents
that
you
can
refer
to
in
order
to
do
the
minimal
path
to
awesome.
B
So
if
you
simply
want
to
play
with
it
well,
you
can
come
here.
You
can
execute
the
powershell
script,
providing
the
name
of
your
target
tenant
and
the
solution
will
be
registered
and
available
in
your
tenant,
meaning
that
you
will
have
the
constant
flow
applied
to
your
tenant,
and
you
will
find
the
sharepoint
framework
solution
automatically
installed
in
your
app
catalog
and
available
in
your
viva
connections.
Dashboard
or
if
you
rather
want
to
dig
into
how
the
solution
works.
B
A
Thank
you,
paula
and
and
of
course,
not
working
on
the
final
location
of
all
of
these
assets
and
documentation,
and
all
of
that
so
most
likely
we'll
surface
this
sooner
or
later
in
the
docs.microsoft.com,
but
for
now
they're
in
github
and
in
this
location
and
we'll
put
that
one
in
the
video
notes
and
in
the
blog
post
related
on
the
recording.
So
everybody
can
access
them
already.
But
thank
you
following
that.
One
thank.