►
From YouTube: SharePoint Framework Community call – 29th of July 2021
Description
SharePoint PnP Community - SPFx & JS SIG call on July 29. Two demos delivered: Hero Web Part and Tiles V2 Web Part and Exposing business data in Viva Connections or in SharePoint with custom diagram web parts. 5 PnP SPFx web part samples delivered! Viva Connections public developer preview! Released SharePoint Framework v1.13 beta with preview of Viva Connections extensibility tooling. Register for events on Sharing-is-caring. PnP Recognition Program announced. Summer and Fall community call schedule updates reviewed. The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place in chat throughout the call.
Learn more:
• See the full blog post for this call at: https://aka.ms/m365pnp/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• 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
We'll
do
our
optional
picture
time
for
folks,
and
then
demos
we've
got
a
demo
from
omar
on
a
hero,
web
part
and
tiles
for
the
v2
web
part,
and
then
hugo
exposing
business
data
in
viva
connections
or
in
sharepoint
with
custom
diagram.
Web
parts
very
excited
to
see
both
of
those.
But
first,
let's
get
through
our
normal
set
of
slides.
A
Here,
people
often
ask:
how
can
you
participate
in
the
patterns
of
practices
program
or
get
more
involved
in
these
calls,
and
the
first
thing
I
would
suggest
you
is
please
please,
please
reach
out
to
demo
your
solutions.
I
know
everyone
out.
There
is
doing
great
work
for
your
customers
or
your
companies
and,
as
is
appropriate,
of
course,
would
love
to
have
you
able
to
demo
those
for
us
on
the
call
and
for
the
community.
A
A
So,
please
let
us
know,
and
of
course,
if
you
see
issues
or
questions
other
people
might
have,
you
can
always
drop
in
and
help
out
with
those
that's
a
great
way
to
help,
and
it
might
get
folks
answers
a
little
bit
faster
than
waiting
for
somebody
from
the
core
team
to
get
back
to
them.
And
finally,
we
always
appreciate
feedback
on
everything
we
do.
So
how
are
these
calls?
How
is
our
documentation?
A
A
Next
up
is
our
page,
oh
links,
so
we've
got
a
bunch
of
different
content
around
from
the
patterns
and
practices
program
and
from
other
groups
as
well,
but
the
first
section
there
is
the
microsoft
365
developer,
videos.
These
are
going
to
be
videos
focused
on
scenarios
around
perhaps
building
a
sharepoint
framework
web
part
or
using
the
microsoft
graph
toolkit
things
like
that,
our
community
videos
are
going
to
be
all
of
the
recordings.
From
this
call.
The
other
special
interest
group
calls
our
monthly
calls
and
other
community
oriented
calls.
A
So
less
a
single
topic
and
more
just
these
kind
of
call
recordings.
You
can
always
catch
up
if
you
have
missed
a
session
or
just
want
to
review
something
that
was
presented
in
a
previous
community
call
as
well.
We've
got
a
bunch
of
great
github
organizations
across
you,
know,
sort
of
the
patterns
and
practices,
landscape,
sharepoint,
pnp
office,
dev
and
microsoft
graph.
A
All
of
them
have
opportunities
to
participate,
opportunities
to
contribute
and
tons
of
opportunities
to
learn
and
great
tools
and
resources
to
help
build
your
solutions
as
well
lots
of
great
samples
built
by
all
of
you
in
the
community,
so
love
to
keep
seeing
these
grow.
We've
got
team
samples,
spf,
x,
power
platform,
spf
x,
extensions
and
list
formatting
samples
all
available
and,
as
I
always
say,
when
I've
got
you
know
a
new
project
or
a
new
question,
I'm
trying
to
figure
out.
A
A
Ms
slash
m365
pnp
and
that
will
take
you
to
the
patterns
and
practices
landing
page
which
will
link
to
all
of
the
rest
of
this
content,
as
well
as
links
to
our
community
calls
and
as
well
as
lots
of
great
information
there
on
what's
going
on
across
all
of
the
patterns
and
practices,
programs,
aka
dot,
ms
slash
m365
pnp
as
well
the
summer
break
and
we've
got
changes
to
the
community
call
schedule.
This
is
affecting
july
and
august,
so
really
mostly
through
july.
At
this
point,
these
thursday
calls
will
be
continuing.
B
Thanks,
patrick
well,
friends,
as
you
will
see,
there
are
a
ton
of
opportunities
to
collaborate
and
use
the
resources
within
our
community.
We
are
an
open
source
and
inclusive
community,
but
we
understand
that
there
are
some
hurdles
many
times
to
start
consuming
as
well
as
contributing
back
so
sharing
is
caring
is
an
initiative.
If
you've
not
heard
of
it,
it
is
providing
hands-on,
live
interactive
guidance
on
how
to
do
a
variety
of
things,
such
as
first-time
contributions
to
github.
What
is
a
pull
request?
How
do
you
navigate
that
landscape?
B
I
want
to
start
presenting.
Do
you
have
some
tips
and
tricks
maturity
model
so
much
more?
These
are
absolutely
free
sessions.
They
are
scheduled
every
month.
We
also
have
the
popular
ask
me
anything
which
is
scheduled
for
september
28th
for
the
power
platform.
So
please,
if
you
would
like
to
get
involved,
start
using
some
of
the
samples
you
want
to
start
contributing
back
to
the
samples,
don't
hesitate
to
join
a
session
aka
dot.
Ms
forward,
slash
sharing
is
caring
now,
once
you
have
done
that
and
contributed
back.
B
If
we
go
to
the
next
slide,
we're
going
to
see
how
you
are
going
to
be
celebrated,
we
love
and
are
so
encouraged
by
the
contributions
that
you
make
to
the
community.
We
have
generated
a
new
recognition
program.
This
is
powered
by
credly
and
this
is
actually
just
like
the
same
certification,
badges
you
get
when
you
get
microsoft
certified.
So
it's
exciting.
B
It's
going
to
show
up
right
next
to
that
we're
going
to
have
a
lot
of
campaigns
coming
up
as
we
get
further
into
the
year
different
ways
to
get
special
edition,
badges
and
different
ways
to
celebrate
your
success
and
your
contributions.
It
is
a
manual
process,
so
please
be
patient
with
us.
We're
going
to
be
working
on
sending
some
of
those
badges
out
today
and
tomorrow
so
keep
on
the
lookout
for
that.
B
A
Thank
you
david
for
that
and
love
to
see
both
the
sharing
is
caring,
continue
to
grow
and
and
see
the
folks
go
through
that
and
as
well.
This
recognition
program
is
a
a
really
cool
way
to
kind
of
brag
about
the
work
you
all
are
doing
in
the
pnp
community,
so
very
excited
to
see
this
as
well
and
then
so
updates
around
sharepoint
framework.
I
will
be
visa
today
and
want
to
remind
folks
there
is
a
viva
connections.
A
Public
developer
preview
you
used
to
have
to
sign
up,
but
that
that
is
all
over,
so
you
can
go
to
ak
dot.
Ms
slash
viva
connection,
slash
developer,
slash
preview,
and
that
will
give
you
access
to
what
is
now
a
public
beta
of
the
viva
connections,
framework
or
viva
connections,
developer
framework
and
still
figured
out
how
to
how
to
talk
about
it
exactly.
But
it's
really
exciting.
I've
been
doing
a
lot
of
that
this
week,
playing
with
viva
connections
and
doing
some
dev
with
the
aces,
and
it's
really
cool.
A
There's
a
lot
of
neat
features
and
a
lot
of
fun
ways
to
interact
with
these
cards
and
a
lot
of
kind
of
interesting
scenarios.
I
think
folks
are
going
to
be
able
to
build
here
so
definitely
check
this
out.
We'll
have
lots
more
demos
of
this
kind
of
stuff
on
community
calls
in
the
future,
and
if
you
build
something
cool,
we'd
love
to
have
you
demo
it
on
the
call
so
check
us
out
road
ahead.
Future
features
that
could
be
harder
to
say
I
guess
sharepoint
framework
113
beta
is
out.
A
That
is
part
of
the
viva
connections.
Extensibility
tooling,
for
the
preview
I've
been
using
that
pretty
successfully
so
check
that
out,
you
do
need
to
remember
the
dash
plus
beta
command.
That's
caught
me
up
a
few
times
when
I've
been
confused.
Why
I
don't
have
the
option
for
aces
so
make
sure
you
follow
those
directions
but
check
that
out.
So
the
113
is
what's
going
to
give
you
access
to
the
aces.
Very
you
know
interesting
fun,
new
development
paradigm.
A
Some
really
great
stuff
coming
there
very
excited
to
see
that
work
happening
and
getting
out
to
the
world,
and
I
will
now
also
get
to
be
julie,
turner
today
because
she
is
sp,
fest
chicago.
I
believe
that
I
don't
see
you're
on
the
call
so
pnpjs
client-side
updates.
We've
got
280
scheduled
for
august
13th.
Some
new
features
for
graph.
A
A
You
can
check
out
a
pinned
issue,
that's
kind
of
an
overview
of
our
v3
plans.
The
v3
branch
is
there,
everybody
could
take
a
look
at
that.
It
is
ugly
and
it
does
not
quite
work
fully
yet
but
happy
to
you
know
have
feedback
have
folks
look
at
that
and
as
well.
We
are
looking
to
possibly
host
just
a
session
or
a
call
on
v3
and
talk
through
some
of
the
new
stuff.
A
That's
coming
if
you're
interested
in
helping
with
e3,
let
us
know
and
then
as
well.
We
are
automatically
locking
closed
issues
after
30
days,
just
fyi.
If
you
have
an
issue
similar
to
one.
That's
been
locked,
please
just
open
a
new
issue
and
you
can
always
reference
that
old
issue
and
we
could
take
it
from
there
and
no.
The
rabbit
was
attacking
a
horse
that
had
snuck
in
to
the
slide.
A
A
We
have
a
new
preview
out
3.12
with
updating
spfx
projects
to
the
113
beta
and
that's
the
viva
connections.
Preview
version.
Just
a
reminder:
there's
no
reason
to
update
your
current
production
projects
to
the
113
beta
today,
except
for
testing.
That
is
still
a
beta
and
very
much
not
ready
for
production
use.
That's
spfx113,
so
112.1
is
still
the
current
production-ready
version
of
spfx.
A
You
could
retrieve
onedrive
sites,
retrieving
planner
plans
and
buckets
and
then
adding
planner
buckets
as
well.
You
can
always
install
the
latest
beta
npm
install
dash
g
at
pnp,
cli,
microsoft
365
at
next.
You
can
also
install
a
docker
container
that
has
the
cli
ready
to
go
in
it
using
the
command
there,
and
you
can
try
a
preview
of
version
4
looking
again
to
have
a
release.
This
fall
with
npm
install
dash
g
all
that
stuff
at
four
we'll
get
you
the
version.
Four
preview
there
so
excited
to
see.
A
Cli
continue
to
involve
and
all
the
folks
involved
in
making
that
happen
really
great
to
see
that
grow
and
get
better
and
better
spfx
reusable
components.
So
there
are
two
sets
of
controls
here.
The
first
is
react,
controls,
2.8
and
321;
those
are
for
spfx
1.11
and
earlier
and
spfx
1.12.1
and
later
respectively.
A
So
you've
got
dynamic
forms,
location,
pickers,
fast,
serve
support,
combo
box
list,
item,
picker
list,
item,
picker
people,
picker
list,
picker
and
various
fixes
and
enhancements
really
excited
to
see
those
updates
coming
through
and
as
well.
The
react
property
controls
designed
to
be
used
in
the
edit
pane
of
your
sharepoint
framework
web
parts.
A
A
A
Just
a
reminder
that
the
version
three
branch
is
sort
of
in
kind
of
support
and
new
development
is
occurring
in
the
version
four
branch.
So,
as
you
are
able
encourage
you
to
look
to
upgrade
to
the
version
four
branch-
and
certainly
you
know
that's
where
the
the
future
development
is
going
to
be-
and
now
I
will
take
a
break
from
talking
and
pass
things
over
to
hugo,
for
details
on
our
samples.
C
Oh
you're
doing
so
so,
well
being
everybody
else,
I
thought
you
would
you'd
want
to.
Do
me
too,
that
didn't
come
across
right,
anyways,
hi
everybody.
So
we
have
two
repositories
with
the
spfx
extensions
and
the
spfx
web
parts
that
can
be
used
for
you
to
to
learn
by
example.
Right.
So
there's
tons
of
solutions
out
there
and
they're
they're
all
open
source
they're
all
contributed
by
community,
and
they
can
range
from
a
simple
concept
to
a
full-on
solution
that
you
can.
C
You
can
use
to
learn
and
build
your
solutions
from
so
these
are
the
updates
for
the
last
two
weeks,
michael
romizeski
actually
create
updated.
The
machine,
translation
extension
he's
added
the
ability
to
use
regional
azure
translate
resource
and
what
else
we've
got
also
we've
upgraded
it
to
spfx1121.
C
On
the
web
part
side,
we
have
an
update
to
the
data
table
by
abdirahman
mujahid,
who
fixed
the
export
to
csv
the
hero
web
part
by
omar
el
anis,
updated
to
automatically
detect
how
many
items
are
being
displayed
and
adjust.
The
display
layout,
based
on
this
adjusted,
to
show
the
title
on
all
the
images
descriptions
on
hovers
hover
effect
for
images
to
show
zoom
effect,
which
is
very
cool,
just
a
general
cleanup
and
again
that's
an
spfx121
solution,
and
then
we
have
a
new
web
part
by
juliano
del
lucca.
C
C
That's
an
spf
x,
1,
12,
1
solution
as
well,
and
then
the
web
part
that
I'll
be
showing
you
today,
although
it
shows
one
twelve
one,
it's
actually
113,
but
it's
a
diagram
web
parts
which
allows
you
to
create
diagrams
and
show
data,
and
I
won't
ruin
the
fun
I'll
talk
to
you
about
it
very
shortly.
So
that's
it.
We
always
welcome
collaborations
by
people
and
we
love
everything
that
everyone's
doing.
Thank
you,
everyone
for
being
awesome
and
back
to
you,
patrick.
A
C
B
A
D
So
first
long-time
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.
D
Basically,
it
uses
a
collection
data
set
which
you
can
update
in
here.
So
you
click
on
configure
the
tiles.
Then
you've
you've
got
the
option
to
set
the
title,
the
description
that
gets
shown
when
you
hover
over
it
and
a
link
and
then
so.
This
is
part
of
the
new
bit,
which
is
where
you
select
the
icon.
So
by
clicking
that
you
basically
get
a
list
of
for
the
icons
that
you
can
select
from.
D
And
then
I
can
choose,
let's
go
for
a
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.
D
It
does
work
in
teams
as
well,
but
it
is
a
little
bit
glitchy.
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
I
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
look
at
something
for
the
future.
D
D
If
you
go
too
far,
you
might
end
up
squashing
text,
but
that's
your
preference
to
just
adjust
that
using
the
slider
bar.
You
can
also
set
it
either
to
inherit
the
theme
from
the
site
or
if
you
wanted,
you
can
adjust
that
to
manually,
choose
whatever
colors
you
needed
in
there,
as
well
as
the
font
that
looks
ugly,
but
you
guys
hopefully
get
the
idea
and
then
you've
you've
got
your
tiles
there
for
people
to
use
so
kind
of
moving
along
to
the
code
bit.
D
As
I
said,
most
of
this
was
done
by
hugo,
so
I
can't
take
credit
for
it,
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.
D
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.
D
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
webpart
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
all
we're
doing
is
then
creating
an
icon
picker,
which
is
again
an
element
available
from
pmp.
D
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
it
will
just
use
the
the
theme
color.
D
D
D
So
I
will
I
will
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
part
that's
available,
but
I
wanted
to
be
able
to
customize
it
and
display
stuff
in
different
views,
etc.
D
So,
as
a
result
of
that,
I
thought
well,
the
next
best
thing
is
to
kind
of
build
my
own
version
of
it.
So
that's
that's
where
the
this
web
part
kind
of
comes
into
play,
which
I'll
show
you
here
so
this
this
is
the
hero
web
part
and
what
it
does
is.
It
will
display
a
number
of
different
pictures
that
you
select,
which
I'll
show
in
a
second,
and
I
will
show
them
in
a
in
a
good
view.
D
D
We've
got
the
option
to
manage
the
data
that
we're
gonna
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.
D
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.
D
D
D
One
thing:
I've
noticed
with
the
property
panels,
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
of
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.
D
I'm
not
sure
if
I've
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.
D
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
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.
D
D
So
if
I
scroll
down
so
we've
got
the
standard
render
element,
this
will
send
through
the
all
the
information
that's
being
selected
on
the
property
screen,
so
the
collection
data,
which
is
that
bit
just
there.
So
if,
as
long
as
it
exists,
it
will
send
the
collection
data,
otherwise
it
will
just
send
a
blank
element.
D
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
pane
configuration
window,
which
is
where
we're
pulling
in
the
information
that
we
want
to
retrieve
from
it.
D
So
the
key
bit
is
the
collection
data
that
bit
right
there.
So
then,
we've
got
the
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
a
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.
D
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.
So
it's
false.
So
if
I
was
to
change
hide
local
upload
tab
to
false,
we'll
then
get
the
option
inside.
D
Here,
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
to
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.
So
then,
as
before
we've
we've
got
the
show
all
heroes,
option
which
says
that
we
want
to
paginate
it,
and
the
other
option
is
just
to
hide
the
first
and
last
one.
D
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
named
it
hero
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
were
part.
But
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.
D
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
display
to
the
users
depending
on
whether
we
choose
for
the
information
to
be
paginated,
which
is
where
we've
selected
show
world
heroes.
D
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.
D
D
D
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.
D
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.
D
D
D
D
D
D
The
first
element
this
one
here
sorry,
so
it
splits
the
first
item
inside
there
and
then
for
the
second
one.
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.
D
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.
If
you
want
to
do
something
similar
you've
got
some
some
code
to
kind
of
base
it
offer,
but
any
feedback
or
anything
like
that.
Please
let
me
know:
I'm
gonna,
I'm
gonna
stop
talking
there
so
probably
talk
everyone's
ears
off.
A
Now
that
was
great
stuff,
thanks
omar,
really
very
cool
techniques
and
very
nice
layout
of
the
code
there.
Folks
for
commenting
on
that,
I
think
there
might
be
a
couple
of
questions
in
the
chat
for
you,
but
I
think
it's
time
to
move
over
to
hugo
for
doing
his
exposing
business
data
in
viva
connections.
So
thank
you,
omar
and
welcome
hugo.
Take
it
away.
C
Hi
everybody,
my
name
is
hugo
bernier,
I'm
sorry,
I'm
laughing
because
I
I
share
my
screen
and
in
front
of
my
screen.
There's
a
there's,
a
giant
water
bottle
and
I
actually
moved
the
water
bottle
out
of
the
way.
So
it
wouldn't
block
your
view.
So
that's
how
smart
I
am
today
all
right.
So
my
name
is
hugo
bernier.
I'm
a
cloud
solution
architect
at
microsoft
and
today.
C
C
That's
selected
how
to
create
full
bleed
webparts
so
that
I
could
put
these
diagrams
at
the
top
of
a
page
in
the
header,
and
you
know,
do
giant
diagrams
and
things
like
that,
how
to
handle
section,
color
changes
and
how
would
it
work
in
viva
connections
as
well?
As
you
know,
one
thing
that
we'll
we'll
talk
about
is
people
often
forget
that
the
content
in
their
web
part
sometimes
should
be
searchable
right
and
so
how
to
make
the
content
inside
the
web
part
appear.
C
As
as
part
of
the
search
results
on
a
page
so
that
people
can
actually
find
the
stuff,
otherwise
it's
it's
as
if
you
had
the
you
know,
the
all
your
content
in
a
picture
and
nobody
can
find
it.
I
didn't
get
to
process
the
pull
request
to
submit
this
web
part,
because
I
decided
at
the
very
last
minute
that
I
was
going
to
upgrade
it
to
spf
x
113,
but
I
will
be
doing
that
very
shortly
posted
in
the
spf
x,
repo.
C
C
C
Maybe
you
want
to
show
a
business
process
or
a
decision
tree,
or
maybe
a
sequence
diagram
and,
for
example,
here
this
is
a
sequence
diagram
that
shows
four
different
participants
that
four
different
participants
that
are
doing
stuff
right
and
they
interact
with
each
other.
But
maybe
I
want
to
show
a
sequence
diagram
on
a
sharepoint
site,
our
team
and
or
using
visa
connections.
Instead
of
putting
in
boring
documents
describing
that
process
and
since
it's
visual,
you
could
take
that
that
diagram
and
overlay
some
data
make
it
more
meaningful.
C
For
example,
maybe
I
want
to
show
how
many
items
are
waiting
at
a
particular
step
in
a
process,
or
maybe
I
want
to
select
an
item
from
a
list
and
dynamically
update.
The
diagram
based
on
the
item
is
selected,
or
maybe
I
want
to
select
a
point
in
the
diagram
and
dynamically
show
related
items
or
documents
related
to
that
step
in
the
process,
and
that's
exactly
what
this
solution
does.
In
fact,
the
diagram
you're
looking
at
here
is
generated
directly
from
one
of
the
web
parts,
so
I
actually
took
some.
C
C
So,
as
you
can
see
here,
this
is
this:
is
one
of
the
web
parts
that
I'm
going
to
show
you
where
I
can
actually
control
this,
and
what
you
see
here
at
the
bottom
is
a
property
control
that
we
created
for
the
pmp
library,
which
is
called
the
markdown
property
pane
and
allows
you
to
do
things
like
like
this.
I
want
to
show
help
in
my
in
my
property
pane.
I
can
do
that
easily
without
having
to
kind
of
render
a
whole
bunch
of
controls.
I
can
just
create
markdown.
C
There's
another
web
part-
and
I
know
it's
a
little
bit
blurry
but
again
I'll,
show
you
the
real
thing
very
shortly
that
allows
you
to
write
flow
diagrams
and
again,
there's
what
I'm
doing
with
all
these
web
parts
is,
I'm
always
showing
the
syntax
help
behind
the
scene
on
how
to
write
these
diagrams.
So
the
great
thing
about
that
is,
it
allows
a
regular
user
yeah.
So
it's
using
mermaid.
C
Sequence
and
another
one
that
I'll
show
you
shortly
and
you
know
one
of
the
last
one
here
is
the.
I
think
this
one
is
the
mermaid
diagram
yeah,
so
mermaid
diagram
allows
me
to
actually
create.
Can
any
kind
of
diagram
that
I
want
really
and
do
it
in
a
very
compelling
way.
But
let's
not
just
show
you
boring
screenshots.
Let's
actually
show
you
the
web
part
in
action.
C
All
right,
so,
the
one
thing
I
want
to
I
want
to
point
out
is
that
when
you
create
a
web
part
and
people
drop
the
web
part
on
a
page,
it's
always
a
great
idea
like
to
give
people
kind
of
a
good
experience
right.
So
don't
just
drop
a
web
part
and
start
screaming
at
people.
Saying
hey,
there's
an
error
in
your
diagram.
C
If
you
didn't
put
any
information
in
there
right
so
there's
a
pnp,
reusable
control
called
the
placeholder
placeholder
control,
which
will
actually
give
you
this
experience
that
you
see
here.
So
when
the
diagram
doesn't
have
text,
it
should
show
you
hey,
create
your
diagram
and
to
get
started,
enter
your
diagram
text
and
click
on
configure
and
doing
that
will
automatically
launch
the
diagram.
C
D
C
I
want
a
surface
duo
which
is
awesome
by
the
way,
so
you
can
actually
update
that
dynamically
and,
as
you
can
see
it,
just
dynamically
updates
the
text.
Of
course
I
added
the
ubiquitous
webpart
title
here
so
gratuitous
title
here,
but
what
I've
also
added
is
a
few
a
few
things.
One
of
the
things
that
you'll
notice
here
in
this
diagram
is
that
I'm
actually
using
a
custom
syntax,
and
this
is
by
the
way
this
is
the
monaco
editor.
The
monaco
editor
I'll,
show
you
a
bit
later.
C
Is
this
thing
that
visual
studio
code
uses
and
it's
available
as
a
web-based
control
that
you
can
embed
in
your
solutions,
so
I've
actually
created
this
and
it
actually
knows
the
syntax.
So
if
I,
for
example,
I'm
trying
to
remember
now,
if
I
try
to
put
a
sub
graph
here,
it'll
actually
create
right
away.
It'll
know
that
these
two
things
go
together,
sub
graph
and
end
and
I've
actually
for
each
one
of
these
libraries.
I've
actually
created
a
control
that
that
will
allow
me
to
embed
the
custom
syntax
here.
C
I
can
obviously
do
the
full
experience
with
kind
of
the
autocomplete
and
all
that
stuff.
So
if
I
start
typing
subgraph
again
and
if
I
actually
type
properly
it'll
actually
make
this
a
collapsible
section
as
well
I'll
skip
that.
The
other
thing
that
we've
done
here
is
that
we're
using
themes.
Obviously,
but
the
one
new
theme
that
I've
added
is
the
ability
to
actually
grab
the
sharepoint
theme.
And
by
that
I
can
also
do
things
like
change.
The
colors
of
the
section
and
the
diagram
will
automatically
update.
C
C
But
let's
talk
about,
let's
talk
about.
Actually
I
was
going
to
talk
about
the
concept
of
data
information
and
knowledge.
So
why
don't?
I
just
use
this
tool
to
do
that
now.
This
is
completely
unscripted,
so
participant
participant-
maybe
I
shouldn't
have
done
that
so
you've
got
data,
you
got
information
and
you
got
knowledge.
What's
the
difference
between
these
two,
these
three,
I
can't
even
count
today.
C
C
I
could
take
everything
I
know
I
could
write
everything
down
and
about,
let's
say
sharepoint
and
unfortunately
it
will
just
become
information
again,
because
you
then
have
to
take
that
information
and
apply
it
for
it
to
become
your
own
knowledge.
And
why
is
that
important?
Well,
we're
not
quite
able
to
scan
people's
brains
yet.
C
So
now
I
got
five
more
minutes.
Let
me
show
you
some
components
here
before
we
show
to
the
code,
so
the
first
thing
that
I
do
and
I'll
I'll
skip
the
other
web
parts,
but
the
one
thing
that
I'm
doing
is
I'm
using
something
called
the
mermaid
library
to
do
this.
There's
there's
actually
quite
a
few
libraries
mermaid
is
kind
of
a
really
cool
library
that
allows
you
to
do
kind
of
all
the
diagrams
that
I
was
showing
you
before.
C
You
can
do
all
these
things
and
then
more
by
just
using
simple
text,
and
you
can
you
can
embed
those
in
web
parts
or
again
in
teams
or
viva
connections,
really
really
cool.
My
other
webpart
actually
uses
the
sequence
diagram,
which
is
actually
the
one
that
I
use
to
generate.
The
title
of
my
in
my
slide
uses
the
sequence
diagram
and
this
one
actually
supports
hand-drawn
diagrams
versus
simple
diagrams.
It's
a
great
way
to
communicate
with
your
team.
C
Yes,
actually
mermaid
is
implemented
in
the
the
azure
devops
wikis
as
well,
and
then
there's
another
one
called
flowcharts
which
allows
you
to
actually
do
advanced
flowcharts
and
that's
what
my
three
web
parts
do.
Is
they
really
because
I
may
have
mentioned
this
before
I
am
the
world's
laziest
developer?
C
Why
would
I
go
and
rewrite
code
that
someone
else
has
written
and
someone
way
smarter
and
way
better
looking
that
has
built
something
that
does
something
really
cool
like
that
and
it's
already
been
tested.
Why
don't
I
just
take
the
time
to
to
take
that
library
embed
it
inside
of
my
solution
and
make
it
work
with
like
themes
and
accessibility
and
things
like
that,
so
the
other
thing
that
I've
done
again.
I've
talked
about
monaco
editor,
I'm
actually
using
the
monaco
editor
library.
C
Now
those
of
you
who
have
tried
to
use
monaco
editor
inside
of
an
spfx
solution.
I
know
chris
kent
did
one
solution
that
has
it
it's
not
the
easiest
thing
to
do
so.
One
of
the
things
that
I
would
love
to
know
in
the
in
the
the
chat
is
this
control
that
I
created,
which
allows
you
to
embed
a
monaco
editor
in
a
web
part
and
allows
you
to
create
your.
You
can
use
the
standard
syntax,
but
you
can
actually
create
your
own
syntax
as
well,
and
your
own
syntax,
highlighter
and
autocompletion.
C
If
you
think
that
this
is
a
control
that
would
be
useful
to
the
community,
please
let
me
know,
and
I
will
submit
it
to
the
pmp,
reusable
controls
I'll
be
watching
for
the
the
chats
in
the
in
the
window,
I'm
running
out
of
time
all
right.
So
let
me
just
try
to
wrap
this
up
and
we'll
skip
the
code
for
today.
The
other
thing
that
we
have
that
we're
using
here
is
the
property
pane
markdown
control.
C
This
is
something
that
I
built.
Actually,
I
built
this
control
when
I
built
the
last
version
of
this
web
part,
but
this
is
something
that
you
can
use
if
you
ever
need
to
put
instructions
inside
of
your
web
parts,
it's
just
really
cool
to
do
that
kind
of
stuff
and
again
the
more
guidance
you
can
give
your
users
and
in
using
some
complicated
things
like
that,
the
better
it
is.
I
wish
I
had
some
time
to
cover
the
code,
but
again
I
need
to
wrap
it
up.
C
A
All
right,
thank
you,
hugo
for
that
and
thank
you,
omar
for
your
demo.
Great
stuff
from
everybody
really
excited
to
see
that
and
mermaid
js
is
very
cool.
I've
played
with
that
a
little
bit
and
it's
really
kind
of
shocking.
How
well
that
works
and
how
neat
that
is
to
draw
those
graphs.
So
thank
you
to
everybody
for
joining
us
today.
Thank
you
to
our
presenters
again,
omar
and
hugo.
This
recording
will
be
available
in
about
24
hours
on
our
youtube
channel
there.
You
can
always
follow
us
on
twitter
at
microsoft.
A
365
developer
at
m365pnp,
next
spfx
call
two
weeks
august,
12th
same
time.
Next
general
dev
call
next
thursday
august
5th,
already
into
august
same
time
as
well.
All
the
community
calls
you
can
always
find
the
links
there
at
ak
dot.
Ms
slash
m365
pnp
we've
got
a
bunch
of
different
developer
community
calls
again.
These
will
all
be
kind
of
revamped.
Come
the
fall
just
so
we
get
a
little
bit
better
schedule
for
everybody.