►
Description
In this 15-minute developer focused demo, André Lage elegantly extends Microsoft Lists Expense tracker template’s capabilities by adding file picker, locations (embedded Bing maps), payment timeline view and mobile view list formatting. His solution leverages a SharePoint page - filter web parts, Power Automate - declarative JSON for flow (expense approval), and Adaptive Cards for approval in a Teams channel. Use the capabilities to create/populate a new expense item and call a flow action for large expense approval. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on June 9, 2022.
Demo Presenter
• André Lage (Datalynx AG) | @aaclage
Supporting materials
• Sample - Payment format | https://github.com/pnp/List-Formatting/tree/master/view-samples/payments-format
• Sample - Bing Maps format | https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-bingmaps-format
• Sample - File Picker format | https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-filepicker-format
• Samples - SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
• Expense tracker template
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
A
The
the
idea
here
is
to
using
the
the
least
formatting
and
the
template
try
to
make
the
some
additional
extension
and
try
to
use
what
is
already
out
there
and
try
to
improve
it
with
some
different
type
of
user
experience,
with
some
business
rules
associated
on
the
top
of
that.
So
what
is
the
first
thing?
First
thing
is
always
what
I
say
every
in
every
project.
We
do
some
some
part
of
consultancy
and
we
always
try
to
answer
the
five
main
questions.
A
If
we
reach
some
type
of
value,
imagine
more
than
one
thousand
or
two
thousand,
then
we
should
trigger
some
type
of
flow,
and
this
is
what
I
also
would
like
to
show
where
we
can
use
in
the
the
least
formatting
and
plus
some
additional
formulas.
We
can
also
create
some
additional
flows
on
the
top
of
that,
and
then
we
have
the
features
on
the
top
of
the
of
the
solution
that
I'm
going
to
provide
with
the
customer
formatting
itself,
and
this
will
be
the
file
picker.
The
using
the
the
locations
with
the
bing
maps.
A
Also,
I
have
a
specific
view
for
payment
payment
timelines
view
and
also
adopt
the
the
user
interface
that
we
have
it
from
the
list.
That
also
fits
the
mobile
point
of
mobile
view
itself.
I
also
want
to
to
use
the
integration
with
the
sharepoint
page
with
the
filters
using
the
per
automate
with
the
chase
and
to
this
to
start
of
the
flows
and
also
use
the
edited
tip
card,
where
we
can
make
our
approval
process
of
the
the
rules
that
I
took
it
before.
So
how?
What
would?
What
is
what
I
did?
A
It's
nothing
more
than
picking
pick.
What
is
already
there
try
to
see
what
is
on
the
on
the
templates
and
for
us
when
we
when
we
need
to
work
with
lisa,
and
we
need
to
have
a
better
user
interface.
We
try
to
to
pick
what
is
already
out
there
with
this
little
excel,
look
and
feels,
and
we
try
to
to
change
the
the
look
and
feel
that
becomes
more
user
interactive,
and
for
that
we.
I
I
propose
in
this
type
of
approach
that
in
this
case
I
call
it
payment
registration
because
it
can
be
payment.
A
Registration
on
the
family
on
the
company
and
let's
just
try
to
be
a
little
more
broad
where
we
have
one
initial
interface,
where
we
have
the
ability
to
see
the.
What
is
the
entries?
What
is
the
costs?
What
is
the
currency
that
we
have
it
and
when
we
click
on
the
on
the
title,
we
have
a
card
that
will
give
us
the
the
better
description.
What
was
the
amount
spended?
What
is
the
document
expense
that
was
made?
What
is
the
rating
that
we
give
it
for
the
moment?
A
They
will
make
this
expense
a
little
description
and
also
the
location
that
we
can
also
redirect
us
on
beings.
Where
was
this
location
bought
itself?
Another
thing
that
I
included
was
on
this
and
this
area
here,
so
I
just
want
to
include
it
here.
We
just
include
one
additional
area
that
can
trigger
the
expense
and
basically,
with
this
flow,
we'll
send
that
eptic
card
that
you
can
to
a
specific
channel
that
they
can
approve
or
reject,
and
then
the
workflow
will
send
it
back
and
do
some
actions.
A
A
We
have,
for
example,
the
invoice
that
we
can
also
provide
some
type
of
interface-
the
total,
for
example,
that
we
offer
how
much
we
expend
and
also
on
the
top
of
the
expansion
that
we
did-
that,
for
example,
we
went
to
the
supermarket
and
to
reach
that
we
also
need
to
include
the
expense
of
the
taxi.
We
can
also
include
some
super
super
costs.
On
the
top
of
this
main
operation
itself.
A
We
have
the
the
payment
currency,
we
have
the
ability
to
expand
and
collapse,
and
then
we
have
some
main
operations
like,
for
example,
the
moment
we
paid
doesn't
mean
the
money
went
out
and
we
can
also
control
these
actions
itself.
If
we
do
it,
when
the
payment
is
made
with
success,
we
also
can
rate
it,
and
we
also
can
we
can
define
the
location
where
it
was
made,
this
payment
itself.
So
on
the
card,
we
have
a
little
more
description
and
more
detail.
A
That
can
be
easily
identified
that
we
don't
need
to
navigate
between
different
page
itself.
So
we
have
the
same
type
of
information
but
more
compressed
and
easy
to
be
accessible
itself,
and
then
we
have
the
ability
to
create
the
the
flow
and
the
flow
is.
For
example,
I
create
a
rule.
If
we
have
more
big
expenses,
bigger
than
1000
automatically
will
appear
a
red
light
with
one
specific
new
icon.
That
appears
here.
A
That
will
that
we
need
to
trigger
a
workflow,
and
this
will
send
it
to
the
channel
with
a
bunch
of
administrators
that
will
analyze
and
they
will
prove
it
or
not
itself.
And
if
the
and
this
is
the
adapted
card
that
the
channel
will
receive
it,
they
will
make
an
analysis
of
the
content
and
then
they
will
take
some
decisions.
The
moment
they
approve
it
or
they
reject
it.
The
status
will
be
changed
based
on
the
information
that
was
going
to
be
given.
A
A
Where
is
the
document
library
with
the
files,
and
then
we
just
copy
the
link
to
the
to
the
document
itself,
and
then
I
start
the
link
to
the
item
itself,
where
we
have
this
link
and
when
we
need
to
have
access,
we
just
need
to
click
it,
and
then
we
access
to
the
view
items
of
the
of
that
specific
document
directly
on
sharepoint
itself.
The
second
one
is
the
ability
to
use
the
embed
warehouse
parameters
from
beings
and
also
the
url
parameters
that
we
can
customize.
A
What
is
how
the
bing
maps
will
appear,
for
example,
for
this
presentation.
I
remove
every
reference,
for
example,
for
restaurants,
locations
that
becomes
more
clean
and
doesn't
appear
at
different
locations,
and
I
only
put
some
main
areas
that
you
can
easily
identify
like
the
eiffel
tower
and
the
pyramids
of
kisa
itself,
and
here
I
also
have
how
I'm
doing
the
the
code.
Basically,
it's
nothing
more
than
making
embed,
I'm
sorry,
a
url
that
will
call
the
maps
itself
with
the
parameters
from
latitude
and
longitude
itself,
and
then
the
map
will
appear
there.
A
I
will
also
show
this
is
the
payment
timeline
I'm
ordered
by
the
moment
that
was
paid.
What
is
the
category
of
payment?
The
description,
and
I
also
have
the
card
that
I'm
also
going
to
show
it
later
on
and
then
the
adaptation
of
the
of
the
view
we
have
one
that
will
be
used
for
desktop
and
the
second
one
that
will
be
adapted
for
the
mobile
view.
A
You
can
use
it
and
move
the
left
and
right-
and
you
see
that
will
be
very
similar
to
the
other
apps
that
you
already
have
on
your
mobile
phone
and
you
have
the
same
type
of
interaction
itself.
So
let's
go
to
the
example,
so
I'm
just
going
to
change
to
my
site-
and
this
is
the
my
initial
home
page
itself.
As
you
can
see,
we
already
have
some
data
information
and
some
views,
the
ones
that
I'm
going
to
work
will
be
based
on
this
area
here.
So
what
will
be
the
first
action?
A
I
will
keep.
I
will
define,
for
example,
an
air
ticket
and
the
cost
was
450
and
we
can
define
other
costs,
but
we
can
put
at
this
later
on
and
we
can
also
define
what
will
be
the
caller.
We
can
define
what
will
be
the
location
and
the,
and
what
will
be
the
rate
in
this
case
is
going
to
keep
it
here
and
I
will
going
to
save
it.
A
Okay,
I
have
it
here
and
then
I'm
just
going
to
to
access
to
my
view,
as
you
can
see
here,
that
there
is
already
one
action
in
this
case.
If
this
is
travel
and
because
I
didn't
say
when
this
payment
was
done,
I
can
always
access
and
define
when
was
the
the
the
payment.
In
this
case,
I
have
the
travel,
I
have
the
cost
and
I
also
have
the
I
should
have
the
event
in
this
case.
A
I
put
it
in
the
incorrect
area,
so
I
will
say
I
have
the
the
the
initial
cost
of,
for
example,
minus
450,
swiss
francs,
and
it
will
automatically
give
me
and
also
to
reach
the
airport.
I
have
some
additional
costs
that
I
can
also
include.
Okay,
taxi
travel
and
I'll
say
this
took
me
from
home
to
to
my
to
the
airport,
took
me
around
60
swiss
francs,
and
then
we
can
have
a
calculation
process.
At
any
moment
we
can.
We
can
have
only
view
the
initial
information,
but
we
want
to
have
it
more
details.
A
A
I
have
it
here
and
when
I
click
it
basically,
I
will
pop
up
and
he
will
tell
me
the
city,
the
the
country
and
where
is
located,
if
I
need
to
know
exactly
on
the
location
where
it
was
spotted
itself.
Basically,
this
will
open
a
new
tab
where
I
can
see.
Okay,
this
is
in
france,
and
this
is
the
one
of
the
monuments
from
there.
As
I
can
like,
I
said
it,
I
remove
on
the
using
the.
A
Where
else
I
remove
all
the
parameters
that
can
be
identified,
the
locations
itself-
and
this
is
very
simple-
where
we
can
detail
more
information.
How
can
we
associate
the
the
expenses
that
I
have
it?
So
I
have
a
button
on
here
and
basically,
what
he's
going
to
do
is
going
to
call
the
document
library
itself
and
from
here
we
can
define
some
pic.
Why
I
wanted
to
use,
for
example,
not
this
one
here
why
I
want
to
use
the
I
want
to
call
a
document
library
and
not
the
image,
the
image
field.
A
The
reason
is,
I
want
to
keep
the
the
business
logic
where
the
documents
are
needed,
for
example,
if
I
need
to
store
it
in
a
folder
with
that
is
associated
with
this
ear.
I
can
always
associate
this
this
area,
this
folder
and
I
will
put
to
the
document
there
and
then
the
only
thing
I
need
to
do
is
to
copy
the
link,
and
I
will
copy
and
then
return
to
my
area,
and
here
I
will
call
it.
I
will
save
it
and
then
I
have
the
image
association
with
the
with
the
document
itself.
A
When
I
call
it
I
will,
I
will
be
redirected
to
the
to
the
visualization
of
the
document
itself,
where
I
can
do
the
association
areas.
I
know
all
this
can
always
return
back
and
I
always
click
on
the
card,
and
I
have
all
the
actions
that
I
did
before
can
easily
be
seen
directly
here.
Okay-
and
this
is
the
main
main
properties
and
characteristics
we
can
do
our
our
business
business
rules.
Imagine
the
cost
that
we
have
for
the
travel
was
increased
and
we
have
to
say:
oh
with
this
is
more
than
one
1.
A
500
switch
ranks
in
this
case,
as
you
can
see
here,
there
is
a
new
button.
That
means
okay,
stop
we
need
to
have.
We
need
to
send
this
to
management
or
to
someone
else
who
needs
to
to
approve,
and
for
that
I
have
here
a
flow
action
that
I
will
going
to
call
and
it's
going
to
load
just
upon
a
few
seconds.
I'm
sorry
for
this
and
then
run
the
flow
in
theory.
What
will
happen
in
the
themes
I'm
just
going
to
access
it?
A
I
have
here
the
card
associated
and
the
user,
and
this
will
be
the
channel
that
will
access
here.
So
all
the
users
who
have
access
to
this
channel
means
they
have
the
ability
to
approve
and
to
review
all
the
costs,
and
at
any
moment
they
can
click
directly
on
the
document
on
the
on
the
location
and
they
will
be
also
redirected
to
the.
A
Where
was
the,
where
was
where
I
was
being
and
what
is
the
document
associated
and
that's
why
I
wanted
to
keep
the
I
want
to
call
the
library
pick
the
file
and
because
to
keep
the
business
structure
of
the
document
there,
and
not
only
to
attach
it
to
don't
use
as
an
attachment
or
even
to
use
the
image,
one
that
creates
a
separate
folder,
but
without
the
business
logic
associated,
and
for
this
case
I'm
going
to
recheck.
I
have
a
justification
why
you
need
to
reject
these
travel
was
not
approved.
A
And
then
I
just
need
to
send
the
reason
back
just
going
to
send
it
back.
I
have
the
answer,
I'm
just
going
to
return
and
when
I
return
back,
I
have
a
image
saying
that
was
rejected
and
with
the
business
justification
itself,
and
this
is
the
the
flow
that
we
can
also
associate
it.
And,
of
course,
at
any
moment
we
can
like.
I
share
shared
it
with
with
the
flows.
A
We
have
here
the
the
timelines
we
have
here
the
description
we
have
the
view
and
we
can
make
the
filters
itself,
and
this
is
a
basically
the
presentation
that
I
want
to
say
this
samples
is
located
in
the
repository
and
one
last
information
is
please
all
these
things
that
you
see
the
from
other
presentation
that
you
use
on
the
list
formatting
and
you
want
to
make
your
customizations.
There
is
a
link
that
you
can
send
some
feedback
that
you
can
improve
the
microsoft
list.