►
From YouTube: CRUD Operations in Viva Connections – Adaptive Card Extensions with SharePoint Framework
Description
In this 8-minute developer-focused demo, Derek Cash-Peterson shows Creating, Reading, Updating, and Deleting data through an Adaptive Card Extension (ACE) that handles (reformats as necessary) data formatting (strings, arrays, time) from all field types in a SharePoint list. On CardView, there are buttons for “view items” in list and “add item” to list. From a QuickView card, call separate Display, Edit, New cards. Appreciate code for navigating between cards and for data reformatting. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 27, 2022.
Demo Presenter: Derek Cash-Peterson (Sympraxis Consulting) | @spdcp
Supporting materials:
• Sample - basic-card-sharepoint-crud | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/BasicCard-SharePoint-CRUD
• Samples - ace-cardgallery | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/ace-cardgallery
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
All
right,
so
this
is
an
a
sample
that
I
created
it's
basically
to
oh,
actually,
I
should
say
who
I
am
first,
so
I'm
derek
cash
peterson,
I'm
a
principal
architect
at
some
praxis
consulting.
I
work
with
julie,
I'm
a
member
of
the
pmp
team
and
I
do
a
lot
of
ux
design
and
development
work
all
right.
So
the
thing
that
I
was
really
trying
to
do
here
is:
I
spend
most
of
my
time
with
our
clients.
You
know
either
showing
data
creating
data,
editing
data,
sort
of
all
of
those
crud
operations.
A
We've
got
to
get
information
from
people
put
it
somewhere
and
then
display
it
back,
and
so
I
wanted
to
give
away
to
to
do
that
using
an
adaptive
card
extension
and
when
you
start
looking
around
at
the
either
the
different
samples
that
we
have
or
just
in
general,
looking
at
samples
out
there
in
the
community
is
a
lot
of
them
are
just
really
based
on
like
plain
text
values
and
while
that's
really
important
to
get
your
feet
wet.
I
started
thinking
more
about
okay.
Well,
what
about
choice
fields?
What
about
multiple
choice?
Fields?
A
What
about
people
fields?
How
do
you,
how
do
you
work
with
all
those
different
field,
types
that
we
have
in
sharepoint
and
then
integrate
those
with
the
adaptive
card
framework?
And
so
that's
what
I
wanted
to
do.
This
isn't
sort
of
a
production
level
thing.
It
was
more
of
an
exercise
for
me
to
show
how
to
do
crud
operations
and
make
the
link
between
adaptive
card
extensions
and
the
card
views
and
our
sharepoint
and
our
sharepoint
stuff.
A
A
So
this
is
the
card
that
I
created
and
on
the
dashboard
it
has
two.
You
know
it
has
two
buttons
in
the
card
view
you
can
view
the
items,
so
you
can
see
the
items
from
the
list
and
the
way
I
built
this.
Is
it
it's?
It's
pulling
the
items
that
were
last
modified
or
created
by
you
and
it's
showing
just
the
title,
the
last
modified
and
then
who
modified
it.
A
We've
got
some
icons
for
display
view,
so
you
can
see
the
values
coming
out
of
the
sharepoint
list
and
I
went-
and
I
really
just
went
down
the
list
of
all
the
different
types
of
fields
that
we
could
create.
So
I
did
title
multiple
lines
of
text:
choi,
a
drop
down
list
with
a
choice,
field,
a
date
field,
a
radio
button,
a
multi-select
check,
box,
a
number
currency
and
a
yes,
no
field.
A
I
looked
at
adding
things
like
mms
and
the
people
picker
and
actually
up
until
like
last
week.
There
wasn't
a
way
for
us
to
do
a
people
picker,
but
now
there
is
so.
I
will
update
this
and
there's
also
a
sample
in
the
gallery
that
I
have
to
approve
to
to
do
that.
There's
the
ability
to
edit
the
items
so
obviously
we're
passing
in
the
data
from
the
individual
item
and
we're
providing
different
drop-downs
here
and
different
interfaces
for
that,
and
then
we're
providing
a
way
to
delete
them.
A
If
you
need
to
and
also
create
a
new
item,
so
you
can
do
it
that
way,
so
that's
the
ace
and
what
it
does.
But
more
importantly,
it's
really
about
what
the
code
is
doing,
and
so
that's
really
where
I
wanted
to
sort
of
dive
in
so
all
the
stuff
we've
talked
about
aces
before,
and
so
I'm
not
going
to
sort
of
dive
into
the
sort
of
the
inner
workings
of
how
that
works.
But
I
did
want
to
start
by
just
showing
I
created
a
service
and
when
the
service
gets
instantiated
the
first
time.
A
The
first
thing
it
does
is
it
goes
through
and
it
checks
to
see
if
the
list
that
it
needs
exists,
because
this
is
a
demo.
I
wanted
to
make
sure
that
this
the
list
was
created
with
the
right
with
the
right
fields
and
the
right
names
and
all
of
that
kind
of
stuff,
so
it
runs
through
and
if
the
list
doesn't
exist,
it
comes
through
and
actually
creates
all
the
different
fields
with
the
different
values.
A
So
then,
once
it's
done,
it
actually
comes
in
and
it
grabs
the
items
by
the
user
and
so
we're
just
using
I'm
using
pmpgs
to
grab
the
data
from
the
list
and
one
of
the
things
that
I
sort
of
one
of
the
gotchas
that
I
sort
of
two
main
gotchas
that
I
that
I
encountered
was
the
data
coming
back
from
a
multi-select
choice.
Field
comes
back
as
an
array
which
is
great.
A
We
like
that
from
a
data
perspective,
but
when
you
need
to
pass
that
data
to
an
adaptive
card
to
the
form
field
to
drop
down
the
checkbox,
you
need
a
comma
separated
list,
so
I
had
to
get
the
values
from
the
choice
field
and
then
iterate
through
them
and
create
a
comma
separated
list.
So
that
was
the
first
thing.
The
second
thing
that
I
ran
into
was
I
had
to
do
a
date
time.
A
A
The
other
thing
that
I
wanted
to
point
out
is
that
in
the
demo
there's
a
lot
of
it's
moving
cards
back
and
forth.
So
if
you
haven't
looked
at
this,
it's
something
you
should
just
check
out,
because
this
is
a
this
is
a
the
quick
view.
Then
I've
got
a
separate
card
for
for
display
and
another
card
for
edit
and
then
delete
just
deletes
it.
So
when
you're
doing
that.
A
You
have
to
make
sure
that
you
create
ids
for
all
your
different
views
and
then,
when
you're
in
the
views-
and
you
need
to
click
on
the
different
buttons,
you
can
actually
call
those
views
and
you
call
them
by
doing
this
dot,
and
so
these
are
all
part
of
the
quick
view.
So
the
quick
view
navigator
and
then
you're
doing
a
push
so
you're
telling
it
which
one
you
want
to
go
to
and
in
this
instance
I've
clicked
the
edit
button,
and
I
want
to
go
to
the
edit
screen
in
this
instance.