►
Description
In this 11-minute developer-focused demo, Niklas Wilhelm steps through this SPFx web part built to help Admins visualize data in a SharePoint site using an Entity Relationship Diagram (ERD). PnPjs pulls all data from SharePoint and GoJS generates the ERD visualization. Install the web part as an app page web part. Loads all sites, lists, fields, relationships, then dumps data into GoJS, add alerts for threshold limits. Uses SPFx, PnPjs and GoJS. Practical use case – understand your site’s data model / list structure. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 17, 2022.
Demo Presenter
• Niklas Wilhelm (NetForce 365) | @NiklasWilhelm4
Supporting materials
• npm - gojs-react | https://www.npmjs.com/package/gojs-react
• Tools – GoJS - Build Diagrams for the Web in JavaScript and TypeScript | https://gojs.net/latest/index.html
• Sample - SP Site ER Diagram | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnpjs-spsite-er-diagram
Learn more
• 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
And
I
live
in
Germany
and
currently
I
do
work
as
a
Microsoft
365
architect
for
an
I.T
consultant
company
called
ICT.
Besides,
that
are
two
colleagues
of
mine
and
and
I
founded
a
small
company.
You
might
already
know
or
heard
of
it's
the
hubsite
365
at
Acom.
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
one
platform.
So
it's
pretty
cool
and
you
might
just
want
to
check
it
out.
B
B
So
today,
I'm
going
to
show
you
a
little
spfx,
webpart
I've
built
and
this
webpod
visualizes
all
this
on
the
site
in
an
entity
relationship
diagram.
Therefore,
we
are
using,
of
course,
the
SharePoint
framework,
spfx
PNP
JS,
to
pull
all
the
data
from
SharePoint
and
gojs
to
visualize
everything
in
an
ERD.
B
Well,
why
should
we
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.
B
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.
B
You
can
show
and
hide
alerts,
and
Fields
and
alerts
are,
for
example,
also
showing
you
I,
don't
know
if
you
have
issues
on
versioning
or
you're,
reaching
the
item
threshold
by
the
limit
and
so
on,
and
you
can
also
download
your
entity
relationship
diagram
as
an
image.
Okay.
So
that's
so
that's
it
for
the
introduction,
let's
jump
into
the
demo,
just
switch
over
to
that
screen.
B
B
B
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.
B
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.
B
B
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.
B
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
this
is
also
here
in
the
top
left
corner.
B
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
so.
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
derivated
from
the
yeah,
from
the
generator
and
in
the
component
itself.
It's
it's
a
functional
component,
so
we're
using
yeah
react,
use,
State
and
use
ref
and
so
on.
B
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
the
alerts
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.
B
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
PNP
JS
stuff,
so
yeah,
creating
a
context
out
of
the
splx
context
and
so
on.
B
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
get
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.
B
B
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
napping
and
on
top
of
here
some
definition
here
on.
B
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
down.
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
is
getting
re-rented.
So
pretty
simple
and
pretty
much
fun
and
yeah
I!
Guess
that's
for
me!.