►
Description
In this 15-minute developer-focused demo, André Lage delivers minimalist design style - 3D look and feel for buttons and graphics applied to 7 newly created JSON neomorphic list formatting controls – Buttons, Options, Rate, Image, Doughnut, Bars, Calendar. The sample controls can be implemented on list columns and views. Create a neomorphic list and distribute it using PowerShell for consistent usage and management across organization. This work inspired by Kristine Kolodziejski. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on September 15, 2022.
Demo Presenter
• André Lage (Datalynx AG) | @aaclage
Supporting materials
• Samples - List Formatting Samples | aka.ms/list-formatting
• Video - Taking your Power Apps mobile navigation UI to the next level! – Kristine Kolodziejski (Computacenter) | @kristinekk94 | https://youtu.be/BjhsmcaV2TM
• Videos - Kristine Kolodziejski (channel) | https://www.youtube.com/c/KristineKolodziejski/videos
• Sample - Doughnut Chart | https://github.com/pnp/List-Formatting/tree/master/column-samples/number-doughnut-chart
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
B
I
work
for
a
Swiss
company
that
is
called
at
the
links
and
the
today's
topic
is
about
the
list
formatting
and
specifically
for
one
subtopic.
That
is
the
new
form
of
fabric
design,
as
you
may
already
hear,
there
is
already
this
topic
was
mostly
inspired
by
Christina
colortgie,
where
she
already
creates
some
controls
for
the
power
apps
platform.
Power,
Platform
and
I
wanted
to
I
also
enjoyed
the
way
that
was
done
and
design
itself.
B
So
here,
I
really
recommend
to
give
a
look
on
the
work
made
by
Christine
regarding
this
topic
itself,
so
I
tried
to
adapt.
She
made
her
own
controls
and
I
try
to
adapt
the
ones
for
the
list
formatting
how
we
can
use
it.
The
current
lists
and
the
formatting
itself
is
already
very
expensible
on
the
on
the
cscs
and
the
HTML
and
I
try
to
create
these
bunch
of
controls
that
you
can
easily
use
on
your
on
your
list
formatting.
So
what
was
then
so?
B
There
was
some
analysis
of
the
concepts
and
the
goals
to
achieve
it
when,
when
I
started,
to
create
this
new
numeric
designs,
I
also
would
make
some
investigation
and
I
try
to
see
it
from
the
HTML
and
the
CSL
CSS
skills.
Where
I
can?
How
can
I
make
the
simulation?
What
is
the
concept?
How
can
we
create
these
3D
look
and
Fields
And,
also
the
usage
of
some
CCS
styles,
with
the
boss
shadow,
where
we
can
create
these
different
controls.
B
B
But
if,
since
this
is
also
a
technical,
it's
not
only
to
draw
the
controls
but
how
we
can
use
it,
and
here
we
can
use
the
Powershell
for
our
own
help,
there's
already
some
some
interesting
examples
on
the
PNP
Powershell
team,
where
we
can
import
the
the
format
into
the
columns.
So
they
are
the
content,
type
have
and
the
other
list
template
approach,
so
the
content
type.
B
Basically,
we
create
a
group
of
these
fields
with
this
look
and
field
and
we
can
propagate
photo
each
sites
and
the
second
one
is
we
pick
it
a
list
when
we
use
it
to
to
act,
to
activate
and
to
implement
in
the
site
that
we
have
it.
I
will
create
a
very
simple
example
itself.
So
let's
go
to
the
samples
so
for
each
one
of
these
buttons.
What
I
have
done?
I
didn't
create
really
a
button
itself.
I
used
a
fill
tap,
yes
or
no.
B
That
will
create
the
the
feeling
that
we
are
clicking
on
the
button
itself
and
if
the
button
is
yes,
we'll
keep
some
deepness
on
the
on
the
button
and
I
also
try
to
simulate
the
buttons
that
you
can
already
see
when
you
go
to
the
refrigerator
or
when
you
turn
on
the
light.
This
is
the
type
of
simulation
that
you
can
easily
identify
under
your
daily
work
itself,
not
only
on
the
internet
but
under
your
real
life,
and
it
is
what
I
try
to
simulate
itself
and
also
the
ability
to
have
options.
B
So
when
you
have
a
failed
type
of
type
options,
we
can
have
different
options
and
you
can
click
on
the
button.
As
you
can
see,
there
is
like
some
type
of
deepness
that
gives
the
feeling
what
button
did
you
choose?
What
option
did
you
choose
and
the
colors
will
react,
pay
funded
and
then
I
have
also
the
ability
to
create
the
the
rate
and
to
keep
some
type
of
shadow
that
we
can
see
the
rate
there
are
some
deepness
between
the
the
controls
and
how
they
can
choose
the
different
type
of
rates.
B
Of
course,
we
can
say
one
to
five,
but
we
can
increase,
and
this
decrease
the
numbers
of
the
options
and
also
the
same
then
for
the
for
the
image.
For
example,
when
I
pick
a
picture
from
my
vacations,
I
I
I
put
it
in
a
way
that
looks
like
a
picture
that
is
in
the
wall
and
when
you
click
it,
as
you
can
see,
there
are
some
opaque
C,
where
you
have
a
little
description
and
also
the
reutilization
of
the
pictures.
The
same
can
be
done
when
you
are
using
your
mobile,
for
example.
B
What
is
the
percentage
of
the
the
content
that
you
already
did?
How
many
kilometers
that
you
have
it?
What
is
your
goals
and
it
can
be
also
represented
in
a
more
deepness
and
more
more
that's
a
new
morphodic
approach
with
the
Shadows
that
represent
some
type
of
thickness
and
the
3D
look
and
feel
itself.
The
same
is
happening
with
the
parts
where
we
I
create
horizontal,
and
the
vertical
way
will
give
us
the
percentage
of
the
bar
with
this.
B
In
that
moment,
as
you
can
see
between
the
bar,
you
can
see
that
looks
that
it's
going
deeper
on
the
option
of
the
bar.
That
is
appearing
itself,
and
then
this
comes
the
last
person
that
is
a
little
more
complicated.
Basically,
I
create
a
column
with
the
with
the
list
formatting
that
simulates
the
calendar.
So
this
calendar,
you
will
be
able
to
choose
options
and
you
can
change
the
different
months.
How
this
can
how
this
was
done
too.
This
is
a
mathematical
formula
to
calculate
the
day
of
the
week
what
that
means.
B
And
then
you
have
a
full
calendar
using
this
mathematical
formula,
no
complications,
so
just
let's
use
real
mathematical
that
we
learned
at
school
and
just
implement
it
using
some
painting
itself.
So
let's
go
to
the
demo
itself,
so
I
should
go
to
my
example:
I
go
to
the
to
the
site
where
I
already
have
these
these
options
already
implemented.
B
As
you
can
see,
and
like
I
said
it,
you
already
have
this
option
and
you
can
change
the
month
and
this
will
automatically
reflect
the
day
and
that
all
of
the
math
that
we
are
talking
about
at
any
moment
we
can
return
to
the
home
day
and
we
can
switch
the
same
for
the
rating
itself
and
the
same
way
we
do
for
the
when
we
choose
the
the
options
or
the
buttons
how
this
will
represent
on
our
site.
So
if
you
have
it
here,
you
see
there
is
all
the
options
that
we
have
it
in.
B
This
color
will
be
also
representative.
The
same
will
happen
on
the
option.
As
you
open,
you
can
choose,
you
can
see,
there
are
already
some
options.
Already
pre-defined
and
I
can
choose,
an
automatic
will
be
reflected
itself,
so
there
is
already
a
very
interactional
approach
of
the
different
options
itself
and
you
can
click
on
the
buttons,
and
this
will
give
some
feeling
of
that
is
click
it.
That
is
disabled,
and
this
is
enable
and
now
any
moment
you
can
also
create,
for
example,
a
card.
B
Imagine
you
want
to
have
a
card
I
want
to
five
of
Hertz
and
I.
Don't
want
I
want
to
change
and
I
will
put
diamonds,
and
this
is
what
material
generator
card
with
this,
with
the
feeling
on
the
3D
that
you
can
have
it
this
approach.
So
let's
go
with
a
simple,
more
interesting
point,
so
how
can
I
use
it
for
this?
B
What
I
have
done
is
to
create
an
area
where
I'm
going
to
draw
using
my
my
columns
and
these
formatting
that
I
already
have
it
so
for
this
I
will
just
going
to
expand
and
I'm
going
to
use
the
column
formatted
reference
this
option.
What
it's
going
to
do
is,
on
my
view,
I'm
going
to
select
the
columns
they
already
pre-formatted.
So,
let's
start
to
create
based
on
the
area
that
I
have
it
here.
The
different
fields
so
I
will
create.
B
I
will
add
image
and
slowly
we're
going
to
start
to
to
draw
or
cut
so
I'm
going
to
create,
and
this
will
create.
Also
this
option
and
I
will
include
additional
one,
also
the
rate
blank
option
where
we
have
it
and
let's
see
how
we'll
appear
with
your
with
our
calendar,
vertical
bar
and
horizontal
bar.
So
let's
Implement
and
see
how
we're
going
to
draw.
We
have
a
total
new
card
that
we
can
have
our
representation.
B
Of
course,
I
also
create
during
for
this
example
and
random
approach,
and
what
he
is
going
to
do
is
just
to
see
how
this
content
will
represent
and
we
have
it
in
a
very
Dynamic
way.
So
we'll,
basically,
we
would
choose
a
random
date.
He
will
choose
also
a
random
bar
option
and
also
a
rate,
so
we're
going
to
see
the
introduction
itself
how
this
will
interact
with
our
SharePoint
sites.
So,
for
example,
if
I
go
to
my
sites,
I
go
to
a
site
that
already
use
it
for
all.
B
B
B
What
we
are
seeing
is
all
customization
based
on
list
formatting
itself,
and
you
can
see
how
it
can
interact
itself
on
the
contact
itself,
and
this
is
how
we
can
intro
we
can
use,
we
can
design
we
can
draw-
and
this
is
the
list
formatting-
that
I'm
going
to
provide
onto
our
list
repository
where
we
can
make
the
implementation.
So
this
is
okay,
but
now
how
can
we
use
it
and
we
how
we
can
manage
in
a
more
I.T
and
the
governance
point
of
view?
B
So
what
are
you
going
to
do
is
to
create
the
content
type.
So,
basically,
it's
an
area
where
they're
going
to
compile
I
can
compile
all
these
groups
all
these
fields
with
this
specific
formatting
and
for
that
I
have
a
specific
script
and
what
it's
going
to
do
is
going
to
connect
to
the
our
content
type
Hub.
It's
going
to
access
to
our
list,
formatting
website,
so
just
going
to
access
to
our
list,
formatting
and
then
I'm
going
to
access
to
our
Json
and
then
there's
an
option
that
is
called
raw.
B
We
can
copy
URL
and
in
this
case,
I'm
going
to
use
the
calendar.
The
calendar
formatting
itself
for
that
I'm
going
to
create
a
new
field
that
will
be
called
calendar
demo
and
I'm
going
to
create
this
group
of
fields
for
this
I
will
call
it
custom
formatting
new
new
morphic
list.
I
will
create
the
content
type
and
then
I'm
going
to
publish
what
on
this,
the
content
I
have.
What
it's
going
to
do
is
going
this.
B
This
specific
help
with
going
to
propagate
the
fields
that
are
created
to
each
one
of
the
SharePoint
sites,
where
users
can
edit
in
the
future
itself
and
I'm,
going
to
publish
itself
this
content.
So
just
pay
straightforce
I'm
going
to
activate
and
I
hope.
Everything
goes
well
I'm
going
doing
in
the
publishing
I'm
going
to
create
a
sample
on
the
PNP
Powershell.
With
all
these
samples,
where
you
can
be
tested
all
these
options
itself,
so
I'm
going
to
the
administration
area
and
what
see
what?
Let's
give
a
look,
what
was
created
itself?
B
Oh,
we
have
a
new
Option,
a
new
content
type.
So,
let's
see
what
is
there?
We
have
the
title
because
I
associate
to
the
item
and
I
have
here
the
calendar
demo.
What
happened
on
this
moment?
If
you
go
directly
there,
you
see
the
the
list.
Formatting
is
already
created
here.
What
is
great
so
what
it
will
be?
The
my
next
approach
so
since
I
already
create
a
content.
B
B
B
Okay,
we
have
it
there
and
then,
as
is
going
to
create
my
new
control,
so
I
will
say
this
is
example.
This
is
a
sample.
I
will
create
it
and
then
I'm
just
going
to
show.
So
in
this
case
and
I
have
it
here,
the
calendar
of
course
I
did
it,
for
one
field
can
be
done
for
multiple
fields
that
you
can
manage,
and
governance
in
the
content
type
Hub,
so
in
an
I.T
approach
itself.
So
this
is
a
great.
This
is
one
option
that
we
have
second
option
that
we
can
also
have.
B
It
is
the
ability
that
you
already
hear
from
other
examples,
the
creation
of
a
template.
What
what
I
have
done
so
I
create
the
the
site.
I
pick
the
list
with
all
the
fields
that
I
already
have
it
and
I'm
going
to
create
a
name
that
is
easily
identifiable
to
be
accessible
on.
Our
organization
list
template
so
I'm.
B
Of
course,
if
you
go
directly
to
the
format,
we
have
always
the
same,
look
and
feel
and
the
content
how
we
can
do
on
this
content
itself
and,
of
course,
this
will
also
going
to
be
representative
on
every
SharePoint
site
and
post
that
I
created
and
that
will
be
available
on
the
list.
Repetitor
right
now
are
all
in
public
request,
and
soon
this
will
be
available.
You
you'll
be
able
to
also
to
download
these
options
and
to
make
the
test
here.