►
Description
SharePoint PnP Community - SPFx & JS SIG call on September 23. Demos on Applying a custom theme or a variation of the current SharePoint theme directly to the web part, Accessing personal files easily with My OneDrive Web Part, and Surfacing user specific calendar events with my Outlook events web part build. Tune into the Microsoft 365 platform community call each Tuesday. Updated events hosted by Sharing is Caring. Released PnPjs Client-side Libraries v2.9.0, updated CLI for Microsoft 365 v4.0.0. Preview and delivered 5 SPFx samples. The host of this call is David Warner II (Catapult Systems) @DavidWarnerII. Q&A live and in chat in this 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
A
A
Let's
begin
by
taking
a
look
at
the
opportunities
to
participate
in
patterns
and
practices,
we
have
an
spfx
demo
opportunity
if
you
are
in
the
interesting
mood
to
show
off
some
of
the
amazing
contributions
you've
made
to
the
community,
we
would
love
to
see
them.
If
you
would
like
to
provide
a
pnp
demo,
we
can
host
that
as
well.
You
can
contribute
on
github
if
you've
not
been
part
of
that.
Yet
we
have
some
sharing
is
caring
opportunities
to
assist
you
with
getting
involved
and,
of
course,
we
enjoy
getting
feedback
from
you.
A
A
You
can
always
request
a
demo
spot
on
one
of
these
calls
by
the
url
there
below
and
also
insert
it
in
the
chat,
and
we
will
be
able
to
provide
you
some
feedback
and
get
back
to
you
and
get
that
scheduled
moving
into
our
pedro
links
as
patrick
calls.
It
a
whole
host
of
opportunities
to
get
more
involved
here.
We've
got
two
developer
and
community
video
opportunities.
As
you
can
see,
there,
aka.msm365
youtube
and
aka
dot.
Ms
forward
slash
m365
pnp
for
slash
videos.
A
Those
are
going
to
take
you
to
the
videos
that
are
created
by
you
here
in
the
community,
as
well
as
those
in
microsoft,
providing
information
around
the
latest
initiatives
and
platforms.
We
are
an
open
source
community,
and
so
we
invite
you
to
provide
that
feedback.
As
mentioned,
you
can
do
that
through
a
variety
of
those
urls.
There
github.com
forward
slash
sharepoint,
forward,
slash,
pnp,
forward,
slash
office,
dev
and
forward
slash
microsoft
graph.
A
You
can
get
involved
in
discussions
and
provide
feedback
on
issues
and
because
we
are
an
open
source
community
that
includes
all
of
the
samples
that
are
available
to
you.
You
can
get
to
those
by
the
sample
galleries.
There
is
a
huge
list
there
that
you
can
take
advantage
of.
We
won't
call
each
of
them
out
just
know
that
you
can
get
to
all
of
them
by
going
to
the
all
up,
one
stop
shop,
url
of
aka
dot,
ms4
m365
pnp.
A
All
of
those
teams,
spfx
power
platforms
and
list
formatting
samples
are
available
for
you
to
contribute
back
to
so
we
invite
you
to
submit
and
provide
your
contributions.
The
microsoft
365
platform
call
has
begun.
This
is
a
weekly
call
occurring
on
every
tuesday
at
8
a.m.
Pacific
the
next
call
on
the
28th
of
september.
This
is
a
recurring
call
with
microsoft
presenters
around
the
latest
in
the
microsoft
365
platform.
A
A
Now,
if
you
are
overwhelmed
or
perhaps
want
to
get
more
involved
with
everything
in
the
community,
whether
it's
utilizing
the
resources
that
are
available
to
you
or
contributing
back
to
those
resources
sharing
is
caring
is
an
initiative
that
we
provide
that
provides
hands-on
guidance
on
how
to
get
involved.
These
are
safe
space
opportunities.
These
are
sessions
that
are
scheduled
throughout
the
month.
A
We
have
a
number
of
ask
me
anything.
Sessions
coming
up
power
platform
next
week
be
sure
to
sign
up
for
that
list
formatting
in
october,
and
then
we're
going
to
bring
back
pnpjs
sometime
in
october
as
well
and
the
starter
kit.
You
might
notice
the
bolded
new
upcoming
session
power
platform,
samples
first
time
contributor
that
has
been
done
and
scheduled.
So
we
invite
you
if
you
would
like
to
start
submitting
some
of
your
power
platform
contributions,
but
want
to
see
how
to
do
that
within
github.
A
A
It
is
a
badging,
unique
program
that
is
the
same
badging
mechanism
that
is
used
by
microsoft,
certification,
badges,
so
they
will
sit
right
alongside
your
profile.
We've
got
a
number
that
we're
working
on
with
luisa
freese
on
bloggers
on
the
independent
publishing,
connectors.
All
kinds
of
opportunities
that
are
coming
up.
We're
gonna
have
some
fun
ones
as
we
head
into
the
winter
time.
So
we
ask
you
to:
please:
opt
in
aka.msforwashm365
pnp
dash
recognition.
A
B
Thank
you.
I
included
the
following
site,
because
this
was
actually
getting
a
lot
of
feedback.
Good
feedback
from
the
last
sorry
on
tuesday
call
just
to
clarify
where
the
sharepoint
framework
can
be
used
and
basically
the
sharepoint
framework.
There
was
a
discussion
even
when
we
started
this
call.
Why
is
it
called
sharepoint
framework
anymore
because
you
can
use
it
in
so
many
areas,
but
renaming
things
is
not
always
necessarily
the
best
thing
to
do,
but
sharepoint
framework
can
be
used
to
build
applications
with
order
hosting
for
microsoft
teams
also
for
microsoft,
viva.
B
So
the
mobile
experience
is
with
aces
for
with
sharepoint
framework,
and
we
also
in
update
the
microsoft
teams,
javascript
sdk,
there's
image,
rendering
apis,
which
will
optimize
if
you're,
using
an
image
it
will
automatically
redirect
to
image
urls
to
use
cdn.
If
it's
enabled
this
update
on
the
dependency
versions,
there's
also
trope
of
the
local
workbench.
So
that's
something
which
is
good
to
be
aware,
as
well
now
in
general,
in
future,
for
the
following
steps.
B
Viva
is
really
the
big
big
focus
area
teams
is
a
big
focus
area,
not
again
forgetting
about
sharepoint
and
fixing
any
known
issues.
What
we're
having
so
we're
really
investing
right
now
on
going
through
the
issue
list.
Cleaning
up
the
backlog,
making
sure
that
everybody
is
is
in
quotes
happy
on
on
the
situation
and
then
improving
where
needed,
the
capabilities
which
are
available,
but
that's
a
quick
recap
on
where
we
are
and
what
are
we
doing
and
drawing
it
back
to
you,
david.
A
C
Thank
you.
I
appreciate
it
david.
I
don't
have
a
ton
today
we
did.
I
did
finally
get
around
on
september
20th
to
doing
the
2.9
release.
There
is
one
new
graph
feature
for
advanced
query,
but
otherwise
I've
been
spending
all
my
time,
I'm
working
on
getting
the
testing
framework
up
to
date
for
the
new
v3
version
so
and
doing
some
reworking
some
of
the
tests
so
that
they
work
with
the
new
model.
C
So
I've
just
been
hard
at
work
at
v3
and,
as
we
said
earlier,
patrick's
out
on
vacation
for
a
couple
weeks,
he
should
be
back
next
week,
so
we
can
start
integrating
our
work
together.
If
you
are
interested
in
v3,
there
is
a
v3
branch.
It
is
getting
pretty
close
there,
a
lot
of
the
the
code
there
is
working,
and
so
you
can
go
check
that
out
if
you're,
interested
and
and
see
what
we're
up
to
also
our
full
list
of
plans
is
pinned
on
issue
1636.
C
So
if
you
go
to
that
issue,
you
can
see
all
our
v3
plans
and
then
there's
links
out
to
discussions
for
each
of
the
subsections
in
that
listed
in
that
plan.
So
please
go
ahead
and
check
out
our
v3
branch
to
see
what
we're
up
to
and
if
you
would
follow
us
on
m365pmpj
on
twitter
to
keep
up
with
everything.
We're
up
to.
Thank
you
back
to
you,
david.
A
Awesome,
thank
you
julie.
We
see
all
those
rabbits
are
assembling
for
battle
all
right.
Moving
into
the
cli
for
microsoft,
365
there
is
a
new
preview
version
4
with
some
breaking
changes.
So
we
want
to
be
aware
of
that.
Retrieving.
Sharepoint
group
members
change
default
output
to
json,
remove
value,
wrapper
and
output
in
some
commands,
remove
duplicate,
ids
in
spo
list,
item
commands,
removed,
obsolete
file,
path,
options
and
mini
commands
have
been
upgraded
to
use
microsoft,
graph
1.0.
A
You
can
always
get
the
latest
beta
by
using
the
npm
install
at
next
and
then,
of
course,
you
can
utilize
it
with
docker
v4,
with
braking
changes.
Ships
at
the
end
of
september
so
be
on
the
lookout
for
that
cli
is
a
fantastic
tool
for
utilizing
within
your
microsoft,
365
tendency
moving
into
the
spfx
reusable
controls.
A
These
are
controls
that
allow
you
to
not
have
to
reinvent
the
wheel.
React
controls
can
be
used
within
your
web
parts
and
extensions
to
provide
a
common
look
and
feel
amongst
the
sharepoint
interface,
so
that
you
are
not
having
to
try
to
recreate
that
on
your
own.
The
react
property
controls
are
available
so
that,
in
that
property,
pane
of
the
web
part
you
are
able
to
utilize
some
rich
interactive
features
again
without
having
to
recreate
it
from
scratch,
use
what
the
community
has
built
take
advantage
of
all
these
tools.
They
are
amazing.
A
They
will
save
you
time
and
allow
you
to
focus
on
the
fun
stuff
that
you
would
like
to
integrate
into
your
solutions.
These
are
the
last
major
changes
of
v2,
so
you
want
to
update
your
solutions
to
spfx,
1.12.1
and
v3
of
the
controls.
A
number
of
contributors
have
added
into
these,
so
we
want
to
thank
them
all
and
you
can
get
more
at
the
urls
on
the
screen.
A
Moving
into
pnp
modern
search,
you
can
utilize
the
modern
search
experiences
with
powerful
and
flexible
web
parts.
The
september
release
is
just
a
little
bit
behind,
but
they're
still
working
on
it.
You
can
access,
though,
the
july
release,
which
includes
a
number
of
features.
As
you
can
see,
dutch
translation
persona
card
fix
and
proper
fix
for
custom
helpers
and
web
components
across
web
parts.
Aka
dot,
ms
forward
slash,
pnp
search.
D
Thank
you,
david
in
a
world
where
spfx
constantly
evolves
comes
a
set
of
repositories
where
you
can
find
sample
extensions,
web
parts
and
adaptive
card
extensions.
These
are
the
updates.
Since
the
last
two
weeks
on
the
spfx
extension
sides,
we
have
a
new
extension
called
copy
move
items
within
list
by
sudarsan
and
allows
you
to
actually
move
stuff.
Obviously,
as
the
title
says,
within
within
custom
lists,
it's
really
cool
feature.
On
the
webart
side,
we
have
a
new
web
part
by
amory,
which
is
the
application
secrets
exploration.
D
If
you
have
a
lot
of
azure
aed
applications
with
secrets,
you
should
be
using
certificates,
but
let's
say
you
have
secrets
and
there
you
want
to
keep
track
of
whether
they're
expiring
or
not.
This
is
a
great
way
to
actually
get
a
list
of
all
your
secrets,
not
the
actual
secrets,
but
the
expiry
dates
of
them.
D
Brown
has
updated
his
team's
membership
updater
for
the
slash
members
in
the
private
channels
url
and
then
on
the
advanced
page
properties
by
derma
mujahid.
We
have
an
update
where
he's
added
the
support
for
web
parts
on
sites
that
are
running
on
a
different
language
and
we
have
a
new
web
part
by
our
favorite
react:
intern,
allison
collins,
it's
a
new
web
part
that
actually
extends
the
sharepoint
news
web
part
by
adding
things
like
pagination
multi-selecting
stuff
from
multiple
sites,
different
stylings,
different,
all
sorts
of
different
options.
D
D
We
have
already
some
pull
requests
for
some
samples,
so
we're
going
to
be
accepting
these
pool
requests
very
shortly
and
we're
going
to
be
presenting
them
on
upcoming
call
calls.
But
if
you
do
have
some
awesome
adaptive
card
extension
samples
that
you'd
like
to
contribute,
please
go
to
aka.ms
spfx,
that's
it
for
me
back.
A
B
Move
in
again,
everybody
in
here
it
seems
to
be
working.
Yes,
they
fixed
it.
Finally,
so
we
can
finally
do
this,
I'm
already
recording,
let's
wait
until
we
hit
the
50.,
I'm
not
going
to
enable
my
video,
because
cute
good
good,
so
we're
not
feeling
is
that
the
limit
over
there
still
still
a
couple
more
seats,
full.
A
B
Almost
I
think,
that's
it.
Let's
do
something
baby,
everybody!
Thank
you
for
joining
us.
Thank
you.
Thank
you.
Hopefully,
we'll
see
you
in
the
dusseldorf
or
in
las
vegas
later
this
year.
If
you
get
to
travel,
so
we'll
see
who's
going
to
be
where,
but
thank
you,
everybody
awesome
to
see
all
of
the
people
brilliant
brilliant.
Thank
you.
Thank
you.
Let's
get
back
on
the
demos.
A
E
Thank
you.
Let
me
share
my
screen
so
welcome
to
this
demo
about
a
web
part
that
I
implemented
to
show
you
how
to
use
the
fruit
ui
team
variant
inside
the
web
part.
So
let
me
share
some
information
about
me,
I'm
max
of
mpp
in
office,
development
and
business
application,
and
I
work
as
senior
consultant
on
of
365
and
power
platform
technologies.
So
you
can
find
here
some
information
if
you
want
to
contact
me
by
email
or
twitter
linkedin,
okay.
E
So,
let's
start
so
in
this
slide,
you
can
see
two
in
two
screenshots
that
come
from
the
sharepoint
lookbook
and
I
market
two
were
part,
because
when
I
take
a
look
at
the
lookbook,
I
really
impressed
impressed
on
the
possibility
to
highlight
some
content
inside
the
web
part.
So,
for
me,
it's
very
important
when
I
build
some
internet
for
my
clients
to
highlight
the
content
of
the
web
parts,
because
some
clients
want
to
make
more
focus
in
some
web
part
and
less
focus
to
another
web.
E
And
of
course,
there
are
many
ways
you
can
use
by
writing
your
code
on
a
background
image,
for
example,
or
you
can
use
the
section
background
to
change
the
background
and
then
the
web
part
inside
this
section
on
a
different,
for
example,
background
my
web
part
my
demo.
It's
an
exercise
to
how
to
use
the
fluent
ui
variation,
not
only
inside
the
section
page
but
inside
the
web
part
and
this
implementation
it's
implemented
in
three
different
ways.
E
So
in
all
these
cases
this
example
works
very
well
with
the
the
front.
Ui
react
control.
Of
course,
if
you
don't
use
the
fluent
ui
react
controls.
Of
course,
the
variation
is
applied
on
the
background
and
some
html
element
like
text,
or
something
like
that,
and
of
course
you
can
use
the
team
object
to
take
all
the
property
that
the
team
have
to
take
the
background,
color
the
accent
color,
the
text
color
or
something
like
that.
So
the
first
way
it's
the
simple
way
take
the
current
section
variation
color.
E
If
I
select
inside
this
web
part
these
settings
inside
the
property
pane,
nothing
appears
so
the
background
and
the
color
come
from
the
section,
the
section
variation,
but
there
are
on
a
second
way
and
then
you
can
select
the
current
sharepoint
theme.
If
you
select
this
value,
you
have
another
option,
and
now
you
are
able
to
select
the
variation
of
the
current
sharepoint
team,
for
example,
known
or
neutral,
or
soft
or
strong.
E
E
The
third
way
it's
the
possibility
to
use
a
custom
palette
that
comes
from
the
fluent
ui
team.
Designer
later,
I
show
you
this
tool,
but
basically
you
are
able
to
define
some
colors
and
then
generate
on
a
json
that
contains
the
palette
color
for
an
affinity,
ui
theme
so
by
select
custom
and
then
use
this
front.
Ui
custom
palette,
property,
you're
able
to
set
the
custom
palette
and
then
again
you
are
able
to
change
from
known,
neutral,
soft
and
strong
variation.
E
So
if
you
don't
know
the
fluent
ui
theme
designer
it's
on
a
free
tool
that
you
are
able
to
use
the
browser,
you
are
able
to
select
the
primary
color,
the
text
color,
the
text
color
and
the
background
color
and
then
automatically
this
tool
generate
the
the
theme
that
you
can
export
as
a
g-zone
or
code
or
powershell.
In
this
case,
we
need
just
the
json
file,
so
the
json
text
and
then
copy
and
paste
inside
the
property
of
of
the
web
part.
E
Of
course,
if
I
change
the
section
background,
you're
able
to
see
that
the
web
part,
so
this
is
a
simple
text
web
part-
and
this
is
my
my
web
part-
this
one
part
take
the
color
of
the
of
the
of
the
section.
But
if
you
select
the
web
part,
you
are
able
to
change
to
the
current
sharepoint
theme
and
then
again
we
are
able
to
change
the
variation
just
for
visual
part
and
the
last
way,
the
third
way
it's
the
custom.
E
You
are
able
to
copy
and
paste
a
custom
theme
and
then
change
the
variation
just
so
the
variation
that
come
from
this
custom
custom
theme
now
the
implementation,
the
implementation
start,
with
the
enable
support
for
the
team
variants
inside
the
web
part
manifest.
You
know
that
you
have
to
put
these
supports
in
variants
through
inside
the
manifest
to
enable
your
web
part
to
support
the
team
variants.
E
E
The
core
of
this
example
is
the
team
service
dot.
Yes,
it's
a
class
and
a
typescript
class
that
contain
all
the
code
that
we
need
to
generate
the
theme
with
all
the
property
that
the
visual
part
have,
for
example,
the
the
type
of
the
variation
known,
neutral,
soft
or
strong,
and,
of
course,
the
type
of
theme
that
we
want
to
to
use.
E
The
current
theme,
the
variation
that
come
from
this
section
or
the
generate
theme
from
the
palette,
the
json
file,
then
in
the
render
method
we
need
to
generate
by
using
this
generate
team
method
of
the
team
service
class.
We
need
to
generate
the
current
theme
and
then,
when
we
have
this
object,
we
pass
this
team.
It's
a
team
variant
to
the
react,
control
or
the
component
that
you
want
to
to
use
to
render
your
web
part.
Of
course,
some
information
regarding
the
property
pane.
E
The
current
theme
and
then
generate
an
svg
inline
image,
and
this
is
basically
it's
the
image
that
you
can
see
inside
this
slide,
the
the
text
a
a
and
the
background
on
and
foreground
with
different
colors
and
then
in
the
property
pane
configuration.
I
generate
the
inline
svg
for
known,
neutral,
soft
and
strong
variation
and
then
use
this
text
for
the
image
source
for
each
options
in
the
property
pane
choice
group.
E
The
last
thing
is,
you
need
to
remember
to
use
the
team
provider
control
to
automatically
apply
the
theme
to
all
the
control
that
you
use.
So
there
is
nested
on
the
team
provider
inside
your
react
control.
It's
very
important
because
in
this
way,
by
passing
our
team
variant
property
to
the
theme
parameter
of
the
team
provider,
the
team
provider
automatically
apply
the
theme,
the
current
theme
to
all
to
all
fluent
ui
component
that
you
have
inside
your
main
controller.
E
When
you
use
this
team
provider-
okay,
so
somewhere
some
references,
the
first
of
the
first
one,
it's
the
the
part,
the
url,
so
it's
the
url
of
the
repo
when
you
are
able
to
find
this
part
source
code,
the
references
to
the
pmp
properties
controls
and
the
reference
to
the
fluid
ui
scheme
utilities.
It's
an
npm
package
that
you
can
add
to
your
code
to
your
project
and
this
package
contain
all
the
utility
to
generate
the
different
variation
from
a
specific
front.
Ui
thing.
A
F
Thanks
david,
let
me
share
my
screen.
Okay,
so
hello,
everyone
welcome
to
this
demo.
Today
I
would
be
presenting
an
spfx
webpart
sample
to
display
current
users
onedrive
files
a
little
bit
about
myself.
I
am
siddharth
garcia
and
I
am
an
independent
consultant.
I
am
in
microsoft,
mvp
and
in
proud
m365
community
contributor.
F
F
First,
let's
see
the
driving
factor,
okay,
so
the
driving
factor
was
obviously.
This
was
for
one
of
the
customer
who
wanted
and
web
part
to
display
files
as
a
part
of
the
internet,
landing
page
for
the
current
logged
in
user,
but
they
were
supposed
to
display
one
drive
files-
okay,
so
probably
when
it
was
developed,
it
was
part
of
you
know
internet
landing
page,
but
I
probably
think
this
can
also
be
used
as
a
viewer
connection.
Web
part.
F
This
is
a
way
to
solve
personalized
content
for
the
current
logged
in
user
and
to
explore
onedrive
graph
api
and
its
usage
within
this.
So
we
are
using
onedrive
graph
api
to
get
the
current
logged
in
user
files
and
everything
and
then
display
it.
Moving
ahead.
Summaries
are
some
of
the
features
of
the
web
part.
As
I
said
it
displays
current
logged
in
users,
onedrive
file,
the
folders
and
files
are
browseable.
F
It
means
we
would
be
able
to
drill
down
to
the
folders,
and
if
it
is
a
file,
it
takes
us
directly
to
the
particular
file
by
using
the
url.
Then
it
also
supports
display
most
of
the
known
file
types.
I
tried
to
add
as
many
non-extensions
files
to
display
the
icons,
but
if,
if
some
icons
are
missing,
it
can
be
easily
extended,
then
there
is
a
breadcrumb
which
will
allow
us
to
basically
navigate
between
the
folders.
F
The
way
we
have
this
functionality
in
our
onedrive
application,
then
we
have
facility
to
sort
the
files
based
on
name
and
modified
date,
column,
which
is
important,
and
there
is
a
way
to
configure
this
webpart
by
which
we
can
choose.
The
field
which
we
wanted
to
display
on
the
web.
Part,
like
name
modified,
modified
right,
modified
by
file,
size
and
sharing,
and
also
there
is
an
option
to
make
the
web
part
link
clickable
to
send
the
end
user
to
actual
onedrive
url.
F
So
this
is
the
web
part
which
we
are
seeing
and
if
you
see
this
is
these
are
the
my
onedrive
files,
which
is
there
to
confirm
that
these
are
one
day
files
I'll
go
to
my
onedrive
url,
where
you
can
see
the
similar
list
of
files
and,
most
probably,
I
have
tried
to
replicate
the
same,
look
and
feel,
and
you
can
drill
down
to
the
folders
within
folders.
If
it
is
a
file,
you
click
on
it.
It
will
take
you
to
that
particular
file.
F
F
Also,
you
can
see
that
there
are
different
types
of
icons
which
are
being
supported,
different
types
of
files,
okay,
coming
to
the
configuration.
If
we
go
to
the
configuration,
the
webpart
title
is
configurable,
so
you
can
configure
this
and
I
am
using
pnp
pnp,
reusable
control
to
use
this
webpart
title
and
there
you
can
choose
the
fields
which
you
wanted
to
display
onto
the
web
part.
Okay,
the
reason
behind
giving
this
as
a
configurable
would
be.
Probably
we
might
need
this
web
part
on
an
internet
landing
page.
F
We
just
wanted
to
display
a
single
column.
This
would
be
an
example
of
that
like
if
you
see
the
same
web
part
is
being
added
to
a
landing
page
where
you
just
display
one
column
and
nothing
else.
So
it
would
be
easy
to
configure
this,
and
this
option
is
basically
to
whether
you
wanted
to
make
this
link
a
hyperlink
or
not.
F
If,
if
it
is
on
it
will
take
the
user
to
onedrive
of
the
particular
user,
so
yeah
a
simple
web
part,
but
probably
quite
useful
when
we
wanted
to
use
this
kind
of
a
parts
to
give
and
personalized
feel
to
the
end
user
on
our
internet,
landing
page
or
probably
viewer
connection
going
to
the
code.
This
is
an
spfx
code
structure,
which
is
a
typical
record
structure
which
we
have
in
our
onedrive
webpart.ts
file.
F
F
Then,
if
you
see
these
are
the
typical
methods
to
sort
data
depending
on
what
the
current
sorting
parameter
is-
and
this
is
the
table
cell,
clear
click
event
handler
a
callback
method
to
get
the
new
files
as
soon
as
and
folder
has
been
created
within
that
particular
file.
Right
and
same
goes
for
the
breadcrumb.
So
as
soon
as
the
breadcrumb
is
clicked,
it
basically
gets
the
current
folder
hierarchy
and
makes
a
drive
api
call
before
going
to
the
table
and
grinder
and
everything.
F
It
would
be
in
the
main
component
file
so
in
the
component
did
mount.
This
particular
method
is
to
get
the
url
of
the
current
user's
onedrive
and
then
it
would
be
used
to
add
it
to
the
webpart
title,
and
this
method
is
basically
to
actually
call
the
graph
api.
The
end
point
would
be
something
less
means:
less
drive
root
and
the
folder
path
would
be
a
dynamic
folder
path
depending
on
the
user
selection
and
by
default.
F
F
Coming
back
to
the
component,
I
have
two
component:
one
is
the
header
component,
which
takes
care
of
displaying
the
header
within
the
table
and
the
body
component.
It
takes
care
of
rendering
the
table
body
and
the
table
row,
and
this
is
a
typical
list
view
which
we
would
use
okay,
but
to
explore
material
ui.
Within
this
I
am
using
material
ui
component
to
see
that
you
know
how
things
would
look
like
and
just
to
explore
material.
You
are
within
our
spf
expert
part.
F
Definitely
we
could
use
office
ui
fabric
where
we
have
similar
listview
controls
and
everything
right
other
than
that.
Just
one
thing
which
I
would
like
to
highlight
is,
as
we
are
using
graph
api,
this
web
part
would
require
two
permissions,
which
would
be
file
read
and
file
dot,
read
all
which
would
be
a
delegated
permission
as
we
are
getting
the
files
from
the
current
logged
in
user
and
the
icons
icons
are
been
via
I'm
using
svgs.
F
So
all
the
supported
icons
have
been
stored
as
a
part
of
the
web
part,
and
then
it's
been
referred
into
the
css
files,
okay,
so
yeah
a
simple
spfx
webpart,
which
will
you
know,
explore
the
usage
of
onedrive
graph
api
and
can
be
used
as
landing
page
and
viva
connection.
That's
it
from
my
side,
thanks
david
over
to
you.
A
Thanks
siddharth,
really
good
job.
You
said
a
couple
times:
it's
simple,
but
sometimes
simple
is
powerful
and
that's
what
you've
done
here
really
appreciate
the
effort
in
making
it
feel
out
of
the
box,
but
also
dynamic,
where
you
could
use
it
in
that
full
width,
section,
single
column,
section
or
the
sidebar,
making
it
very
dynamic
and
utilitarian
so
excellent
job.
All
right.
A
G
Hi
david,
thank
you.
Let
me
set
my
screen
so
yeah
thanks
everyone.
Today
we
will
see
how
my
outlook
events
webpart,
will
work.
So,
first
of
all
I
am
chandni
rajapati.
Currently
I
am
working
as
a
sharepoint
consultant.
Apart
from
this,
I
am
a
blogger,
open,
source
contributor
and
maintainer
of
the
pnps
pfx
human
generator,
and
here
is
my
twitter
handle.
G
G
So
let's
see
the
demo,
so
I
already
added
this
webpart
in
one
page.
So,
first
of
all,
let
me
edit
so
here
for
one
is.
First
of
all,
this
is
a
webpart
title.
Then
there
is
a
date
range
selection
so
like.
If
I
will
select
the
all
upcoming
events,
then
it
will
shows
the
current
tier
events.
Then,
if
I
will
select
the
car
this
week,
then
it
will
shows
me
a
current
week
event.
G
Then,
if
there
is
a
next
two
week,
then
it
will
shows
the
two
weeks
events
same
for
the
current
month
and
same
for
the
quarter.
Then
there
is
a
two
layout:
one
is
like
compact
and
another
one
is
a
film
strip,
so
in
compact
we
are
asking
to
user.
How
many
number
of
events
do
you
want
to
so,
for
example,
if
I
will
enter
2,
then
it
will
shows
me
2
events.
If
I
will
enter
5,
then
it
will
shows
me
five
event,
but
currently
there
is
a
three
events.
G
Only
so
if
I
will
select
the
current
year,
then
it
will
choose
the
five
events.
So
this
is
all
about
the
demo.
So
now
move
to
the
code.
First
of
all,
folder
structure
so
for
main
file
is
react.
My
event,
vapor
dot
ts.
So
in
this
file
we
will
configure
all
the
property
pane
configuration
and
we
will
pass
the
properties
to
the
main
component.
G
G
Then
there
is
a
service
folder
and
in
service
folder.
There
is
a
calendar
service,
dot,
ts
file,
so
in
this
file
we
will
create
our
service.
Then
there
is
a
compass.
There
is
a
share
folder
and
inside
this
folder
there
is
a
component
folder
and
in
the
this
folder
there
are
some
common
components
and
this
all
components
are
coming
from
out
of
the
box
event.
Web
parts,
then
yeah
main
file
is
package
solution.json.
G
So,
first
of
all
we
are
using
graph
api,
so
we
have
to
add
calendar
door,
calendars,
dot,
read
scope
in
web
api
permission
request,
then
yeah
calendar
service,
dot,
ts
file.
So
in
this
file
we
are
calling
graph
api
to
get
the
outlook
events.
So
for
that
I
am
calling
the
calendar
view
endpoint,
and
this
end
point.
We
we
needed
to
to
parameter
start
date
and
end
it,
because
we
are
using
the
date
range.
So
we
we
need
a
start
date
and
end
it
as
a
parameter
and
then
react
my
event
weapon.ts.
G
So
in
this
file,
first
of
all
property
pen
configuration
so
first
one
is
maximum
events
for
for
compact.
So,
as
we
have
seen,
we
are
asking
to
user.
How
many
number
of
event?
Do
you
want
to
show
in
a
compact
layout
only
so
this
is
a
condition
based.
If
there
is
a
compact
layout,
then
we
will
ask
to
user
to
get
number
of
user
number
of
event
one
to
so.
G
G
G
So
in
get
events
method,
another
function
is
get
start
and
end.
So
in
get
start
and
ended
function.
We
are
finding
end
date
because,
and
that
will
be
based
on
that
date
range
and
current
date
will
current
date
will
be
today's
date.
So,
for
example,
date
range
dot,
all
cup
upcoming.
So
in
this
we
need
a
current
year
date.
G
So
in
end
date
we
are
using
women's
yes,
and
here
last
year
last
day
is
a
friday
october
current
week,
and
here
we
are
using
one
year
and
it
formatting
it
to
y
y
y
m
d
d.
Then,
for
example,
there
is
a
current
week
then
here
we
are
using
moment.js
and
end
of
the
week,
and
here
we
are
not
adding
anything
so,
but
if
there
isn't
suppose
next
two
week,
then
we
are
adding
two
weeks
to
the
day
so
and
so
on.
G
For
the
like
month
and
quarter,
10
yeah
get
events
method.
So
in
this
method
we
are
calling
our
service,
which
we
are
already
created
in
calendar
service.ts
file.
So
here
we
are
passing
current
date
and
end
date
and
in
response,
if
there
is
a
data,
then
we
will
store
data
in
an
event
state.
If
there
is
no
data,
then
we
will
set
a
no
events
found
message
state
and
if
there
is
a
error,
then
we
will
set
state
error
message
then
main
part
is
render
the
content.
G
So
here,
first
of
all,
we
will
check
if
there
is
an
event
or
event
length.
If
event
length
will
be
found,
then
first
we
will
check
the
layout.
If
it
will
be
a
compact
layout,
then
we
will
call
the
method
render
compact
list.
Otherwise
we
will
enter
the
film
strip
list
and
if
there
is
a
suppose
error
message,
then
we
will
print
the
error
message
in
message
bar
and
for
example,
and
if
there
is
a
no
event
found,
then
we
will
print
the
no
event
found
message
state
in
the
message
bar
now.
G
Let's
see
these
two
methods,
film
strip
and
compact
list.
So
first
one
is
film
strip
list.
So
here
I
am
using
film
strip
layout.
So
this
is
a
component
which
already
created-
and
here
we
are
mapping
the
event
and
we
will
render
each
event
in
even
event
card.
So
this
is
also
component
and
here
some
properties
we
have
to
pass
like
event,
then
is
compact,
then
is
edit
mode
and
so
on
then
another
one
method
is
render
compact
list.
G
So
here
we
are
using
pagination,
because
whenever
a
user
will
select
the
compact
and
we
are
asking
to
user,
how
many
number
of
events
do
you
want
to
so
so
here
pagination
component
will
be
used.
Then
there
is
a
compact
layout
component
in
here.
Another
method
is
render
compact
list
item.
So
in
this
method,
I
am
using
event
card
to
render
the
each
event
so
this
this
is
all
about
the
code,
and
here
there
are
some
reference
and
here
link
for
the
event
web
part.
So
thanks.
Thank
you.
A
Awesome
shaunae,
thank
you.
So
much
calendars
are
always
popular,
but
always
a
little
challenging
so
really
appreciate
your
efforts,
and
definitely
you
thoroughly
thought
this
through
a
lot
of
information.
Hugo
bernier
would
be
smiling
on
how
you
shared
the
code
through
your
slides,
excellent
job.
Thank
you
so
so
much
we
thank
you.
B
A
B
B
I
would
not
be
able
to
unfortunately
answer
that
on
any
date
such
also
because
I'm
not
from
craft
site,
but
but
I
I
I
don't
know
so-
hopefully
pretty
soon
after
today,
it
will
be
after
yes,
it
will
be
a
tuesday,
not
necessarily
the
next
tuesday
or
a
tuesday
any
update
on
admin
functionality.
Okay,
so
let
me
double
check
what
stefan
is
actually
adding
here.
I'm
just
opening
up
the
random
link
in
a
chat,
that's
always
safe.
Hopefully
this
is
something
which
we're
gonna
actually
have
a
look
now
just
kidding
the
template.
B
All
of
those
scenarios
are
being
kind
of
planned,
but
no
exact
timelines
and
if
those
feel
interesting
feel,
please
remember
the
providers
feedback
and
keep
on
asking
updates
on
those
vs
code
extension
that
highlights
when
you
do
something
like
this
single
start
inside
that
is
there
and
vs
code
extension.
I
don't
know
if
somebody
knows
then
let
mike
know
may
have
been
already
asked
any
update
on
the
next
sp
on-prem
subscription-based
spfx
version
yeah,
so
unknown
person
is
a
great
title
and
a
name
so
the
on-premises.
B
Unfortunately,
it
seems
that
the
on-premises
version
will
stick
within
the
1.4.1
version,
so
there
will
not
be
apparently
an
update
on
the
spfx
version,
which
will
be
in
the
sharepoint
subscription
edition,
and
I
do
understand
that.
That's
not
necessarily
a
super
optimal
situation,
but
it
really
comes
down
on
on
the
sharepoint
framework
has
to
follow
up
on
the
ux
version
and
ux
experiences
with
the
particular
on-premises
version
is
using.
B
Some
of
this
cool
spf
effect
parts
presented
over
time
in
the
other
box
web
parts
in
the
future
good
question
from
avinash.
So
it's
a
lot
of
the
the
sample
web
parts
and
ideas
what
we're
being
presented
in
this
course.
Of
course
there
are.
There
are
other
people
in
the
microsoft
who's
following
up
on
their
schools
and
demos
and
we're
collecting
ideas
from
this
from
here
as
well.
So
some
of
these
might
end
up
in
out
of
the
box
web
part.
B
Some
of
these
might
end
up
integrated
on
existing
web
parts,
and
but
of
course
you
can
also
download
the
sample,
but
I
do
understand
that
then
there's
the
potential
supportability
challenges
on
that.
So
all
of
this
stuff,
what
we
do
together
with
community
is
being
used,
of
course
internally
also
for
innovation
and
ideas.
So,
potentially
yes,
that's
powerfully.
I
have
community
costs
like
it,
I'm
not
sure.
Actually
I
should
probably
we
should
check
from
heather
newman.
A
B
Yep,
absolutely
absolutely
that
would
be
so.
Our
tuesday
call
is
basically
intended
to
be
anything
in
the
microsoft
365..
So
it's
not
intended
to
be
limited
on
microsoft,
teams,
craft
sharepoint,
it's
it's
anything
and,
and
that
really
depends
on
getting
those
demo
spots
filled
in
so
so
most
likely
we'll
see
something
there
in
the
future.
B
Is
there
json
has
a
good
question:
is
there
an
absolute
end
date
for
classic
sharepoint
online
sites
and
functionality?
So
answer
is
no
indeed
so
just
to
be
super
clear,
any
existing
site
it
can
be
transformed
to
be
modern
and
any
any
classic
functionality
should
have
pretty
much
already
at
this
point
close
and
modern
replacement.
So
it's
not
about
recreating
a
site.
It's
just.
Are
you
looking
the
same
site
using
a
modern
or
a
classic
view?
So
it's
actually
the
view.
B
B
Probably
not
so
at
some
point
sure
classic
experiences
is
going
to
be
replaced
in
modern,
and
but
our
intention
is
really
make
the
modern,
modern
experiences
so
compelling
that
we
can
see
from
the
statistics
that
everybody
has
moved
to
modern
and
therefore
we
can
shut
down
classic
with
their
years
of
notice.
So
we're
not
going
to
do
anything
traumatic,
which
is
like
hey
classic,
is
now
gone.
No,
no!
No!
We're
not
going
to
harm
you.
That's
not
the
intention
and
all
of
the
customers
who
are
investing
right
now
on
the
on
the
sharepoint
online.
B
Don't
have
to
worry
about
the
fact
that
it's
the
classic
and
the
modern
when
they're
going
to
be
supported
or
that
we
would
actually
pull
it
in
the
moment
of
notice.
We
would
never
do
that.
We
will
communicate.
We
will
give
you
a
heads
up.
We
will
communicate
and
communicate
and
announce
any
deprecations
early
on
as
possible
as
possible.
A
One
anywhere
coming
on
the
new
version
of
the
internet,
starter
kit-
is
that
still
a
thing
absolutely
beau
cameron
and
eric
overfield
are
leading
that
initiative
and
they
are
actively
working
on
that
next
version.
So
I
think,
sometime
in
the
next
couple
months,
we
will
see
a
lot
more
activity
on
that
as
well
as
mentioned
for
the
sharing
is
carrying
amas.
B
B
A
That's
okay,
good
questions
really
great
that
we
had
that
opportunity
today,
a
great
collaborative
opportunity.
So
thank
you
all
for
the
questions
all
right.
Well
again,
thank
you
to
our
amazing
demo,
presenters
fabio,
siddharth
and
chandani
excellent
job.
Today,
the
recording
for
this
will
be
available
within
24
hours.
At
the
microsoft
365
pnp
youtube
channel,
aka,
dot,
ms4,
slash,
m365,
pnp
videos.
You
can
always
follow
on
twitter,
at
microsoft,
365
dev
and
at
microsoft,
365
pnp.
A
The
next
spfx
call
will
be
two
weeks
from
today
october,
7th
at
7
00
a.m.
The
next
m365
general
development
call
will
be
next
week
september,
30th
at
7
00
a.m.
Pacific
time
both
calls
our
pacific
time
always
get
the
invites
directly
from
aka
dot.
Ms
forward
slash
m365pnp,
all
of
the
developer
community
calls
can
be
accessed
as
well.
You
can
access
that
platform
call
which
is
growing
in
popularity,
a
fantastic
call
to
get
it
directly
from
the
mothership,
all
microsoft
presenters.
A
So
it's
a
fantastic
initiative:
aka
dot,
ms4,
m365
dash,
dev
dash,
call
and
then
a
host
of
other
calls:
adaptive
cards,
identity,
platform,
add-ins,
powerapps,
microsoft,
365,
dev,
sig
and,
of
course,
our
sharepoint
framework
sig
that
you
are
on
now
download
the
invites
get
them
on
your
calendar.
We'd
love
to
continue
seeing
everyone
at
them
again.
Thank
you
for
the
presenters
amazing
job
and
we
hope
everyone
has
a
great
rest
of
your
week.