►
Description
Viva Connections & SharePoint community call on November 17th. Three demos: Add form customizers to list web part, Using Fluent UI 9 in SPFx solutions, and Visualizing dynamically SharePoint data within SPFx solutions using ERD model. Project releases include: SharePoint Framework (SPFx), PnPjs Client-Side Libraries, CLI for Microsoft 365, Reusable SPFx React Controls, and Reusable SPFx React Property Controls. See or listen to the latest episodes of Microsoft 365 PnP Weekly. Also 24 samples delivered! The host of this call is Marc D Anderson (Sympraxis Consulting LLC) | @sympmarc. Q&A takes place as always in chat throughout the call.
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
B
Welcome
everybody
to
the
Viva
connections
and
SharePoint
framework
bi-weekly,
sync
Call
for
November
17th,
so
we
are
going
to
have
three
demos
today,
which
means
we've
got
to
sort
of
move
quickly
through
these
introductory
slides.
I
can
talk
really
fast
or
skip
some
things,
so
we're
going
to
have
an
update
on
the
latest
release
of
the
SharePoint
framework.
B
I
believe
1.16
came
out
yesterday
or
the
day
before.
So
that's
hot
off
the
press.
We're
gonna
have
some
updates
from
the
patterns
and
practices
teams
about
this
various
projects.
We
have
several
Community
samples
to
talk
about
we're
going
to
do
picture
time
and
then
we've
got
three
demos
as
I
mentioned,
so
we
will
get
try
to
go
quickly
to
give
everybody
a
good
chance
to
dig
into
their
demos.
The
PNP
Community
is
a
very
open
and
welcoming
Community.
B
Hopefully,
if
you
don't
feel
that
way,
please
let
one
of
us
on
the
PNP
team
know
because
it
ought
to
be.
If
you,
if
you
have
interest
in
participating,
there
are
lots
and
lots
of
different
ways
that
you
can
jump
in
and,
and
you
know,
make
a
difference
for
the
community.
You
can
give
demos
on
calls
like
this.
We
can,
you
know,
feature
you
as
a
as
a
demo
provider,
which
would
be
awesome.
B
B
You
know
we're
here
for
you
and
we
want
to
make
sure
that
you
can
participate.
If
you
have
an
interest,
there
are
a
number
of
different
places
that
you
can
see
the
output
from
the
the
larger
PNP
effort.
There's
the
Microsoft
365
developer
videos.
There
are
Community
videos,
there's
the
open
source
projects
which
I
think
all
of
them
are
listed
down
below
as
starting
points,
though
each
of
them
has
a
sub
project
as
well.
There
are
sample
galleries,
there
are
more
initiatives
and
samples
and
everything
all
the
time.
B
B
So
we
have
a
number
of
Community
calls
during
the
week.
There's
the
Microsoft
365
platform
call,
which
is
I
believe
if
I've
been
paying
attention
the
one
that's
on
Tuesdays
at
10
A.M,
my
time
on
Eastern
Standard
Time.
At
the
moment
it's
8
A.M
Pacific,
which
would
be
1pm
or
2
p.m:
2
p.m,
Greenwich,
Mean,
Time
and
I'm
not
going
to
do
the
rest
of
the
time
zones
because
it
would
make
my
brain
hurt.
B
Hopefully
you
can
join
us
if,
if
you're
interested
in
things
going
on
with
the
platform
in
general,
there
are
several
other
calls
that
happen
during
the
course
of
the
week
around
or
or
month,
depending
on
the
frequency,
Microsoft
identity
platform
office,
add-ins,
Power
Platform,
the
Power
Platform
Community
has
its
own
special
interest.
Group,
Viva
connections
and
SharePoint
framework,
which
is
this
call,
is
a
special
interest
group.
Lots
and
lots
of
different
ways
to
again
get
involved
and
stay
informed.
B
A
Oh
me,
I'd
love
to
me,
so
thank
you,
Mark
excellent.
Everybody
welcome
to
this
call
as
well
and
excellent
job.
So
far,
Mark
sharing
is
caring.
Is
a
program.
Friends!
That's
going
to
provide
you
Hands-On
guidance.
So
what
does
that
mean?
It
means
that
we're
going
to
join
calls
with
you
and
together
we're
going
to
accomplish
cool
things
like
submitting
your
first
pull
request,
or
perhaps
you
want
to
learn
how
to
write
better
for
the
web.
A
You
want
to
learn
how
to
use
those
samples
that
you're,
seeing
everywhere
we
are
absolutely
going
to
help
you
now.
These
are
safe
space
opportunities,
they're
not
recorded,
so
you
can
ask
any
and
all
questions
without
fear
being
recorded
and
thinking.
Oh,
my
goodness
should
I
already
know
this,
and
then
it's
gonna
go
on
record
forever.
None
of
that's
going
to
happen.
We're
going
to
collaborate
together,
we're
going
to
make
you
a
awesome,
Community,
contributor
and
level
up
your
game
to
an
area
that
you
would
like
so
absolutely
free
of
charge.
A
We've
got
a
Power
Platform
samples
contributor,
coming
up
November
28th
we've
got
new
community
docs
first
time
contributor
and
writing
for
the
web
coming
in
January.
Those
are
getting
scheduled
right
now
with
Hugo
and
Emily
Mancini,
so
don't
hesitate
to
sign
up
for
any
or
all
of
them.
You
can
check
it
out.
Ak
dot,
Ms
forward,
slash,
share,
sharing
is
carrying
now.
A
You
will
get
this
special
one-time
only
badge
for
2022
season
of
getting
so
you
can
absolutely
sign
up
if
you
haven't
already.
We
just
need
you
to
opt
in
AK
dot,
ms4,
slash,
m365pmp,
Dash,
recognition,
a
great
way
to
formally
and
officially
be
recognized
for
the
work
that
you're
doing
that
you
can
show
your
managers
and
clients
that
you're
making
a
difference.
So
thank
you
all
for
being
amazing
part
of
this
community.
We
love
that
you
are
enjoying
this
program
and
even
more
to
come
soon
so
mark
back.
B
A
B
Turns
out,
we
do
need
stinking
badges
and
in
fact
we
have
a
lot
of
them
and
they're
awesome
to
get
they're
nice
to
show
off
to
your
friends
and
family
show
how
important
and
useful
you
may
be.
It
was
an
interesting
little
change
of
sound
in
in
your
while
you
were
talking
David.
It
reminded
me
of
the
the
the
concerts
we
would
go
to
in
the
in
the
gym
back
in
the
1960s
with
the
revolving
speaker.
So
a
little
bit
of
nostalgia
for
you.
B
C
Yep,
let's
be
relatively
quick
as
well
and
just
conscious
about
the
demo
times
on
the
end.
So,
first
of
all,
we
have
the
growth.
This
is
the
growth
curve
and
we
do
have
tens
of
millions
monthly,
active
users
for
all
of
the
custom
components
being
used
within
the
Microsoft
365,
which
are
built
which
cost
SharePoint
framework,
which
is
really
really
cool,
and
the
crowface
is
continuing.
Obviously,
there's
going
to
be
a
bit
smaller
slowness
during
holiday
time
and
we'll
get
back
on
the
growth
track
for
sure
in
next
spring.
C
C
But
key
Point
here
is
that
we
are
enabling
spfx
to
be
used
also
in
in
all
Outlook
and
in
office.com
or
Microsoft
365,
app
as
it's
getting
renamed
and
there's
also
a
lot
of
a
lot
of
new
additional
capabilities
in
the
Viva
side
and
on
the
base
SharePoint
framework
component
side.
So
we're
looking
into
improving
the
platform
all
up
for
all
of
these
different
scenarios,
which
is
called
let's
go
to
the
following
site,
and
this
slide
has
has
not
been
updated.
C
Too
Much
from
the
last
time
so
1.16
went,
live
in
November
15th
teams.
Geography
SDK,
which
is
enabling
traditional
hosts
or
applications,
is
the
key
there.
1.17
is
scheduled
for
first
quarter
in
2023
plot
framework
power
to
Aviva
cards
is
intended
to
go
to
preview,
at
least
in
their
Note
3
18
support,
most
likely.
C
There
react,
update
and
some
of
the
other
updates
as
well
new
features
capabilities,
and
all
of
that
now
some
of
that
might
be
changed
still
because
we
we
of
course
are
working
towards
these
objectives,
but
I
cannot
guarantee
that
all
of
those
will
happen
in
the
1.17,
but
we're
looking
into
potentially
having
again
four
versions
within
2023
crossing
fingers
that
that
will
happen
at
least
three
and
more
announcements
and
more
things
in
the
plans.
But
that's
all
on
my
side.
Let's
move
into
pmpgs
and
Julie.
D
Thank
you.
We
released
version
3.9
on
November
11th.
We
had
some
general
documentation
updates.
We
as
a
contributor
contributed
adding
the
get
site
by
resource
URL
in
the
graph.
We've
also
added
support
for
multi-line
batch
responses
in
a
batch
call,
SP,
Search
and
S
and
suggest
got
the
invocable
ability
for
a
truly
invocable
function
and
we
updated
that
corresponding
documentation.
There
is
a
fix
for
awaiting
the
completed
promises.
D
That
was
a
problem
in
batches
when
using
caching,
so
that
is
fixed
and
the
graph
search
endpoint
was
in
returning
an
improperly
formatted
Root
Drive
and
that
has
been
fixed.
If
you
in
the
future
want
to
see
any
of
the
fixes
that
are
merged
in
between
releases
monthly
releases,
you
can
always
check
out
that
SP
at
V3
nightly
release
that
we
do
nightly
and
you
can
check
out
anything
that
has
been
merged
up
until
that
particular
date
and
time.
As
always,
please
follow
us
m365pmpjs
on
Twitter
back
to
you
mark.
B
E
E
E
So,
if
you're
looking
to
move
and
keep
up
with
the
latest
version-
and
you
can
use
that
guidance
which
will
tell
you
about
all
the
breaking
changes-
we've
deprecated
some
commands
changed
some
aliases
as
well
to
make
things
a
lot
more
consistent
and
we've
also
included
a
ton
of
new
commands
as
well.
So
like
see,
we've
got
eight
new
commands
for
Power
Platform.
We've
got
eight
new
commands
for
SharePoint
online
and
two
for
Azure
direct
Azure
active
directory
check
out
the
release.
E
Notes
for
those
there'll
be
more
coming
in
the
next
few
weeks.
If
you
want
to
install
the
new
version,
use
the
next
tag,
if
you're,
using
npm
or
even
our
Docker
container,
use
that
next
tag
to
get
the
the
latest
version
and
if
you
want
to
follow
us,
get
involved
in
the
conversations
please
follow
us
on
Discord
join
our
server
and
on
Twitter
at
CLI,
Microsoft,
365.
and
oh
just
wanted
to
say.
Hacktoberfest
super
super
amazing.
E
B
F
I'm
here
so
yesterday
we
released
the
version
312
for
react,
controls
and
311
for
reuse
for
property
controls.
Both
versions
have
a
lot
of
fixes
improvements,
and
one
of
the
main
themes
in
there
is
support
for
Xbox
One
16.
So
basically,
we
are
R
Ali
and
with
the
expects
releases.
So
if
you
want
to
learn
more
check
the
release,
notes
and
thank
you
back
to
you
tomorrow,.
B
All
right
that
was
nice
and
short
and
sweet
PNP,
modern
search.
Do
we
have
somebody
to
talk
about
that
or
shall
I
just
go
on
about
how
wonderful
that
is?
We
have
I
know
they
have
a
new
version
4.8,
which
is
a
beta
and
they're
hoping
to
release
a
new
version
in
the
beginning
of
December.
Looking
forward
to
that,
I
know,
there
are
a
couple
of
fixes
in
there
I'm
looking
forward
to
this
is
an
awesome
set
of
web
parts
that
you
can
use
to
build
custom
search,
driven
Solutions.
A
Yes,
I
will
take
that.
Thank
you
Mark.
So,
as
you
can
see
friends,
we
have
a
plethora
of
samples
that
have
been
processed.
So
thank
you
all
for
your
patience,
a
lot
of
a
lot
of
processing
done
here
and-
and
we
really
appreciate
all
these
samples,
just
in
the
interesting
time
we're
not
going
to
cover
each
and
every
single
one
of
them.
We
will
include
them
in
the
blog
posts
and
all
that
and
thank
you
so
much
again
for
all
that.
A
A
B
C
B
B
B
C
B
G
Okay,
hello,
welcome
everyone,
and
thanks
for
the
opportunity
again
to
present
My
Demo
here
today,
I'm
going
to
talk
about
a
utility
web
part
to
manage
the
spfx
form
customizer
for
your
SharePoint
list
and
library's
a
little
bit
about
myself.
I'm
Siddharth,
vakasia
I
am
in
Microsoft
MVP
and
independent
consultant
I
love
to
work
on
SharePoint
teams,
app
powertratform
azure.net.
These
are
some
of
the
social
Hunters
through
which
you
would
be
able
to
connect
with
me.
G
G
So
let's
talk
about
driving
Factor,
so
we
we
all
know
with
spfx
1.5
a
new
type
of
extension,
which
is
from
customizer
extension,
has
been
introduced
through
which
we
would
be
able
to
customize
the
form
experience
for
the
list
and
Library.
So,
basically,
we
would
be
able
to
associate
custom
new
form,
custom,
edit
form
and
custom
display
form
of
for
our
list
and
libraries
right.
G
G
So
this
is
a
feature
any
kind
of
summary
of
the
web
part
which
we
are
going
to
see
today.
It's
a
simple
user
interface,
which
will
give
you
to
associate
and
remove
a
form
customizer
with
list
10
libraries
you
can
use
it
across
course
site
collection.
It
means
you
as
it
is
an
admin
or
a
developer
utility
web
part.
You
don't
need
to
deploy
this
web
part
on
every
site
collection
you
can
deploy
it
on.
G
One
side,
collection,
and
if
you
have
access
to
various
site
collection,
you
would
be
able
to
deploy
it
on
various
list
from
here
itself.
There
is
an
ability
to
select
site
list
and
content
type
via
drop
down,
so
you
don't
have
to
manually,
enter
the
names,
and
everything
then
also
has
the
ability
to
associate
and
remove
the
form
customizer.
G
So
just
a
quick
technical
note,
the
crust
of
the
you
know,
web
part,
is
just
that
it
is
making
a
rest
API
call
to
update
the
content,
type
property
of
a
particular
list,
so
the
association
of
the
form,
customizer
extension
needs
to
be
done
via
content
type.
It
is
not
at
the
list
and
Library
level
so
with
the
version
with
the
release
of
the
form
customizer
extension.
G
We
got
four
new
six
new
properties,
in
fact,
for
associating
this
component
type
with
a
particular
content
type
right,
and
to
do
that,
what
you
can
do
is
we
can
do
a
patch
request
and
the
object
which
we
have
to
pass
to
that
patch
request
on
particular
content
type
is
where
you
can
set
new
form:
client-side
component
ID
display
from
client-side
component
ID,
edit
from
client
side
component
ID
and
the
properties
associated
with.
If
you
want
to
make
your
extension
configurable
right
so
yeah
with
this,
let's
quickly
see
the
demo.
G
So
what
we
have
is
now
consider
there
will
be
two
part
to
the
demo
as
such.
Consider
because
this
is
an
utility
web
part.
So
we
assume
that
there
is
already
an
spfx
form
extension
solution,
which
is
already
deployed
on
a
targeted
site
collection
which
basically
does
actually
gives
the
experience
of
new
edit
and
view
form
of
a
particular
list
and
libraries
on
which
we
wanted
to
associate
so
we'll.
Take
an
example
of
this,
where
we
associate
a
particular
solution
to
this
particular
list
right
now.
G
What
we
are
seeing
is
that,
once
you
click
on
it,
it
is
opening
out
of
the
box
view
after
the
Box
forms,
the
edit
View
and
the
list
form
of
a
particular
list
right
and
what
we
will
do
is
this
is
another
solution.
This
is
a
simple
crude
demo
solution
of
a
form
extension
wherein
we
have
just
two
columns
title
and
description
column,
and
using
this
title
and
description,
we
are
basically
demoing
the
crude
operations
on
a
particular
list
and
libraries
right.
G
So
now
we
see
that
it
is
default,
forms
which
have
been
loaded
and
I
have
solution
which
is
deployed
here.
So
this
is
the
web
path
the
which
we
are
focusing
on
today.
So
what
you
get
is
you
get
an
option
to
select
a
site,
so
we
will
select
the
site
as
targeted
site
collection
where
the
list
would
be.
You
can
also
put
custom
site
URL
here,
then
you
got
to
choose
which
list
or
library
to
which
you
wanted
to
associate
it
with
so
I'll
select
form
customize
the
demo.
G
Then
you
can
choose
the
content
type.
So,
as
Association
is
done
via
content
type,
you
can
choose
it
and
by
default
there
would
be
item
content
type,
which
would
be
already
there
for
the
list
right
and
then
this
is
where
you
have
to
put
the
client
component
ID
now
from
where
do
we
get
this
client
component?
Id
is
on
the
solution
on
the
base
solution.
Where
you
have
your
customization
being
deployed,
there
would
be
a
manifest
file
in
the
Manifest
file.
You
would
see
that
there
is
a
unique
ID
associated
with
each
component.
G
You
can
see
that
the
solution
has
been
associated
with
the
particular
list
library.
On
the
new
item
form-
and
this
is
the
solution
which
has
been
deployed
so
here
we
have
test
I'll
just
put
the
test
entry
here
and
I'll,
just
save
it
and
what
you
can
see
is
you
can
see
that
by
default
it
has
been
associated
with
it
and
the
the
part
is
also
deployed,
and
then
the
basic
operation
has
been
done
right.
So
this
is
overall
the
demo
of
the
utility
weapon
which
we
have.
G
You
also
get
to
choose
to
remove
the
association
by
basically
selecting
the
same
component,
ID
and
everything,
and
then
just
say
that
if
you
wanted
to
disassociate
what
we
have
to
do
is
we
have
to
empty
the
component
ID
of
a
particular
property
which
is
available
and
it
will
automatically
disassociate
and
you
can,
by
default,
CD
out
of
the
box
forms
which
are
available
right.
So
with
this,
let
me
quickly
go
to
the
chord
walkthrough.
G
So
we
have
a
site
picker,
on
which
we,
if
we
give
just
the
context
of
the
web,
part
where
it
is
running
by
default,
it
will
able
to
list
down
all
the
sites
which,
where
we
have
access
right
and
then
what
we
have
is
we
have
a
list
speaker
so
based
on
the
site
selected.
We
are
using
list
record
and
we
are
giving
the
site
URL
as
in
the
context
property
and
based
on
that
it
will
automatically
give
list
down
all
the
list
and
libraries
and
populate
the
list
maker.
G
Now
next
thing
is
to
select
the
content
type
which
we,
which
we
are
seeing.
One
thing
is
I
know
there
is
an
PNP
react
control
which
is
available
for
selecting
a
content
type
also,
but
when
I
was
deploying
when
I
was
developing
this
web
part,
which
probably
was
in
September
sometime,
there
was
an
issue
with
that
content
web
part
which
we
were
not
able
to
use
it
and
which
I
believe
has
been
fixed
in
the
latest
release.
G
So
I
might
have
to
change
this
to
use
that
selected,
but
right
now,
I
am
using
the
custom
drop
down
to
basically
get
the
content
type
and
display
the
content
type
in
the
drop
down
right.
So
next
thing
is
yeah,
so
this
is
the
code
using
pnpgs
from
where
we
are
getting
the
content
type
and
just
associating
the
content
type
and
putting
it
in
the
state
object
so
that
the
drop
down
gets
filled
with
the
content
type
Associated
to
the
selected
list.
G
Now.
The
next
thing
is:
these
are
simple
check
boxes,
which
basically
tells
you
know
if,
with
whom
we
want
to
associate
edit
view
a
new
form,
and
then
this
is
the
method.
The
ad
form
customizer
method.
So
this
is
the
main
method
which
basically
does
the
validation
first,
whether
the
required
Fields
have
been
added
and
then
what
it
does.
It
gives
Associated
via
a
method
from
the
by
using
the
updating,
the
content,
type
properties
right
so
again
same
thing:
we
are
getting
the
content
type
URL.
G
We
are
seeing
whether
it
was
an
ad
or
remove
Association,
and
then
we
are
updating
it
via
HTTP
client
request.
Now,
I'm
not
sure
if
I
am
right
or
wrong,
but
the
thing
is
that
I
try
to
use
pnp.js
to
update
the
content,
type
property
using
pnpgs
method,
but
somehow
I
did
not
find
the
update
method.
So
I
went
ahead
and
used
HTTP
client
object
method
by
using
the
getting
the
content
type
URL
from
the
pnpgs,
we're
just
making
the
patch
request
by
creating
the
body
object,
which
is
there.
G
G
G
It
will
just
empty
the
client-side
component
ID
so
that
we
can
buy
default,
see
the
old
out
of
the
box
forms
which
are
available
so
yeah
in
a
way
this
was
the
you
know,
simple
utility
web
part
as
say,
this
is
a
targeted
to
developers
or
administrator,
which
would
give
them
an
ability
to
provide
an
user
interface
through
which
they
can
associate
a
form
customizer
being
deployed
to
single
disk
library
or
across
multiple
site
collections.
That's
it
from
my
side.
Thank
you.
Mark
over
to
you.
B
H
Thanks
right:
let's
yes,
so
yeah
fluent
your
line,
I'm
Let's
hit
the
slides
and
actually
get
into
this.
So
my
name
is
Nick
Brown
I'm,
a
senior
365
developer
and
architect
at
jisk,
been
working
in
the
education
sector
since
2008
I
do
not
look
as
old
as
I
am
in
any
picture
or
in
real
life.
I've
been
working
on
the
platform
for
11
years
now
yeah.
H
This
is
the
probably
the
second
year
that
I've
actually
been
contributing
to
the
community
and
absolutely
loving
it
and
hoping
to
do
some
more
demos.
So,
let's
get
into
the
actual
grip,
so
I'm
gonna
talk
about
what
is
fluent
UI.
What
is
the
current
version
of
fluent
UI
talk
about
the
new
version
version.
Nine!
Give
you
a
demo
of
what
that
looks
like
and
go
go
into
some
of
the
codes.
I'll
try
and
make
this
as
quick,
because
there
is
another
demo
after
me,
so
yeah
what
is
fluent
UI!
H
It's
a
collection
of
UI
Frameworks,
created
by
Microsoft,
to
bring
platform
together,
it's
developed
by
Microsoft
URL
that
you
should
all
know
if
you're
developing
anything
to
do
with
SharePoint
is
the
URL.
That's
on
screen
yeah
built
for
one
platform
yeah,
it
is
the
company
fluent
ui7
is
what
ships
with
spfx
and
in
total,
with
fluent
UI,
Knight,
eight
and
there's
128
or
so
components
in
the
library.
So
it's
a
very,
very
extensive,
Library,
seven
and
eight.
H
So
yeah
for
those
of
you
who
don't
know
about
the
fluent
UI
website,
this
is
where
you
can
go
and
find
all
of
your
controls
that
you
want
to
use
in
your
lovely
spfx
packages.
Your
buttons
and
everything.
You've
got
your
code
that
you
want
to
use.
If
you
want
to
use
it,
you
it
drop
downs,
and
these
are
all
using
what
I
would
call
the
SharePoint
style
of
controls,
which
is
very
good
for
SharePoint,
but
it's
getting
it.
It's
actually
starting
to
show
that
it's
not
quite
The
Styling
anymore,
especially
around
Outlook.
H
It's
getting
a
bit
rounder
with
their
boxes
and
with
their
buttons,
but
there's
stuff
in
the
old
in
the
fluent
UI,
seven
and
eight
that
you
can't
get
in
the
new
one
which
I'll
go
through
in
a
second
but
absolutely
amazing
controls
and
the
source
code
is
there.
You
can
literally
just
go
into
the
source
code,
Tab
and
drag
and
drop
so
fluent.
Ui
9
is
the
new
version
that
Microsoft
is
making
it's
Windows
11
styled
react
based,
it
merges,
and
this
is
the
big
one.
It
merges
eight
and
North
Star
together.
H
So
anybody
that's
developing
stuff
for
teams
still
no
very
heavily
about
Northstar,
and
this
is
merging
that
into
one
Library.
It's
an
ongoing
project
and
currently
there's
only
60
components.
So
you've
got
a
lot
more
in
the
older
version
of
fluent
UI,
but
they
are
heavily
developed
and
fluent
UI,
9.
and
yeah.
The
big
thing
there
is:
it
merges
eight
and
North
Star
into
one
mod
one
thing
so
quick
little
video
now
of
the
fluent
UI
9
react
website.
H
H
H
Yeah.
You've
got
your
compound
buttons,
your
split
buttons,
your
toggle
buttons.
You've
got
your
tab
list
in
here
as
well.
Wait
and
as
you
can
see,
it
looks
a
lot
more
like
what
you
get
with
Windows
11
and
The
Styling
around
that
what
else
have
I
got
in
here?
Yeah
we
go
through
what
the
vertical
appearance
looks
like
and
yeah.
We've
got
the
sliders.
H
We've
got
the
dialogues
as
well,
and
you
can
see
that
they
look
a
lot
more
like
Windows
11
than
they
would
the
older
style
a
lot
more
in
keeping
with
Outlook
and
that
so
I
set
the
demo
and
show
you
the
fluent
UI
9
demo
that
I've
put
together.
This
has
actually
been
updated
thanks
a
vesser
for
releasing
1.16
a
couple
of
days
ago,
it
has
been
up
to
I,
have
updated
my
the
module.
It
probably
hasn't
hit
the
repo.
H
Yet
so
yeah
I've
added
this
into
a
com
site
here
just
installed
the
app
in
the
normal
way
and
we'll
go
and
see
where
it
is
now
so
go
up
to
the
Flink
UI
Tab
and
you
can
see
now.
It
looks
very,
very
similar
to
The
Standard
fluent
UI
package
and
that's
some
of
the
magic
that
I'm
doing
in
the
background.
But
you
can
see
subtle
differences,
especially
in
the
buttons
the
corners
aren't
more
rounded.
H
The
last
part
of
this
demo
is
just
going
to
show
you
quickly
that
I'm
hoping
that
they're
going
to
merge,
merge
all
the
fluent
uis
into
one
but
fluent
UI,
9
isn't
probably
where
I
would
say
at
a
state
that
it's
good
enough
for
swapping
over
to
yet
it's
getting
there.
It
is.
It
says
it's
a
lot
faster
to
use
and
using
more
of
the
modern
paradigms
for
coding
them.
So
you
can
see
here
I'm
showing
off
that
I've
used
the
table.
H
H
So
you
can
see
here
it's
picking
up
the
style,
colors
from
teams
and
yeah,
there's
not
much
more
to
say
it's
picking
up
the
style
color
from
teams,
but
here's
the
big
thing
that
happens
when
you
go
into
dark
mode.
It's
pulling
across
the
dark
mode
theme
for
teams
and
that's
native
in
the
I'm
doing
a
bit
of
coding
to
actually
make
that
happen.
But
the
themes
are
actually
native
and
fluent
UI.
H
Nine
and
we'll
go
now
into
something
that
I
recorded
probably
an
hour
before
this
demo,
and
that
is
I
managed
to
get
my
outlook.com
functionality
working
in
this
thanks
in
part,
two
obviously
SPF
x16,
and
you
can
see
there
that
even
toggling
into
dark
mode.
The
theme
is
changing
inside
of
Outlook
as
well.
H
So
let's
have
a
look
at
some
of
the
code,
so
the
first
thing
you'll
need
to
do
is
actually
install
the
flute.
Ui
react
components.
That's
done
using
the
standard,
npm
stuff,
I'm
doing
the
short
times
here,
optionally.
If
you're
doing
this
from
the
get
from
the
start,
you
can
actually
uninstall
the
older
version.
The
office
UI
fabric
react
components
because
you
don't
need
them
foreign
see
if
this
is
going
to
work
properly.
H
H
I
am
also
pull
it.
I've
pulled
in
a
shim
from
the
dots
that
Microsoft
has
released
to
map
across
the
theme.
This
is
slightly
different
from
the
code.
That's
currently
in
GitHub.
That
pull
request
is
currently
going
through
to
move
over
to
this.
It's
something
that
the
fluent
UI
9
team
has
released.
I've
used
an
enum
then
to
actually
set
what
app
mode
the
app's
running
in
and
you
can
see
there
that's
been
updated
for
spfx
16
1.16.
H
We
are
just
obviously
setting
initializing
some
config
variables
there
and
then
the
one
of
the
big
bits
that's
going
in
is
using
SPF
x16,
obviously
pulling
across
from
the
team's
JS
SDK.
Well
like
what
app,
what
mode
the
app
is
running
in,
if
it's,
if
the
SDK
isn't
there,
it's
actually
in
SharePoint
mode,
so
we're
just
picking
that
up
and
popping
that
into
a
local
variable,
so
yeah
the
actually
rendering
the
components
were
actually
still
in
this
in.
H
But
what
we
need
to
do
is
wrap
wrap
the
actual
control
itself
in
the
fluent
UI
provider.
So
this
is
just
us
initializing
it,
but
instead
of
passing
that
directly
to
the
renderer,
we're
saving
that
in
a
variable
and
then
we're
wrapping
that
we're
creating
a
fluent
provider.
Variable
then-
and
this
is
where
we're
doing
some
of
the
magic
around
setting-
which
theme
we
want
to
use
depending
on
which
app
mode
we're
in
so.
H
H
We
just
need
to
do
a
bit
of
work
here
just
to-
and
this
is
where
the
shim
comes
in-
we're
passing
the
theme
that
we
get
through
as
a
read-only
vet,
read-only
item
from
spfx
and
passing
that
through
to
the
shim,
which
is
mapping
all
of
the
colors
onto
the
new
fluent
UI
framework
and
I,
believe
I
show
the
shim
in
the
next
one
yep,
so
I've
slightly
concatenated
this
and
remove
some.
This
is
available
from
the
fluent
UI
docs
site.
H
There
we're
pulling
through
the
buttons
and
I'm
just
showing
off
how
it
works
with
a
tab
list
and
then
the
how
dividers
work
and
some
of
the
buttons
work.
Full
Source
codes,
I,
think
David
or
somebody
has
already
probably
shared
the
link
to
the
repo
for
this
one
thing
to
note
is
Stacks
currently
do
not
exist
in
fluent
UI
9,
so
those
that
are
very
familiar
with
using
Stacks
they're,
not
influent,
UI
nothing.
Yet
they
may
not
come
to
your
own
line.
H
B
I
I
Besides
that
two
colleagues
of
mine
and
and
I
founded
a
small
company,
you
might
already
know
or
heard
of
it's
the
Hub
site,
365
ed.com,
if
you
don't
know
it.
In
short,
it's
a
platform
where
you
can
find
curated
content
about
Microsoft,
365
and
Azure.
It's
like
a
newsletter,
a
reader
and
a
dictionary
web
platform.
So
it's
pretty
cool
and
you
might
just
want
to
check
it
out.
If
you
want
to
reach
out
to
me
or
hubsite
365
regarding
any
subject,
you
can
do
so
over
our
social
media
channels,
Twitter
and
Linkedin.
I
So
today,
I'm
going
to
show
you
a
little
spfx,
webpart
I've
built
and
this
webpart
visualizes
all
this
on
the
site
in
an
entity
relationship
diagram.
Therefore,
we
are
using,
of
course,
the
SharePoint
framework
spfx
pinpjs,
to
pull
all
the
data
from
SharePoint
and
gojs
to
visualize
everything
in
an
ERD.
I
Well,
why
should
you
do
that?
Of
course
it's
pretty
cool,
and
but
the
idea
came
actually
out
of
a
practical
case.
I
was
working
on
a
project
where
a
colleague
of
mine
boot,
a
complex
list,
structure
and
I
just
thought:
wouldn't
it
be
nice
to
have
a
tool
which
is
showing
yeah
the
complete
structure
in
an
entity,
relationship
diagram
and
then
I
thought.
Okay.
That
might
be
not
that
hard
and
yeah.
I
If
there
is,
of
course,
an
npm
package
which
will
do
most
of
the
work
for
me
and
luckily
there
was,
and
therefore
it's
gojs
I'm
using
for
that
and
yeah
highlights
of
the
solution
is,
of
course
we're
realizing
everything
in
the
ERD
we're
using
The,
spfx
Single
part
app
page
to
have
yeah
more
space
to
visualize
everything
of
it.
So
it's
not
in
a
small
web
part,
and
then
we
do
have
yeah
optional.
I
I
I
I
And
here
it
is,
of
course
it's
a
little
bit
small
Zoom
a
little
bit
in
here
and
you
can
see
what
it
has
done
at
the
beginning.
It's
loaded
all
the
sites
and
all
the
fields
and
and
out
of
the
lookups
of
all
the
fields.
It
builds
the
relations
and
after
that,
it's
going
to
put
everything
into
the
gojs.
I
So
that's
that,
and
on
top
of
that,
there's
one
command
bar
just
with
a
few
options.
Here's
one
refresh
button,
usually
you
will
see
yeah
the
first
time.
You
will
start
this.
You
will
see
that
and
that's
when
it's
loading
all
the
set,
all
the
lists
after
that,
it's
cached.
So
when
it
opened
up
it
will
just
refresh
immediately.
I
List,
so
it's
a
little
bit
more
stuff.
Usually
you
can
yeah
switch
off
the
alerts
you
can
see
in
the
tables
on
the
lists.
I've
added
also
some
alerts,
maybe
some
sometimes
it's
an
info.
Sometimes
it's
in
bonding,
for
example,
when
you
close
to
reaching
the
threshold
limit,
you
can
switch
off
these
and
you
can
switch
also
of
the
fields
and
then
you
have
a
yeah,
a
smaller
ERD.
I
Okay,
that's
it
for
the
web
part.
So
what
I'm
using
in
here
is
gojs,
and
that
was
basically
also
where
I
started
from
to
search
for
where
yeah,
where
do
I
start?
Which
package
can
do
the
visual
visualization
and
code.js
can
do
a
lot
of
more
stuff.
As
you
can
see
here,
I
started
basically
from
this
sample
here.
I
As
you
can
see,
it's
pretty
close.
So
the
work
of
the
visualization
was
not
that
much
and
there
was
also
an
npm
package
where
I
started
from.
So,
if
you
wouldn't
want
to
do
anything
like
this,
you
can
go
for
that,
and
one
thing
to
mention
is
that
you
can
see
you
see
it
also
here
in
the
top
left
corner:
it's
if
you
go
I,
don't
know
productive
in
any
way
with
that,
you
would
need
to
acry
a
license
for
that.
I
guess:
sell!
I
Okay!
Let's
have
a
quick
look
in
the
code.
Try
to
keep
it
short,
so
the
webpart
itself
is
pretty
simple.
I
basically
did
nothing
here
as
it.
It
still
has
it
generated
from
the
yeah,
from
the
generator
and
in
the
component
itself.
It's
it's
a
functional
component,
so
we're
using
yeah,
react
new
state
and
use
ref
and
so
on.
I
We
do
have
one
state,
which
is
basically
the
data
for
for
gojs,
and
we
have
a
few
State
variables
for
the
command
block
like
yeah,
switching,
no
loads
off
and
so
on.
What
you
have
seen
the
jsx
is
also
pretty
simple:
you
see
the
command
bar,
you
see
the
loading
progress
indicator
and
when
everything
is
loaded,
we're
just
passing
everything
into
the
react
diagram
component
from
gojs.
I
So
when
this
fires
up
there's
one
use
effect
or
yeah
component
did
Mount,
and
this
is
also
firing
when
some
of
my
variables
change
in
the
command
bar
and
we
just
do
our
load
diagram
function
and
this
one
is
doing
all
the
magic.
And
so
we
have
one
function,
get
SharePoint
slide
data
and
in
here
we're
let's
jump
into
it.
We're
just
doing
all
the
epmp.js
stuff,
so
yeah,
creating
a
context
out
of
the
spfx
context
and
so
on.
I
Iterating
over
all
lists,
iterating
over
all
fields
and
yeah,
Identify,
some
alerts
and
so
on,
and
putting
all
this
data
in
some
abstract,
I
would
say:
abstract
interfaces
or
model
and
the
model
which
has
come
out
is
just
tables
and
relations.
And
after
that,
after
we
got
this
bundle
of
data,
we
need
to
transform
it.
So
it's
like
an
abstract
bundle,
I
would
say,
and
if
you
I
don't
know,
maybe
you
want
to
go
or
want
to
do
something
similar
or
different.
I
I
So
you
could
yeah
just
also
modify
whatever
is
getting
pulled
out
of
here
or
even
have
your
own
structure.
And
then
you
can
go
here
and
have
a
different
I.
Don't
know,
mapping
function
because
this
function
is
just
mapping
the
data
from
I.
Don't
know
my
internal
structure
to
the
structure,
I
need
for
gojs.
So
if
we
go
here,
you
can
see
it's
just
a
little
bit
mapping
and
on
top
of
here
some
definition
here
on.
I
You
can
see
here's
the
little
mapping
table
and
it's
mapping
by
type
so
by
the
type
of
the
column,
I'm
mapping
yeah
the
color,
as
well
as
the
little
figure
which
is
rendered,
then
is
it
a
circle
or
a
diamond
whatever
and
yeah
it's
just
a
little
bit.
Mapping
and
yeah
at
the
end,
we're
just
setting
our
state
and
everything's
getting
re-rented.
So
pretty
simple
and
pretty
much
fun
and
yeah
I!
Guess
that's
for
me!.
B
Yeah
that
was
really
cool.
I,
actually
think
I
want
to
download
that
and
check
out
some
of
my
data
models.
That's
that's
awesome,
thanks
and
also
congratulations
on
doing
your
first
PNP
demo,
and
maybe
congratulations
isn't
the
right
thing.
You
did
a
great
job,
so
thanks
for
doing
it,
so
thanks
Sid,
heart,
Nick
and
Nicholas,
and
we
really
appreciate
you
doing
your
demos
today
makes
these
calls
exciting
and
and
new.
B
So
thank
you
for
joining
us.
The
recording
will
be
available.
If
you
try
to
access
the
recording
from
from
this
actual
chat
in
teams,
you
won't
actually
be
able
to
do
it.
So
just
wait
for
the
the
video
to
be
posted
to
the
YouTube
channel
and
make
sure
you
follow
us
on
Twitter,
Microsoft,
365,
Dev
or
M365
PNP
thanks
a
lot
for
joining
us,
and
the
next
call
will
be
on
December
1st
same
that
time.
Same
bat,
Channel,
different
bat
presenter
hope
you
all
have
a
great
day.