►
Description
This community call demo is taken from the SharePoint General SIG community call recording on 13th of June 2019. In this video, Chris Kent (DMI) demonstrates how to use @thumbnail definitions in your column and view formatting json instructions.
Presenter - Chris Kent (DMI) - @thechriskent
Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-dev-community-pnp-general-sp-dev-sig-recording-13th-of-june-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://github.com/SharePoint/sp-dev-list-formatting
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
All
right,
so
that's
me
I'm
Christian.
Let's
do
it
Oh
classic
warrior
horses
sight
all
right,
gloria
verses
to
get
all
sorts
of
cool
things
going
on,
but
one
of
the
things
they
haven't
quite
figured
out
lately
they've
got
document
library.
How
do
they
not
have
to
click
on
all
the
things
to
see
the
inside
of
the
things
yeah
some
nails
so
we've
got
these
documents
here
may
want
to
see
a
little
preview
of
those
two.
Luckily
they
provide
something
just
for
that,
so
we're
gonna
have
a
column
here,
go
to
our
trick.
A
Although
it
is
this,
the
calling
we're
gonna
go
to
more.
Do
that
a
second
here,
my
swiss
connection
there
it
is,
and
for
this
one
I'm
going
to
call
this
preview,
we're
gonna
call
this
a
calculated
column
because
again
we
don't
want
this
to
show
up
in
our
do
it
edit
forms.
We
just
want
this
to
be
a
format.
Hopefully
column,
we'd,
say
little
quotation.
Mark
the
patient
mark
there.
Okay!
A
A
Once
they
store
fractions,
take
out
thumbnail,
there's
a
magic
thing,
I'm
going
to
say
dot
small,
then
the
preview
that
I
here
we
go.
We
start
to
see
these
little
images
show
up
for
different
types
of
file
types
that
are
supported
here.
So
that's
pretty
sweet.
You
know.
So,
as
you
might
guess,
small
computer
place
with
things
like
medium,
maybe
that
guy
there
we
go
a
little
bigger,
don't
even
go
larger
if
you
can
believe
it
large
there.
We
go
so
we'd
start
to
get
these
nice
rich
preview
images.
A
There's
we
entered
in
companies
at
like
four
hundred
and
some-odd
370,
plus
file
types
and
supported
across
Microsoft
365
in
Windows,
10,
and
all
that.
So
all
those
are
supported
here.
So
you
can
even
say
your
own
custom
kind
of
bounding
boxes.
So
if
I
want
to
say
you
know,
200
now
preview
that
preview,
but
my
px,
pretty
similar
I,
just
put
these
in
the
air.
Put
my
own
sizes
in
your
tuner
by
600.
A
Just
a
bounding
box
see
that
shelf
is
get
huge
I'm
going
to
take
away
those
for
now
we're
going
to
paste
it
a
couple
of
styles.
So
I'm,
just
in
the
ground,
grab
a
format
from
over
here,
but
we
happen
have
a
sample
for
you
on
our
SP
dev
list,
formatting
repo
and
grab
that
it's
going
copy
and
paste
this
guy.
A
The
only
thing
this
is
doing
a
little
different
is
that's
being
formatted,
excellent.
Alright,
it's
using
this
slightly
higher
style,
but
sitting
a
max
height
here.
It
allows
to
be
a
higher
quality
image,
but
not
overflow.
Our
boundaries.
Here,
that's
really
cool
and
one
of
the
things
you
need
to
know,
however,
is
that
with
thumbnails
it's
doing
some
magic
stuff,
you'll
notice,
there's
nothing
here
for
folders,
so
this
happens
to
be
a
magic
string
that
would
apply
to
an
image.
A
A
A
Blown
that
tooth
up
here,
it's
not
like
it'll
it
mac
this
down,
filter
in
and
then
we'll
just
grab
all
this.
It's
all
all
that
great!
So
now,
when
we
do
that
now
we
get
our
nice
tooltip.
It
doesn't
break
our
cool
image,
formatting
thumbnail,
how
we
do
have
still
nation
up
here
and
that's
not
great,
so
I'll
show
you
one
more
quick
tip
here
and
that's
if
I
said
to
set
this
down
to
content
type.
A
Now
you'll
notice
here
I
get
nothing.
I
got
no
content
type.
So
if
I
save
this
and
I
go
to
my
library,
settings,
good,
advanced
settings
and
I
must
say:
allow
manage
of
content
types
I'm
not
going
to
swap
it
and
hang
out.
I
just
want
to
say
yes
still,
allowing
that
okay
go
back
to
my
documents,
library
and
as
these
loads
now
you're
searching
I,
see
folder.
You
know,
documents
and
I
actually
have
access
to
that
content
type.
So
here
to
column,
settings
and
format.
A
A
Do
that
now
we
get
our
nice
tooltip
and
we're
not
applying
it
up
there
to
the
folders,
so
that
works
really
well.
You'll,
see
that
even
as
you
navigate
through
this
stuff
right,
you
come
down
here.
You
can
see
all
the
different
file
types
right,
so
we've
got
an
AutoCAD
image
showing
up
here
everything
just
kind
of
works
with
custom,
so
use
these
thumbnails.
You
can
use
these
both
in
View,
formatting
and
column
formatting
I
come
over
here
we
can
see
just
those
different
bounding
boxes.
Your
aspect
ratio
is
gonna,
be
maintained.
A
You
use
the
style,
the
force
the
size
like
I
did
there's
a
sharepoint
online,
only
human
libraries
only
so
this
is
gonna
work
for
your
like
list,
item
attachments
or
or
anything
along
those
lines,
and
it's
Auto
hidden
when
unavailable
so
check.
All
that
out
the
go
here.
If
you
want
to
see
the
full
documentation,
if
you
want
to
check
out
that
sample,
you
go
ahead
and
paste
that
so
that's
in
our
column,
samples
file,
thumbnail
and
that's
it.
For
me,.