►
Description
This community call demo is taken from the SharePoint General SIG community call recording on 5th of September 2019. In this video, RK Menon (Microsoft) introduces new tile view layout, which can be configured with view formatting JSON configurations.
Presenter - RK Menon (Microsoft) @rkmenons1
Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-5th-of-september-2019/
More details on the column formatting - https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
Open-source samples for column and view formatting - https://sharepoint.github.io/sp-dev-list-formatting/
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
So
we've
heard
you
feedback
and
we're
really
excited
to
announce
that
you
can
now
format
your
modern
lists
to
the
pureness
tiles.
Then,
when
I
walk
you
through
the
examples
today
and
how
we
do
it,
I'd
like
to
also
give
you
a
scenario
so
that
you
know
the
examples
become
a
little
little
bit
more
clear.
So,
let's
consider
that
we
are
a
company
that
sells
Microsoft
devices
such
as
a
surface
line
of
computers
and
accessories,
Xbox,
etcetera,
and
essentially
we
maintain
a
master
inventory
of
our
live
products
in
a
SharePoint
list.
A
Now,
with
the
list,
we
have
two
main
kinds
of
users
or
consumers.
We've
got
a
staff
or
field
workers
who
identify
products
by
name
and
they
have
generally
interested
in
product
details
such
as
the
price,
the
product
name,
the
product
features
the
amount
of
stock
we
have
and
so
forth.
We
also
have
a
bunch
of
back
in
the
employees
who
you
know,
identify
products
by
ID
and
they're,
really
interested
in
more
details
such
as
the
vendor,
the
store,
location,
etc.
A
So
then,
typically,
which
you
wouldn't
show
you
the
green
list
that
we
have
so
the
list
that
you
see
in
front
of
you-
that
is
the
master,
eventually
lists
that
we
maintaining.
As
you
can
see,
it
is
extremely
data,
heavy
and
isn't
really
useful
for
our
field.
Employees
lot
of
text
everywhere
and
the
images
are
kind
of
too
small
or
too
in
the
current
size.
Let
me
just
take
a
pause
and
ask:
is
the
text
readable
for
you.
A
A
So
in
this
view
you
can
see
that
it
is
much
easier
for
front-end
employees
to
read
it
because
the
image
is
a
bigger,
it
becomes
more
valuable
and
they
only
care
about
certain
columns.
So
we
can
choose
what
columns
are
you
want
to
display
in
this
format?
However,
there
are
inherent
problems
with
this
bear
in
mind.
Right
now,
we
are
just
formatting
each
list
item
or
a
row
to
look
as
a
look
like
a
card
now.
A
The
problems
here
is
number
one:
there's
a
lot
of
real
estate,
that's
being
wasted
and
I
have
to
scroll
left
right
up
down
to
see
you
know
complete
information
or
look
at
all
my
data
at
a
glance.
So
to
solve
this,
we
come
up
with
a
new
layout
which
is
translator.
Let
me
quickly
swap
over
to
the
original
list,
and
even
here
right
we
got
us
through
left
right
up
down
and
it
becomes
pretty
cumbersome
if
you
want
to
get
a
bird's-eye
view
of
your
entire
mansion.
A
Now,
in
the
view
drop-down,
you
see,
there
are
three
different
layouts
that
we
have
the
list
and
compact
list
that
you
already
have
and
you
introduce
the
new
layered
:
tiles
as
I
click.
This
you
will
see.
This
is
the
new
layer
that
we've
defined.
Where
all
your
content,
you
can
see
it.
In
one
glance
you
have
the
picture.
You
have
basic
all
fields
that
that
are
important
to
you
and
you
can
scroll
up
and
down
with
fewer
Scrolls.
You
can
see
your
entire
data
and
the
best
part
is
this.
A
Okay,
now
let
me
go
into
another
benefit
that
we
have
with
this
layout.
Is
it's
not
a
formatting
overview?
Rather,
it
is
multiple
different
layouts,
so,
as
a
user,
I
can
quickly
switch
between
either
the
tiles
view
or
the
list
view
seamlessly
without
having
to
do
a
page
load
which
means
I
can
see
my
data
in
different
different
formats
as
and
when
I
require.
A
Right
so
for
those
of
you
who
played
around
with
you
formatting
in
the
past,
these
properties
should
be
pretty
familiar
to
you.
You've
got
your
basic
schema
definition.
You
choose
additional
row
class
if
you
want
to,
or
you
go
ahead
with
row
formatter
and
you
specify
your
JSON
inside
the
row
for
matter
which
is
used
to
format
the
view
in
the
earlier
example
that
I
showed
you
each
row
is
a
card.
I
have
formatted
it
using
row
formatter
now.
The
change
that
we've
made
is
we've
added.
A
A
new
property
called
tile
crops
within
which
you
can
define
the
width
and
the
height
of
the
card,
and
you
can
define
your
own
custom
formatter
within
the
format.
The
property
of
transforms.
The
key
thing
to
keep
in
mind
here
is
that
anything
you
do
with
in
time.
Crops
only
affects
your
tile
layer.
It
does
not
do
it.
Excuse
me
it
does
not
affect
your
list
layout
and
vice
versa.
Anything
you
define
on
your
list
layout
will
not
affect
your
tile
crops
either.
A
For
instance,
you
can
see
I
have
hide
selection,
define
both
at
the
parent
level
as
well
as
within
the
tile
crops.
So
height
selection
will
be
false
for
your
list
layout,
but
it
will
be
true
for
your
tile
layout
now.
Switching
back,
let
me
just
quickly
copy
the
snippet
of
code.
Now,
if
I
go
back
to
my
original
list,
let's
say
I
go
to
my
list,
discards
view.
A
So
if
I
click
on
towers,
I'm
not
gonna,
get
any
to
show
you
how
this
is
useful.
Let
me
go
ahead
and
copy
over
the
JSON,
so
this
is
the
JSON
I
used
for
the
previous
tile
layer.
It's
pretty
big
JSON,
but
let
me
just
copy
just
the
tile
properties
and
put
it
back
here
at
this
point.
What
I've
done
essentially
is
I've
taken
the
JSON
I
created
for
my
time
layout
and
added
it
to
the
existing
row
fernanda
under
the
row.
Format
under
advanced
properties.
A
A
Formatter
will
only
affect
the
list
list
layout,
which
basically
means
you
can
format
different
to
different
types
of
layouts
within
the
same
view,
without
having
to
save
it
as
a
different
view,
you
can
have
one
custom,
formatted
list
layout
and
a
custom
formatted
tile
layout
running
in
parallel
with
this
I
think
I
can
come
to
the
end
of
my
demo.
Any
questions
that
you'd
like
to
ask.
B
Yes,
excellent.
Thank
you
are
okay,
I'll.
Let
me
ask
the
questions
which
was
on
the
on
the
chat
window,
so,
first
of
all,
awesome
demo.
Thank
you.
Everybody's
super
excited
slick
is
the
latest
comment
from
David's
on
their
opponent
used
to
say
by
the
way,
Eric
answering
and
and
collecting
the
data
on
the
on
the
chat
window
as
well.
Now
there
was
a
question
related
on
supporting
and
managed
metadata.
Is
that
supported
with
the
tile
of
use?
Do
you
know.
C
B
A
Second
question:
there's
one
more
thing
that
forgot
to
mention:
when
I
was
talking
for
the
new
JSON
anything
you
define
ins
inside
the
format
apart
within
tile
props,
it
will
follow
all
the
rules,
as
as
the
format
is
for
custom
formatting
on
views
and
columns
follows
it
follows
the
same
set
of
rules,
which
means
you
could
effectively
pick
up
your
for
matter
from
your
row,
formatter
plug
it
into
your
formatted
under
tile,
props
and
voila.
It
works
straight
out
of
the
box.
Alright,
let's
go
on
to
the
next
question.
Excellent.
B
C
B
B
Sense
make
sense
awesome.
Then
there
was
they.
Did
this
really
good
question
actually
from
Custer
at
Hilty?
Can
it
be
linked
directly
to
the
specific
view,
and
not
precisely
on
the
tile
of
your
discussion
but
I
say
in
the
modern
list?
If
we
want
to
link
people
and
and
make
sure
that
they
are
arriving
on
the
right
experience
and
that's
a
good
question
too
and
to
be
actually
supported
and
our
way.
A
B
A
Happy
to
say
that
this
feature
is
a
hundred
percent
in
production
at
the
moment,
and
we've
actually
updated
the
developer
documentation
with
information
on
how
you
can
use
style
crops.
In
fact,
right
now
you
can
go
and
add
this
little
blurb
of
text.
You
know
JSON
in
any
modern
list.
Your
custom
list
and
the
tile
tile
layout
will
show
up
in
your
drop-down
Oh.
B
Awesome
and
like
like
said
like
or
Kay
said,
and
the
docs
are
up
to
dates,
so
you
can
actually
have
a
look
on
that.
That
blog
is
included
in
the
docs
as
well
and
I'm.
Pretty
sure
that
the
community
or
community
can
then
contribute
samples
and
more
samples
on
our
Colin
formatting
sample
gallery,
and
then
other
ones
can
benefit
out
of
it
as
well.
I'm,
pretty
sure
that
Chris
will
get
a
sample
there
within
a
matter
of
minutes.
Is
it
already
out
there
is
it?
B
Is
it
already
out
there
Chris,
no
just
cute
and
there's
David
is,
is
pacing
in
the
link
of
the
docs
as
well.
That's
pretty
much
the
main
questions.
Oh
there
was
a
question
ken.
Is
there
a
way
to
actually
hide
the
title
of
this
of
the
title
of
the
list
and
and
I
know
for
a
fact
that
that's
not
right
now
possible,
but
that's
an
interesting
question
related
on.
If
we
are
in
a
list
experienced
person
would
like
to
get
would
like
to
get
rid
of
the
list
title
on
the
on
the
view
as
well.
B
B
That's
a
great
great
confirmation
as
well
excellent
I.
Think
that's
it
for
now.
Yes,
everybody
seems
to
be
happy,
at
least
in
that
set
of
questions.
Thank
you,
everybody
for
greater
of
questions.
Thank
you,
RK
for
a
great
demo
and
a
great
feature.
This
is
really
good,
although
it's
not
just
RK
who
implemented
feature,
but
it's
it's
a
really
great
feature
to
get
available
and
and
with
in
quotes
no
code.
You
can
actually
modify
their
experience
because
some
people
consider
to
chasten
as
a
code
as
well.
Okay,
it's
all
debatable.