►
Description
In this 12-minute developer-focused demo, Paolo Pialorsi delivers an inspirational demo/sample (react-teams-lead-dashboard) showing how to create a dashboard using tools, libraries and techniques for developing “modern” Microsoft 365 solutions. Uses Teams Personal app (configurable on per user basis and with multiple tabs), SharePoint client-side web part, UI fully integrated with Microsoft Teams and automated provisioning of fields, lists through Microsoft Graph. Render dashboard in Teams or SharePoint Online. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 7, 2021.
Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials:
• Sample - Lead Assist Dashboard | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-lead-dashboard
• Documentation - Build for Microsoft Teams using SharePoint Framework | https://docs.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview
• Documentation - Use Microsoft Graph in your solution | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://docs.microsoft.com/graph/toolkit/overview
• Tools - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Article - The easiest way to store user settings of your Microsoft 365 app | https://blog.mastykarz.nl/easiest-store-user-settings-microsoft-365-app/
Learn more:
• 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
Today,
we're
going
to
talk
about
a
sample
that
we
just
released
and
which
is
a
sample
about
how
to
create,
with
sharepoint
framework,
a
dashboard
using
tools,
libraries
and
techniques
that
we
have
available
when
developing
micro365
solutions
and
the
overall
idea
of
this
sample
is
to
provide
developers
a
solution
that
they
take
inspiration
from.
If
they
want
to
create
something
like
that.
So
what's
inside
the
sample,
I'm
going
to
show
you,
there
is
a
team's
personal
app
which
is
configurable
on
a
per
user
basis.
A
We
have
a
multiple
tabs
in
the
personal
app
it
can
be
also
used
as
a
client-side
web
part
in
sharepoint
online.
The
ui
is
fully
integrated
with
microsoft
teams,
and
we
also
have
an
example
of
automated
provisioning
of
artifacts
like
fields
and
lists
and
content
in
a
true
micrograph
in
the
microsoft
365
workloads,
in
order
to
do
the
setup
of
a
set
of
demo
items
and
demo
content
to
show
the
output
and
the
ui
of
the
sample.
A
So
what
are
the
challenges
that
we
faced
developing
this
solution,
while
building
a
solution
with
the
ui,
fully
integrated
with
microsoft
teams,
as
well
as
the
capability
to
handle
the
configuration
of
the
team,
personal
apps,
the
support
for
multiple
tabs?
We
need
to
see
how
you
can
do
that
whenever
you
want
to
create
a
sharepoint
framework
solution
and
how
to
make
it
configurable,
also
in
sharepoint
online,
and
only
from
the
ui
of
microsoft
teams
and,
of
course,
the
provisioning
of
the
content
and
the
technical
solutions
that
we
put
in
place
to
achieve.
A
We
had
to
create
a
manual
manifest
for
teams
and
in
order
to
support
the
custom
configuration
on
a
per-user
basis.
We
are
relying
on
the
application,
personal
folder
capability
that
we
have
through
microsoft
graph.
So
this
is
just
to
give
you
an
idea
of
what
we
are
going
to
briefly
see
in
the
upcoming
demo
and
that's
why
I'm
now
moving
to
the
actual
demo
environment,
to
show
you
the
the
sample
in
action
and
then
to
play
with
the
code
base.
A
So,
first
of
all,
this
is
the
url
of
the
sample
on
under
the
spdev
fx
web
parts
repository
under
samples
and
react
teams
lead
dashboard
is
the
name
of
the
new
sample
in
teams.
This
is
how
the
sample
looks
like.
So
you
see
it's
a
dashboard
based
on
a
set
of
charts,
but
with
some
content,
which
is
personal
for
the
user.
In
fact,
this
is
a
personal
app
in
teams.
You
can
see
your
calendar,
you
can
see
your
tasking
to
do.
A
You
can
see
documents
or
items
which
are
interesting
for
you,
as
well
as
you
can
have
an
additional
tab
for
providing
settings
in
order
to
configure
just
for
the
sake
of
having
some
demo
data
in
order
to
configure
lists
items
and
fields
in
sharepoint
online,
as
well
as
eventually
demo
items
in
your
calendar
or
in
a
to-do
list,
just
for
the
sake
of
having
close
to
real
content,
rendering
in
the
ui
of
this
component
or
string
teams
component.
That,
of
course,
can
be
hosted
also
as
a
web
part
in
sharepoint
online.
A
As
we
all
know,
and
if
you
want
to
configure
this
one
in
sharepoint
online.
Of
course,
you
can
just
edit
the
page
and
use
the
property
pane
of
sharepoint
online,
but
in
the
property
pane
of
the
sharepoint
framework
web
part
in
sharepoint
online.
We
basically
have
the
same
functionalities
that
we
have
in
the
settings
tab
inside
our
sample
solution.
So
how
did
we
build
this
solution?
A
Let
me
switch
to
visual
studio
code,
and
mainly
there
is
one
webpad
which
is
rendered
both
in
sharepoint
online
and
in
teams,
and
this
is
the
leader
assist
dashboard
web
part
in
this.
What
part
in
the
on
init
method,
aside
from
taking
care
of
the
team's
context,
so
we
identify
if
we
are
hosted
in
teams
or
not,
and
if
we
are
hosted
in
teams,
we
apply
the
theming
of
teams
in
order
to
have
a
proper
ui
consistent
with
the
user
experience
of
teams.
A
This
is
a
pi
that
we
have
in
graph
which
allows
us
to
store
in
the
file
storage
of
onedrive
on
a
per
user
per
app
basis,
one
or
multiple
files
that
we
need
to
use
for
setting
purposes
or
for
whatever
reason
you
want
to
have
a
set
of
files
for
your
application.
By
doing
that.
Well,
we
can
get
the
settings
simply
by
reading.
A
In
the
uproot
of
our
app
device-
and
specifically,
we
are
looking
for
one
file
which
is
called
in
our
solution-
lead
dashboard
settings.json,
but
you
can
read,
and
you
can
eventually
write
your
settings
if
you
will
put
the
content
of,
for
example,
a
json
file
into
the
url
of
the
uproot
folder
in
onedrive.
This
is
really
useful
and
the
overall
result
will
be
that
from
a
onedrive
point
of
view.
In
the
apps
folder
of
every
user,
there
will
be
a
subfolder
representing
the
app
and
that's
interesting,
because
we
are
in
sharepoint
framework
and
most
likely.
A
We
know
that
from
a
sharepoint
framework
point
of
view.
Unless
we
use
the
domain
isolated
model,
every
single
application
will
be
under
the
same
app
and
in
fact
we
have
a
sharepoint
online
client
accessibility,
web
application
principle,
which
is
the
name
of
the
azure
active
directory
app
under
the
cover
of
every
sharepoint
framework
solution,
at
least
by
default,
and
in
there
we
have
our
json
file
with
all
of
our
settings.
Of
course,
if
you
want
to
have
your
own
folder,
you
can
create
an
isolated
domain
web
part
and
that
will
have
a
dedicated
application.
A
So
that's
one
of
the
interesting
part
of
the
story.
Moreover,
when
we
render
the
application,
of
course,
we
use
mgt,
so
we
register
provider
of
ngt
from
authentication
point
of
view,
which
is
the
sharepoint
provider
in
order
to
use
the
context
of
spfx,
and
we
also
configure
pmpjs,
because
we
use
that
one
as
well
in
the
rendering.
We
just
rely
on
a
react
component,
which
is
this
one
and
in
this
component,
at
the
very
end,
aside
from
loading
through
a
data
service,
all
of
the
content
that
we
want
to
render
and
the
data
service.
A
We
rely
on
pmpjs
and
graph
to
read
all
of
the
data
that
we
need,
but
in
the
component,
when
we
do
the
actual
rendering
we
simply
render
a
dashboard
control
of
pnp
controls
and
in
that
one
we
configured
all
of
the
widgets.
So
all
of
the
sections
of
the
dashboard
in
order
to
have
the
chart
control
of
pnp
controls,
for
example.
So
this
method
will
simply
give
us
back
a
chart
control
of
pnp
controls
as
well
as
we
can
eventually
use.
A
If
I
go
back,
we
can
eventually
use
the
mgt
components
like
in
this
widget,
where
we
say
get
my
day
tab
and
this
one
will
give
you
back
the
agenda.
Mgt
component,
the
micrograph
toolkit
component
with
a
set
of
custom
templates
that
we
defined
right
here
in
this
file
in
order
to
have
a
custom
rendering
for
all
the
items
that
we
want
to
see
in
the
rendering
of
the
agenda,
and
the
same
applies
for
the
to-do
list.
A
A
Folder
of
our
solution,
we
manually
created
a
manifest
and
in
there
we
configured
two
different
static
tabs,
one
targeting
deleted
access,
dashboard
that
we
just
saw
and
another
one
targeting
the
settings
with
part,
which
is
the
one
providing
the
buttons
to
configure
and
to
set
up
this
solution.
And
in
order
to
do
that
in
spf
x,
so
you
simply
need
to
manually
create
a
manifest.
You
have
to
zip
the
manifest
and
the
icons
into
a
file
called
teamspfxapp.zip,
which
is
well
documented
on
docsmix.com.
A
So
this
is
yet
another
interesting
functionality
that
we
have
in
sharepoint
framework
whenever
we
want
to
create
more
complex
solutions
which
do
not
rely
on
a
single
web
part,
but
rely
on
multiple
web
parts,
which
will
become
marked
multiple
tabs
in
your
solution
again
and
furthermore,
talking
about
what
we
did,
we
are
using
mpt.
So
in
the
package.json
file
we
are
referencing.
A
The
ngt
react
in
dngt
spfx
packages,
because
we
want
to
have
a
full
integration
of
inside
sharepoint
framework,
and
that's
why
we
can
then
say
in
the
web
part
that
we
register
the
provider
the
sharepoint
provider
as
the
global
provider
for
mgt.
So
this
is
just
to
give
you
an
idea
of
what
is
quite
easily
doable
using
all
the
rich
components
and
controls
that
we
have
available
through
pmp
and
through
microsoft,
in
order
to
easily
create
a
real
or
a
closed
rear
solution,
hosted
in
teams
and
sharepoint
online.
A
You
also
have
some
references
on
the
slide
deck
which
I'm
going
to
share,
also
in
the
chat,
if
I
can
talk
and
copy
and
paste
at
the
same
time,
let
me
see
if
I
can
do
that.
Yes
looks
like
I
can
so
here
is
a
list
of
useful
links
that
you
can
keep
into
account.
If
you
want
to
dig
into
the
topics
that
we
saw.
A
For
example,
the
idea
of
using
the
custom
settings
stored
in
the
uproot
folder
comes
from
a
blog
post
by
valdec,
which
shared
this
brilliant
idea
of
using
this
functionality
for
storing
settings
as
well
as
you
can
find
links
to
all
the
other
libraries
and
tools
that
we
are
using
in
this
solution,
and
I
think
that's
all
for
me,
patrick
so
back
to
you.
Thank
you.