►
Description
In this 9-minute developer-focused demo, Siddharth Vaghasia shows calling a Microsoft Graph API from an ACE and using Graph to store/read user’s preferences on user’s OneDrive. Uses card view (to display logged in user’s immediate upcoming Shift on a team) and quick view cards to display additional shifts, other teams (with open shifts) and team selection confirmations. Delivers a Personalized Experience on the user’s Viva Connections dashboard. Follow the logic by clicking through the CodeTour in this ACE sample. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 16, 2022.
Demo Presenter
• Siddharth Vaghasia | @siddh_me
Supporting materials
• Sample - My Upcoming Shifts | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-MyShifts
• Article - The easiest way to store user settings of your Microsoft 365 app | https://blog.mastykarz.nl/easiest-store-user-settings-microsoft-365-app/
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
A
Hello,
everyone
I'll
skip
my
introduction.
I
have
probably
given
already
many
times
so
today,
I'm
going
to
show
you
demo
above
adaptive
card
extension
to
show
current
logged
in
users
upcoming
shift
based
on
a
selectum
team.
So
the
whole
idea
here
of
kind
of
creating
this
demo
was
or
sample,
was
to
wear
in
you
know
a
client
when
we
were
showing
them
the
viva
connection
cars.
A
We
are
storing
it
in
the
application
root
folder
of
the
spfx
in
the
user's
onedrive.
In
the
xpfx
web
client
acceptative
reference
I'll
talk
about
it
in
a
few
time,
and
it's
basically
to
you,
know
kind
of
give
a
personalized
experience
in
the
viva
connection
board,
and
there
is
also
a
configurable
option
to
whether
show
the
ship
title
or
date
as
level.
Okay.
A
In
terms
of
exploring
the
concept,
it
was
more
like
calling
the
graph
api
from
the
adaptive
card
extension
and
using
graph
api
to
store
and
read
the
user's
settings
in
the
application,
personal
folder
usage
of
multiple,
quick
queues
and
state
management.
I
would
like
to
call
out
a
block
from
wildlife
through
which
I
was
able
to
get
the
reference
on
how
to
easily
store
the
user
settings
in
the
user's
onedrive.
So
this
is
the
link
to
that
particular
blog
where
he
has.
A
You
know
nicely
said
how
we
would
be
able
to
use
it
in
here
quickly
going
to
the
demo,
so
I
have
kind
of
everything
set
it
up.
So
this
is
my
dashboard,
for
example,
and
this
is
the
adaptive
card
extension
we
are
talking
about.
So
what
it
is
doing
is
it
is
getting
a
shift
from
the
local
from
the
selected
or
the
configured
team
here.
This
would
be
the
immediate
shift
which
would
be
upcoming
for
the
current
logged
in
user.
A
If
you
click
on
view
all
you
would
be
able
to
see
all
the
other
shift,
which
would
be
kind
of
coming
in
the
recent
times,
and
you
will
also
have
an
option
to
configure
the
team.
So
basically,
this
is
what
the
whole
idea
was
to
make
the
adaptive
card
extension
configurable,
based
on
the
current
logged
in
user.
A
So
this
is
this
was
the
whole
idea
of
you
know,
kind
of
creating
it,
and
if
we
see
the
data
where
the
configurable
in
this
case,
I
just
need
to
have
the
current
logged
in
the
configure
teams
id
which
from
where
we
have
to
get
the
shifts
it
is
stored
here
as
in
shift
via
settings.json
file.
It
is
nothing
but
an
a
simple
attribute
to
store
the
selected
team
id
in
the
user's
onedrive
so
that
it
would
be
configurable
based
on
the
login
user,
so
coming
to
the
code
walkthrough.
A
What
we
do
is
basically
we
kind
of
register
certain
views
here
by
default.
There
will
be
one
card
view
and
multiple
quick
view.
One
quick
view
to
show
all
the
upcoming
shift.
Then
there
is
a
quick
view
to
show
the
configurable
team
a
drop
down
option
and
there
is
a
success
message:
when
user
clicks
on
a
particular
select
or
configure
a
particular
team,
then
this
is
the
second
method
just
to
initialize
the
graph
client.
A
The
next
method
is
where
we
basically
kind
of
first
get
the
current
logged
in
user
information,
his
join
team
and
then
we
are
able
to.
We
are
trying
to
get
the
settings.json
file
from
the
approved
folder
and
if
it
is
not
found
it
means
the
user
has
not
yet
configured
the
adaptive
card
extension
and
we
we
are
just
showing
the
title.
Like
you
know.
Your
card
has
not
been
configured.
A
So
in
this
case,
to
note
here
is
that
we
will
not
be
making
the
graph
api
call,
but
to
make
the
http
call
to
directly
read
that
file
as
in
the
content
of
the
file
in
the
response
and
then
use
that
json
to
they
basically
set
the
selected
team
id
and
the
whole
json
as
it
is
right
next,
coming
to
once
we
have
the
team
id
which
is
basically
user
has
configured.
We
have
to
make
and
graph
api
call
to
teams.
A
Team
id
is
less
schedules,
less
shift,
wherein
we
are
getting
all
the
shared
shift,
which
start
time
is
greater
than
now,
and
then
we
are
filtering
based
on
the
current
logged
in
users
so
that
we
only
able
to
see
the
shifts
which
are
assigned
to
us
and
then
it's
just.
If
the
length
is
zero,
we
are
saying
you
don't
have.
Any
upcoming
shift
enjoy
your
family
time
kind
of
thing
and
coming
to
the
card
view
card
view
is
again
based
on
how
what
is
the
state
of
the
current
data?
A
A
Then
the
next
thing
is,
in
the
card
view
yeah
in
the
card
view
the
buttons
which
are
there.
So
there
are
two
scenarios
here:
either
we
would
be
only
showing
the
configure
button
if
there
is
no
shift
available,
but
if
there
is
ifs
available,
it
would
be
view
all
button,
plus
the
configure
teams
button.
A
This
is
the
configure
teams
view
which
basically
kind
of
shows
the
drop
down
so
more
or
less.
What
we
need
to
send
here
is
the
teams
which
are
the
current
logged
in
has
joined
or
is
part
of,
and
they
select
a
team
id
to
basically
pre-configure
the
selected
team.
When
user
clicks
on
configure
teams
button,
this
is
the
adaptive
card.
It's
again
simple.
A
A
choice
set
adaptive
card
where
we
have
data
been
passed
as
the
teams
and
the
display
name
to
be
displayed
in
the
drop
down
and
the
id
corresponding
to
it,
and
on
save
button
we
would
basically
pass
the
id
to
basically
save
it
so
in
action.
This
is
where
we
are
actually
storing
the
selected
team
id
again
same
thing.
A
We
would
have
to
make
a
put
request
to
that
particular
file
with
the
data
which
we
have,
which
would
be
just
this
shift
team
id
and
once
it
is
saved,
we
are
making
the
graph
api
call
again
to
basically
change
the
state
and
everything
the
next
is
submit
message.
This
is
very
simple
as
soon
as
user
has
clicked
on
saved.
We
are
just
showing
this
saved
successfully
error
message,
success
message
on
to
the
view,
then,
on
click
of
action.
We
are
just
closing
the
view.
The
success
message
view.
A
The
next
thing
is
the
quick
view
where
actually
we
are
displaying
the
list
of
all
the
upcoming
shift
in
this.
What
we
need
is
we
need
to
pass
all
the
shifts
which
are
there
the
title
of
the
quick
view,
the
subtitle
and
the
description
and
the
adaptive
card
is
where
the
all
the
magic
happens
for
how
we
are
kind
of
displaying
all
the
upcoming
shift
in
a
simple
list
view
to
show
the
display
name
to
show
the
start
time
to
store
the
end
time.