►
Description
Viva Connections & SharePoint community call on January 27. Demos - CRUD Operations in Viva Connections – Adaptive Card Extensions with SharePoint Framework, Viva Connections – Data Binding in SPFx Adaptive Card Extensions, and SPFx Design Guidance – Property pane input validation and error messages. Project releases for SharePoint Framework v 1.14 Updated public developer preview and CLI for Microsoft 365 v4.4 Preview. As well, 2 web part and 3 ACE samples delivered. Announced the updated Microsoft 365 ISV Benefit program. The host of this call is Julie Turner (Sympraxis Consulting) | @jfj1997. Q&A takes place as always in chat throughout the call.
Learn more:
• See the full blog post for this call at: https://aka.ms/m365pnp/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• 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
Some
new
community
samples
picture
time,
obviously
with
together
mode,
so
we'd
love
to
have
you
join
us
for
that
by
turning
your
cameras
on
when
it
comes
to
that
time,
and
then
we'll
have
three
demos
today
from
my
fabulous
co-worker,
derek
cash
peterson
who's
going
to
do
some
crud
operations
using
viva
connections,
that's
a
very
cool
sample.
I
saw
that
yesterday,
paulo
pasara
will
do
viva
connections
as
well
on
data
binding
in
the
sharepoint
framework,
adaptive
card
extensions
and
last
but
certainly
not
least,
the
wonderful
hugo
will
do
spfx
design
patterns.
A
So
we
have
many
many
opportunities
for
you
to
participate
in
the
pnp
doing
demos.
Obviously,
you
can
reach
out
there's
an
akams
link
there,
so
that,
if
you
have
something
you
want
to
show
something
cool
you
built
we'd
love
to
have
you
presented
in
one
of
our
calls,
and
so
you
can
use
that
form
there
to
request
a
demo
spot
and
obviously
do
that
you
can
also
contribute
to
any
one
of
our
github
repos.
A
There
are
plenty
of
them
and
we'd
love
to
have
people
help
out
reporting
issues,
submitting
poll
requests
even
helping
with
issues
and
questions
can
be
really
big
help
to
us,
especially
when
there's
sometimes
small
teams
and
then
provide
feedback,
not
only
negative
feedback
but
positive
feedback.
We
love,
we
love
it
all.
So
please
feel
free
to
do
that.
A
A
So
we
have
a
microsoft,
365
platform
call
on
the
first
of
february.
That's
at
8
a.m,
pacific
time,
and
so
this
is
our
agenda
for
that
call.
Altmesh
the
latest
on
the
bookings,
api,
dan
whalen,
access
to
user
calendar
events
and
sebastian
using
mtt
agenda
and
task
components
in
your
solutions.
So
definitely
join
that
call
to
hear
about
those
great
topics.
Okay,
this
is
sharing
is
caring,
so
I
think
that's
over
to
you,
david.
B
If
you
would
like
to
do
that,
we
have
a
wide
spectrum
of
topics,
all
of
which
are
available
for
registration.
Our
popular
ask
me
anythings,
are
up
for
this
month,
are
coming
up
in
february
and
march
on
react,
controls
and
graph
and
mgt.
Those
are
great
opportunities
to
work
directly
with
the
administrators
for
the
programs,
where
you
can
ask
questions
in
an
open
forum,
and
so
we
invite
anybody
to
join
these.
You
can
register
at
aka
dot.
B
Ms
forward
slash
sharing
is
caring
now,
once
you've
done
that
we
want
to
celebrate
all
the
amazing
work
that
you've
done.
In
fact,
you
may
have
seen
some
sharing
of
these
badges
today.
What
is
it
it's
from
the
pmp
recognition
program,
we're
partnering
with
credley?
Yes,
the
same
credly
that
manages
the
certification
programs
for
microsoft
and
issues,
those
badges.
We
want
to
recognize
and
celebrate
the
work
you're
doing
in
a
formal
way.
These
can
be
shared
and
assess,
associated
and
attached
to
your
linkedin
profile.
Share
it
on
twitter.
Add
it
to
your
website
again.
B
B
Absolutely
no
cost
for
you,
there's
all
kinds
of
new
badges
coming
out
from
pnp
powershell
to
blog
authors,
script,
samples
sharing
is
caring,
is
getting
his
new
badge
and
we're
going
to
have
a
ton
of
opportunities
to
get
unique.
Badges
that
are
time
sensitive,
so
definitely
opt
in,
and
we
would
love
to
celebrate.
You
julie
back
to
you.
C
That
is
correct,
so
let's
actually
move
to
the
following
slide
julie.
Thank
you!
So
this
one
we
had
already
two
weeks
ago,
just
a
reminder
if
you
are
an
isv
or
and
system
integrator
and
you're
looking
into
moving
into
the
isb
area
or
have
some
of
your
offerings
available
through
the
isb
channels.
There
is
a
free
benefits
available
for
you
if
you're
registered
with
the
microsoft
365
isv
programs.
C
You
can
get
even
more
marketing
benefits
and
even
money
based
on
the
usage
of
the
solution,
which
is
really
really
cool.
So
please,
please,
please
do
check
that
one
out,
let's
go
to
the
following
slide,
just
making
sure
that
everybody
is
aware
of
this.
We
did
push
out
a
new
version
of
1.14
beta,
so
this
is
beta
5
externally
we've
been
pushing
out
beta,
4
and
beta
5
now
so
that
went
live
yesterday.
C
It
has
a
lot
of
a
lot
of
a
lot
of
new
features
and
capabilities
and
fixes-
and
it's
all
listed
now
in
the
release
notes
already.
So
the
release
notes
are
super
super
long
because
there's
so
many
so
many
changes
and
updates
on
there
and
a
lot
of
issue
fixes,
for
example,
based
on
the
issues
which
you
have
reported
to
us
so
cool
stuff.
Please
check
it
out
if
you
find
out
any
issues
on
that,
please
get
them
reported.
C
I
also
wanted
to
call
out
and
the
progress
related
on
usage-
and
it's
just
looks
amazing
at
the
worldwide
usage
of
third
party,
meaning
the
custom
components
built
for
sharepoint
online,
not
by
microsoft,
by
our
customers
and
partners
is
growing
rapidly.
So
we
did
an
all-time
record
again
this
week
on
monday,
it's
typical
monday
or
tuesday,
which
are
the
most
highest
on
the
usage,
and
it's
great
to
see
that,
after
the
holiday
break,
we
are
back
in
line
on
the
massive
growth
on
the
usage,
which
is
really
really
cool.
C
So
there's
more
than
tens,
tens
of
millions
of
users
using
custom
components
built
with
spfx
in
microsoft,
365,
which
is
cool.
Let's
go
to
the
following
site:
a
quick
recap
on
the
1.14.
So
right
now
to
1.14
it's
a
bit
delayed
original.
We
were
planning
to
push
it
out
or
communicate
it
to
push
it
out
in
january
and
we
will
push
out
a
release
candidate,
most
likely
next
week
or
later,
the
latter
part
of
next
week
or
the
week
after
and
then
in
the
mid
february,
and
we
will
push
out
the
1.14
version.
C
C
1.15
is
scheduled
to
come
out
this
spring
as
well,
for
example,
list
format
and
extensibility
options,
and
all
of
that
is
it
then
in
1.15,
but
we'll
get
back
on
more
detail
on
what's
coming
out
when,
as
we
get
those
locked
out,
the
new
app
catalog
experience,
for
example,
calling
that
one
out
is
intended
to
get
released
by
end
of
march.
So
that's
the
q1
on
this
calendar
year,
but
that's
a
quick
update
from
engineering
site
on
spfix
for
viva
teams
and
sharepoint.
Let's
get
it
back
to
you,
julie.
A
All
right
so
pmpjs,
client-side
libraries,
that's
actually
me,
and
I
have
nothing
new
to
offer
both
patrick
and
I
have
been
working
very
diligently
on
tightening
up
any
holes
in
version
three
and
trying
to
do
really
good
documentation
updates
so
that
it's
really
easy
for
everybody
to
get
started
on
the
transition
to
v3.
So
we've
been
doing
lots
and
lots
of
work.
There
we've
been
focusing
all
our
energies.
I
am
trying
to
answer
issues
in
the
issues
list.
A
Anyone
that
wants
to
help
me
out
there
I'd
love
to
have
it,
but
that
is
the
current
status
of
the
pmp.js
library.
Okay,
so
let
me
move
on
so
now
we
have
the
cli
for
microsoft,
365.
they
have
a
new
preview
version,
4.4
with
lots
and
lots
and
lots
of
updates
it
looks
like
so.
I
would
encourage
you
to
go,
read
their
notes
on
that
release.
So
we
won't
read
those
right
here
on
this
call,
but
definitely
check
out
all
of
those
great
updates
to
the
cli.
A
That's
a
great
tool
for
for
everyone
who
needs
to
work
directly
with
a
scripting
language
against
the
microsoft
365
platform,
so
definitely
check
those
out.
Spfx,
reusable
components:
let
me
quickly
go
through
that.
We
have
the
react:
controls,
3.5.0,
updated
to
fx
1.13
support
enhancements
for
multiple
controls,
upload,
updated,
localization,
that's
very
cool
for
german
norwegian
and
portuguese.
Some
various
fixes,
the
property
controls,
also
got
an
update
to
3.3.0,
again
multiple
updates
and
enhancement
to
the
property
field,
collection
data,
so
some
really
great
stuff
there.
A
Some
definitely
lots
of
shout
outs,
so
we're
clearly
getting
some
great
community
involvement
on
on
these
reusable
controls.
So
that's
great
to
see
so
definitely
go
check
out
those
updates,
okay,
pmp,
modern
search.
I
think
that's
also
gonna.
Be
me.
We
have
a
new
4.5.3
december
release
that
went
out
with
some
special
thank
yous
there.
So
definitely
community
involvement
in
this
one
as
well
so
check
out
that
4.5.3,
I
will
say
I
just
checked
out
that
release
and
the
the
filters
are
wonderful.
A
The
new,
updated
ux
for
the
filters
is
really
wonderful,
so
you
definitely
want
to
check
that
out.
If
you
have
an
older
version,
you
want
to
check
that
out
and,
of
course,
they're
still
supporting
the
v3
version,
so
they
have
a
3.23
release
as
well.
So
if
you're
on
the
older
major
release,
you
can
check
that
out
as
well
all
right,
let
me
move
forward.
We
have
pnp
spfx
samples.
Is
this
going
to
be
hugo?
It.
D
D
D
B
Absolutely
thank
you.
Hugo
we've
got
a
couple
of
new
aces
this
week,
so
awesome
stuff,
one
of
which
you're
going
to
see
demoed
right
after
this
from
derek
cash,
peterson
crud
operations
within
an
ace
how
you
can
interact
with
form
elements
super
super
cool.
This
is
just
a
fantastic
training
sample
just
amazing
and
then
who
doesn't
love
some
sports
right?
Certainly
not
me.
I
love
them
so
football
stats
and
then
also
people
details.
B
We've
got
a
trio
of
authors
on
this
one
sumit
sumadeep
and
surah
created
these
two
samples,
and
so
these
are
all
available
at
aka.msforglash,
spf,
aces
and
again
we're
open
for
more
contributions
and
we're
gonna
have
a
sharing.
Is
caring
session
coming
up
a
two-parter
on
this
here
soon
within
the
next
few
weeks,
so
excited
to
see
that,
thank
you
as
well
to
all
of
our
contributors.
You
guys
are
awesome.
Julie
back
to
you.
C
More
time
just
change
the
scene,
it
did
not
work
for
me
earlier
this
week,
but
let's
see,
if
she'll
get
a
chance
just
to
get
some
variation
and
answers.
No,
so
that's
good.
Are
we
already
folding
in
let's
wait
few
more
10
seconds,
15
seconds
yes
bill?
We
can
see
on
the
back
row.
Second
row
great
way
of
waving,
hands
a
lot
of
familiar
faces
and
there's
john
and
there's
a
lot
of
control
and
evidently
okay.
C
So,
let's
actually
start
the
recording,
I
guess
we're
maxing
out
yet
not
yet
not
yet
one.
Second,
three,
two
one,
and
here
we
go
and
some
hand
waving
everybody.
Thank
you.
Thank
you
for
being
part
of
the
community.
You
are
absolutely
awesome.
Thank
you.
Thank
you.
Thank
you
and
we'll
grab
a
keep
animation
out
of
that
cool
julie.
Let's
get
back
to
you
really
really.
A
A
E
D
E
Away
all
right,
so
this
is
a
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.
E
You
know
either
showing
data
creating
data,
editing
data,
sort
of
all
of
those
crud
operations.
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
communities.
A
lot
of
them
are
just
really
based
on,
like
plain
text
values
and
while
that's
really
important
to
get
your
feet
wet.
E
E
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.
So
that
was
the
slides.
I
spent
more
time
trying
to
get
it
working
than
I
did
all
right.
So
I've
showed
this
slide
so
now
I'm
gonna
actually
show
the
demo.
E
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.
E
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.
I
looked
at
adding
things
like
mms
and
the
people
picker
and
actually
up
until
like
last
week.
E
E
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.
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.
E
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.
E
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.
So
I've
got
a
drop
down
list.
E
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
pmp.js
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.
E
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.
E
E
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
qui.
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.
E
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.
E
A
A
F
Yesterday,
in
this
week,
we
keep
on
talking
about
how
to
develop
adaptive
cars
for
microsoft,
viva
connections
and
specifically
today.
I
want
to
explain
you
how
you
can
leverage
the
data
binding
capabilities
that
we
have
in
adaptive
current
extension,
so
a
few
words
on
this
slide
and
then
we
will
move
to
the
actual
demo.
F
So
whenever
we
work
with
adaptive
card
extensions,
we
can
store
content
inside
the
properties
or
the
state
of
the
adaptive
card
extension
and
once
we
do
that,
we
can
then
easily
do
data
binding
either
in
the
card
views.
But,
as
you
know,
based
on
the
previous
episode
we
saw
in
a
card
view,
you
have
a
limited
set
of
information
that
you
can
show
due
to
the
design
and
the
form
factor
of
those
card
views
which
are
just
three
options
available.
F
But
when
we
talk
and
we
think
about
quick
views
in
there,
we
can
do
a
lot
of
stuff.
We
can
format,
content
and
data
with
a
lot
of
options
based
on
the
schema
of
the
adaptive
card
syntax.
So,
for
example,
we
can
create
lists
tables.
We
can
create
interactive
forms,
as
you
saw
in
the
previous
demo
from
derrick.
F
So
let
me
move
to
this
example,
and
here
we
have
an
adaptive
card
extension
built
with
spfx,
which
is
defined
with
the
orders
property
of
type
array
of
order,
just
for
the
sake
of
having
some
kind
of
data
for
data
binding
purposes
in
this
state
of
the
adaptive
card
extension
as
well
as
eventually
some
other
properties
in
the
properties,
interface
of
the
adaptive
card.
Now
every
single
order
is
made
of
these
properties,
so
so
the
id
the
date,
the
status
of
the
order
and
the
status
can
be
any
of
these
values.
F
The
reference
customer
and
the
total
amount
of
the
order,
and
just
for
the
sake
of
creating
a
an
explanatory
demos
or
a
simple
one.
I
decided
in
the
uninit
method
of
these
adaptive
code,
extensions
to
pre-load
a
set
of
orders,
because
I
don't
really
care
about
how
we
will
retrieve
data
for
data
binding
right
now,
eventually,
in
one
of
the
upcoming
episodes,
we
will
see
how
we
can
consume
graph
or
sharepoint
rest
or
any
other
api,
but
right
now
I
just
want
to
focus
on
how
we
can
do
data
binding.
F
So
here
I
have
a
list
of
fake
orders
that
I'm
just
loading
in
memory
in
order
to
do
data
binding.
So
once
I've
done
that,
I
have-
and
let
me
show
you-
I
have,
for
example
here
in
the
workbench,
my
adapter
card
extension
running,
and
we
can
see
a
quick
view
with
the
recap
of
the
orders
as
well
as
we
can
see
a
quick
view
with
the
list
of
orders.
F
So
let
me
dig
into
those
quick
views
a
little
bit
more.
The
first
one
is
just
a
quick
view
in
which
we
provide,
through
the
data
interface
of
the
quick
view,
a
set
of
content,
like
the
orders
count
and
the
order's
total
amount,
which
are
simply
based
on
the
orders
array
that
we
have
in
the
state
of
the
adaptive
card
extension
and
we
can
easily
inside
the
adaptive
card
that
json
syntax.
We
can
easily
rely
on
those
properties.
F
But
what
is
more
interesting
is
that
in
the
second
quick
view
that
I'm
going
to
show
you,
we
can
provide
the
whole
array
of
orders
as
the
data
source
for
our
quick
view,
rendering
and
as
such,
by
providing
this
orders
property,
which
is
an
array
of
order
objects
in
the
adapter
card
definition
we
can
play
with
the
dollar
data
property
inside
the
definition
of
our
adaptive
card.
So
let
me
try
to
explain
you
what
we
have
right
here.
F
So
yet
another
function
that
you
can
use
when
you
do
data
binding
in
adaptive
cards
with
the
format
date
time
of
the
date
property
of
the
current
order,
providing
the
format
string
for
the
date,
which
is
quite
cool.
We
can
also
render
the
customer.
This
is
just
a
string
value,
so
I
just
output
the
same
value.
F
We
can
work
with
the
amount
of
the
order
and
again
we
can
rely
on
the
format.
Number,
but
we
can
also
play,
for
example,
with
a
function
like
the
if
one
where
we
can
evaluate
the
status
of
the
order
of
the
current
order
item,
and
we
can
say:
okay.
If
the
status
is
zero,
it
will
be
inserted
the
value
of
the
status
of
the
order
if
it
is
one
it
will
be
processed
and
so
on
so
forth,
and
that's
how
we
render
this
column
with
the
status
of
every
single
order
item.
F
Okay,
now
we
can
even
do
more.
For
example,
we
can
play
with
the
color
that
we
use
to
render
these
data,
so
we
can
add
an
additional
property
to
the
text
block,
rendering
the
status
of
the
order
and
the
property
could
be
the
color
one
from
an
adapted
card.
Syntax
point
of
view.
The
caller
can
assume
some
predefined
values
like
warning
or
accent
or
good,
which
will
define
the
actual
color
for
rendering
the
text.
F
So,
for
example,
here
again
we
can
play
with
data
binding,
so
dollar
curly
brackets,
and
then
we
evaluate
the
status
and
we
can
render
the
insert
with
the
default
value
with
the
default
color.
Sorry
or
we
can
render
the
processed
with
the
warning,
which
will
be
a
kind
of
an
orange
color,
we
can
use
the
accent
for
the
delivered
and
the
green,
which
is
good
as
the
color
name
in
adaptive
cards
for
the
completed
order.
F
F
Another
interesting
property
that
you
can
use
when
you
work
with
data
binding
in
adaptive
card
extensions,
is
the
dollar
index
keyword
which
will
provide
you
the
index
of
the
item
that
you
are
rendering
right
now.
Whenever
you
render
an
array
of
items.
So
just
for
the
sake
of
making
an
example,
we
can
say
something
like
okay
render
the
dollar
index
of
the
current
item,
followed
by
the
date
and
time.
F
F
Let's
keep
on
talking
about
what
we
can
do.
There
is
another
interesting
property
that
we
can
play
with,
which
is
the
dollar
route.
In
fact,
we
have
dollar
index
to
refer
to
the
current
index
of
the
current
item.
But
what?
If
right
now
here,
we
are
rendering
every
single
order
item
in
the
array
of
orders,
and
we
want,
for
example,
to
refer
to
a
property
which
is
not
related
to
the
current
order,
but
it
is
related
to
the
to
the
whole
data
source
of
the
data
binding.
F
Just
as
a
reminder,
our
data
source
is
made
of
a
subtitle
of
a
title
of
the
array
of
orders
and
of
the
status
filter.
So
if
we
want
to
access,
for
example,
the
status
filter,
which
is
a
property
defined
at
the
root
level
of
the
data
source
and
not
inside
every
single
order,
we
can
use
the
following
syntax.
F
So
let
me
try
to
show
you
a
useful
and
real
example
of
this
capability
and
let's
play
with
the
visibility
of
the
rows
in
my
output.
So
let's
assume
that
we
want
to
use
the
is
visible
property
that
we
have
in
the
adapter
card,
syntax,
which
can
assume
a
boolean
value.
Of
course,
if
I
will
say
is
visible
false
for
every
single
row
and
I
will
save
if
I
go
back
to
my
adaptive
card
in
action
preview
and
I
click
on
the
order
list.
F
Of
course,
I
will
not
have
any
line
of
orders
because
we
don't
have
any
of
them
visible,
based
on
the
instruction
that
I
gave
to
the
electric
card
definition.
But
what
if
we
want
to
create
something
smart
like
having,
in
the
electric
car
definition,
a
property
called
status,
filter
of
type
number
and
in
the
property
pane?
We
define
a
set
of
values
which
will
allow
us
to
configure
the
adapter
card
so
that
we
can
say:
okay,
let's
do
that.
Let's
show
just
the
delivered
orders
in
this
card
or
just
the
completed
orders.
Why
not?
F
Okay,
if
we
do
that,
we
can
also
say
in
the
json
that
instead
of
is
visible
equal,
an
explicit
value,
we
can
actually
define
a
rule
based
on
data
binding.
So
here
we
can
say
is
visible,
will
be
equal
to
if
status
is
equal
to
dollar
root
status,
filter
or
status.
Filter
is
minus
one
meaning
show
me
everything,
then
I
will
provide
true
as
the
value
for
is
visible.
Otherwise
I
will
provide
false.
F
So
let
me
save
this
one
one
more
time
and
let
me
go
back
to
the
rendering
refresh
preview,
and
here
we
are
now
we
simply
have
the
completed
orders.
This
is
yet
a
really
cool
feature,
in
my
opinion
that
you
can
leverage
and
to
be
completely
fair
with
you.
If
you
just
want
to
play
with
the
visibility
of
an
item,
you
can
even
leverage
an
out
of
the
box
capability
that
we
have
instead
of
the
is
visible,
which
is
an
example
that
I
showed
you
just
to
give.
F
The
idea
that
you
can
dynamically
change
the
value
of
any
of
the
properties
of
the
adaptive
card,
json
definition,
including
some
kind
of
complex
logic
based
on
properties
that
you
have
in
the
root
object
of
the
data
binding.
But
we
can
even
do
more
the
adaptive
card,
json
syntax.
We
have
the
dollar
when
property,
which
is
defined
just
for
the
sake
of
making
it
possible
for
us
to
show
or
to
not
show
an
item
based
on
a
condition.
F
So
when
we
use
the
dollar
when
like
when
we
use
the
dollar
data,
we
provided
a
source
for
data
binding
when
we
use
dollar
one.
This
means
it
will
be
visible
when
the
condition
provided
as
the
value
will
be
true.
So
I
can
say
if
referring
to
the
data
binding
the
status
of
the
order,
the
current
order
is
equal
to
this
little
filter
or
again.
This
tool
filter
is
not
defined.
F
Let's
show
the
item:
if
not,
let's
hide
the
item,
so
I
will
save
it
one
more
time
and
I
will
go
back
to
show
you
the
output,
which
will
be
exactly
the
same
as
before,
but
but
with
a
more
correct
syntax.
Let
me
say,
because
if
you
want
to
play
with
visibility,
dollar
one
should
be
the
right
option
for
you.
F
Now
we
can
do
more.
For
example,
when
we
build
the
ui
of
an
adaptive
card-
and
I
will
show
you
another
example
that
I
already
share
with
you
in
a
previous
call-
the
contoso
orders
adaptive
card
sample.
Here
we
have
the
contoso
manage
orders
adaptive
card
in
this
one
we
can
play
with
this
functionality.
We
can
click
on
the
chevron
button
and
we
can
expand
or
collapse
a
single
order
item
here
and
show
you
this
one.
F
This
should
be
the
right
one
exactly
here.
We
can
rely
on
a
really
interesting
option
that
we
have
in
the
adaptive
cart
syntax,
which
is
the
action
dot,
toggle
visibility.
With
this
one.
We
can
say
that
whenever
the
user
will
click
on
this
item,
we
will
target
the
visibility
of
one
or
more
items
and,
as
you
can
see
here,
we
are
using
both
the
binding
capability
with
the
dollar
and
the
dollar
index
to
identify
a
specific
item
in
the
list
of
orders
that
we
have
in
the
ui.
F
So
I'm
basically
saying
when
the
user
will
click
on
this
toggle
visibility
item,
let's
target
the
visibility
of
the
items
with
the
index
of
the
currently
clicked
item.
So
that's
why,
when
I
click
on
the
chevron
button,
I
can
expand
or
collapse
this
specific
item
I'm
clicking
on
and
in
the
definition
of
my
adapter
card.
I
can
say:
okay,
for
example,
the
chevron
down
and
the
chevron
app
buttons
ids
will
be
based
on
data
binding
using
the
dollar
index
of
the
current
item.
F
So
here
I'm
referring
to
this
item
and
this
item
and
I
will
play
with
their
visibility
as
well
as
with
the
visibility
of
the
order
content
container,
which
will
render
the
actual
form
to
edit
the
order.
So
again,
I
think
this
is
really
really
cool
and
powerful
last
sample
that
I
want
to
show
you
still
just
relying
on
the
syntax
out
of
the
box,
syntax
of
the
adaptive
card.
F
F
F
This
is
just
a
really
simple
adapter
card
extension
in
which
I
rely
on
the
graph
micrograph
to
get
the
me
object,
so
the
definition
of
myself,
basically
from
a
graph
point
of
view,
so
here
whenever
we
call
the
or
we
invoke
the
slash
me
endpoint
under
graph,
we
get
back
a
json
representation
of
the
current
user.
That's
me
right
now,
here
I
simply
get
the
me
result.
F
F
I
can
then
use
it
as
the
content
of
the
data
source
of
my
quick
view,
so
that,
in
the
rendering
of
my
quick
view
in
the
json,
I
can
say
that
I
want
to
do
dollar
json,
which
is
a
function
provided
by
the
adaptive
card.
Syntax.
I
provide
the
json
string
and
this
function
will
do
the
parsing
of
the
json
and
then
I
can
access
any
of
the
properties
of
the
json
object
that
I'm
providing,
which
is
again,
I
think,
really
really
powerful.
F
F
This
second
link
is
with
the
definition
of
all
of
the
function
that
I
use
the
functions
and
keywords
that
I
used
in
data
binding,
and
the
last
link
is
the
one
where
you
can
find
all
of
these
samples
that
I'm
sharing
with
you
through
these
asus
short
demos,
and
that's
all
for
me
back
to
you
julian.
Thank
you.
A
A
D
D
So
this
is
a
series
on
design
patterns
and
what
we're
trying
to
do
is
we're
trying
to
make
every
developer
a
designer
without
having
to
go
to
designs,
so
it
doesn't
necessarily
mean
that
we're
all
going
to
you
know
do
super
pretty
web
parts,
but
we're
definitely
going
to
be
focusing
on
a
better
user
experience
and
better
design
patterns.
Overall,
we've
been
talking
about
custom
properties.
We
still
have
a
few
things
to
talk
about
custom
properties
and
property
panes.
D
D
Well,
one
of
the
things
that
we
have
to
remember
is
we've
talked
about
this
before,
but
from
a
user
experience
perspective
right
users,
don't
really
like
usually
computers
and
software,
because
software
tends
to
make
them
feel
stupid,
and
so
not
everyone
is
an
expert
at
kind
of
programming.
Web
parts-
and
you
know
coding-
and
things
like
that-
think
about
the
users
who
are
potentially
editing
these
pages
and
configuring
your
web
parts.
They
might
not
know
the
logic
that
you've
applied.
D
They
might
not
know
that
your
description
is
is
required
and
your
code
might
not
actually
account
for
the
description
to
be
empty
or
look
at
another
example,
and
I've
seen
this
example
plenty
of
times
where
we're
somehow
expecting
a
list
of
a
certain
type
to
be
available.
That
has
certain
fields
in
that
list
and
we
don't
really
say
anything
in
the
description
or
anything
like
that
of
that
of
that
property
and
people
will
pick
a
list
and
the
web
part
won't
work
and
it
won't
give
an
error
message.
D
But
if
you
look
at
the
logs
behind
the
scene,
it
gives
an
error
message
now,
every
time
we
do
something
like
this,
where
we
don't
help
the
user
understand
what's
required,
we
make
them
feel
a
little
bit
stupid
all
right.
So
that's
one
of
the
aspects
here
is
user
experience
and
when
we
do
user
experience,
it's
it's
important
to
think
of
a
few
things.
You
know.
The
first
thing
is
obviously
try
not
to
be
too
dramatic
right,
like
fatal
error.
D
I
know
we
still
see
some
of
these
errors
sometimes
but
fatal
air
like
it's
not
that
bad
right
nobody's
gonna
die
here,
so
why
we
ever
saying
something
like
fatal
error.
You
know
I
I
kind
of
tend
to
joke
about
error
messages
and
I
tend
to
say
that
no
developer
should
ever
be
allowed
to
create
error
messages,
because
we
have
a
tendency
to
write
stuff
like
this,
and
it's
it's
just
not
that
good.
D
D
D
D
Now,
thankfully,
technologies
are
improving
right
react
has
built-in
capabilities
to
prevent
you
from
by
accident,
injecting
unsafe
html,
and
you
have
to
explicitly
say.
I
know
that
this
html
can
be
unsafe
for
me
to
display
it
so
the
on
the.
If
we
look
at
kind
of
in
history
here,
we
went
from
having
injection
in
2017
as
the
top.
D
D
D
So
let's
take
a
look
at
kind
of
what
a
validate
description
that
I
just
demoed
would
look
like
now.
I
have
to
to
be
clear:
normally
you
would
want
to
localize
the
text,
not
hard
code
text
like
I
did
here,
but
just
for
simplicity
purpose.
I
actually
hard
coded
the
text.
Please
don't
scream
at
me
alright,
so
the
validate
description
gets
a
value,
that's
the
value
that's
been
entered
and
then
it
returns
a
string.
Now,
if
the
string
contains
text
it'll
actually
display
that
text.
D
D
D
Now,
let's
take
a
look
at
what
happens,
though,
if
I
start
logging,
how
often
I
actually
validate
the
text
so
here
I'm
going
to
start
typing
and
david
will
probably
make
fun
of
me,
because
I've
switched
to
a
new
keyboard
and
I'm
not
the
fastest
typer
at
these
nowadays.
But
when
you
start
typing,
if
you
look
on
the
right
side
here,
I
started
logging
when
I
validate
and
you'll
notice
that
it's
actually
validating
every
single
time
that
I'm
typing
something
which
might
be
the
behavior
you
want.
D
Do
you
really
want
to
search
every
time
or
validate
the
text
every
single
time?
Someone
enters
text?
Well,
there's
something
you
can
do
with
that.
So
let's
talk
about
it.
So
one
of
things
that
you
can
do
with
the
property
pane
here
I
use
the
text
field
now
we'll
talk
in
future
sessions
about
how
there's
actually
controls
that
are
probably
more
suited
or
better
suited
for
validating.
You
know
a
list
name,
but
let's
just
pretend
that
we.
D
We
also
want
to
verify
that
the
list
contains
the
the
right
columns
that
we're
looking
for
and
things
like
that.
So,
as
you
saw
before,
I
now
added
a
get
error
message
for
validate
list
name
and
same
thing:
we
get
a
string
and
we
return
in
this
case.
Instead
of
returning
a
string,
we
return
a
promise.
So
what
we're
saying
is
I'm
not
going
to
slow
you
down?
If
you
have?
You
know
if
just
tell
me
when
you
need
me
to
to
go
validate
my
text
and
we'll
go.
D
Do
that
and
then
what
we
do
in
this
particular
case.
We
actually
just
do
an
asynchronous
call
to
sharepoint
where
we
pass.
You
know
the
the
value
that's
been
entered
and
we
try
to
retrieve
that
list
by
title
and
one
thing
that
we
got
to
be
careful
here
is
again:
we
want
to
make
sure
that
we're
escaping
that
text.
D
Now,
in
this
case,
what
I
do
is,
I
see
if
I,
the
response
is
okay.
In
other
words,
if
there
was
an
actual
list
by
that
name,
I
will
return
no
error
message.
If
I
get
a
404
I'll
say
this
list
doesn't
exist
in
the
current
site
and
if
there's
an
actual
error,
I'll,
say
oops,
you
know,
try
again
and
then
a
little
try
and
catch
just
in
case.
Something
else
happens.
D
We
can
deal
with
that
so
again.
So
what
happens?
If
you
have
slow
apis?
What
happens
if
I
again,
I'm
throttled
and
things
like
that
and
I'm
running
out
of
time
here,
but
one
of
the
things
that
we
can
do
that.
I
know
I
spent
a
lot
of
time
trying
to
work
around
this
and
turns
out
there's
a
method
you
can
do
or
function
or
feature.
D
You
can
actually
just
say,
deferred,
validation,
time
and
specify
the
amount
of
time
in
milliseconds.
So
by
default,
the
deferred
validation
time
is
200
milliseconds.
But
if
you
want
to
actually
kind
of
slow
down
the
time
that
it
takes
and
give
the
user
the
ability
to
type
more
text,
you
can
do
that
as
well.
D
A
Thank
you
so
much
hugo
I'm
gonna,
try
to
present
in
teams
again,
so
we
can
get
to
the
last
slide
all
right.
So
here
we
are
at
the
end.
The
recording
will
be
available
24
hours
after
this
or
around
24
hours,
and
you
can
access
them
through
that
very
quick
link
certainly
follow
us
on
twitter,
the
microsoft
365
dev
and
microsoft
3m
365
pmp.
Our
next
call
will
be
on
february
10th.
A
So
please
definitely
look
to
join
us
then,
and
for
a
bunch
of
links,
and
since
we
are
live
sharing,
you
can
click
on
those
we
have
lots
of
community
calls.
We
have
the
m365
platform
call
which
we
talked
about
at
the
beginning:
adaptive
cards,
identity,
platform,
office,
add-ins
power,
apps,
the
m365
dev,
si
sig,
and
this
sharepoint
framework,
one
so
absolutely
click
on
those
to
get
them
in
your
calendar
and
join
us
for
all
the
fun,
and
that
is
all
we
have
for
this
this
session.
So
thank
you
again
for
everyone
joining
us.