►
From YouTube: Building dynamic dashboard pages with list formatting
Description
In this 7-minute developer-focused demo, Chris Kent uses a single list being fed by one or more Microsoft Forms and expose actionable details on a dashboard comprised of 4 discrete list web parts accessing the same list but displaying information in different views (Honeycomb, Recent Comments, Heat Map, Gauge Aggregate Footer). As data flows into the list, the dashboard updates. In this example the web parts are not linked together but could be. Sample code available for each View shown. This PnP Community demo is taken from the General Microsoft 365 Developer community call recorded on April 14, 2022.
Demo Presenter
• Chris Kent (DMI) | @theChrisKent
Supporting materials:
• Sample - Heat Map | https://github.com/pnp/List-Formatting/tree/master/view-samples/heat-map
• Sample - Honeycomb Links | https://github.com/pnp/List-Formatting/tree/master/view-samples/honeycomb-link
• Sample - Recent Comments | https://github.com/pnp/List-Formatting/tree/master/view-samples/recent-comments
• Sample - Gauge Aggregate Footer | https://github.com/pnp/List-Formatting/tree/master/view-samples/gauge-aggregate-footer
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/m365pnp
B
A
Hey
everybody,
I'm
chris,
okay,
great,
we
did
it
we're
on
a
new
demo,
all
right,
so
we
go
to
our
site
here,
and
last
was
the
last
week
or
the
week
before
I
don't
know
sometime.
I
was
in
vegas
with
some
of
these
other
guys
and
we
set
up
this
exciting
list
and
all
of
it
is
fed
with
this.
You
know:
microsoft
form.
We've
shown
some
of
that
on
how
to
do
that.
But
the
whole
idea
is.
A
It
comes
to
this
list
right,
so
we've
got
data
coming
in
and
that's
exciting
and
we're
going
to
do
something
else
here.
So
I've
created
a
couple
of
views
right.
I've
got
a
honeycomb
view,
which
is
a
cool
one.
It's
doesn't
really
mean
anything
in
this
case,
but
it's
very
pretty.
I've
got
a
recent
comments
view
that
just
shows
the
last
three
items
that
came
in
and
kind
of
shows
their
comments.
You
know
bigger
and
smaller
and
then
I
can
even
add
a
new
view
right.
A
So
I'm
going
to
create
a
new
view
and
we're
going
to
call
this
a
heat
map
and
we're
going
to
make
this
like
this
here.
So
now
it's
just
like
this.
Let
me
run
over
to
our
github
pnp
list,
formatting
repo,
I'm
going
to
go
to
our
view,
samples
and
I'm
going
to
run
down
and
I'm
going
to
grab
a
sample
called
heat
map,
which
is
a
new
one
we've
put
in
here
and
I'm
just
going
to
grab
the
json
for
that
directly
and
it's
a
big
one.
So
I'm
just
going
to
scroll
all.
A
Okay,
so
it
is
a
big
one,
all
right,
so
I'm
going
to
copy
that,
and
I'm
just
going
to
paste
that
here
at
the
current
view
and
I'm
going
to
advance
mode
and
I'm
going
to
paste
that
sucker
right.
So
we
can
see
what
that
looks
like
let's
preview,
that
now
there's
something
wrong,
which
is
my
state
column
is
slightly
different,
so
I
think
it
states
here
and
so
we're
going
to
do
is
we're
going
to
swap
out
the
column.
I
hit
a
control
f.
A
A
Svg
right,
so
the
idea
is,
we
are
using
absolute
positioning
and
we
are
positioning
these
svgs
one
over
the
other,
and
then
we
are
drawing
at
opacity
point
two.
Whenever
a
state
is
included
in
our
column,
the
state
and
what
that
does,
it
has
the
effect
of
darkening
the
state
the
more
times
it's
mentioned
right.
So
we
get
this
kind
of
heat
map
approach.
So
that's
a
cool
way
to
visualize
our
list.
A
So
we're
going
to
save
that
and
then
we're
going
to
add
one
more
because
we've
got
a
goal
in
mind
here:
we're
going
to
create
a
new
view
and
we're
going
to
call
this
one
gauge
and
we'll
just
create
that.
And
what
we're
going
to
do
is
we're
going
to
take
this
and
we're
going
to
take
this
and
we're
going
to
add
a
totals
column
right.
So
we're
going
to
say
on
our
rating.
We
want
an
average.
A
A
The
show
hide
columns
over
here,
add
columns,
show
hide,
columns
and
we'll
take
away
everything,
but
our
rating
column
for
this
one
we're
going
to
apply,
make
sure
we've
got
everything
here
all
right
and
then
we're
going
to
format
the
current
view
and
I'm
going
to
take
a
format
that
is
also
on
the
site,
but
I've
just
got
also
here
just
for
quickness
and
let's
just
grab
a
footer
format.
So
what
we're
going
to
do
is
we're
trying
to
format
just
that
little
bottom
part
right.
A
So
we're
going
to
copy
that
we're
going
to
paste
that
inside
here,
oh
yeah,
there
we
go
so
now,
we've
taken
the
gauge
again.
This
is
a
sample,
that's
available
to
you
right
and
now
we've
got
a
format
here,
which
is
pretty
cool,
but
what
I'm
going
to
show?
You
is
the
idea
of
a
composed
format.
So
I
have
a
footer
format,
but
I
can
go
a
little
further
in
this
case,
in
addition
to
my
footer
format,
right
up
at
the
top
here,
I'm
going
to
apply
a
couple
of
generic
things.
A
Hide
the
selection
hide
the
column,
header
and
I
have
a
row
formatter
which
in
this
case
just
hides
every
row
very
exciting
format,
but
it
has
the
effect
of
making
this
just
this
gate
right.
So
that's
exciting.
So
I
saved
that
and
what
I
could
do
with
all
of
this
and
the
reason
we
did
all
this
is.
If
I
go
to
my
home
site-
and
I
edit
this
page-
I've
got
it.
A
You
know
I've
got
a
couple
of
two
column
sections
here,
I'm
going
to
grab
the
list
web
part,
I'm
gonna
grab
my
field
notes
list
all
right
and
if
I
go
and
edit
this
I
could
say
the
view
on
this.
One
we'll
say
is
the
recent
comments
we'll
just
apply
that
all
right,
we'll
turn
these
two
off.
So
we'll
hide
those
all
right.
We'll
come
over
here.
We're
gonna,
do
the
same
thing.
I'm
gonna
say
the
list.
A
I
apply
that
there's
our
honeycomb
and
the
other
thing
is
we're
going
to
make
this
one
kind
of
small
too,
but
it
is
I'm
just
using
list
web
parts
off
on
different
views
of
that
same
list
right.
So
this
one
we're
gonna
go
grab
that
heat
map
view
I'll
make
this
one
a
little
bit
bigger.
I
have
to
know
that
one
doesn't
fit
very
well
otherwise,
right
we
apply,
we've
got
our
heat
map
and
then
we
come
over
here
and
we're
going
to
grab
our
list.
A
A
You
know
we'll
call
this
states,
you
know
and
so
on
right.
So
we
can
have
all
these.
As
you
know,
recent
comments
and
then
we'll
make
this.
As
you
know,
ptv's
there
we
go,
but
the
idea
here
is:
we've
taken
a
single
view
of
a
list,
that's
coming
in
from
forms
right
and
we've
got
all
sorts
of
things
hooked
to
that.
We
can
do
everything
else,
but
now
we're
taking
different
views
mo
all
of
these,
which
are
samples
in
our
list.
A
Formatting
repo
and
we've
applied
them
on
a
page
and
we've
essentially
built
a
dashboard.
So
we
could
watch
as
list
items
come
in
and
see
what's
going
on,
so
we
have
kind
of
a
aggregate
view
here.
We've
also
got
a
fancy
map
right
and
we
could
go
further.
We
could
link
these
things
together.
We
could
do
all
sorts
of
really
really
neat
stuff
and
I
didn't
deploy
a
solution.
I
didn't
have
to
write
anything
in
power
bi.
If
I
wanted
to,
I
could
have.
A
Maybe
I
want
to
bring
it
because
it's
a
modern
page
I
want
to
bring
in
like
a
twitter
feed
right.
I
can
mix
and
match
all
the
other
web
parts
with
this
and
really
create
kind
of
a
dynamic
application.
All
right.
So
I
know
I'm
over
time,
so
I'm
just
going
to
jump
back
to
the
slides
and
then
we'll
be
done
all
right
there.
You
go
that's
about
the
list,
footer
very
exciting.
Again,
we
have
a
dedicated
video
on
that.
A
If
you
want
to
look
at
a
little
more
detail
of
how
you
might
draw
that
that
sample
the
gauge
is
also
available
here,
are
those
links,
I'm
sure,
david's,
going
to
paste
those
in
the
chat
for
those
that
are
joining
the
call
live,
but
for
everyone
else?
If
you
just
go
to
that
list,
formatting
repo,
every
single
one
of
those
I
just
showed
is,
in
the
view
samples
there's
also
some
fan
bar
prompt
samples
as
well,
and
that's
all
I
got
thanks.
Everybody.