►
Description
In this 11-minute developer focused demo, Alex Terentiev shows a sample web part that stores a Microsoft Teams Personal App's - Web Part properties (configuration settings) using the custom Settings Panel and a custom hidden list located in the user's OneDrive. The properties service gets the user’s properties from the user's OneDrive via Microsoft Graph. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded June 18, 2020.
Demo Presenter: Alex Terentiev (Sharepointalist) | @alexaterentiev
Supporting materials:
• React Teams Personal App Settings Web Part | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-teams-personal-app-settings
Resources:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos
A
This
demo
is
about
a
part
that
is
hosted
in
Microsoft
teams
as
a
personal
app
and
probably,
as
you
know,
the
personal
apps
or
personal
tabs
and
teams.
They
don't
have
settings
so
for
shape
one
framework
developers.
It
means
that
these
dot
properties
object
is
never
populated,
it's
always
undefined,
but
in
real
scenarios
we
probably
need
to
store
setting
somewhere
and
to
customize
different
behaviors
of
our
web
part
based
on
different
users,
and
there
are
multiple
different
approaches
that
we
can
use
here.
A
One
of
the
approaches,
for
example,
described
by
rubber
scout
and
sorry
if
I
pronounce
the
last
name
correctly.
It
is
this
approach
is
about
using
onedrive
documents
and
in
the
document
you
can
store
all
the
configurations
for
the
web
parts.
Another
option
is
Microsoft
graph,
custom
properties
for
users
and
the
approach
that
I
want
to
show
you
today
is
about
onedrive
as
well,
but
it's
about
creating
a
custom
list
in
onedrive
and
storing
the
information
in
there.
So,
first
of
all
here
you
see
the
web
part
itself.
A
It
has
custom
panel
where
you
can
do
the
same
configuration
of
the
properties
like
in
property
pane
when
you
click
Save,
it
should
update.
Hopefully
no
it's
not.
Yes,
it's
updated
and
if
I
refresh
the
properties
should
be
saved,
so
you
will
see
the
same
configuration
so
everything
works
now.
I
want
to
show
you
the
onedrive
list,
so
here
I'm
on
my
onedrive.
It
means
that
because
personal
apps
are
about
users,
so
each
user
has
unique
configurations.
A
That's
why
that's
why
we
can
use
users
onedrive
to
save
their
unique
settings
so
I
have
these
WP
properties
list
on
my
onedrive
and
I.
Have
one
record
here
with
the
key
of
my
web
part
and
web
part
properties
as
a
scene
separate
column,
why
this
approach
is
good,
at
least
from
my
point
of
view.
If
you
are
ICD,
you
can
cap
single
list
in
one
drive
and
you
can
store
different
configurations
here
for
different
webparts.
A
So,
for
example,
if
you
are
provided
in
a
bundle
of
like
10
I,
don't
know
webparts,
you
will
have
10
different
options
here
with
with
10
different
keys
and
request
information
about
properties.
From
this
list
you
don't
need
to
create
separate
file
or
separate
instance
of
library
for
each
and
every
configuration
and
each
and
every
web
part.
So
let's
look
at
the
code,
it
should
be
good
size,
so
there
is
not
much
interesting
from
the
web
part
itself.
The
only
thing
that
we
are
doing
here.
A
We
can't
get
properties
from
these
dot
properties
object,
and
instead
of
that,
we
are
creating
the
web
properties
service
that
actually
gets
properties
from
onedrive
and
when
needed,
set
properties
to
onedrive
as
well
based
on
web
part.
Key
and
web
properties
are
kind
of
custom
properties
object
from
our
web
part
and
the
interesting
part
is
this
service
service.
A
Sorry,
so
I
have
the
interface
for
the
web
part
property
service,
so
it
basically
means
if
you
copy
and
paste
the
code
from
this
web
part
to
your
solutions,
you
can
implement
some
other
approach
using
just
the
this
interface.
It
has
just
two
methods:
get
properties
and
set
properties
and
I
have
the
implementation
for
this
interface
onedrive
list
the
part
properties
service.
Under
the
hood.
It
is
using
Microsoft
graph
to
communicate
with
onedrive
and
main
things
that
are
done
here.
First,
we
are
getting
my
side
graffiti,
so
this
is
done.
A
Using
slash
missile
drive,
/
route
and
from
there
we
are
getting
SharePoint
IDs.
It
actually
allows
us
to
construct
site
ID
that
is
used
to
work
with
the
SharePoint
and
onedrive
sites
inside
Microsoft
graph.
The
second
request
that
we
need
is
to
get
settings
list
ID,
so
we
are
trying
to
get
our
list
from
onedrive
it.
A
If
it's
not
there,
we
will
create
the
list
first
and
then
store
this
ID
in
our
web
part
again,
because
we
need
them
to
store
our
settings
and
two
main
methods
or
implementation
of
our
interface
is
basically
really
simple
as
well.
In
our
set
properties,
we
are
getting
this
list
ID
that
we
previously
store
tour.
If
it's
not,
we
are
creating
the
list.
We
are
updating
the
internal
cache
because
we
don't
want
to
do
all
the
requests
all
the
time
when
one
property,
for
example,
changed.
A
We
have
our
instance
of
the
service,
so
it
will
be
just
operated
from
our
memory
right.
So
then
we
are
checking
if
there
is
existing
item
for
our
web
part
properties.
If,
yes,
in
that
case,
we
will
just
update
the
specific
field
with
our
new
properties.
Otherwise
we
will
create
a
new
role
in
our
list
new
item
in
our
list
and
provide
properties
in
there.
A
So,
as
I
said,
this
approach
allows
you
to
have
multiple
webparts
all
in
the
same
list
with
different
configurations,
and
it
will
automatically
create
additional
list
items
for
you
if
it's
not
there.
So
that's,
probably
it's
it's
a
pretty
simple
quote
and
go
to
a
game
as
a
spell
FX
webparts,
I
believe,
and
the
example
is
there
and
copy
and
paste
the
quote
if
you
need
and
feel
free
to
use
it
in
your
custom
solutions.
A
B
Let's,
let's
talk
about
a
few
few
of
the
implementation
starts:
I
can't
go
back
on
your
SharePoint,
your
one
charge
site
and
not
on
the
code,
but
yes,
the
site,
and
it
and
just
just
kind
of
explaining
this
model.
And
obviously,
if
you
would
go
to
your
view,
lists
view
on
the
site.
You
wouldn't
anybody
would
not
be
able
to
see
the
list
which
is.
B
List,
as
are
you
creating
a
list
which
is
he
didn't
yeah,
you
only
get
access
on
it.
If
you
know
the
URL,
and
so
that's
actually
smart
way
and
the
kind
of
a
classic
way
how
we're
storing
data
in
the
in
the
SharePoint
in
general,
so
hidden
lists
just
actually
a
lot
of
hidden
lists
in
the
site's.
We
were
storing
the
information,
but
just
out
of
curiosity,
can
you
actually
go
to
your
app
catalog?
B
If
you
go
dust,
slash
lists,
slash
component
manifests
mm-hmm,
just
getting
some
insights
on
on
how
we,
as
a
Microsoft
and
engineering,
we're
actually
taking
advantage
of
this
exactly
the
same
model.
So
when
I
think
about
it,
whatever
Alec
showed
as
the
storage
option
and
creating
a
list
behind
the
scenes,
the
user
has
always
permissions
creating
his
own
list
and
then
saving
the
information
to
the
list
in
the
in
the
one
tribe.
It's
exactly
the
same.
B
What
we
do
a
lot
in
SharePoint
as
well,
so
even
your
individual
SharePoint
framework
components-
these
are
the
ones
these
are
actually
the
ones
which
were
operating
behind
the
scenes.
Obviously
it
is
not
intended
to
anybody
to
go
here
and
edit
the
settings
and
all
of
that,
because
doesn't
it
actually
break
stuff,
but
if
needed,
this
is
good
information
from
a
troubleshooting
perspective
because
might
need
to
have
to
go
here
and
and
then
see.
B
If
something
is
there
now,
if
you
go
back
on
your
own
list,
implementation
notes
and
again,
one
of
the
things
here
super
important
to
notice
is
that
you
want
a
name
to
list
using
some
sort
of
a
unique
naming
convention
within
your
company,
so
that
because
it
would
be
pretty
awkward
Alex
if
your
company
would
be
using
exactly
the
same
names
list,
then
say
otherwise.
V4.
A
B
Actually,
cause
conflicts,
so
there's
kind
of
an
interesting
implications
in
here.
So
there
are
three
questions
related
on.
So
first
of
all
and
I
might
actually
confuse
people
on
the
client-side
components
and
lists
that
was
only
to
show
that
we're
using
that
kind
of
a
model
and
an
approach
and
a
pattern
internally,
an
out-of-the-box.
You
cannot
actually
save
the
information
in
there.
It
was
mainly
to
show
the
morale
that
we,
whatever
Alex,
shows
Rios
that
you
use
at
the
internal
as
well,
then
the
boss,
a
good
comment
from
Aaron.
B
A
B
Yeah
yeah
and
then
what's
the
better
approach?
What's
the
bad
approach,
it's
always
debatable.
There's
there's
advantages
and
disadvantages
on
different
options,
whatever
actually
feels
more
comfortable
comfortable
for
the
developer
that
would
be
chosen.
Yes,
cool
I
think
we
can't
went
through
all
of
the
all
of
the
questions
in
the
chat
and
pretty
much
and
just
wanted
to
kind
of
read
the
rates.
What
you
were
showing
so
that
people
understand
the
power.
B
Can
you
go
back
still
on
the
on
the
web
part
or
the
person
education,
just
making
sure
that
people
do
understand
that
this
is
a
weird
thing
and
but
it's
actually
by
design
in
Microsoft
teams
that
there
is
no
setting
option
for
personal
applications.
So
there's
no
applications
are
not
intended
to
have
a
native
out-of-the-box
configuration
option
and
that's
what
we're
basically
yeah.
It
is
I,
do
a
Korean,
that's,
but
apparently,
from
their
perspective
they
decided
that
that's
not
apparently
needed
sir
I
don't
know,
but
I
think
that's
it
for
now.
So
thank
you.
A
B
Point
good
point:
yes,
absolutely
absolutely
now
it
might
be
that
in
the
future,
additions
and
versions
of
SharePoint
framework,
like
SharePoint
version
framework
version,
one
point,
twelve
or
thirteen
or
fourteen-
and
who
knows
if
we
skipped
thirteen,
because
there
was
no
sharepoint
version-
thirteen
even
in
either
anyway,
that's
a
sidetrack,
but
in
those
there
might
be
some
native
support
for
something.
Maybe
if
people
find
these
kind
of
things
useful,
but
but
again,
like
Alex,
showed
implementing
this
as
a
own
extensibility
or
own
implementation.
In
a
it's,
not
a
message
to.