►
Description
In this 14-minute developer-focused demo, André Lage who was inspired by static graphics used in PowerPoint, shows ways to enliven data points stored in your SharePoint list. Samples covered include process arrows, lifecycle, content circular, content pyramid, matrix, content box, timelapse, and welcome message. Samples shown are presently or soon will be available in the PnP Samples repository. All samples render well in desktop and mobile views.
This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on March 30, 2023.
Demo Presenter
• André Lage (Datalynx AG) | @aaclage
Community Call Conversation
• aka.ms/Mar30-Demo2
Supporting materials
• Sample - Person circle Header | https://github.com/pnp/List-Formatting/tree/master/form-samples/person-circle-header
• Samples – SharePoint List Formatting Samples | https://github.com/pnp/List-Formatting
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home
A
B
I
work
for
a
Swiss
company
that
is
called
Data
links
and
I'm,
a
solution
manager
for
Microsoft
Technologies
itself.
So
the
key
here
that
I
want
to
talk
today
is
one
of
the
points
that
I'm
always
constantly
getting.
That
is
okay.
We
have
the
data
from
from
the
SharePoint
list,
how
we
can
put
it
on
the
SharePoint
page.
How
can
you
put
it
better
in
the
process?
B
Point
of
view
that
we
have
or
process
oriented
and
we
want
to
create
options
that
can
be
easily
to
play
even
create
some
type
of
interaction
itself,
so
I
try
to
create
this,
a
bunch
of
options
that
you
can
add
and
use
on
your
current
SharePoint
page
itself.
So
this
is
the
bunch
of
solutions
that
I
want
to
talk
today,
and
the
idea
here
is
to
use
the
normal
process.
When
you
create
the
list,
you
define
your
business
content
and
then
this
is
the
layer
where
the
list
list
formatting
goes.
That
is
with
the
content.
B
B
So
we
have
our
process
that
you
can
easily
identify
when
you
go
to
your
PowerPoint
and
you
want
to
create
a
some
smart
art
like
a
pyramid
or
circles
or
a
life
cycles,
a
life
cycle
process
and
I
try
to
to
transform
it
also
on
the
list
formatting
itself,
why
I
want
to
give
them
more
increase
in
the
engagement
between
the
users
and
the
business
content,
and
also
to
improve
the
design
and
interaction
into
between
the
two
users?
So
the
first
one
is
the
ability
to
to
create
the
process
arrows.
B
Basically,
this
is
nothing
more
than
a
bunch
of
geometrical
shapes
that
they
are
designed
using
the
HTML
and
also
include
some
svca
files
that
they
are
generated
on
the
Fly.
That's
why
you
can
see
here
create
the
file
explicit,
and
this
will
have
some
type
of
dynamic
representation,
as
you
can
see.
Also
on
the
colors,
there
is
one
color
that
is
stronger
and
then
it
is
another
one
that
is
not
that
strong
and
what
I
do
is
I
use
the
RCP
plus
OPC
that
creates
this
harmony
on
the
quality
itself,
plus
the
full
process.
B
Of
course,
all
these
controls
that
I
have
it.
They
are
also
fitted
to
work
on
the
on
the
mobile
view.
So
this
is
how
the
control
is
construct.
The
second
one
is
the
lifestyle
cycle
process
itself
a
lot
of
times.
We
already
see
this
when
we
are
doing
some
continuous
integration
continues
in
the
development,
but
we
also
want
to
transmit
it
and
to
deploy
to
the
and
to
show
also
to
the
main
solution
to
the
users
itself
that
how
we
can
use
it
and
how
we
can
produce
it.
B
I
think
the
key
here
is
using
the
HTML
and
the
CFCs
we
see
index.
We
can
always
overlay
the
content
that
the
the
content
will
display
the
right
in
the
right
way
itself.
Then
we
have
the
last
one
one
of
the
last
ones,
that
is
the
pyramid,
and
here
we
have
I,
made
two
options:
one
with
the
CSS
another
with
SVC
that
are
generated
on
the
Fly,
based
on
the
meta
information
that
you
have
on
the
SharePoint
list.
Well,
the
advantage
of
the
SVC.
B
This
will
always
fit
on
the
right
mobile
and
the
view
that
we
have
it
there
and
I'm
going
to
show.
We
have
the
Matrix.
Everybody
already
make
a
PCC
and
some
content,
and
they
wanted
to
present
and
to
show
this
information
to
the
user
where
he
can
interact
and
see
and
see.
What
is
the
process
itself
the
same
way
it
is
displayed
on
the
desktop.
Can
we
also
be
visualized
on
the
mobile
view,
and
then
we
have
another
option
that
we
have
it?
B
That
is
a
time
lapse
that
we
I
reordered
the
the
try
to
reorder
the
colors
and
also
create
some
type
of
application
that
creates
some
type
of
integration
on
the
time
lapse.
For
this
example,
we
have
one
that
I
use
a
SharePoint
list,
but
I
have
a
second
one,
that
I
use
the
the
person
field
and
I
will
be
able
to
choose
multiple
multiple
users
and
automatically
will
create
like
a
wave
of
accounts
that
will
display
and
will
be
easier
to
interact.
B
I
try
to
calculate
between
five
in
the
morning
until
mid
tag,
midday
I'm,
sorry,
I,
will
say
good
morning
good
afternoon,
good
evening
and
then
good
night,
depending
on
the
hours.
This,
for
these
options
is
already
on
the
list
formatting
and
you
can
also
use
it.
Of
course,
I
also
picked
the
image
of
the
user
that
is
selected
and
I'm
going
to
display.
So,
let's
go
toward
them
with
itself,
so
I'm
going
to
my
SharePoint
site
and
I
think
this
is
my
my
SharePoint
site
and
here
I
have
it
here.
B
It's
based
on
the
on
the
list.
Formatting
itself,
like
I,
told
it
on
my
last
point.
This
is
the
how
we
can
present.
We
arrive
to
the
site.
We
see
our
content
display
and
we
have
here
our
welcome
how
this
is
done.
If
we
go
to
the
content
to
the
welcome
you're
going
to
see,
there
is
a
validation
that
I'm
trying
to
validate
between
five
in
the
morning
until
12.
B
Okay,
this
will
be
good
morning,
of
course,
will
always
depend
if
you,
if
you
are
new
at
if
you
are
in
Japan
or
you
are
in
Europe,
the
time
will
be,
of
course,
different
and
good
calculation
will
be
based
on
the
date
format
that
we
get
it
on
that
moment.
Of
course,
I
picked
the
user
and
then
I
also
pick
using
the
functions
from
from
list.
Formatting
I
also
picked
the
user
that
is
accessing
on
this
moment
itself.
B
So,
returning
to
all
the
examples,
let's
go
to
the
to
the
big
ones,
the
ones
that
I
people
like
to
have
it.
So
we
have
here
the
full
process
itself,
and
you
see
there
was
some
interaction
itself.
The
first
thing
that
we
do
is
we
have
the
the
information
from
the
SharePoint
list
and
we
can
choose
some
content
and
colors
that
will
interact
itself,
and
this
is
the
the
rgba
with
apocacy.
B
B
Now
it's
too
much
so
what
I
have
done
is
create
different
shapes
and
I
included
the
different
points.
As
you
can
see,
the
text
was
moving
itself,
but
I
can
include
some
additional
interactions.
For
example,
if
I
include
the
following,
I
have
a
shooting
star
that
is
coming
from
there,
that
you
can
show
up
to
the
content
itself
or
if
we
want
to
have
a
little
more
complex,
we
can
also
and
unblock
it
and
also.
We
have,
for
example,
a
flying
horse
itself
where
this
information
is
stored.
So
basically
I
have
a
support
library.
B
That
is
my
SVC,
where
all
this
content
is
created
and
stored
itself.
As
you
can
see,
we
have
one
two
three
and
four:
what
happened
so
I
have
a
workflow.
So
when
I
create
a
new
entry,
you
generate
yes,
we
should
that
automatically
will
save
for
that
specific
position
and
then
he
will
display
directly
on
the
site.
So
I'll
go
here
and
he
will
pick
the
content
in
this
case
the
title
one,
the
title
2
and
title
free
and
he'll
create
and
generate
the
content
based
on
the
needs
that
we
have
it.
B
Let's
go
to
the
second
option
that
we
have
it
here.
That
is
the
growing
content
itself.
As
you
can
see
here,
we
are
using
also
the
the
the
form
that
we
can
grow
and
increase
the
process
here.
The
content
is
nothing
more
than
circles,
but
the
key
point
is
to
see
index.
The
index
will
overlay
the
content
we
want
to
display.
B
So,
for
example,
if
I
remove
them,
of
course,
by
year
key
order,
the
last
one
will
always
overtake
so
I
just
use
the
current
say
index
that
I
can
use
it
and
can
reorder
that
can
be
interacted
and,
of
course,
with
this
we
can
click
it
and
he
will
provide
the
additional
information
I'm
a
little
more
complex.
So
we
have
a
little
more
practice:
the
the
process
and
the
direction
to
have
a
normal,
open,
workflow
and
process
diagram.
B
That
is
a
business
relation
Associated
between
them,
but
we
can
also
associate
using
the
filters
if
I
choose.
Some
of
the
filters,
as
you
can
see,
is
moving
and
interacting
based
on
our
own
needs,
so
I'm
creating
blocks
of
four
different
items
and
he
will
create
different
interactions
of
the
content
itself.
So
when
I
go
there,
you'll
create
and
he'll
interacted
the
different
process
itself,
it's
a
little
more
complex
because
there
are
multiple
options
they
created
between
themselves,
but
the
order
like
I
showed
on
my
presentation.
B
The
different
orders,
plus
the
application,
will
give
this
visual
representation
of
the
content
that
we
have.
Then
we
have
the
content
of
the
pyramid.
When
we
see
it
here,
we
can
click
it,
and
we
have
some
interaction.
If
you
go
directly
to
the
content
of
this,
as
you
can
see,
this
is
a
look
like.
Oh,
this
is
not
a
list
formatting
what
is
happening
here.
So
what
is
happening
is
nothing
more
that
I'm
the
same
way.
B
I
did
it
for
the
the
professional
one,
I
create
a
dynamic
efficient
that
will
interact
and
will
create
the
Trap
size
based
on
my
business
needs
in
this
case.
What
is
the
order
of
my
pyramid,
and
this
will
he
shape
for
the
different
actions
and
the
same
when
I
need
to
display
the
content?
I
will
use
the
content
from
this
formatting.
What
is
the
benefit
of
using
this
option?
This
with
FBC
you?
B
You
can
automatically
fit
to
your
own,
all
your
own
mobile
phone,
but
if
we
use
it
only
the
cscf,
this
will
be
more
restricted.
So
if
you
try
to
reduce
it
or
this
will
not
automatically
fit,
and
so
they
there
is
this
challenge
between
HML
or
SVG,
and
the
FBC
sometimes
is
better
than
using
directly
to
to
Celsius.
B
It's
just
a
question:
how
we
make
the
association
make
the
right
content
and
how
we
can
use
if
we
interact
with
the
with
the
current
business,
as
you
can
see
here,
for
the
for
the
pyramid
only
use
HTML
without
the
SVC.
You
just
need
to
make
a
lot
of
calculation
with
a
block
of
four
and
he
will
create
pyramid
of
every
time
for
each
one
of
the
four.
B
We
will
return
to
the
our
content
itself
and
then,
as
you
can
see,
we
are
seeing
already
movement
and
content,
and
that
is
more
easy
and
nice
to
interact
with
the
user
itself.
Then
we
have
the
time
lapse.
What
happened
here
is
we
create
I,
create
a
sequence,
and
you
can
see
that
it's
a
union
of
the
content
that
we
are
accessing
here
and
the
same
option
that
I
use
it
for
vertical
I,
also
use
four
horizontal,
so
I'm
going
to
access
to
my
my
my
form
for
my
list.
B
As
you
can
see
here,
I
have
a
field
from
user
that
is
called
approvers
and
automatically.
They
are
displaying
the
user
and
the
image
itself.
If
I
remove
it
here,
automatically
rethink
it.
Imagine
if
you
have
10
users
and
you
want
to
have
a
better
presentation,
a
better
header
on
your
SharePoint
list.
This
operation
can
give
you
like
a
wave
of
of
how
you
can
use
your
customer
and
it's
more
easy
and
nice
to
interact
with
your
content
itself.
So
if
we
turn
into
the
content,
we
also
have
the
last
the
last
point.
B
That
is
the
informatics
that
is
for
Matrix
how
many
times
you
need
to
create
a
PCC
or
some
Matrix,
and
you
need
to
create
this
interaction
itself
using
the
the
content.
So
what
is
being
done?
I
should
create
orders
and
options
that,
based
on
the
four
items
and
I,
try
to
Define
lines
that
each
one
of
the
block
visually
each
one
of
the
block
will
have
the
his
own
representation.
B
If
I
go
to
the
format
View,
as
you
can
see,
basically
based
on
the
the
row
that
I
get
it
I
used
to
do
mathematical,
calculation
mode
and
based
on
the
four
items
that
I
get
it
he'll
organize
for
the
different
page
that
will
display
like
a
PCG,
for
example,
if
I
return
to
my
sample.
This
is
a
very
basic
concept
itself,
but
I
can
have
it
a
very
more
complex
one
and
voila.
B
This
is
one
option
how
you
can
have
the
pattern:
VCC
Matrix
with
business
logic
and
business
content
that
can
easily
be
understand
by
the
user
itself.
And,
of
course,
if
we
go
and
we
focus
this
content
as
a
model
view
you're
going
to
see
that
will
be
automatically
try
to
reorder
the
content
in
a
way
that
can
be
easily
fittable
for
the
for
the
mobile
view.
In
this
case,
there
was
a
small
action,
so
just
try
the
triangle
already
fit
for
the
mobile
view.
B
The
time
lapse,
the
The
Matrix
also
reshape
it,
but
will
be
easier
and
more
user
friendly
that
fit
also
the
different
layers
itself.
Of
course,
we
also
have
some
information
content
or,
if
you
want
to
have
it
a
little
more
interesting,
you
can
even
create
Balloons
with
the
content
of
how
this
will
interact.
As
you
can
see,
it's
a
lot
of
HTML
and
how
we
can
position
and
put
the
content
that
in
a
way
that
can
easily
interact
with
the
customer
itself
and
that's
what
I
want
to
show
all
these
options.
B
All
these
options,
some
I
need
to
add.
Some
already
are
in
the
list.
Formatting-
and
the
idea
here
is
I-
want
to
provide
these
different
samples
that
can
help
you
to
improve
and
interact
with
more
with
the
users
and
to
create
more
Dynamic
content
on
your
SharePoint
page
using
the
list
for
marketing
itself.
David.
That's
everything
from
my
side.
I
pass
to
you.
A
Okay,
thank
you,
Audrey,
that
that
is
a
lot
of
awesome.
Stuff
I
might
have
to
go
back
and
watch
that
a
little
slower,
because
it
is
so
much
good
stuff.
We're
gonna
have
to
have
you
back
and
show
you
just
some
in
depth
on
a
couple
of
those
too,
so
that
we
can
learn
a
little
bit
more
really
really
awesome
foreign.