►
Description
For this 23-minute developer-focused demo, Omar El-Anis showcases integration of PnP Controls delivering new capabilities. Tiles v2 – displays a group of responsive flex tiles that can be configured to navigate to different URLs. REACT Hero – provides a customizable Hero webpart that displays 5 images in a stand-alone carousel view. Both web parts use a stored collection from PnP PropertyFieldCollectionData control, custom field rendering control, file/icon pickers and fluid flex layout. Site theme selectable in Tiles v2. Thorough code walkthrough. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 29, 2021.
Demo Presenter: Omar El-Anis | @omarelanis
Supporting content:
• Omar’s blog – SP Bytes | http://www.spdeveloper.co.uk/
• Sample - Hero web part | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hero-webpart
• Sample - Tiles V2 | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles-v2
• Controls – PropertyFieldCollectionData control | https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData.html
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
So
first
longtime
listener
first
time
presenter,
so
bear
with
me
some
details
about
me.
So
my
name
is
omar
alanis
system
developer
and
entrepreneur.
There's
my
github
and
my
kind
of
blog.
So
if
you
want
to
get
in
touch
with
me,
feel
free
to
for
any
of
those
methods,
so
first
one
I'm
going
to
run
through
is
the
tile
v2
web
part.
This
is
basically
an
extension
of
the
awesome
web
part
that
hugo
created
in
the
past
that
was
then
merged
into
the
new
starter
kit.
A
A
A
A
And
then
I
can
choose,
let's
go
for
happy
face
and
you
can
choose
if
it
opens
in
a
new
tab
or
inside
the
current
one,
and
then
you
can
see.
That's
that's
added
that
in
there
for
me
and
again,
if
I
move
this
down,
you'll
see
now
there's
room
for
for
more
than
one
tile
there.
So,
instead
of
it
being
full,
it
will
just
pop
them
next
to
each
other's
and
it
will
kind
of
keep
moving
on
and
doing
that.
It
does
work
in
teams
as
well,
but
it
is
a
little
bit
glitchy.
A
So
that's
not
currently
being
advertised,
but
you
you
can.
You
can
add
it
in
by
manually
adding
the
app
in
you
have
to
sideline
it.
It
doesn't
work
for
the
sharepoint
app
catalog.
I'm
not
sure
why
haven't
got
that
far.
The
glitchy
bit
at
the
moment
is
you'll
see
it
kind
of
like
jumps,
a
bit
which
I
haven't
had
a
chance
yet
to
to
look
at
something
for
the
future.
But
that
is
also
a
cool
thing
you
can
do
with
spfx
as
well.
A
A
As
I
said,
most
of
this
was
done
by
hugo,
so
I
can't
take
credit
for
just
small
bits
that
are
kind
of
being
added
in
so
the
key
bit
inside
the
code,
which
allows
us
to
do
the
the
tile
picker
is
down
here
inside
the
property
pane
configuration,
which
is
the
property
pane,
that
pops
up
on
the
right
hand,
side
when
you're
configuring
it
so
inside
our
collection
data,
which
is
where
we're
holding
all
the
details.
So
the
title
description,
the
url,
the
icon.
A
This
is
the
bit.
There
was
a
new,
a
new
feature.
I'm
not
sure
exactly
when
it
was
released,
but
you
could.
You
can
now
add
in
custom
custom
elements
essentially
that
you
can
build
yourself
or
if
it's
already
built,
as
is
the
case
for
the
icon,
picker
one
you
can
use
that
and
that
information
is
available
on
the
pnp
spfx
website.
A
It
actually
explains
how
you
can
do
the
custom
field,
rendering,
which
is
what
I've
used
there
and
we'll
see
that
again
in
the
hero
web
part
in
a
minute.
But
it
allows
you
to
basically
render
your
own
elements
in
there,
so
you're
not
restricted
to
the
ones
that
are
available
out
of
the
box.
So
basically
inside
here.
A
All
we're
doing
is
then
creating
an
icon
picker,
which
is
again
an
element
available
from
pmp
which
won't
be
misfit
so
I'll
skip
that
for
now,
and
basically
just
selecting
the
file
storing
it
inside
there
to
the
icon
name
and
then
passing
that
through
so
when
we
then
render
so
then,
when
we
come
to
render
the
actual
elements
inside
here,
we
are
going
to
pass
that
through
the
collection
data
as
a
property.
So
this
will
essentially
then
call.
A
That
then,
basically
in
turn
calls
this
component
tile,
which
is
where
it
it
does
the
magic
to
actually
create
the
tiles
set.
The
color
and
populate
the
information
inside
it
so
you'll
see,
for
example,
for
the
the
color
stuff.
If
they've
selected
in
the
property
screen
at
the
beginning
to
use
a
custom
color,
then
it
will
set
the
color
based
on
whatever
was
choosing
before.
If
it's
set
to
use
the
to
not
do
not
have
a
custom
color,
then
we'll
just
use
the
the
theme
color.
A
A
A
So
I
will
I'll
answer
any
questions
if
there
are
any
at
the
end,
but
I'll
move
on
to
the
hero,
one,
which
is
this
one
here,
so
the
hero
one.
Basically,
I
had
quite
a
few
projects
where
I
wanted
something
similar
to
the
out-of-the-box
hero
web
part
that's
available,
but
I
wanted
to
be
able
to
customize
it
and
display
stuff
in
different
views,
etc.
A
A
A
We've
got
the
option
to
manage
the
data
that
we're
going
to
put
in
there,
so
you
can
choose
a
title
which
is
displayed
in
white
and
when
you're
just
viewing
it
and
it
will
display
it
when
you
hover
over
and
then
you
have
the
description
field
as
well,
which
is
just
this
bit
here
and
then
you
can
choose
what
link
to
open
when
somebody
clicks
on
that
and
then
you've
got
the
option
to
select
the
image.
Basically,
this
can
be
changed
that
you
can
actually
include.
A
You
can
include
upload
files
if
you
want
which
I'll
cover
in
a
bit,
but
I've
not
implemented
that
functionality
so
for
now,
for
the
one
that's
available
is
stock
images
to
use
basically
but
there's
a
whole
host
of
images
that
you
can
select
from.
So
it's
just
the
case
of
selecting
an
image
clicking
on
insert,
and
that
says
that
image.
A
A
A
One
thing
I've
noticed
with
the
property
panels:
it's
similar
to
the
search
one
as
well
when
you're
in
here.
If
you
click
out
or
actually
press
ctrl
z
instead
of
control
c,
it
knocks
it
out.
It's
like
something
I
try
and
be
careful
anyway.
So
I'll
go
in,
choose
an
image:
let's
do
some
nice,
carrots
and
then
click
add
and
save,
and
then,
if
I
save
this,
we
should
then
have
this
show
up.
As
now.
A
I'm
not
sure
if
I
published
latest
one
this
should
be
automatically
updating
as
I'm
making
these
changes,
so
I
might
need
to
double
check.
I
might
not
have
uploaded
it
to
the
app
catalog
yet,
but
that
should
actually
update
as
I'm
making
these
changes.
So
I
shouldn't
have
to
keep
pressing,
save
as
save
every
time
but
anyway,
so,
as
you
can
see
there,
that's
now
got
my
new
carrot
inside
there
as
well.
A
The
other
option
that
you
can
choose
to
do
is
to
show
more
courses
than
five.
So
if
you
basically,
if
it's
off,
you
won't
see
the
pagination
option,
if
you
switch
it
to
on
you'll,
see
the
option
to
to
go
through
the
list
of
available
items.
So
if
there's
more
than
five
items
in
there,
that
will
show
you
a
list
and
you
can
you
can
scroll
through
them.
A
A
So
this
is
using
a
lot
of
pnp
controls
to
do
this
specifically
just
showing
second,
the
the
file
picker
element
so
again
we're
using
a
click
collection
data
set
to
to
do
this
and
a
custom
one
which
was
basically
going
to
import
the
file
picker,
which
then
allows
us
to
select
the
stock
image
and
then
to
save
that
the
image
details
inside
the
collection
data
set.
So
if
I
scroll
down
so
we've
got
the
standard
render
element,
this
will
send
through
the
all
the
information.
A
A
The
show
all
hero
is,
if
you've
selected,
to
show
all
the
items,
not
just
the
five
and
then
that,
basically,
is
what
enables
the
pagination
option
and
again
these
circular
self-explanatory.
They
hide
the
first
page
and
last
page
and
if
it
is
paginated
which
is
again
related
to
the
the
pagination
option,
so
moving
down,
we've
got
the
property
plan
configuration
window,
which
is
where
we're
pulling
in
the
information
that
we
want
to
retrieve
from
it.
A
So
the
key
bit
is
the
collection
data
that
bit
right
there.
So
then,
we've
got
a
title
that
we've
seen
the
description,
the
url
and
the
key
one
here
being
the
file
picker,
so,
as
we
kind
of
sure,
saw
in
the
tile
one,
you
can
create
your
own
elements
in
here.
So
in
the
case
of
this
one,
it's
the
case
of
it
using
instead
of
the
icon,
picker
we're
using
the
file
picker
and
then
we're
going
to
go
through
and
we're
going
to
choose
the
selected
file
and
the
the
id
for
it.
A
Basically,
if
you
wanted,
which
I
alluded
to
before,
to
be
able
to
actually
upload
content
either
to
a
sharepoint
document
library,
you
can
basically
do
that
bit
inside
here.
You
can
then
update
the
option
to
true
to
allow
it
to
show
up
in
there
sorry
to
false.
So
if
I
was
to
change
hide
local
upload
tab
to
false,
we'll
then
get
the
option
inside.
A
A
When
I
go
to
select
file,
you'll
get
the
option
here
to
be
able
to
upload,
but
it
won't
actually
do
anything
unless
you
then
write
the
code
in
to
say
where
you
want
to
to
save
those
pictures
too.
So,
as
I
mentioned,
that's
not
there,
but
it
could
be
a
task
for
someone
if
they're
interested
to
kind
of
do
that.
A
So
when
it
comes
to
rendering
it
will
basically
call
our
hero
web
part,
which
is
this
one
here
I
know
the
naming
is
a
little
bit
confusing.
I
initially
names
it
here,
a
web
part
not
really
thinking
that.
Actually
it's
going
to
add
a
web
part
to
it
as
well.
So
it's
here
a
web
part
where
part
and
then
over
here
here
we
went
apart
at
that
point
when
I
noticed
I
was
a
bit
too
far
in
so.
I've
left
it
as
is,
but
basically
that
will
then
call
call
this
code.
A
This
class
will
take
in
the
information.
That's
being
sent
stored
in
the
state,
so
we'll
get
the
items
variable,
which
stores
all
of
the
the
collection
of
items
that
we've
chosen
to
displace
the
users
depending
on
whether
we
choose
for
the
information
to
be
paginated,
which
is
where
we've
selected
show
world
heroes.
A
So
this
bit
here
once
once,
these
dates
have
been
set,
it
will
go
through
and,
as
I
mentioned
there,
it
will
set
the
state
item
for
the
items
paginated
to
the
first
five
items
inside
there.
It
will
also
set
how
many
pages
it
should
be
shown.
So
if
there
are
10
elements,
then
it's
going
to
be
10
divided
by
2,
which
is
going
to
be
sorry
10
divided
by
5,
which
is
going
to
be
2
pages.
A
A
A
A
So
key
thing
for
the
render
at
this
point
when
it's
when,
when
you
load
the
page
information
gets
sent
through
to
this
bit
and
it
will
start
to
render
the
the
items
if
there's
nothing
in
the
state
yet
because
the
state
can
take
a
little
bit
of
time
to
generate
it,
it
will
hold
off
and
it
will
go
back
and
call
them
it
will.
Then
it
will
then
check
down
here
to
see
if
you've
selected,
to
show
all
of
the
items,
so
not
just
the
first.
A
The
first
five
available,
if
you
selected,
show
all
it,
will
basically
then
send
the
items
paginated,
which
is
the
list
of
the
five
items
depending
on
which
page
you've
actually
got
visible
on
the
screen.
If
it's
not,
then
it
will
just
only
take
the
first
five
items
so
we'll
slice,
the
array
and
just
show
you
the
first
five
items.
It
will
then
call
the
hero
element,
which
is
up
in
there.
If
you've
selected
the
pagination,
then
it
will
add
in
that
pagination
option,
which
is
this
bit
down
here.
A
A
A
A
A
A
It
will
go
and
basically
create
our
our
grouping
of
all
the
items
inside
there
as
part
of
that
it
will
basically
call
on
render
cell,
which
will
create
each
of
those
list
items
for
us
and
that's
where
inside
here
it
will
loop
through
each
of
the
items
that
we've
got
they're
separated
into
one
container
and
then
one
container,
so
that
this
one
has
its
own
one
element,
and
this
has
four
elements
so
they're.
Basically
it
splits
it.
A
It
splits
the
last
four
from
the
available
five
and
then
it
generates
the
first
container,
which
is
this
one
pulls
out
the
information
such
as
the
the
file
name,
the
url
the
title,
and
then
it
then
generates
the
next
four,
so
it
maps
through
the
la
the
four
items
that
will
exist
in
the
second
items
and
then
it
will
generate
each
of
those
under
that
and
that's
pretty
much
it
for
how
that
kind
of
works.
It's
more
for
template
for
people.