►
Description
📺 In this 13 minute developer-focused demo Nicolo shares how to leverage enhanced component properties for improved canvas apps. He walks us through a minimal API setup and exposes this API through a custom connector to Power Platform. He explains how to enable enhanced properties in the canvas app and how the new function, action, and event (previously behavior) property types work.
This demo is taken from the Power Platform Monthly Community call 20th of July 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls
✨ Presenter
Nicolò Ferranti (Avanade)
📖 Learn more
💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home
Sharing is caring! You are awesome! 🧡
A
A
In
today's
demonstration,
I
will
introduce
the
Nancy
component
property,
a
powerful
experimental
feature
that
can
greatly
improve
the
performance
and
the
usability
of
your
canvas
upper
canvas.
Application
I
will
introduce
the
benefit
of
adopting
this
feature
with
an
example,
and
then
we
will
understand
how
it
works
through
a
demonstration
before
that.
A
I
would
like
to
to
take
some
time
to
introduce
myself,
I'm,
Nicole,
ferranti,
modern
workplace
consultant
Italy
and,
through
my
blogger,
I
put
my
experiences
in
the
field
of
Power
Platform,
with
the
aim
of
sharing
ideas
and
inspiring
new
Solutions
below
we'll
find
my
social
QR
code
that
you
can
use
to
to
stay
in
touch.
So,
let's
examine
a
possible
scenario
to
introduce
an
unset
component
property.
Let's
assume
we
need
to
develop
a
canvas
app
which
can
manage
our
products
to
catalog
by
custom
API
to
make
the
app
more
maintainable
and
reusable.
A
We
decided
to
to
use
an
approach
based
on
component,
and
in
this
scenario
the
component
has
the
role
to
render
the
list
of
the
products
and
apply
a
discount
to
develop
this
component.
You
could
choose
to
to
invoke
the
API
within
the
component
using
layer
asset
property
to
retrieve
the
list
of
of
products,
and
you
could
use
the
button
to
update
the
product
information
well
I'm,
considering
to
use
custom
connector
because,
in
my
opinion,
it's
more
sensitive
to
changes
than
a
standard
connector
and
can
point
out
the
potential
problems
anyway.
A
A
So
we
need
to
review
this
approach
and
adopt
an
alternative
implementation
for
the
get
request
you
can
store
in
the
main
update
data
and
pass
it
to
the
component
via
input
property.
Instead
for
the
put
API,
we
need
a
way
to
move
the
request
from
the
component
to
to
the
main
app
and
a
solution
could
be
to
for
an
event
from
the
component
and
execute
a
callback
function
in
main
app
to
operate
the
product
information
information
and
then
update
the
store
as
well.
We
adopt
this.
A
We
adopt
this
solution
to
to
prevent
the
duplication
of
information
between
mainapp
and
its
components.
Also,
we
centralize
the
entire
business
logic
only
in
the
main
app,
so
it
will
be
more
maintainable
than
than
before
and
in
addict
to
this,
we
unlock
the
component
from
the
custom
connector
dependencies.
So
so
the
component
now
has
only
the
role
to
render
the
information,
but
now
we
have
to
understand
how
we
can
create
an
event.
A
So
now
comes
into
play
and
answered
component
property,
and
thanks
this
feature,
you
can
find
a
custom
event
from
the
component
to
the
main
app
previously.
You
could
get
the
same
result
using
toggle
control
or
or
reset
property,
but
this
approach
was
complicated
to
to
manage,
as
well
as
the
creation
of
custom
event,
you
can
create
custom
function
which
contain
an
extraction
that
return
a
specific
value
and
also
you
can
create
a
custom
action
to
manipulate
a
call
action
or
a
variable
from
the
domain
app.
A
So,
let's
jump
into
the
demo
during
this
demo
we'll
go
over
the
dictionary
and
analyzer
the
earlier
to
to
see
how
enhanced
component
property
works.
So
let
me
open
my
visual
studio
so
to
follow
the
scenario.
First
of
all,
I
have
created
a
set
of
API
to
manage
a
catalog
of
video
game
games
and
simulate
the
simulate
the
back
ends
work.
This
is
just
just
real
quick.
Could
you
could
you
increase
the
font
size
a
little
bit
there
just
so
it's
a
little
easier
to
read.
Definitely
definitely
I
think
it's
good
enough.
A
Yeah,
perfect
excellent.
Thank
you
problem.
So
this
is
a.net
web
API
project
that
explore
an
approach
on
a
minimal
API
and
to
leave
the
time
for
the
enhanced
component
property
explained.
So
I
will
not
examine
the
entire
solution,
but
for
the
for
the
purpose
of
the
demo,
it's
important
to
see
that
we
have
a
simple
crude
operation
to
work
with
catalog.
We
have
a
poster
to
create
a
new
game,
get.
A
So
after
testing
the
API
and
deploying
them
in
a
service
like
Azure
up
the
service,
so,
for
example,
we
are
ready
to
create
a
custom
connector
to
make
this
API
accessible
for
the
power
up
canvas
so
so
adaptive
custom
connector,
improve
the
collaboration
between
iteration
and
developer
and
citizen
developer.
I
have
already
created
a
custom
connector
by
adding
all
endpoints.
A
In
definition,
indefinition,
Tab
and
I
will
not
disseminate
custom
connector
stub
in
deep,
but
you
can
find
API
solution
and
custom
connectors
while
getting
my
GitHub
repository,
then
after
we
have
completed
the
custom
connector
test,
you
are
ready
to
to
use
it
in
in
your
canvas
app.
So
let's
jump
in
our
canvas
app.
This
is
our
simple
canvas
app
which
can
manage
a
list
of
Game
available
and
apply
a
discount
it,
inter
this
component
interacts
with
the
main
app
by
a
custom
event.
A
So
let's
immediately
see
how
how
to
create
one-
and
here
you
can
see
the
component
to
make
possible
decoration
of
an
event
you
have
to
enable
enhanced
component
property
and
to
do
that,
you
have
go.
You
have
to
go
in
setting
upcoming
feature,
experimental
and
looking
for
an
answered
component
property
and
enable
it
now,
if
we
click
in
in
right
tab,
we
see
different
property
type.
A
One
of
the
main
goal
of
the
last
update
is
to
provide
the
clearer
and
more
conscious
Concepts,
so
some
property
have
changed
the
name,
for
example,
data
for
example,
data.
This
is
the
classic
property
type
where
you
can
Define
input
and
output
property
of
the
component
and
nothing
new
from
from
before.
You
can
create
input
property
to
to
pass
data
to
the
component,
and
you
still
create
output
property
to
expose
a
data
which
will
be
read
reading
from
the
domain
app,
but
more
than
this
property.
A
As
you
can
see,
you
can
define
a
distinct
type
of
property
like
function,
function
and
property
or
property
that
can
accept
argument
and
return
a
value
at
this
time.
A
function
does
not
support
data
flow,
but
we
can
expect
it
in
in
the
future.
As
you
can
see,
you
can
choose
from
two
kind:
property
input,
input
and
output.
An
input
function
is
a
way
for
a
consuming
app
to
provide
logic
to
to
a
component
similar
function,
pointer
or
a
callback
function.
A
A
A
I
have
already
created
a
new
event.
Customer
called
invoke
discount
event
and
I
defined
the
parameter
game
parameter
called
the
game
object
selected.
We
have
to
consider
the
parameter
excited
like
an
argument
of
a
function
and
in
this
case,
game
objects
is
selected,
is
a
record
type
which
has
this
model
okay.
So
now
we
have
to
add
this
event:
invoke
discount
in
book
discount
event
to
a
control
which
has
the
on
select
or
on
change
property.
A
So
we
can
use
a
button
and
if
you
look
at
this
button,
the
unselect
property
of
this
button,
we
can
see
that
I
insert
the
event.
Okay
and
I
passed
the
this
item
as
parameter.
But
what
is
this
item?
It's
the
the
item
that
you
will
select
from
the
gallery
because
we
have
a
gallery
items
so
now,
when
we
will
click
apply
this
count
button.
We
will
fire
this
event.
So
now
we
have
to
to
define
the
Callback
function.
So
come
back
in
our
app
and
insert
the
component
and
indirect
panel.
A
We
are
going
to
insert
the
function
which
will
be
execute
when
the
the
event
is
fired,
and
in
this
case
we
are
going
to
invoke
a
put
API
to
apply
20
discounted
to
the
price
and
if
everything's
goes
fine,
we
are
going
to
update
the
game
list
store
which
will
be
used
indenter
app
by
using
the
the
get
the
get
API.
So
let's
try
it
and
to
do
that,
I'd
like
to
open
the
monitor
to
have
the
full
view
of
the
API
and
the
effect
if
I
click
on
apply
discount
of
this
game.
A
A
So
now
that
note
that
we
pass
also
the
data
through
the
component
via
list
game.
So
adopting
this.
This
solution
prevented
the
duplication
of
information,
because
we
have
a
store
game
list
store
available
for
the
entire
Hapa
and
we
centralize
the
entire
business
logic
and
HTTP
requested
only
in
the
main
app.
A
So
the
app
will
be
more
maintainable
and
more
performancing
than
before,
but
arrive
at
this
point
you
might
might
ask
why
I
didn't
do
the
same
thing
by
using
a
function
property
because
the
function
property
has
to
be
has
to
be
pure
and
to
show
you
what
poor
function
means.
I
have
created
new
input,
property
function,
custom
input
function
in
the
component
and
it
returns
a
Boolean
value,
and
it
has
also
two
parameter:
OPC
and
price.
Now
you
have
to
image
that
you
invoke
this
function
using
a
button
by
the
unselect
property,
for
example.
A
Consider
this
button
R2
card
and
if
we
expect
the
unselected,
you
can
see
that
we
are
invoking
this
function
from
the
from
the
on
selected
and
and
now
we
have
to
come
back
in
our
main
app
and
Define
error.
Define
the
Define,
the
the
function
that
the
expression
that
will
be
executed
when
the
function
is
called.
So,
if
I
click
on
a
custom
input
function,
we
can
see
the
we
can
see
the
expression
and,
however,
you
cannot
use
it
to
change
value
elsewhere
in
the
in
the
app.
A
So
it
has
to
be
a
poor
function
and
that's
mean
you
cannot
use
the
update,
contexter
or
a
set,
and
you
can
you
can't
even
use
patch
to
update
a
collection
you
can
lo,
you
can
only
Define
a
single
expression
that
returns
a
different,
definite
value
as
this
example
and
this
functionality
finds
an
outlet
in
complex
components
where
a
given
functions
where
a
given
function
is
called
multiple
time
and
so
the
that's
all.
And
thanks
for
your
attention
back
to
you,
David
foreign
foreign.