►
From YouTube: Using Microsoft Graph APIs in Viva Connection ACEs
Description
In this 16-minute developer-focused demo, Paolo Pialorsi guides viewers on how to consume Microsoft Graph APIs within ACEs. Use Graph in an ACE to read from and write to calendar. Step through configuring webApiPermissionRequests in package-solution.json file, granting permissions via SPO Admin UI and consuming Microsoft Graph via SPFx context object (MSGraphClient) and binding the data to the UI of CardView(s) and/or QuickView(s). Deploy solution with sppkg package with stated permissions requirements. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.
Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials:
• Documentation - List events | https://docs.microsoft.com/graph/api/user-list-events
• Demo - Viva Connections – Data Binding in SPFx Adaptive Card Extensions – Paolo Pialorsi (PiaSys) | @PaoloPia | https://youtu.be/WkFVkFKPDMc?t=1297
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/vide
A
Hello,
everyone
and
yes
now
we
are
going
to
talk
about
how
we
can
consume
micrograph
apis
within
microsoft,
viva
connections,
adaptive
card
extensions,
so
a
few
words
before
digging
into
the
demo,
and
I
simply
want
to
remind
you
that
whenever
we
create
an
adaptive
card
extension
with
sharepoint
framework
under
the
cover,
we
have
a
sharepoint
framework,
the
whole
sharpen
framework
infrastructure
so
as
like,
as
we
can
easily
consume
micrograph
in
any
kind
of
client,
sidewall
part
that
we
create
with
spfx.
So
we
can
do
the
same
in
an
adaptive
card
extension.
A
So
we
can
simply
rely
on
the
ms
graph
client
type.
We
need
to
define
in
the
package
solution
json
file
of
our
solution.
The
web
api
permission
request
that
we
want
to
have
satisfied
from
a
requirement
permission
requirement.
Point
of
view.
We
need
to
grant
those
permissions
to
the
solution
that
we
created
with
spf
exit
for
the
adaptive
card
extension
that
we
created
with
spfx
and
then
in
our
codebase.
A
In
order
to
create
a
new
instances
of
events
in
a
calendar
or
sending
email,
messages
or
stuff
like
that,
so
this
is
what
we
are
going
to
see
from
a
very
basic
point
of
view,
just
to
understand
how
we
can
do
that
in
an
adaptive
card
extension.
So
let
me
switch
to
the
demo
and
first
of
all,
this
is
the
very
first
one
I
will
show
you.
A
This
is
a
very
basic
sample
in
which
I
want
to
focus
on
how
we
can
consume
graph,
rather
than
how
we
can
create
a
really
cool
ui,
because
this
is
just
a
demo
focus
on
consuming
a
graph
in
ac.
So
this
is
a
sample
in
which
we
can
see
a
list
of
events
in
the
calendar
of
the
currently
connected
user.
How
can
we
do
that
using
adaptive
card
extensions?
A
So
here
we
have
a
solution
that
I
created
with
the
human
generator
for
sharepoint
framework
and
I
simply
scaffolded
an
adaptive
card
extension
object
or
component
here.
First
of
all,
in
the
on
init
method
of
my
component,
aside
from
registering
the
cartridge
carbon
quick
views
that
I
have
in
my
component.
In
my
ace,
I
just
create,
as
I
was
telling
you,
through
the
context
of
sharpening
framework,
a
new
instance
of
the
micrograph
client
using
the
msgraph
client
factory
property
of
the
context
of
spfx
and
using
the
getclient
method.
A
Here,
and
here
we
have
an
interface
declaring
what
the
calendar
service
will
provide,
so
an
init
method,
getting
the
graph
client
msgraph
client
instance
as
the
input
argument
and
a
get
top
calendar
items
method
which
will
return
an
array
of
event,
types
where
every
single
event
is
simply
defined
as
a
set
of
properties
like
the
subject,
the
start
and
then
the
date
and
time
of
the
event,
which
is
a
complex
type
defined
right
here.
If
the
event
is
an
online
meeting
or
not,
and
the
web
link
to
the
event.
A
So,
whenever
I
want
to
use
this
calendar
service,
I
first
of
all
initialize
the
object
and,
as
you
can
see
here
in
the
calendar
service,
I
make
it
available
globally,
so
that
I
can
simply
rely
on
the
instance
that
I
have
and
using
the
settimeout
method.
I
simply
load
the
top
calendar
items
in
a
dedicated
request,
rather
than
doing
the
actual
request
within
the
on
init
method,
just
to
speed
up
the
load
of
the
adaptive
card
extension.
A
So
in
the
get
top
calendar
items
method,
I
get
back
my
array
of
events
and
I
can
simply
set
them
inside
the
state
of
my
component.
Now
the
get
top
calendar
items
simply
relies
on
the
graph
client
and
using
the
me
slash
events
and
point
of
microsoft,
graph
version,
1
retrieves,
the
properties
that
I'm
interested
in
making
a
get
request.
So
really
simple
from
a
code
based
point
of
view.
A
Once
I
have
defined
the
graph
client
code,
I
need
to
also
declare
in
my
solution
in
the
package
solution
json
file,
that
I
need
the
permission
to
consume
the
calendar
and
in
order
to
know
what
permission
I
need,
I
can
simply
rely
on
the
documentation
of
micrograph.
So
here,
for
example,
you
can
see
the
page
about
how
to
get
the
list
of
events
inside
the
docs
of
micrograph,
and
here
we
can
clearly
see
that
with
a
delegated
approach.
So
with
the
identity
of
the
currently
connected
user.
A
In
order
to
get
access
to
the
list
of
events
in
here
or
his
calendar,
we
need
to
have
the
calendars
that
read,
or
eventually
the
calendar
dot
read
write,
but
clearly,
if
we
simply
want
to
read
the
events
we
we
will
just
need
the
calendars
that
read
the
permission
and
that's
why,
in
the
package
solution.json
file,
I'm
declaring
that
from
a
web
api
permission
request
point
of
view.
I
need
for
the
resource
micro
graph.
A
A
So
now
that
we
have
seen
how
we
can
retrieve
the
list
of
events
and
how
we
store
the
events
in
the
state
object
of
my
adaptive
current
extension,
we
can
see
that
well
from
the
card
view
point
of
view.
The
cable
is
really
trivial
and
it
simply
relies
on
a
button
to
show
the
actual
quick
view
in
the
quick
view.
A
On
the
contrary,
in
the
data
method,
we
return
a
complex
type,
which
will
be
made
of
a
title
and
of
the
array
of
the
events
that
we
have
in
the
state
of
our
adaptive
card
extension
component
as
such
in
the
json
definition
of
our
ace.
We
can
declare
we
can
define
the
ui
of
the
quick
view,
including
the
data
binding
on
the
events
that
I
have
in
my
events
array
and
that's.
Why?
A
Here,
aside
from
providing
a
title
in
a
text
block
inside
the
adaptive
card-
syntax,
we
also
have
the
header
so
the
start
and
the
time
and
the
subject
of
every
single
event
in
my
calendar,
as
well
as
we
use
the
data
binding
functionalities
that,
for
the
sake
of
completeness,
we
covered
in
one
of
the
previews,
a
sig
calls
a
few
weeks
ago.
But
here
we
say
that
the
data
binding
for
a
container
that
we
have
right
here
is
targeting
the
events
property
of
the
object
that
I'm
providing
right
here
in
the
data
method.
A
A
As
I
was
telling
you
before,
you
can
create
a
package,
so
an
sbpkg
file
that
we
already
have
right
here
in
the
sharepoint
solution,
folder
of
my
solution
and
then
you
can
upload
the
package
into
the
app
catalog
of
your
sharepoint
online
target
environment
target
tenant.
So
let
me
do
that
just
for
the
sake
of
completeness,
if
I
will
drag
and
drop
the
package
on
my
app
catalog
as
you
can
see
here
and
let
me
zoom
in
oops
oops.
A
Okay,
as
you
can
see
here,
we
have
from
a
micrograph
point
of
view
the
calendars
dot
read
permission
in
place,
so
the
sharepoint
online,
the
ken
infrastructure
of
sharpen
framework,
is
telling
me
in
order
to
properly
use
this
component.
You
will
need
to
grant
the
calendars
the
trick
permission
for
microsoft
graph
to
this
component.
A
Actually,
in
my
scenario,
I
already
granted
the
permission
previously,
so
I
can
simply
see
that
I
have
in
the
list
of
already
approved
requests
a
bunch
of
permissions
for
microsoft
graph,
including
the
calendars.read,
as
you
can
see
right
here,
but
in
case
I'm
targeting,
I
was
targeting
a
fresh
new
tenant.
Where
I
don't
have
the
permission
already
granted.
A
Now
so
far,
we've
seen
that
we
can
read,
we
can
consume
data
from
microsoft
graph,
but
actually
we
can
do
more.
Clearly,
we
can
do
more.
We
can,
for
example,
also
create
new
content
through
the
microsoft
graph
in
order
to
feed,
for
example,
or
to
create
new
items
in
the
calendar
of
the
currently
connected
user.
So,
just
to
show
you
what
I'm
talking
about,
let
me
switch
to
another
demo
that
I
have
right
here.
A
A
So
let
me
refresh
the
page
to
get
the
new
manifest,
and
here
we
are
create
calendar
event,
as
you
can
see
now,
I'm
also
behaving
like
a
real
designer,
I'm
just
kidding,
of
course,
but
here
you
can
create
a
new
event
in
the
calendar
of
the
currently
connected
user.
So
here
is
my
calendar,
which
is
clearly
empty
right
now,
but
I
can
come
here
and
I
can
say:
okay
create
a
new
event.
I
can
provide
the
subject
for
the
event,
which
can
be
sig
called
demo.
Why
not?
A
The
event
will
be
today
at
this
time,
so
I
like
it.
The
event
will
end
still
today
and
let's
say
it
will
last
one
hour
or
something
like
that,
and
then
I
can
create
my
event
in
the
currently
connected
user
calendar.
In
a
matter
of
few
seconds,
you
will
see
the
new
event
popping
up
in
my
calendar.
We
can
wait
a
few
more
seconds
or
we
can
refresh
the
page.
A
Let
me
speed
up
the
process.
Let
me
refresh
the
page
just
for
the
sake
of
simplicity,
and
here
we
are
here.
We
have
the
sql
demo,
which
is
an
online
event,
so
I
can
even
join
it
and
start
contributing
to
this
demo,
which
of
course
I
will
not
do
otherwise.
I
will
stop
the
current
presentation.
So
how
can
we
do
that
again
back
to
the
code
base,
and
here
we
have
again,
the
adaptive
card
extension
is
like
as
before
we
have.
A
We
still
have
the
calendar
service
as
like
as
before,
but
right
now,
in
the
calendar
service,
we
have
the
create
event
method
in
the
create
event
method.
We
accept
a
subject
and
start
date
and
end
date
and
we
will
return
back.
The
event
object
that
we
created
here.
We
simply
need
to
create
an
event
object
based
on
the
definition
of
the
event
type
that
we
have
in
micrograph
so
as
like
as
before.
We
have
the
main
properties
of
our
event
and
then
we
simply
need
to
still
use
the
graphclient
object
to
make
an
api
request.
A
For
me
slash
events,
but
this
time
it
will
be
a
post
request,
providing
the
actual
json
definition
of
the
event
that
we
want
to
create
in
order
to
collect
the
input
fields.
So
the
subject
and
the
start
and
end
the
date
and
time
of
the
event.
We
have
a
quick
view
in
the
quick
view.
We
still
have
the
capability
to
provide
a
data
object
when
we
create
the
when
we
render
the
quickview.
A
But
what
I'm
interested
in
now
is
to
collect
input
from
the
user
and
that's
why,
in
the
definition
of
my
adaptive
card,
rather
than
having
the
text
blocks,
which
will
simply
render
content,
I
will
use
the
input
dot.
Something
controls
to
get.
For
example,
a
text
input
for
the
subject,
a
date
for
the
start
date
and
the
time
for
the
start.
A
Okay,
if
I
get
an
actual
invocation
for
the
action
with
id
submit,
which
is
the
button
pressed
in
my
quick
view,
let's
get
from
the
action,
the
data
property,
so
the
one
we
had
here,
the
one
we
defined
here
and
read
the
subject:
property
the
start
date
and
start
time,
the
end
date
and
that
time
so
that
I
can
build
the
input
for
my
create
event,
method
of
my
calendar
service,
and
I
can
simply
create
my
new
calendar
item
in
the
currently
connected
user
calendar.
So
again,
I
think
this
is
really
simple
and
straightforward.
A
You
simply
need
to
build
your
ui
using
the
adapter
card
syntax.
In
the
quick
view
you
collect
input,
you
use
the
on
action,
and
then
you
rely
on
your
backhand
service
to
do
the
actual
creation
of
the
event
in
this
scenario,
using
the
microsoft
graph
and
just
to
give
you
an
idea,
I
saw
previously
in
one
of
the
previous
demos
someone
asking
a
question
about
how
it
will
render
in
the
ui
of
a
mobile
device.
A
Well,
if
you
want
to
play
with
the
ui
device,
you
can
easily
go
to
the
video
connection
dashboard
in
your
tenant.
You
can
switch
to
the
mobile
preview
and
you
will
be
able
to
see
how
your
adaptive
cards
will
behave
and
how
they
will
render
in
the
mobile
ui
of
an
hypothetical
smartphone
where
you
can
play
with
all
of
the
cards.
So
just
for
the
sake
of
completeness.
B
Great
stuff,
paulo
there.
Thank
you
very
much
for
that
demo.
I
think
it
really
shows
the
power
you
can
bring
to
these
adaptive
card
extensions.
That
can
look
deceptively
simple,
but
really
you
can
build
a
lot
of
power
there.
We
saw
creating
an
event
right
on
folks
calendars
from
an
adaptive
card,
so
really
exciting.
Think
about
all
the
possibilities
you
can
build
in
these
adaptive
cards
in
this
new
kind
of
experience,
so
definitely
encourage
folks
to
check
out
those
adaptive
card
extensions
if
you
haven't
yet.