►
Description
Building Data dashboard web part using React and Chart.js demo taken from the SharePoint dev Special Interest Group recording at 3rd of January 2019.
Presenter - Kyle Schaeffer (Spiritous) - @kyleschaeffer
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
So
it's
just
basically
teaching
folks
how
to
build
web
parts
and
extensions
in
SharePoint
framework.
So
it's
kind
of
designed
for
anybody
who's
either
a
total
beginner
at
SharePoint
and
office
365
up
to
people
that
have
been
doing
it
and
know
how
to
do.
It
is
kind
of
want
to
hone
their
skills
a
little
bit.
But
I
thought
it
was
a
cool
web
part
that
kind
of
came
out
of
that
class
and
I
just
wanted
to
show
that
to
you
guys
really
quickly,
because
it
uses
a
lot
of
the
stuff.
A
That's
a
part
of
the
whole
SharePoint
development,
SharePoint
framework
development,
community
and
I
thought
it'd
be
a
good
opportunity
to
kind
of
go
through
that.
You
guys
can
see
an
example
of
something
somebody's
done
and
also
I'll
provide
the
source
code
for
this
at
the
end
too,
and
as
you
guys
can
take
a
look
at
that.
So
first
of
all,
I
have
here
in
the
terminal
I
have
my
local
workbench
running
and
if
I
switch
back
to
the
the
browser
here,
I'll
show
you
this
web
part
that
we
we
actually
have
up
and
running.
A
We
call
it
for
dashboard
short
for
dashboard.
So
you
add
the
web
part
and
you'll
see
right
away.
You
get
the
the
SPF.
X
controls
react
package.
It
has
the
web
part
title
control,
which
I'll
show
you
guys
this.
Second,
it
also
has
this
placeholder
control
and
all
of
these
PNP
controls,
the
the
PNP
community
and
everybody.
A
Hardly
because
it's
all
styled
it
all
looks
great,
so
definitely
highly
recommend
a
lot
of
this
stuff,
but
basically
the
way
this
web
part
works
is
it's
all
about
taking
data
and
then
visualizing
it,
and
so
we'll
just
go
through
a
quick
example
or
create
a
you
know,
sample
web
part
here
and
we'll
hit
select
list
which
is
going
to
open
the
property
pane
and
basically
the
way
the
web
part
works.
Is
you
select
the
list
now
we're
in
the
local
workbench?
A
This
is
going
to
be
mock
data
that
we
have
here,
but
so
we
just
have
these
sample
lists,
and
then
you
select
fields
and
it
kind
of
gives
control
to
the
user
over
how
they
want
to
visualize
their
data.
So
in
a
in
the
live
version
of
this,
which
I'll
show
you
in
a
second
in
the
remote
workbench
is
going
to
use
web
services
to
get
this
data.
So
it's
gonna
go
out
and
say
what
are
all
the
lists?
Okay,
now
that
you've
selected
a
list.
A
What
are
the
fields
on
that
list
and
then
you
can
select
them
and
it
basically
charts
that
data
and
visualizes
it,
and
then
you
can
furthermore,
use
a
chart
type
to
actually
change
the
visualization
to
various
chart,
types
that
you
see
here
and
it's
using
chart
KS,
which
is
I,
think
it's
a
really
good
entry
sort
of
visualization
thing,
because
it's
just
so
easy
to
use
so
I'll
show
you
guys
kind
of
how
that
works
in
a
second.
But
it's
actually
super
easy
to
implement
in
the
web.
A
Part
didn't
take
much
time
at
all
and
basically
what
this
does
is
gonna
take
lists
data
and
it's
gonna
visualize
it.
However,
you
configure
it
in
the
web
part
itself
and
then
you
can
kind
of
get
this
refresh
button
to
update
it
at
any
time.
So
it's
pretty
simple
web
part,
but
it's
doing
a
lot
of
things
here
that
come
demonstrate
a
lot
of
the
basic
features
of
SharePoint
framework
webparts.
We
also
built
a
custom
color
picker
control,
so
this
is
actually
a
custom
control.
A
Normally
the
color
picker
you
would
have
to
kind
of
hard
code
like
I
want
these
five
colors,
but
we
wanted
to
actually
have
a
color
array
so
you'll
see
here
we
get
as
we
go
through
the
series
of
data.
It
goes
blue,
green
teal
and
then
it
repeats.
So
if
you
want
to
add
additional
colors,
you
just
click
on
the
plus
and
you
can
have
as
many
colors
as
you
want,
and
this
control
actually
works
on
a
tooltip.
So
you
could
pop
it
out
and
you
know,
add
a
different
color.
A
You
can
change
the
Alpha
or
whatever
and
you
can
delete
colors
or
whatever,
but
you
can
see.
I
can
I
can
kind
of
create,
as
many
of
those
colors
as
I
need
for
my
particular
visualization
to
kind
of
get
a
full
array
of
options.
If
you
will,
but
it's
all
pretty
simple,
you
know
in
terms
of
its
execution
again.
A
This
was
designed
and
built
for
a
class
an
introductory
level
class,
so
we
didn't
get
too
in-depth,
but
we
did
go
through
the
process
of
building
all
these
controls
out
and
in
utilizing
a
lot
of
those
PNP
solutions
that
are
available
in
the
community,
which
is
great
so
I'll
just
show
you
the
same
thing
really
quickly
and
the
remote
workbench
that
I
have
opened
here.
So
we'll
go
ahead
and
we'll
add
that
same
web
part
here.
A
So
you
can
see
what
it
looks
like
is
if
we
were
to
use
real
live
SharePoint
data,
so
you
can
see
here.
I'm
gonna
get
the
full
list
of
lists
in
my
particular
site
that
I'm
on
in
this
workbench.
So
perhaps
I
want
to
pull
up
the
system
status
list,
and
then
you
can
again.
You
select
the
fields,
the
first
field,
you
select,
it
becomes
the
series
title.
A
So
that's
why
it's
showing
these
series
up
here
and
then
you
select
any
additional
fields
and
they
become
the
data,
that's
plotted
on
the
x-axis
down
below
and
then
you'll
see
you
get
a
little
loading
screen
and
all
of
the
stuff
you
see
here.
These
are
all
controls
from
either
the
the
office
you
have
fabric
or
from
the
again
the
PNP
controls
they're
available.
A
So
it's
all
pretty
simple
and
it's
implementation
and
really
minimal
styling
that
we
had
to
do
during
the
class,
because
it's
all
just
kind
of
built
in
to
the
to
the
actual
controls
that
we
just
dropped
in
to
the
solution-
and
you
can
see
here
you
can
do
that.
Some
nice
visualizations
I
had
an
example
of
one
that
we
built
out
using
these
webparts
using
a
Deathstar
example.
We
want
to
track,
you
know.
How
are
we
doing
that
our
Deathstar?
Are
we
doing
a
good
job?
How
much
is
it
charged?
A
So
that
being
said
again,
look
at
the
technology
behind
the
scenes,
I'll
just
kind
of
do
a
brief
overview
and
I
want
to
take
up
too
much
again.
I'll
give
you
guys
the
source
code
for
this,
but
it's
using
charts
a
s.
So
it's
just
plugging
that
data
in
it's
also
using
a
lot
of
SPF
X
property
controls
which
are
awesome
so
those
list
pickers
and
the
field
pickers
and
stuff
or
for
the
most
part
using
either
a
a
list
or
a
field
list
picker
or
a
multi-select
or
whatever.
These
are
all
great.
A
If
you
guys
haven't
you
these,
yet
I
highly
recommend
it,
it
just
mean
it's
so
easy
to
to
build
out
some
property
controls.
I
use
these
all
the
time.
They're
really
awesome
so
kudos
to
the
community
for
creating
these,
and
also
it
uses
the
SPF
X
controls
react
which
this
is
a
reactive
base
webpart.
So
this
worked
really
well
to
do
things
like
that.
This
order
that
you
guys
saw
and
also
the
web
part
title
that
you
guys
saw
I
use
those
all
the
time.
A
These
are
really
great
controls
to
use,
but
I
actually
built
this
web
part
before
the
charts,
where
I
think
this
is
a
recent
addition
to
this
package,
so
you
actually
see
chart.
These
are
chart
vias,
charts,
which
is
kind
of
funny.
They
showed
up
in
this
package
right
after
I
built
that
web
part,
so
you
guys
could
also
choose
to
play
around
with
this
I
thought
this
was
cool
too.
You
can
sort
of
do
things.
I,
don't
know
that
connects
to
lists
cuz.
A
It
looks
like
you
manually,
insert
the
data,
but
it
wouldn't
be
too
difficult
to
kind
of
do
that,
but
yeah.
So,
anyway,
that's
that's
kind
of
a
quick
overview.
If
we
look
in
the
code,
real
quick
I'll
just
show
you
guys.
There
is
the
source
code
for
this,
which
I'll
give
you
guys
a
link,
it's
out
on
github
and
it's
basically
everything
just
kind
of
funneling
down
to
this
chart
component
chart
TSX,
which
is
again.
This
is
react
based
and
it.
Basically,
there
is
a
library
that
you
can
import
into
your
into
your
react.
A
So,
basically,
all
this
webpart
does
it
handles
doing
the
web
services
and
stuff
like
that,
and
then
it
uses
this
chart
data
method,
which
is
basically
transposing
the
data
format
you
get
back
from
web
services
into
something
that
chart
Jas
can
understand,
which
is
typically
going
to
be
an
array
of
labels
and
data
sets.
So
that's,
basically,
all
this
webpart
does
just
taking
the
state
data
which
is
in
this
state
items
which
you
get
from
the
web
services
and
then
for
each
item.
It's
kind
of
building
out
a
data
set
and
etc.
A
Does
some
some
special
things
to
add
the
colors
and
all
that
stuff,
but
that's
kind
of
all
it
is,
is
in
a
sort
of
a
big-picture
view.
Was
it
just
transposing
that
data?
Another
thing
that
I
thought
rent
went
really
well
in
this
Web
part
was
we
ended
up
writing
a
SharePoint,
what
we
call
the
SharePoint
service,
and
this
is
just
basically
kind
of
an
abstraction
of
all
the
SharePoint
web
services.
A
One
thing
I
find
really
tedious
is
passing
the
web
part
context
around
to
all
of
your
react
components
that
can
get
really
unwieldy
real
quickly
and
the
context
contains
a
lot
more
than
you
actually
need.
So
we
kind
of
wrote
this.
You
can
almost
think
of
it
as
a
static
method,
but
it
basically
you
have
this
one-time
setup
function
where
it
gets
the
context
and
the
environment
type,
and
then
it
has
methods
in
it
like
get
in
post.
A
It's
this
simple,
we
just
say:
SharePoint
service
get
list
items
and
then
we
give
it
a
list
ID
and
then
we
take
those
items
and
we
do
something
with
it
and
all
we're
doing
in
this
case
is
setting
the
state
and
then,
if
we
have
an
error,
we're
catching
the
error
and
setting
an
error
state
in
the
react
component
itself.
So
it
just
really
makes
this
process,
which
is
usually
how
you're
going
to
interact
with
your
web
services.
A
Is
you
know
you
have
to
make
a
get
and
then
handle
errors
and
stuff
like
that,
just
kind
of
abstracts
all
that
to
this
nice
service
class,
so
that
might
be
something
that
is
worth
looking
at.
You
guys
want
to
check
this
out,
but
again
source
code.
You
can
check
this
out.
We
have
it
out
on
github
I'll,
pull
up
the
URL
here,
real
quick,
so
that
you
guys
can
take
a
look
at
that
we
have.
If
you
go
to
github.com,
slash
is
pfx
which
stands
for
introduction
to
sharepoint
framework.
A
We
have
several
solutions
in
here
that
are
all
open
source
and
available,
but
one
of
them
is
called
as
you
can
see
here,
and
if
we
open
that
up.
This
has
all
the
source
code
for
everything
you
just
saw
and
it
has
instructions
for
getting
started,
etc.
So
definitely
check
that
out.
If
you
guys
are
interested
and
happy
to
taking
questions
guys,
we'll
learn
more.