►
From YouTube: Microsoft List Formatting - Challenges and Solutions
Description
In this 19-minute developer focused demo, André Lage shares the output of his winter lock down – List Formatting samples categorized by emotions, multiple person, color picker, bar option, slider, and Teams Group. Solutions include discussion board, events mobile and payment. Graphical tree along with LABs (show how handle manual actions from users) for Tic Tac Toe and roll dice. UI/script shown on slides, live in demo. Samples available in List Formatting Repo soon. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on January 20, 2022.
Demo Presenter: André Lage (Datalynx AG) | @aaclage
Supporting materials:
• PnP Samples - List Formatting Samples | https://pnp.github.io/List-Formatting/
• List formatting documentation | https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
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
I
use
it
as
a
laboratories
like
like
games
that
we
can
create
using
the
lists
I
have
for
presentations,
the
capability
of
creating
design
like
trees
and
also
the
different
solutions
that
we
question
when
we
have
it,
for
example,
in
sharepoint
online.
How
can
can
I
create
a
discussion
board?
How
can
I
make
a
registration
of
payments
and
how
can
I
create,
for
example,
event,
and
I
will
try
to
to
do
it
for
desktop
and
also
to
work
it
all
itself
on
the
on
the
mobile?
A
So
I
have
different
type
of
formatting
that
can
be
copy
pasted
and
to
to
your
own
solution
can
be
even
format
for
the
different
accounts.
So
this
is
the
collection
of
of
features
that
was
created
during
these
last
months,
so
the
first
one
that
I
would
like
to
present
is
the
capability
like.
We
have,
for
example,
other
platforms
to
create
emotions.
So
imagine
you
have
a
page,
and
you
want
to
create
some
messages
to
that
page,
to
include
some
additional
emotions.
So
you
are
you
like
it.
You
think
this
page
is
interesting.
A
You
can
create
a
different
type
of
association,
so
here
and
what
was
then
basically
I
create
two
type
of
formatting.
One
formatting
will
be
a
will,
be
able
to
display
the
emotions
only
for
that
specific
user,
but
I
also
create
a
different
format
that
will
be
able
to
display
the
emotions,
so
in
this
case
for
will
be
on
emoji.
That
will,
you
can
select,
then
can
be
for
one
or
multiple
users,
the
one
without
the
number.
Basically
it's
only
for
the
current
user.
A
For
that,
I
create
two
different
type
of
columns
that
you
can
make
the
the
management
of
of
the
emotions
associated
and
the
on
the
right
is
also
the
code.
Other
thing
that
I
try
also
to
do
is
the
ability
to
create
a
pattern
for
multiple
persons.
We
are
always
we
always
question
so
how
to
use
the
multiple
person
and
how
we
can
display
a
large
amount
of
users
itself.
A
For
this,
I
try
to
create
this
type
of
pattern
that
people
can
select
the
blocks
of
the
json
code
that
you
can
use
it
to
fit
your
own
needs.
For
example,
you
want
to
have
the
multiple
person,
but
you
only
wanted
to
have,
for
example,
the
color
or
the
first
two
letters
like
we
have
it
out
of
the
box.
I
try
to
reformat
it
that
we
can
duplicate
this
type
of
situation
itself.
Another
thing
that
we
also
have
problems
is
the
capability
of.
A
We
don't
have
unlimited
space,
so
I
try
to
reduce
it,
for
example,
to
display
only
the
first
two.
At
the
moment
we
have
more
users
there.
I
have
a
plus
one
plus
two
plus
three,
and
when
they
click
it
to
over,
a
situation
will
appear
and
we
will
display
it.
So
we
have
I'm
trying
to
simulate
the
current
situation
that
we
have
today
when
we
are
choosing
the
people
picker
with
image,
without
image
and
with
the
callers
and
the
callers
are
generated
based
on
the
size
of
the
of
the
name.
A
And
then
I
make
a
randomization
of
the
of
the
of
the
callers
itself.
I'm
able
to
pick
the
first
letter
and
the
last
the
second
letter
of
the
of
the
title
of
the
user
itself,
and
it
is
how
appears-
and
then
I
have
another
option
that
I
created
is
I
try
to.
I
pick
the
the
callers
from
the
powerapps
that
is
available
on
microsoft.
A
They
are
around
140
colors
itself
and
then
I
try
to
create
a
subcomponent
that
you,
the
users,
can
copy
and
try
to
reuse
it
on
their
own
customization
when
they
are
creating
their
own
solutions
itself.
As
you
can
see
on
the
gif.
Basically,
we
I'm
able
to
display
that
all
the
different
options
there
and
I
make
a
collection
that
will
be
used.
A
One
thing
that
I
also
did-
and
this
is
something
that
I'm
going
to
show
on
the
later
on-
is
the
capability
to
make
filters,
because
we
have
140
colors,
but
you
don't
want
to
display
all
the
colors,
so
I
created
a
field
that
is
control
f,
where
you
can
define
the
names
of
the
the
calls
that
you
want
to
display.
The
next
one
is
the
the
it's
just
that
this
is
the
this
is
the
bar
option
itself,
so,
basically,
I
just
wanted
to
create
a
progress
part
that
was
working
as
a
as
an
option.
A
You,
basically
we
can
choose
which
which
value
you
want
to
associate
and
you
create
the
icon
that
comes
from
the
left
side.
This
will
be
an
upset
object
that
can
be
used,
for
example,
for
the
code
of
the
day.
What
is
the
current
status?
What
is
the
option
that
you
want
to
choose,
or
even
the
thermometer?
So
is
it
more
a
visual
component
that
you
can
use
I'm
using
as
a
as
a
progress
part,
but
I
also
change
the
color
depending
on
the
options
itself,
and
then
I
have
another
one.
A
That
is
something
that
people
really
like
it
and
they
they
always
question
themselves.
They
want
to
have
a
slider.
I
want
to
have
a
slide
and
right
now
there
is
not
that
much
capability,
so
I
create
a
component
and
with
the
description
that
will
be
shared
on
the
list,
formatting
that
basically,
what
I'm
doing
is
to
collect
to
only
display
one
item
from
the
list
view
and
I
based
on
the
column
that
will
be
ordered
by
ascending
and
basically
what
I
do.
A
If
every
time
I
they
click
on
the
icon
on
the
top
left,
the
the
date
will
be
updated
and
all
is
going
to
return
to
last.
The
last
date
on
this
case
the
number
of
the
last
date
since
the
date
is
always
a
progressive
approach.
I'm
always
getting
I'm
always
rotating
the
image
itself.
I
also
can
show
it
later
on.
A
So
the
next
one
that
I
was
like
to
do
is
the
ability
to
use
the
themes
deep
linking
itself
so
on
this
component
itself
that
I
created,
I
try
to
use
the
the
the
themes,
deeply,
the
deep
link,
what
I
can
do
with
this.
So
basically
I'm
able
to
define
a
group
title,
so
I
can
create
a
group
with
a
with
pre-defined
users.
In
this
case,
I
define
three
users
and
I
want
to
have
a
chat
with
the
specific
users.
The
team's
deep
linking
is
able.
A
If
we
use
the
right
parameters,
you
can
define
the
group
title,
you
can
even
define
an
initial
message
and
you
can
automatically
include
the
the
three
users
that
I
predefine
it
on
or
my
formatting
itself
as
it
is
displayed
in
the
image
below,
and
there
is
also,
of
course,
on
the
right,
always
the
format.
Now
we
come
to
the
solutions.
One
thing
that
is
always
very
requested
is
the
discussion
board
for
this
component.
I
try
to
use
the
same
capabilities.
A
They
are
already
out
there
plus
what
we
have
it
before,
but
I
try
to
use
it
in
a
more
user-friendly
approach,
we're
giving
the
giving
a
title
a
description.
Also,
the
ability
to
give
the
votes
and
the
votes
have
the
same
philosophy
like
it
is
in
the
other
applications,
and
also
the
ability
to
add
text
and
also
add
the
comments.
Everything
based
on
on
the
list
items
itself
made
later
on.
A
I'm
also
going
to
show
how
this
is
working
and
also
includes
the
capability
to
include
emotions
on
the
different
on
the
on
the
posting
of
each
discussion
itself.
That's
also
going
to
display
the
second
one
of
the
solutions
is
the
ability
to
create
events,
and
we
make
the
integration
with
the
calendar
itself.
A
As
you
see,
this,
this
event
has
the
same
capabilities
so
starting
date,
the
end
date,
the
calculation
of
the
hours
that
we're
going
to
do,
and
also
the
change
of
the
categorization
that
will
be
easily
integrated
with
the
with
the
different
calendar
itself,
plus
something
that
we
can
easily
identify.
As
you
see,
this
is
very
similar
that
we
already
have
on
the
app,
and
I
want
to
represent
the
same
approach
that
you
have
it
on
your
app
to
be
used
on
the
format
with
the
same
type
of
behavior.
A
That's
why
you
have
the
green
bar
on
the
right
that
are
going
to
show
how
this
will
appear
on
the
mobile
and
the
the
last
one
is
the
capability
to
to
make
payments.
One
thing
that
is
always
important
is
to
have
a
very
good
education
via
education
and
financial
education
itself,
and
I
use
it
for
the
registration
of
every
action
that
every
buy
and
every
situation
that
we
need
to
control
and
to
manage
our
payments.
A
In
this
case,
I
define
a
type
of
categories:
the
payment,
the
description,
the
amounts
and
even
some
additional
amounts
that
we
can
do
the
on
the
top
of
the
current
payments
itself.
For
example,
I
went
to
the
supermarket,
but
I
have
to
I
have
to
go.
There
buy
a
taxi,
so
I
have
the
cost
of
the
of
the
supermarket
plus.
I
can
include
some
additional
costs
on
the
top
of
it,
so
also
another
demo
will
be
appearing,
and
then
we
go
for
the
presentation.
A
The
goal
here
is
more
to
promote
a
visual
impact
to
create
moods
on
the
people
itself.
In
this
case,
I
use
the
geometrical
shapes
from
cscs
to
create
trapezoids
and
triangles
to
create
a
tree,
look
and
feel
or
using
the
format
itself.
And
of
course,
then
I
put
some
good
some
goodies
on
the
top
regarding
the
the
the
the
gifts
and
now
the
laboratories,
the
laboratories
is
more
to
to
give
the
ability
to
play
around
and
to
give
some
options
that
people
can
be
motivated,
how
we
can
create
some
manual
actions
itself.
A
In
this
case,
I
created
tic-tac-toe
game
that
basically
I
have
two
type
of
options.
You
can
be
player,
red
or
yellow,
and
you
can
click
it
and
you
define
each
one
of
the
position.
So
you
know
I'm
not
saving
the.
I
only
saving
the
option
they
are
already
fulfilled
and
will
be
not
able
to
to
overtake
the
other
ones.
So
I
try
to
create
all
these
different
look
and
feels
for
for
the
tip
target,
and
then
I
have
the
last
one.
A
It's
also
the
to
crea
to
the
the
ability
to
create
the
dice
and
to
roll
dices,
and
then
I
have
two
different
users
that
will
basically
will
run
and
every
time
I
roll
a
dice
to
the
user
will
go
forward
and
will
win
or
not
and
who
is
going
to
be
the
first
one
option.
The
idea
here
is
to
provide
a
task
evolution.
A
Well,
if
we
think
it
more,
how
can
it
be
transferred
transformed
to
your
solution
to
provide
a
task,
evolution
and
inspiration
that
you
can
also
provide
some
type
of
user
interaction
that
people
becomes
more
appealing
itself
so
for
the
demo?
So
just
going
to
jump
to
the
my
site
app-
and
it
is
here-
and
this
is
my
home
page
itself-
it
looks
very
messy.
A
So
really
all
the
solutions
are
here
and,
as
I
said
before,
this
is
the
the
component
of
the
options,
and
here
is
the
abstraction
option,
and
here
is
where
you
can
customize
it
like
creating.
What
is
the
code
of
the
day?
So
how
you
feel
it
today,
you
feel
not
that
happy
and
what
is
the
current
status
that
you
can
include.
The
second
one
is
the
the
color
picker,
as
you
can
see
here.
A
If
we
click,
we
have
the
140
colors
that
from
the
from
the
powerapps
solutions,
and
if
you
see
it
here,
there
is
a
name
for
each
one
of
the
caller,
but
if
you
don't
want
to
have
it
140
colors.
Is
that
okay,
it's
not
a
problem,
because
there
is
also
a
new
option
that
we
can
make
the
filter
and,
for
example,
I
want
to
use
the
red,
the
cyan
and
the
gold,
and
all
only
these
three
options
will
be
available
next
time
that
I
want
to
use
it.
A
So
I
go
to
the
color
picker
and
I
only
have
three
options.
I
will
click
it
and
the
color
will
automatically
update.
The
same
will
happen,
for
I
have
other
two
options
that
you
can
use
it
and
the
goal
here
is
everything
that
I
have
it
here.
You
can
copy
paste
to
your
own
solution
and
head
up
to
each
one
of
the
options
itself.
Here
I
have
the
the
christmas
tree
and
you
click
on
the
present.
Basically,
you
have
more
information.
A
This
is
nice
to
as
a
presentation
to
create
a
good
mood
on
the
company
itself
and
that
people
can
easily
identify,
and
then
we
also
have
this
is
like
I
said
before
the
ability
to
create
games.
I
have
two
players.
I
will
start
to
roll
the
dice
and
they
will
start
to
read
to
see
who
is
the
first
one.
This
case
was
the
this
user,
but
for
example,
I
want
to
change
the
character.
I
also
have
a
clipboard
view
that
you
can.
A
You
can
display
your
information
as
a
clipboard
approach,
but,
for
example,
if
you
want
to
change
the
character
of
the
user,
you
can
go
there,
and
now
we
have
the
two
one:
two
different
type
of
users:
we
roll
the
rice
again
and
see
who
is
going
to
win
and
the
unicorn
wins
again
how
we
can
define
emotions.
As
you
see
here,
I
have
a
I
have
it
one
icon.
I
can
include
another
one
and
another
one.
As
you
see,
someone
else
already
gives
some
emotion
itself
and
the
moment
he
identified.
A
That
is
me
and
if
it's
the
first
time
I
can
clearly
basically
he
will
count
it.
I
don't
want
to
have
my
own
emotion.
I
can
click
it
directly
there
and
will
disappear.
The
same
can
be
done
directly
from
the
pop-up.
I
also
have
the
capability
to
have
the
tiles
menus
that
you
can
display
your
information
in
the
way
that
we
we
already
know
it,
and
we
can
on
any
moment
organize
them,
so
we
can
click
it
and
basically
he
can
move
directly
to
the
content
the
same
from
tic-tac-toe.
A
We
can
click
it
here
and,
as
you
can
see,
there
are
some
type
of
options
that
are
updating
itself,
so
click
it
here
and
I
want
so
new
game.
So
the
same
situation
that
I
presented
here
and
also
this
slide,
the
the
slider
here
is
my
image
from
when
I
went
to
our
hiking
in
the
swiss
alps
and
from
time
to
time,
I'd
like
to
see
and
where
I
went
and
will
be
then
my
next,
my
next
hike
itself,
another
option,
the
same
content
that
I
have
for
the
clipboard.
What
I
have
done.
A
I
use
the
current
capability
of
the
search
capability
from
this
from
from
the
formatting.
What
I'm
doing
I'm
making
search
inside
the
the
text
that
I
have
all
my
formatting
in
this
case
I
want
to
identify
tags
and
what
he
does.
He
picks
the
text
and
he
or
the
he'll
make
focus
and
he
will
be
able
to
define
attack.
I
can
click
it
and
automatically.
A
The
tag
will
be
available
that
can
be
used
later
on
for
for
searching
itself,
and
this
is
the
comp,
the
components,
the
sub
components,
the
abstraction
of
the
components,
my
laboratory
now.
The
solution
here
is
the
solution
that
I
included
so
for
the
discussion
board.
As
you
can
see
here,
we
have
the
ability
to
define
the
categories
to
associate
votes
to.
If
I
like
it
or
not,
what
is
the
content
and
if
I
want
to
use
the
the
content
to
read
what
was
right
on
the
on
the
on
the
discussion.
A
A
I
will
make
them
research
and
I
will
associate
the
emotions
at
any
moment
I
can
include
which
options
I
wanted
to
have
it
here
and
if
I
want
to
know
or
to
make
a
comment,
I
can
always
go
directly
to
the
to
the
point
that
I
say
I
want
more
information
and
I
say,
click
and
automatically.
We
update
the
the
comments,
so
we
can
always
track
it
on
any
time.
On
the
discussion
board,
what
is
happening?
What
is
the
discussion
and
what
is
the
current
situation
at
any
moment?
A
We
can
make
a
filter
of
the
the
content
that
we
want.
We
have
then
the
question
of
of
the
event
mobile,
so
we
have
the
ability
to
have
the
description.
What
is
the
content?
We?
Where
is
the
link
for
the
meeting?
Where
can
we
change
it?
We
can
change.
For
example,
I
want
to
will
be
a
meeting
for
drinks.
We
can
define
as
favorites
and
why
I
have
this
green.
A
So
if
I
click
f12
you'll
be
able
to
see
so
okay,
I
have
it
here
you
if
you
use
on
your
mobile
phone
and
you
are
watching
to
do
to
the
sharepoint
site
you
if
you
make
the
slides
left
to
the
right.
You
see
this
look
start
to
look
like
an
application,
but
we
are
all
using
only
web-based
approach,
and
this
is
why
I
use
this
type
of
solution
that
it
will
be
for
marvel
and
for
desktop
and
the
last
one
is
the
payment,
and
here
is
the
ability
to
create
different
type
of
payments.
A
I
have
one
for
mobile
and
another
for
desktop
itself.
At
any
moment,
we
can
make
the
filter,
because
the
the
filter
of
the
date
of
the
payments
that
we
did
it
and,
let's
I
just
went
for
the
solution
itself
and
here
we'll
be
able
to
see
what
was
the
action
that
we
needed
for
our
payment.
Here
we
can
make
our
registration,
we
can
expand
and
we
can
have
some
additional
informations
like
what
was
the
amount.
How
much
did
you
spend?
A
For
example,
I
I
went
to
the
I
have
to
go
to
the
taxi
driver,
and
I
will
I
have
to
spend
20
20
friends
any
points
that
we
have
it.
We
can
also
have
more
details.
The
puppet
can
also
give
stability
if
you
don't
want
to
use
the
expanded
collapse
at
any
moment.
We
can
also
write
it,
and
we
can
also
include
some
comments
itself
regarding
that
actions
itself,
and
if
you
see
it
carefully,
we
have
two
different
status:
we'll
have
one
status
that
is
pending
and
one
that
is
paid.
A
What
happened
with
the
moment
of
registration
this
this
doesn't
mean
that
the
money
already
went
out
from
your
account
of
a
bank
account.
So
we
can
define
also
at
any
moment
that
the
the
money
went
out
or
still
in
pending.
We
made
the
registration,
but
we
only
went
out
on
that
moment.
We
can
also
define,
I
don't
want
to
use
the
currency,
but
I
will
use
the
icon
and
also
the
same
for
the
callers.
At
any
moment
we
can
go
to
the
colors
and
we
say
I
don't
want
to
go
to
rice.
A
I
will
use
the
orange
and
in
a
very,
very
very
fast
because
I
can
even
expand
it
in
multiple
options.
I
just
wanted
to
give
a
small
overview
of
all
these
solutions
that
will
be
available
on
the
list.
Formatting
repository
with
a
lot
of
these
features,
I
still
need
to
include
a
lot
of
these
solutions,
but
I
just
wanted
to
have
a
very
brief
brief
overview
of
the
different
capabilities
and
to
assist
to
shift
to
you
to
think
before
you
start
to
do
some
development
try
to
see
what
the
formatting
can
fit
for
you.
A
You
will
not
have
very
complex
business
logics
because
that
will
come
on
the
sharepoint
lists.
What
will
happen
is
how
you
can
present
it
to
your
customer
in
a
way
that
can
easily
be
interacted
before
you
even
make
a
development.
All
this
formatting
can
help.
You
already
present
your
content
itself
and
david.
That
is
everything
for
myself
and
I
hope
I
was
on
time.