►
Description
SharePoint PnP Community - SPFx & JS SIG call on August 12. Three demos delivered: Executive room reservation tool for Microsoft Teams built with SPFx, My Lists Notifications SPFx extensions, and Using OneDrive Apps folder to save user's preferences cross-device. 4 PnP SPFx web part samples delivered! Viva Connections public developer preview! Released PnPjs Client-Side Libraries v2.8.0 and CLI for Microsoft 365 v3.13.0 Preview. Register for events on Sharing-is-caring. PnP Recognition Program announced. Summer and Fall community call schedule updates reviewed. The host of this call is Patrick Rodgers (Microsoft) | @mediocrebowler. Q&A takes place in chat throughout the call.
Learn more:
• See the full blog post for this call at: https://aka.ms/m365pnp/community/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• 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
Hello
and
welcome
to
the
sharepoint
framework
and
javascript
special
interest
group
bi-weekly
sync,
it
is
august
12th
2021,
unbelievable,
we're
almost
halfway
through
august.
At
this
point,
I
think
it
is
still
march
of
2020
myself.
I
don't
believe
it
agenda
for
today
latest
updates
on
sharepoint
framework
patterns
and
practices
updates
across
the
program,
new
community
samples
picture
time
together
mode
and
we've
got
three
great
demos.
Today,
of
course,
julie
and
derek
will
be
showing
this
executive
room
reservation
tool
for
teams
built
with
spfx
hugo.
A
I
think
just
hugo
will
be
showing
us
the
my
list.
Notification,
spf,
x,
extension
and
giuliana
will
be
showing
us
using
onedrive
apps
folder
in
order
to
save
user
preferences.
Cross-Device.
It's
a
very
cool
technique.
They're
excited
to
see
that
so,
but
first,
I
always
like
to
talk
about
opportunities
to
participate
in
these
calls
and
the
patterns
and
practices
program
all
up.
A
So,
if
you're
interested
in
demoing
on
these
calls,
it's
my
favorite
part
of
the
calls
is
getting
the
demos
please
just
reach
out
to
myself
or
vasa
we'd
love
to
have
you
on
the
calls
either
this
one
or
any
of
the
others
to
do
a
demo.
Please
just
reach
out.
I
know
everybody's
doing
some
great
work
for
their
companies,
their
customers
and,
as
is
appropriate,
of
course,
make
sure
it's
okay
to
show
off
what
you're
demoing,
but
as
appropriate
we'd
love
to
have
you
reach
out
and
demo
your
work
on
the
calls.
A
Also,
you
can
always
contribute
on
github
that
could
take
the
form
of
reporting
issues,
many
pull
requests
or
helping
with
issues
and
questions,
and
then,
as
always,
we
appreciate
your
feedback.
How
are
our
calls
how's,
our
documentation?
Where
else
can
we
help
and
positive
feedback?
Is
okay
too?
If
you
like
something,
let
us
know,
perhaps
we
can
do
a
little
bit
more
of
it
and
now
the
giant
page,
oh
links,
so
we've
got
a
bunch
of
stuff
here.
A
So
the
developer
videos
are
developer
silly
to
say
that,
but
developer
focused
videos
are
topic,
focused
videos
around
things
such
as
off
or
how
to
set
up
a
sharepoint
framework
project
or
how
to
get
started
with
graph
things
like
that.
They're
sort
of
topic
focused
videos
for
learning.
We
also
have
our
community
videos,
which
are
going
to
be
the
recordings
of
this
call,
and
our
other
community
calls
can
all
be
found
there.
Whether
you
want
to
review
a
call
or
catch
up
on
some
calls,
you
might
have
missed.
A
You
can
always
catch
up
on
those
there
on
the
youtube
channel
as
well.
We've
got
a
bunch
of
great
open
source
organizations
on
github,
all
of
which
are
open
to
your
contributions,
open
to
your
feedback
and
open
to
you
reporting
issues
as
well.
Those
are
sharepoint
pnp
office,
dev
and
microsoft
graph.
So
all
four
of
those
are
absolutely
looking
for
your
participation
and
feedback
join
in
to
as
many
of
those
as
you
are
interested
in.
A
I
think
there's
a
lot
of
great
work
happening
across
all
those
and
a
lot
of
interesting
stuff
to
get
involved
in,
depending
on
what
you
personally
find
fascinating
and
then
we've
got
sample
galleries.
We've
got
team
samples,
spfx
samples,
spf's
web
part
samples,
that's
extension,
samples,
we've
got
power,
platform,
samples
and
list
formatting
samples.
A
These
are
great
places
to
start
if
you've
got
a
new
project
or
you've
got
a
question.
You
know
on
your
team
about
how
you
might
go
about
solving
a
certain
problem.
The
sample
galleries
are
a
great
place
to
start
and
get
ideas
on
how
others
have
solved
similar
problems
and
give
you
a
path
to
go
down
to
explore
how
you
might
solve.
You
know
your
problems,
you're
trying
to
program
for
and
then
finally,
instead
of
remembering
all
those
links,
you
can
always
just
remember
ak
dot.
A
A
Perhaps
across
all
of
these
calls,
so
making
it
a
little
bit
easier
to
find
the
content
and
as
well
stay
informed
without
having
to
attend
just
calls
all
week
long
every
week,
so
trying
to
get
things
a
little
more
organized
for
everybody.
That's
a
piece
of
feedback
we
heard,
and
we
are
trying
to
act
on
that-
and
this
is
sharing-
is
caring,
which
is.
B
David
thanks,
patrick
absolutely
sharing
is
caring,
is
a
program
that
is
available
to
everyone
in
the
community
to
help
you
get
more
involved
from
not
only
using
the
tools
but
contributing
to
the
tools.
So,
if
you're
unfamiliar
it
is
inclusive
and
safe
space
opportunities
that
are
scheduled
every
month
for
you
to
join
with
members
of
the
patterson
practices
and
sharing
his
caring
team.
B
Folks,
like
hugo
bernier
april
dunham,
louise
freese
and
myself,
and
we
will
walk
you
through
a
whole
host
of
things
that
you
might
want
to
start
getting
involved
in,
such
as
contributing
understanding
how
to
use
github
using
and
setting
up
your
spfx
workstation
getting
involved
as
a
presenter,
as
patrick
mentioned,
we'd
love
to
have
you
present
on
these
calls,
but
you
might
want
some
tips
and
tricks.
So
a
number
of
opportunities
we've
got
a
plethora
of
amas
coming
up
in
september.
B
We
hope
you
enjoy
those.
We
have
got
a
lot
of
great
feedback
on
them.
It's
great
collaboration,
opportunity
again
all
free
all,
safe
space
opportunities
for
you
to
ask
any
and
all
questions
no
recording
of
the
sessions
at
all,
and
we
will
assist
you
on
getting
involved
and
when
you
do
as
we
move
to
the
next
slide,
we
love
nothing
more
than
to
celebrate
you,
and
so
you
have
seen,
hopefully
the
recognition
program
that
we
have
brought
out.
It
is
powered
by
credley.
B
Things
like
a
hacktoberfest
and
some
fun,
parker,
themed,
badges
and
contribution
badges
for
things
like
samples,
upgrading
and
submitting,
etc.
So
we
need
you
to
opt
in
for
that
and
register
for
it,
aka.msm365
pnp
recognition.
We
would
love
to
celebrate
you.
So
please
don't
hesitate,
there's
no
cost
to
you
and
we
look
forward
to
sending
you
your
badge,
patrick
back
to
you.
A
C
Now,
whatever
warning
on
here,
when
you
start
using
this
thing,
it
only
gives
you
the
capability
of
building
this
viva
connection
cards
in
the
online
workbench.
For
now,
which
is
slightly
confusing
because
you
would
like
to
see
the
mobile
experience,
you
would
like
to
see
the
better
experience
those
all
of
that
is
coming
and
we
will
communicate
more
broadly
when
those
are
available.
I
think,
in
the
september
time
frame
now,
let's
go
to
the
following
slides
and
just
a
quick
recap
given
september
time
frame,
most
likely
preview.
C
I
think
that's
the
pretty
okay
to
say,
but
I
can't
be
more
specific
on
that
now.
1.13,
like
I
said
it's
going
to
be
going
to
ga
as
aligned
with
the
viva
connection,
ga
with
a
connection
mobile,
ga,
the
vivo
connection
desktop
was
released
earlier
this
year,
but
this
is
now
a
evolution
of
that.
We
still
work
on
significant
teams,
improvements
on
spfx.
C
So
internally
we
talk
about
sharepoint
framework
everywhere
concept,
which
is
basically
you
can
build
sharepoint
framework
and
host
it
any
everywhere,
including
v1
teams
and
obviously
making
that
more
easily
available
and
we're
seeing
a
lot
of
interest
on
the
sharepoint
framework
in
general,
because
it's
so
easy
to
host
things
and
the
operations
are
easy.
Of
course.
If
you
are
a
sas
existing
sales
provider,
it
does
make
sense
to
to
do
the
integration
in
slightly
different
way.
C
What's
what's
else
in
here
store,
modernization
is
rolling
out
right
now,
just
to
call
out
that
one.
So
we
will
close
blog
posts
on
that
one
early
next
week
and
you
will
see
more
communications
coming
on
that,
so
the
sharepoint
store
is
getting
fully
modernized
one
step
at
a
time.
First,
from
the
store
experience
perspective,
then
the
app
catalog
and
a
few
other
things
as
well,
but
you'll
see
more
on
those
changes
coming
up
in
autumn,
throwing
it
back
to
you,
patrick.
A
Thank
you
face
for
those
updates.
I've
been
doing
a
little
bit
of
ace
dev
over
the
last
couple
weeks
and
it's
really
kind
of
a
lot
of
fun.
So
I
encourage
folks
to
check
that
out.
I
think
it's
going
to
be
a
a
great
new
way
to
kind
of
build
out
some
solutions
and
I'm
excited
for
more
folks
to
try
that
out
and
I'm
actually
going
to
demo
some
of
that
stuff.
I
think
on
the
next
call.
D
With
julie,
thank
you,
patrick,
so
we
are
scheduled
for
2.8
on
august
13th.
Yes,
that
is
definitely
tomorrow.
We
have
a
couple
new
features
for
the
graph,
patrick
added,
an
ad
image
field,
sharepoint
feature,
there's
some
small
documentation
updates
and
some
bug
fixes
so
lots
of
good
stuff
coming
out
in
2.8
v3
development.
I
say
this
every
week,
but
it
is
well
underway.
We
are
having
a
lot
of
fun
working
on
that
we're
we're
getting
some
some
great
results
and
things
are
really
starting
to
come
together.
So
it's
getting
really
exciting.
D
If
you're
interested
there
is
a
v3
branch
of
the
solution,
so
you
can
pick
that
up
and
check
it
out
and
see.
What's
changing
what's
happening,
if
you
want
to
know
more
details,
you
can
check
out
that
issue
1636,
which
has
the
vp
three
plans
and
links
out
to
more
details
for
each
of
the
areas.
So
if
you
have
any
interest
in
helping
us
out
with
v3
we're
getting
pretty
close
to
to
being
able
to
have
lots
of
people
contribute
to
help
us
move
a
little
faster.
A
I've
got
it
on
my
list
of
to
do's
to
get
a
session
to
do
some
early
feedback
for
v3,
so
we'll
be
announcing
that
when
we
can
next
up
cli
for
microsoft
365.,
I
think
I'm
going
to
cover
this
one.
So
new
preview,
3.13
with
new
commands
to
add
single
or
multiple
users
to
a
sharepoint
group,
a
new
social
champion
sample
and
minor
doc
updates
and
enhancements.
You
can
always
try
the
latest
beta,
either
through
npm
or
through
docker,
there's
a
great
docker
image
for
the
m365
cli.
A
So
you
can
always
try
that
out
through
docker,
which
is
a
really
cool
way
to
get
that
up
and
running
quickly
and
then
preview
for
v4
is
also
available.
That's
going
to
be
the
next
major
version.
Looking
for
release
sometime,
this
fall
so
encourage
you
to
check
out
everything
around
the
cli,
the
reusable
components,
no
big
changes
here,
but
continue
to
make
improvements
and
release
new
versions
with
new
controls,
as
well
as
fixes
to
existing
controls,
and
this
is
a
great
way
to
jump.
A
Start
your
sharepoint
framework
development
around
either
displaying
the
data
using
the
react,
controls
in
the
body
of
your
web
part
or
application
customizer,
and
then
how
the
settings
work
in
your
web
part
through
the
react
property
controls
for
those
web
parts
so
encourage
you
to
check
those
out
great
way
to
get
your
project
started
quickly
and
modern
search
solution,
ak
dot.
Ms
slash
pnp,
dash,
modern
search
for
building
modern
search
experiences
with
flexible
web
parts
version.
430
is
the
july
release.
A
That's
the
latest
and
all
the
new
work
is
going
into
the
v4
branch
of
things
and
then
the
v3
stuff
is
really
just
in
long-term
support
mode.
There.
Not
a
lot
of
new
features
are
going
to
go
into
the
v3
branch,
so
encourage
you
as
you're
able
to
upgrade
to
v4
and
if
you
find
any
issues
or
anything,
of
course,
please
always
report
that
feedback
and
that's
true
across
all
our
projects.
Next
up
are
the
pnp
samples
with
hugo.
E
Awesome,
thank
you.
So
if
you
you're
just
joining
us,
we
have
repositories
that
contain
spfx
samples.
We've
got
spfx
extension
samples
and
we've
got
spf
x,
webpart
samples.
Both
repositories
are
contain
samples
that
are
contributed
by
the
community.
They
can
be
full
on
solutions
like
some
of
the
ones
we're
going
to
demo
today,
and
sometimes
it
can
be
a
very
simple
concept
like
how
do
I
display
a
user's
name
right
anytime,
that
you
need
to
start
a
new
development
task?
We
recommend
you
go,
take
a
look
at
these.
E
These
repositories
and
you'll
find
some
goodies.
Here's
the
latest
updates
for
the
last
two
weeks.
The
first
one
is
an
html
templated
web
part
by
fabio
franzini.
This
is
one
that
probably
a
lot
of
people
are
going
to
be
happy
about,
because
you
know
people
have
been
looking
for
a
way
to
insert
html
in
in
pages,
fabio
shows
a
way
to
to
kind
of
create
dynamic
templates
using
html,
and
you
can
embed
that
into
a
web
part.
E
E
We
also
have
an
update
to
the
accordion
dynamic
sections
which
allows
you
to
create
collapsible
sections
by
ari
gunawan,
who
added
a
sort
item
configuration
and
finally,
we
have
by
fabio
again
we
got
a
new
fluent
ui
theme
variant.
So
you
know
when
you
create
sections
inside
of
a
sharepoint
page,
you
can
actually
create
a
variants
for
for
themes,
so
you
can
have
a
section,
that's
dark,
a
section.
That's
light
fabio
actually
uses
the
same
approach,
but
at
a
web
part
level.
So
within
a
web
part,
you
can
actually
apply
variants,
which
is
very
cool.
E
A
C
Indeed,
let's
wait
for
a
few
more
seconds,
so
we
get
the
maximum
50
people
in.
We
have
160
175
people
actually
in
the
call
right
now,
so
I
think
we're
hitting
the
limit.
So
let's
do
some
hand
waving,
I'm
already
recording
the
screen,
and
so
we
can
do
a
keep
animation
out
of
this
one.
So
thanks
everybody
for
joining,
and
thank
you
for
this
one.
Hopefully,
by
end
of
this
year,
we
can
actually
see
face
to
face
in
some
of
the
conferences
we
can
see
already
that
happening
in
us
in
certain
areas.
Thank
you.
A
F
So
the
concept
where
you
know-
maybe
there's
only
a
certain
number
of
conference
rooms
at
an
executive
level
or
a
specific
floor
that
are
only
bookable
by
certain
people,
I'm
derek
and
we're
presenting
and
presenting
today
with
julie.
We
were
both.
We,
we
both
work
at
some
praxis,
consulting
based
out
of
boston,
and
this
is
the
solution
that
we
built.
F
So
the
main
goals
here
were
to
provide
better
visibility
into
executive
room
meeting
schedules
to
provide
an
opportunity
where
people
who
need
to
book
these
rooms
can
art
can
book
them
in
the
space
that
they're
already
working
so
they're,
not
leaving
they're
not
going
out
to
a
different
system,
they
can
do
it
already
right
inside
of
teams.
It's
about
reducing
that
friction
for
scheduling
those
events
based
on
both
location
and
size
of
the
group.
F
We've
got
the
upcoming
meetings.
We've
got
the
strategy
session,
the
leadership
meeting,
we're
gonna
click
on
the
leadership
meeting,
and
once
you
click
on
that,
you
get
a
view
of
the
meeting
you
get
the
date
and
the
time
of
the
meeting
you
get
the
the
title
of
the
meeting,
but
then
you
also
get
the
meeting
the
name
of
the
room
and
then
the
information,
the
the
building
number,
the
building
name,
the
address
the
contact
phone
number
for
it.
Yep
we've
also
got
the
the
a
map.
F
So
if
you
want
to
click,
you
can
see
the
map
of
the
building.
You
can
also
click
out
into
driving
directions
here.
So,
if
somebody's
coming
to
your
meeting
and
they're
staying
in
a
hotel
because
they're
traveling,
they
can
come
here
and
they
can,
they
can
put
in
the
information
for
their
for
their
hotel
and
get
driving
directions
or
taxi
directions.
Or
what
have
you?
F
F
So
you
can
also
see.
We've
got
this
strategy
session
and
you
can
see
that
there's
no
room
selected
now
there
are
15
attendees
here.
So
we,
while
the
meeting
is
scheduled,
it
doesn't
have
a
location.
So
we
need
to
find
the
location
for
that
room
or
for
that
meeting
and
by
clicking
on
it
we're
brought
to
this
to
the
screen
where
we've
got
two
main
rooms
that
will
fit
this
number
of
people.
F
We
don't
like
the
look
of
this
room
for
this
particular
meeting,
so
we're
gonna
select
a
different
one.
We're
gonna
go
back
and
we're
gonna
select
atlantic
and
we
see
the
same
information
here.
We've
got
the
picture.
We've
got
that
we've
got
the
floor
plan,
but
now
we're
gonna
book
go
ahead
and
book
it.
So
we
can
put
in
our
primary
contact.
Emily
is
our
primary
contact.
F
So
you
know
this
meeting
is
going
to
happen
during
lunch
time,
so
we're
going
to
have
some
lunch
and
then
we're
going
to
have
cocktails
when
we're
done
so
we're
going
to
have
all
that
brought
in
and
now
we
can
click
the
button
that
says,
request
this
room
and
that
will
now
book
this
room,
and
so
you
can
see
in
the
list
of
rooms
at
the
top.
This
now
has
the
the
atlantic
room
booked.
F
Now.
What
if
I
just
need
to
see
what's
out
there
and
what's
available
for
a
certain
date
or
time,
I
can
just
check
general
availability,
so
you
can
see
here,
we've
got
the
date
and
the
time
we
can
select
the
number
of
participants
in
our
room
in
our
meeting
and
then
we're
brought
to
a
list
of
all
the
available
meeting
rooms
that
can
hold
that
number
of
people
or
more,
and
so
then
it
lets
us
know.
You
know
what
are
what
are
our
options
here,
and
so
we
can
do
that.
F
I
think
the
important
thing
here
is
this
is
more
of
a
sample.
We
built
a
really
robust
service
layer
here
so
that
you
can
then
extend
it
if
you
say,
have
a
third
party
tool
that
you're
using
to
manage
your
bookings
for
those
executive
conferences,
you
could
you
know
plug
it
into
an
exchange
and
and
run
it
off
of
the
room
availability
there
as
well.
F
D
Awesome,
thank
you.
So
let
me
share
my
screen
and
see
if
that
goes
all
right,
so
derek
just
went
through
sort
of
a
run-through
of
what
the
app
that
was
built
looks
like
in
the
team's
space
and,
of
course,
that
was
built
with
the
sharepoint
framework.
So
getting
it
into
teams
is
a
really
easy
thing.
We
can
create
our
own
manifest,
which
we
did
in
this
case,
and
then
we
took
it
one
step
further
by
using
the
1.13
beta
released
to
the
sharepoint
framework.
D
D
So
all
of
that
can
happen,
then,
with
this
card
that
just
sits
right
in
the
dashboard.
So
from
a
quick
view,
perspective,
a
user
looking
at
their
mobile
device
with
the
dashboard
right
up
on
their
mobile
device
can
see
this
click
on
it.
Get
the
details
really
quickly
get
those
driving
directions.
All
of
that
right
from
the
get
go
so
the
I'm
going
to
do
a
slight
code
review.
So
if
I
come
over
here
just
quickly
on
the
left,
I
just
want
to
show
the
source
code.
D
So,
with
the
sharepoint
framework
solution,
we
have
the
web
part
for
the
room
reservation,
and
this
is
the
part
that
derek
just
demoed.
What
we
have,
in
addition
is
another
adaptive
card
extension
or
ace
with
that
room
reservation
piece
of
it
that
I
just
showed
you
and
all
the
pieces
that
are
important
to
that.
So
I'm
gonna,
I'm
gonna,
hide
this,
so
we
can
see
the
code
a
little
bit
better,
but
what
we
start
with
is
the
the
launching
point
for
our
solution.
D
One
of
the
things
we
want
to
define
right
away
is
the
state,
and
so
this
state
is
slightly
dif
if
you're
used
to
react.
This
is
slightly
different
than
what
you're
thinking
of
it's,
not
the
state
for
the
component.
It's
the
state
for
the
app
overall
and
it's
using
the
same
terminology,
so
it
can
be
a
little
confusing,
but
this
is
the
state
of
the
ace
itself.
D
So
we
can
pass
things
back
and
forth
between
the
quick
view
and
the
card
view,
so
that
helps
us
keep
track
of
where
we
are
and
so
what
we
need
to
do
when
we
initialize
our
ace
is
we
need
to
load
some,
the
room,
reservation
service
layer
and
we
need
to
set
up
what
those
meetings
are
that
are
going
to
happen
either
today
or
in
the
future,
so
we're
loading,
those
in
and
we're
also
creating
those
deep
links
in
the
teams
for
the
two
apps.
The
second
one
is
the
covid
one.
D
These
guides
are
fixed.
If
you
use
the
teams
manifest
that
come
in
the
sharepoint
framework
build
those
manifest
ids
are
fixed,
so
we
can
hard
code,
these
links
in,
and
so
that
works
pretty
handy.
So
we
have
the
teams
url
for
the
room,
reservation
system
and
the
teams
url
for
the
covid
attestation
app,
and
so
once
we've
set
this
up,
then
we're
going
to
start
the
the
system
automatically
launches
us
into
the
card
view.
D
That's
where
we
start,
and
so
for
this
one
we're
going
to
use
the
image
card
view,
and
you
could
see
when
we
showed
the
demo
that
we
had
the
nice
image
on
the
right
side
and
we
had
the
title
and
description,
and
we
have
that
quick
view
button,
and
so
all
we
have
to
do
is
define
what
our
data
is.
That
goes
in
there.
D
So,
in
the
data
method
of
the
card
view
we're
just
going
to
set
the
title:
the
icon,
the
primary
text
and
the
image
url
for
what
we
want
to
show
up
and
so
that
image
source
is
coming
from
our
meeting
room
id.
We
have
these
hard-coded
so
back
to
derek's
other
point.
This
is
somewhat
compared
to
the
other
two
solutions
that
we
demo
before.
This
is
a
much
more
sample
solution
where
we
have
mock
data
that
we're
loading
in
to
just
get
it
to
work.
D
If
you
actually
found
this
to
be
useful
and
wanted
to
implement
it
in
your
own
environment,
you
want
to
go
back
and
sort
of
fix
up
all
of
those
places
where
we
sort
of
mocked
out
some
data.
Okay.
So
once
we
have
the
card
view,
if
the
user
then
clicks
on
the
quick
view
button,
it
takes
us
to
the
quick
view
component,
and
so
when
we're
in
the
quickview
component,
I
like
to
think
of
the
quickview
as
a
mail
merge.
D
So
there's
there's
a
couple
of
methods
in
here:
one
is
to
get
the
data
and
one
is
to
get
the
template
now
compared
to
the
covid
sample
that
we
did
a
few
weeks
ago.
This
template
is
fixed.
We
know
what
the
the
card
in
the
quickview
is
going
to
look
like.
So
all
that
we
had
to
do
was
define
the
json
schema
for
the
card
and
we
can
do
that
using
the
adaptive
card
designer
we
can
get
ourselves
started
there.
D
So
the
the
text
blocks
in
the
type
and
the
the
previous
and
next
buttons
are
up
here
and
then
we
have.
You
know
the
meeting
room
image
as
well
as
like
other
meeting
details
and
other
meeting
buttons.
So
that's
what's
in
the
template,
if
we
come
back
to
the
quick
view,
then
so,
once
the
template
has
received,
then
it
needs
to
merge
with
the
data.
So
the
template
then
calls
the
data
method.
It
gets
the
data
for
whatever
the
state
of
our
card
is
so
remember
back
when
we
were
on
the
first
page.
D
D
As
I
clicked
on
it,
it
would
scroll
through
all
the
meetings
and
so
that's
handled
by
this
on
action,
and
so
the
on
action
has
a
submit
command
and
if
we
go
back
to
the
template-
and
I
go
back
to
the
top-
you
can
see
here
that
the
button
has
a
select
an
action
type
of
submit.
The
title
is
previous,
the
id
is
previous
and
then
the
obvious
you
know
obviously
down
here.
D
What
that
does
is
trigger
the
quick
view
card
to
re-render
wonderful
gets
the
template
again,
reruns
the
data
method.
The
current
index
is
different.
It
gets
a
new
meeting
from
our
array
of
meetings,
merges
the
data
together
and
shows
the
new
car.
So
that
is
a
quick
overview
of
how
that
ace
behaves,
and
hopefully,
that
kind
of
gives
everybody
a
good
starting
point
to
get
started,
trying
to
build
some
of
these
aces.
It's
really
fun,
as
patrick
mentioned.
A
Awesome,
thank
you,
julie
and
derek
great
demo.
There
good
to
see
some
ace
dev
starting
to
happen.
Like
I
said
I
do
encourage
folks
to
start
checking
this
out.
I
think
it's
a
a
really
neat.
You
know
way
to
do
some
integration
work
so
excited
to
see,
julie
and
derek.
Take
that
on
and
excited
to
as
well
see
what
everyone
else
out
there
is
going
to
come
up
with,
but
now
we
will
shift
over
to
hugo
who's
got
a
my
list,
notification
extension.
E
Excellent,
thank
you
so,
contrary
to
what
the
title
slide
says,
my
name
is
hugo
bernier,
but
I
am
here
today
to
present
to
you
a
web
part
sample
or
an
extension
sample
by
joao
mendez
called
my
list.
Notifications
joao
is
on
vacation
and
you
know
as
much
as
I
begged
for
him
to
just
you
know
come
out
of
his
vacation
to
do
the
presentation.
E
E
So
one
of
the
things
that
that's
kind
of
like
on
brand
for
joao,
is
he
likes
to
design
user
interfaces
that
look
really
clean
and
look
like
they're
integrated
as
part
of
sharepoint
and
office?
Here's
an
example
of
this.
If
I
asked
you,
where
is
the
component
that
joao
was
designed
like?
Where
is
it
on
this
on
this
screen?
E
You
probably
would
have
a
hard
time
figuring
it
out,
but
if
we
zoom
in-
and
you
take
a
look
at
this
thing
right
here-
that's
actually
the
component
that
draws
design,
and
he
always
does
this.
He
always
does
really
kind
of
clean
interfaces
that
that
again
they
don't
stick
out.
You
don't
go
like.
Oh,
this
is
custom.
It
was
built
by
you
know
a
bad
developer.
E
E
So
if
I
switch
to
my
personal
sharepoint
and
I
have
the
notif
the
thing
installed
here-
and
I
have
here
a
list
of
libraries
and
what
I'm
going
to
do
is
I'm
going
to
go
and
click
on
this
and
it
says:
well,
you
have
no
notifications
because
I
haven't
created
the
subscription,
yet
let
me
go
create
a
subscription
and
let
me
go
search
for
and
let's
just
say,
documents
right.
So
now
what
I've
done
is
I've
actually
created
the
subscription
to
a
document
or
to
the
document
library?
E
Let
me
close
this
and
now
I
want
to
make
it
clear
what
I'm
going
to
be
showing
you
here,
I'm
not
using
magic
shortcut
keys.
I'm
not
you
know
using
videos
or
anything
like
this.
This
is
actually
happening
in
real
time.
I'm
going
to
go
to
this
library
and
I'm
going
to
upload
some
files
there,
david
david,
will
appreciate
that.
I
use
this
image
for
him.
E
I
upload
an
image
here
and
it
says
it's
uploaded
right
and
look
what
happened
immediately.
I
didn't
do
anything.
I
didn't
refresh
the
screen
immediately.
My
notifications
kicked
in
before
I
do
another.
I
go
look
at
those
notifications.
Let
me
just
add
there
you
go
another
picture
and
I'll
just
go.
Do
this
and
let's
see
what
happens
here
now,
this
is
the
part
where
I
might
have
to
distract
you
with
some
things.
No,
it's
actually
pretty
fast,
all
right.
E
So
once
the
notification
has
been
received,
you'll
actually
notice
that
I
actually
get
a
message
here.
So
the
same
thing
would
happen
if
I
was
deleting
a
document
to
from
a
from
a
list
that
I'm
subscribing
to
if
I
was
creating
modifying.
Actually
let
me
just
go,
modify
a
document
and
show
you
what
I
mean.
E
Let
me
just
go
right
here,
I'm
going
to
edit
the
metadata
and
this
is
going
to
be
called
ugly
dog
and
I
just
want
to
make
sure
I'm
actually
editing
the
right
picture,
because
that
would
be
insulting
to
david.
There
you
go
and
there
so
I
just
made
a
change
to
the
metadata
and
eventually
what
should
happen
if
the
demo
gods
are
with
me
is,
I
should
get
a
notification
there
you
go.
E
E
I
can
remove
the
notifications
or
I
can
clear
all
notifications,
so
that's
pretty
much
what
the
extension
does
and
because
it's
an
extension
you
can
set
it
up
so
that
it's
automatically
deployed
to
all
pages
in
a
modern
site,
and
you
can
also
set
it
up,
so
it
gets
deployed
to
every
site
collection
in
in
your
tenant.
If
you
want
to
very
cool,
it's
not
like
you
have
to
install
a
web
part
or
or
do
anything
like
that,
all
right,
so
all
right!
So
how
do
you?
How
does
it
work
right?
E
Probably
the
worst
thing
to
do
when
you
want
to
do
these
kinds
of
interface
is
to
do
the
equivalent
of
like,
if
you're
waiting
for
someone
to
call
you,
you
don't
pick
up
your
phone
and
go
hello
and
then
oh
nobody.
You
know
nobody
called
I'm
just
gonna
wait
and
then
30
seconds
later,
I'm
going
to
pick
up
my
phone
say
hello
right.
E
No,
that's
not
how
these
types
of
communications
work
same
thing
here,
we're
not
using
a
a
timeout
or
a
loop
or
anything
like
that
to
actually
see
whether
there's
been
changes,
we're
actually
using
notifications
to
do
that
and
just
like
when
your
phone
rings.
You
normally
answer
except.
If
it's
me
I
don't
ever
answer
my
phone,
but
when
your
phone
rings,
you
answer
the
phone
and
only
when
your
phone
rings.
You
answer
your
phone
same
thing
here.
E
E
So,
what's
socket.io,
I
apologize
in
advance.
If
I
butcher
this,
I'm
trying
to
compress
a
lot
of
information
in
15
minutes
but
suck
at
I
o.
Basically
imagine
if
you
had
a
server
and
then
you
had
a
what
we'll
call
a
client
so
like
and
and
maybe
you're
writing
a
chat,
application
right
socket.io.
The
example
is
always
chats,
so
let's
just
use
that.
Let's
pretend
you're
writing
a
chat
application.
E
You
are
the
client
and
you
basically
log
in
to
teams
or
whatever
chat
application.
You
want
to
use-
and
you
say,
hey
mr
server,
I'm
ready
anytime.
You
have
any
messages
for
me.
Please
let
me
know
right,
but
also,
if
I
want
to
send
a
message,
I
can
just
send
a
message
to
to
other
clients.
So
all
the
other
clients
do
the
same
thing:
everybody
that
that
wants
to
receive
their
notifications
log
in
and
they
all
notify
the
server
the
socket
io
server
to
say,
hey.
E
If
you
have
any
messages,
please
let
me
know
so
what
happens
when
one
of
the
clients,
like
the
one
that's
highlighted
here,
sends
a
message
to
the
server.
Then
the
server
basically
notifies
it
broadcasts
to
all
the
clients
that
have
described
or
subscribed
to
this
notification
and
all
the
clients
ever
receive
a
message.
That's
like
the
super
quick
version
of
what
socket.io
works
it
does
now.
I
you're
going
to
you
know,
come
into
my
office
and
say
hugo.
E
You
know
why
would
I
implement
a
server
and
I
would
say
well,
first
of
all,
get
out
of
my
house
because
my
office
is
in
my
house,
but
you
don't
need
to
implement
a
server
because
behind
the
scenes,
microsoft
and
the
graph
team
are
actually
implementing
a
socket
io
service
that
you
can
use
to
actually
send
notifications
to
your
clients.
So
really
all
we
need
to
worry
about
is
implementing
the
client,
which
gets
the
notifications
and
subscribes
to
notifications.
E
Let's
look
at
the
code
and
by
the
way,
if
you
have
any
questions,
I
can't
see
the
chat
feel
free
to
interrupt
me
or
you
know,
patrick
vesa
david.
If
you
wanted
to
interrupt
me,
if
there's
questions,
I
will
do
my
best
to
ignore
them
all
right.
So
if
we
look
at
the
at
the
code,
there's
lots
of
code
here,
but
one
of
the
big
things
that
we
do
in
in
the
code
here
that
joao
does
is
in
his
use
ms
graph
api
component.
E
He
actually
has
this
thing
called
get
list
of
socket
ios
and
what
he
does.
He
actually
makes
a
graph
call
that
goes
to
the
the
site.
The
lists
the
list
id
or
in
the
case
like
in
the
case
that
I
use
I
use
my
document
list
and
then
it
looks
at
the
subscriptions
for
that
list,
and
it
looks
specifically
at
the
socket
I
o
subscriptions.
This
is
not
magic.
E
Socket
io
component
he's
got
this
magical
thing
where
he
uses
dot
socket.io
dash
client,
which
is
a
library
that
makes
everything
a
lot
easier
for
you
to
connect
to
socket
io
and
within
that
he's
got
just
a
little
function
or
a
hook
that
is
called
use,
socket
io,
which
really
gets
a
notification
that
is
passed
or
a
handler
that
gets
passed
and
the
handler
just
takes
care
of
once.
It's
actually
received
all
the
the
notifications.
E
In
this
case
we
get
a
notification
on
when
we
get
connected
and
we
get
a
notification
when
we
actually
receive
a
notification
from
from
a
library.
We
then
call
the
notification
handler
that
was
passed
in
now.
Where
do
we
pass
in
this
notification
handler?
Well,
there's
a
my
notification
component
that
actually
just
does
that
right
here
we
say
use
socket
and
we
pass
it
a
handle
notification,
and
so
that's
actually
how
we're
able
to
subscribe
to
socket
notifications
and
I'll
show
you
how
we
create
those
socket
notifications
very
shortly.
E
We
actually
just
go
get
the
list
of
notifications
and
for
each
notification
we
actually
get
the
site
information,
we
get
the
list
information
and
we
get
the
list
of
activities,
and
then
we
just
put
that
in
a
nice
big
array
of
activities
so
that
we
can
render
it
later
and
then
not
sure
why
I
had
that
highlighted
there
you
go
and
so
on.
If
we
go
back
to
the
use
ms
graph
api
component
again
so
on
the
use,
ms
graph
api,
we
do
the
get
list
of
activities.
E
How
do
we
get
the
list
of
activities?
Because
the
first
thing
we
did
so
far,
it
was
using
socket
io
to
actually
get
notified,
that
we
have
a
list
of
activities,
but
we're
not
getting
the
list
of
activities
when
we
do
get
list
of
activities.
We
actually
go
to
that
list
and
we
say
hey
show
me
what's
happened
since
last
time,
and
this
is
what
we
do,
that
we
do
that
using
the
graph
client
and
we
call
the
get
list
of
activities
list
all
right,
I'm
gonna.
E
E
We
get
a
handler
for
the
notifications
and
when,
when
we
get
a
notification
that
says
hey,
you
have
something
that
needs
to
be
displayed.
We
just
kind
of
create
a
little
stack
here
with
a
little
bell
and
a
little
number.
That's
really
all
we
do
again
we're
not
constantly
refreshing
we're
not
using
a
timer
we're
just
getting
notification
all
right
and
that
list
thing
at
the
top
on
the
side.
Here
is
the
same
idea
we
just
kind
of
when
we
get
the
notification.
E
We
actually
go
get
the
list
of
notifications
from
a
secret
place
actually-
and
this
is
actually
one
of
the
things
that
alex
trantev
has
demonstrated
in
the
past.
But
what
we're
doing
is
we're
actually
storing
the
list
of
settings
from
the
extension
and
the
personalized
setting
for
user
in
a
appsettings.json
file
which
is
stored
in
the
user's
onedrive
folder,
I'm
running
out
of
time.
So
I'm
not
going
to
get
to
show
you
the
onedrive
document
here,
but
that's
a
great
thing.
E
E
So
when
we
get
the
badge,
we
actually
get
the
navigation
and
we
create
a
stack
of
all
the
badges
with
all
the
buttons
and
then
all
the
individual
notifications.
That
say
this
document
was
added.
This
document
was
modified,
that's
really
all
we're
doing
here,
and
then
we
render
that
in
a
panel
that
has
actions
for
dismissing
notifications
and
for
opening
things
all
right.
I
am
skipping
straight
through
to
the
end
of
my
presentation
here.
E
You
can
actually
find
the
code
at
this
super
long
url
here
or
you
can
search
for
ak
nms,
spfx
extensions,
there's
also
an
awesome
blog
post
written
by
joao.
That
describes
I'm
sure
much
more
like
eloquently
how
he's
built
the
solution.
This
solution
is
awesome.
I
strongly
recommend
you
go,
take
a
look
at
it
thanks
everyone
for
your
time
and
thank
you
joao
for
always
being
awesome
back
to
you,
patrick.
G
Yes,
I'm
going
to
share
my
screen,
so,
first
of
all
I
have
to
apologize
for
my
voice.
I
have
the
flu
but
I'll
go
forward,
so
I'm
I'm
glad
to
have
seen
that
hugo
has
already
showed
us
something
that
I'm
going
to
demonstrate
in
this
quick,
quick
demo.
So
my
name
is
giuliano
de
luca.
I
am
an
independent
technical
architect
here
you
can
find
all
the
references.
If
you
want
to
reach
me
out,
feel
free.
There
is
also
my
youtube
channel
where
you
can
find
128
videos.
G
Now
I
started
one
year
ago:
okay,
let's
move
now
with
the
with
the
solution.
So
what
I
want
to
demonstrate
today
is
how
you
can
save
user
settings
or
preferences
in
in
one
drive.
There
is
a
special
folder
in
onedrive
called
apps,
where
you
can
store
data,
so
this
is
a
very
common
scenario
when
you,
when
you
deal,
for
example,
with
the
with
the
favorite
them,
so
you
want
to
make
available
the
dark
and
light
damn
functionality
on
your
application,
or
maybe
you
want
to
just
store
temporary
secrets
or
any
other
user
preferences.
G
So
this
is
a
very
nice
approach.
What
I'm
going
to
demo
here
is
a
sharepoint
framework
solution.
It's
a
web
part
but,
of
course,
using
microsoft,
graph
api.
You
can
use
any
other
kind
of
web
application
that
you
can
integrate
in
microsoft.
Chris
365
now,
as
I
said,
I'm
going
to
to
save
user
settings
in
this
special
folder
called
apps
in
onedrive.
G
How
we
can
do
that
there
is
an
endpoint
in
the
microsoft
graph
api
that
you
can
consume,
and
this
is
an
example,
so
you
can
put
here
uproot.
So
you
are
referencing
the
the
folder
apps.
Then
it's
a
good
practice
define
your
folder
in
this
in
this
folder.
So
it's
more
easy
to
find
your
your
data
and
then
I,
what
I'm
going
to
do
is
create
a
json
file
with
all
my
attributes
and
properties
when
you
load
your
application.
G
Why
we
have
to
do
that
because,
basically,
it's
a
different
domain
and
in
order
to
avoid
course
issues
you
have
to
you
have
to
have,
and
you
have
to
use
and
fetch
another
url.
In
fact,
when
you,
when
you
get
this
download
url,
we
can
see
in
the
next
slide.
You
get
something
like
that.
So
you
have
this
this
url
and
and
then
you
have
a
temporary
authentication.
So
this
is
a
token
a
valid
token
and
that
you
can
use
to
download
your
your
content.
G
In
my
case,
what
I'm
going
to
show
you
is
I'm
going
to
save
three
properties
and
the
them
the
favorite
tam
of
my
of
the
application,
then
a
token
and
finally,
a
preference
one.
Okay,
let's
jump
now
on
the
demo.
I
have
here
my
browser
instance
and
what
I
have
here.
This
is
my
personal
space
on
onedrive.
I'm
going
to
now
delete
this
folder
just
to
show
you
how
how
it
works,
I'm
going
to
click
on
the
three
dots
and
then
delete.
G
So
I
pinned
the
this
sharepoint
firmware
solution
here
in
the
left
pane
as
a
personal
app,
it's
called
the
cross
device
user
data,
and
here
we
go.
This
is
my
my
application
and
I
have
already
some
preferences,
so
I
I'm
going
to
delete
again
this
folder,
because
previously
I
was
not
properly
logged.
In
now
this
folder
is
removed.
I
can
jump,
for
example,
on
teams
and
then
open
again
this
up
and
now
I
have
this
this
form.
This
is
very
easy.
I
have
just
three
properties
here.
G
G
G
We
can
see
that
this
is
the
payload
of
the
request.
I
I
passed
these
properties,
which
represents
exactly
what
I
saved
here
now
going
on
the
on
one
drive
and
refreshing
the
page.
I
have
this
new
folder
just
created,
as
I
said
before,
it's
a
good
practice
to
create
another
folder.
Now
I
am
using
the
sharepoint
framework.
So
then
this
is
the
up.
Sharepoint
online
client,
extensibility
web
application
principle,
and
here
we
go.
G
G
Now
I'm
going
to
open
this
tool,
which
is
very
cool,
it's
called
the
let's
view
and
it's
very
fantastic
when
you
want
to
mirror
your
device,
I'm
going
now
to
open
the
same
application,
the
same
personal
app
on
my
android
device.
Here
I
have
cross
device
user
data,
I'm
going
to
open
the
same
application
and
as
we
can
see,
we
have
exactly
the
same
app
that
show
up
with
the
properties
that
I
saved
before.
So
I
can
of
course,
change
a
value
here.
G
G
Then
let
me
jump
in
the
car
of
the
solution.
I
am
here
in
the
function
component
and
so
what
I
have
here,
I
have
a
bunch
of
user
states,
and
so
here
I
have
a
function,
get
user
data,
and
this
is
exactly
the
end
point
that
I
consume
in
order
to
get
the
download
url.
Once
I
have
the
download
url,
I
can
fetch
this
url
in
order
to
get
the
the
json
and
so
then,
at
the
end
I
have
the
10
the
token
and
the
preference
one,
and
I
can
display
this
data
in
the
form.
G
When
I
have
to
save
this
data,
I
have
to
execute.
I
use
it
here.
The
microsoft
graph
client
factory,
the
mezzograph
client,
which
is
included
in
the
base
library
of
sharepoint
framework,
and
there
is
this
endpoint
that
you
can
use
by
specifying
content
at
the
end
and
then
in
the
put
method.
You
have
just
to
specify
your
your
json
once
you
have
done
that
you
are
able
to
to
save
your
file
in
your
onedrive.
G
A
Awesome,
thank
you
very
much
three
great
demos
today
from
julie,
derrick,
hugo
and
giuliano,
and
I
want
to
thank
everybody
for
joining
our
call
today.
Our
next
call,
or
this
recording
will
be
available
about
24
hours
on
our
youtube
channel.
You
can
always
follow
us
on
twitter.
Our
next
call
for
spf
x,
we'll
be
in
two
weeks
august
26th.
A
At
the
same
time,
our
next
general
dev
call
will
be
next
thursday
august
19th,
at
the
same
time,
hope
to
see
all
of
you
back
for
those
and
again
we'll
be
updating
our
community
calls
as
we
go
into
the
fall.
So
these
are
the
current
links
and
again
we'll
we'll
get
everything
updated
and
straightened
out
for
everyone.
So
thank
you.
Thank
you.