►
Description
This PnP community demo is taken from the bi-weekly SharePoint Developer Community - General Development Special Interest Group (SIG) call recorded on November 28, 2019.
In this 8-minute video, Chris Kent show how to configure the List view web part and Embed web part to work together like an application that allows the user to select and display documents, photos, videos, etc., in the right pane of a web page.
Presenter: Chris Kent (DMI) | @theChrisKent
Open-source community samples around column and view formatting - https://sharepoint.github.io/sp-dev-list-formatting/
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/sppnp.
A
Everybody
I'm
Christian,
so
I'm
at
a
Knoxville,
Tennessee
and
all
that
stuff.
So
let's
say
look
here
so
lesser
than
something
about
warrior:
horses:
I,
don't
know
what
you're
talking
about,
because
it's
Thanksgiving
and
there's
only
one
animal.
You
could
talk
about
on
Thanksgiving,
so,
let's
all
head
over
to
our
classic
warrior
turkey
site
that
we
all
have
check
that
out
as
it
is
Thanksgiving
else.
What
did
I
mention
I'm,
incredibly
thankful
for
this
demo,
because
there's
gotten
me
out
of
lunch
with
my
in-laws
today.
So
please.
A
Alright,
so
let's
take
a
look,
so
here
we
are
on
our
classic
warrior.
Turkey
site
and
they've
got
this
nice
gobble
list
over
here.
Let's
check
that
out
we
head
over
to
the
list.
You
can
see.
We've
got
a
little
bit
there,
we
go.
We've
got
our
entries
here.
We've
got
some
kind
of
code
here
and
what
that
is
is
actually
a
YouTube
embed
code.
So
we're
gonna
go
over
here
and
we
could
take
an
example
of
that.
So
say
we
wanted
to
add
another
sweet
turkey,
video
I've
got
this
turkey
chase
video.
A
Let's
grab
that
and
let's
not
listen
to
it
and
this
little
code
up
here
which
so
you
can
see
that
a
little
better
right
here
in
the
URL.
You
see,
I'm
gonna,
grab
that
and
I'm
gonna
paste
that
into
my
list
and
that's
how
you
get
kind
of
a
you.
You
know
unique
identifier
for
a
video,
so
let's
just
sit,
knew
and
of
course,
this
one
called
gobble
values
there,
I'm
gonna
save
that
guy.
So
what
are
we
doing
with
this
right
like?
Why
is
this
helpful?
A
Well,
we
can
do
this
cool
thing
where,
if
we
go
back
to
the
web
page
here,
we're
gonna
have
a
new
page
and
let's
do
a
blank
page.
We're
gonna
create
kind
of
a
miniature
applications.
We're
going
to
call
this
gobble
gobble
sounds
great
and
it
will
change
that
image.
Let's
see,
oh
look
at
all
these
lovely
suggestions.
What
we're
gonna
upload,
one
all
right,
we'll
grab
some
turkey
heads
that
sounds
good.
A
Alright,
we'll
add
that
image
there
and
move
this
around
idea
is
I'm
quickly,
just
kind
of
making
a
page
right
very
exciting,
but
down
here,
I'm
going
to
take
this
section
and
I
want
to
make
it
a
say:
a
one-third
left
that
let's
do
back
out
a
little
because
that's
drum
nuts,
okay!
So
now
what
I
can
do
here
instead
of
adding
text
right?
Let's
delete
that
out
of
here.
I'm
gonna.
Add
a
list
view
web
part.
Sorry
grab
my
list
see.
Well,
it's
got
the
one
list,
gobbles
I'm,
gonna
grab
that
you
see
there.
A
You
go
I've
got
all
my
exciting
stuff
here
and
that's
cool
and
that's
great.
That
I
could
show
that.
But
what
if
I
come
over
here
and
I?
Add
this
embed
and
so
I
had
the
embed
web
part,
and
some
of
you
guys
might
be
aware
you
can
embed
things.
Let's
say
like
this:
turkey
chase
video,
you
know
it's
cool
I
hit
the
share
button.
Click
embed
all
I
have
to
do
is
copy
this
right.
A
So
now,
if
I
come
back
over
here
to
my
new
page,
I
paste
that
in
here
all
right,
I
get
this,
and
if
you
the
second,
it's
gonna
show
my
turkey
chase
video
right
there
and
that's
that's
okay!
If
you
want
to
create
a
page
per
video,
that's
fine,
but
once
you've
got
a
lot
of
turkey
videos,
you
want
to
watch
right.
Well,
here's
what
you
can
do!
You
can
do
this
cool
connection
piece
here
this
little,
these
dots
and
connect
to
source
you
can
see
the
source
is
gobble.
A
That's
my
my
web
part
over
here.
I,
choose
that
and
now
I
come
in
here
and
the
key
part
is
this:
is
that
code
we
talked
about
right,
so
I'm
going
to
delete
that
and
so
just
the
same
kind
of
format
as
in
list
formatting
I'm
gonna
type
in
God,
when
you
see
actually
got
completion
there,
but
there's
my
what
I
want
to
do
is
I
want
to
pick
that.
A
That's
now
what
that
does
all
right,
so
you
see
I've
got
just
to
make
sure
everyone
can
see
that
what
I
typed
was
square
bracket
dollar
sign
and
then
the
internal
name
of
my
column,
which
happened
to
be
gobble
all
right
and
then
I
close
off
with
a
square
bracket
and
what
its
gonna
do
is
gonna
automatically
replace
that
with
whatever
value
is
coming
from
that
source.
So
in
this
case,
that's
this
list
over
here.
A
I'm
gonna,
close
this
guy
now
as
I'm
kind
of
using
this
right
I
select
that
oh
there's
that
video
there's
that
video
there's
turkey
chase
now
I've
got
like.
Let's
see,
we've
got
all
these
extra
things,
though
they're
gonna
fuse
users
and
I
just
want
this
navigation
piece
right.
So
how
can
I
make
that
a
little
better,
like
that's,
really
cool
button,
publish
that
guy?
What
if
I
come
over
here.
A
All
right,
I,
don't
weird
blip
there.
Okay,
so
come
back
to
my
list
right.
What?
If
I
wanted
to
apply
a
format
to
this?
Let's
go
to
all
items:
I'm
gonna
apply
a
view
format,
because
the
view
format
will
not
justify
single
columns
will
affect
the
whole
thing
here,
which
is
what
I
want
so
I'm
gonna
hit
format
current
view
and
I'm
gonna
copy
one
of
our
samples
over
here
generic
video
button.
A
They
grab
that
I'm
just
paste
here,
we'll
go
through
what
it
does
real,
quick
preview
that
all
it's
doing
is
we're
coming
in
here
and
we're
creating
the
div
and
we're
creating
an
icon.
All
right
is
this
MS
videos
taller,
that's
that's
Gary
here
and
then
we're
putting
our
text,
which
is
whatever
the
title
was
right,
which
happens
to
be
gobble
for
each
one
of
these
all
right.
A
That's
all
I'm
doing
but
I'm
making
sure
that
that
other
pieces
they
are
and
I've
hiding
the
column
header
right
so
I
set
this
hide
column
header
to
true
and
gets
rid
of
all
those
columns.
So
it
feels
a
little
better
right,
so
I'm
gonna
save
that.
Now.
If
I
go
back
to
my
new
page
here,
my
refresh
you'll
see
my
format
actually
gets
applied
here,
which
is
awesome.
One
thing
I'm
gonna
make
sure
I.
A
Do,
though,
is
make
this
even
less
list
web
part
like
I'm
gonna
edit,
the
web
part
properties
for
the
list
web
part,
I'm,
gonna
uncheck,
show
command
bar
and
apply
that
gets
rid
of
that
extra
junk
up.
There
I
can't
quite
get
rid
of
some
of
these
titles
and
I
can't
really
here
to
the
see
all
but
just
a
little
upsetting.
But
if
I
do
that,
though,
you
publish
that
now,
I've
got
this
kind
of
miniature
application.
So
I've
got
my
video
kind
of
portal.
A
Page
I
come
in
here
and
I
can
fly
whatever
formatting
I
want
right.
You
can
get
really
elaborate
here,
but
now
I've
got
a
video
selector.
You
could
also
do
this
with
documents
or
all
sorts
of
other
pieces
right.
So
at
a
document
library
you
wanted
to
explore
how
you
wanted
to
do
like
thumbnails
here
and
have
a
nice
viewer
by
setting
up
that
quick
connection,
you
can
use
whorfin
view
formatting
in
connection
with
some
of
the
out-of-the-box
webparts
to
create
kind
of
a
miniature
application.
A
You
notice
I
didn't
really
do
any
coding
instead
of
cutting
and
pasting
some
JSON
from
our
free
sample
repository
right
and
that
wasn't
even
necessary.
That's
just
me
up
in
some
icing
on
this
whipped
cream
on
this
pumpkin
pie
that
very
topical
all
right.
So
that's
that's
pretty
cool
right.
So,
let's
take
a
look
here,
just
a
review
all
right.
So
if
you
use
that
whew
webpart
or
the
document
library
web
part
you,
your
formats
will
apply
over
there,
including
a
lot
of
your
styles
and
colors.
A
There
used
to
be
a
lot
more
discrepancies
between
the
ListView
and
lets
you
apart.
There
are
near
as
many
now
which
is
awesome.
There
are
a
couple
of
gotchas
there
at
the
title
of
the
see.
Y'all
are
gonna,
continue
to
show
here's
a
hint.
You
can
actually
type
a
space
as
the
title
and
then
a
little
won't
show
anymore,
but
you're
still
gonna
get
that
see
all
link
which
will
take
you
back
to
the
main
ListView.
A
But
if
you
take
advantage
of
that
column
selection
hiding
in
this
case,
we
didn't
want
to
hide
the
selection,
because
we're
using
this
election
to
embed
or
to
send
the
current
embed
code
over
to
the
embed
web
part,
but
hiding
that
column
header
really
takes
away.
That
kind
of
list
feel
altogether
and
then
make
sure
you
hide
the
command
bar
within
the
web
part
and
that's
a
big
one
to
make
sure
it
gets
rid
of
like
the
export
to
excel
and
all
that
other
stuff
which
it
can
be
helpful.
A
But
generally,
if
you're
trying
to
create
this
kind
of
miniature
application
experience,
you're
not
gonna
want
so
a
couple
of
resources
for
you
get
the
full
documentation
over
here.
This
sample
this
generic
video
button.
It's
no
super
elaborate,
but
it'll
kind
of
show
you
how
to
do
it
and
also
walks
through
that
kind
of
connection,
that
I
did
very
very
quickly.
Of
course,
you
can
always
watch
the
video
and
put
it
on
half
speed.
A
I,
don't
know
I
do
that
we
could
it's
an
option
and
if
you
are
in
the
US
or
elsewhere-
and
you
just
really
want
to
celebrate,
you
know
Thanksgiving
and
you
need
help
with
your
turkey.
Here's
the
turkey
helpline,
so
that's
a
free
service
to
get
information
on
how
to
properly
cook
one
of
these
delicious
turkeys.
That's
all
I
got.