►
Description
SharePoint PnP Community - SPFx & JS SIG call on September 24. Three demos delivered: 1) Use SPFx for Task Modules in Microsoft Teams and access Microsoft Graph, 2) Cascading managed metadata using Microsoft Graph and SharePoint Framework, and 3) PnPjs Tester Web Part. Microsoft Ignite 2020 was a success this week. Project releases include: CLI for Microsoft 365 v3.1 preview, React Controls v2.0 and React Property Controls v2.0 along with PnP Modern Search v3.15.2. As well, 3 extensions and 4 web parts were delivered. The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.
Demos:
• Use SPFx for Task Modules in Microsoft Teams and access Microsoft Graph – Markus Möller (Avanade) | @Moeller2_0
• Cascading managed metadata using Microsoft Graph and SharePoint Framework – Anoop Tatti (Content and Code) | @anooptells
• PnPjs Tester Web Part - Siddharth Vaghasia (Tata Consultancy Services) | @siddh_me & Kunj Sangani | @sanganikunj
Learn more:
• See the full blog post for this call at: http://aka.ms/m365pnp-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
by
weekly
sync.
It
is
september
24th,
2020.
man
almost
another
month
down,
excited
to
see
what
our
agenda
is.
Today.
Standard
updates
here
latest
updates
on
sharepoint
framework
updates
on
the
patterns
and
practices
program.
We
got
new
community
samples,
we'll
do
our
picture
time
and
then
great
demos
from
marcus,
anup
and
siddharth
excited
to
see
those
here
a
little
bit
later
in
the
call
we
always
talk
about
our
opportunities
to
participate,
encourage
anybody,
who's
interested
in
doing
a
demo.
A
Please
reach
out
to
myself
or
vasa,
we'll
get
you
on
the
schedule.
I
think,
as
I
always
say,
the
demos
are
one
of
the
most
valuable
parts
of
this
call
so
really
want
to
give
folks
a
chance
to
show
off
their
work
and
give
everybody
else
a
chance
to
learn
from
the
great
work
we're
all
doing
across
the
community.
I
want
to
remind
folks
all
of
our
projects
welcome
contributions
on
github.
They
can
take
the
form
of
reporting
issues,
submitting
pull
requests
or,
of
course
you
can
always
help
other
folks
that
have
issues
or
questions.
A
If
you
have
a
little
bit
of
time
and
happen
to
know
the
answer,
that's
always
very
much
appreciated,
and
finally,
we
encourage
you
to
provide
any
feedback
around
the
patterns
and
practices
program
all
up.
So
how
are
the
calls?
How
is
our
documentation?
Where
else
can
we
provide
additional
help
and,
of
course,
positive
feedback?
Is
okay
too,
if
we're
doing
something
well,
and
you
want
to
see
a
little
bit
more
of
that.
Please
do
let
us
know
and
we'll
try
and
work
that
into
the
program.
B
Absolutely,
thank
you
patrick,
so
the
sharing
is
caring
program
is
here
for
those
who
are
looking
to
get
involved
in
contributing
to
the
patterns
and
practices
community
if
you're
overwhelmed
by
some
of
the
details
and
hurdles
that
github
provides.
These
are
hands-on,
guided
sessions
that
we
will
walk
you
through
how
to
begin
contributing
step
by
step
if
you're
also
new
to
the
community
in
just
terms
of
consuming
some
of
our
samples
and
resources.
B
We
have
sessions
for
that
as
well,
which
you
can
go
ahead
and
register
for
all
of
which
are
completely
free
different
days
of
the
month
different
times
of
the
day,
to
try
to
satisfy
our
global
community
so
feel
free
to
check
out
aka.ms
sharing
is
caring
and
sign
up
for
one
of
the
sessions.
We'd
love
to
see
you
back
to
you,
patrick.
A
Thanks
david
yeah,
a
really
great
initiative,
encourage
folks
to
check
that
out
if
you're
looking
on
ways
to
get
involved
and
maybe
how
to
get
started
really
outstanding.
We've
seen
some
great
reviews
from
that
I've
seen
a
lot
of
people
do
their
first
time.
Contributions
coming
out
of
those
sessions
so
do
check
those
out
now.
This
is
a
slide
that
stuck
in
here
so
virtual
booth
duty
for
ignite
this
year.
That
is
today,
thursday
24th
of
september.
So
you
check
those
out.
C
Updates
visa
excellent.
Thank
you,
patrick.
By
the
way,
the
first
slot
on
the
virtual
pools
is
right.
After
this
call,
so
I
will
jump
in
directly
there
if
there's
kind
of
questions
which
we
didn't
answer
in
here,
so
we
wanted
to
actually
quickly
just
recap
on
the
usage
of
the
sharepoint
framework.
So
the
worldwide
usage
on
the
sharepoint
framework
is
again
skyrocketing
and
you
can
see
a
small
well
there's
a
data
glitch
in
the
spring.
There
was
a
small
dip
on
the
summer
time,
which
is
completely
as
expected.
C
The
last
dates
are
for
the
last
one
and
a
half
months.
We
are
skyrocketing
in
above
45
degree
on
the
usage
growth,
so
it
is
great
to
see
the
interest
across
the
across
the
community
customers
and
partners
on
using
sharepoint
framework.
We
also
like
you
seen
potentially
in
the
ignite
messaging.
We
are
really
really
positioning
sharepoint
framework
also
for
microsoft
teams
and
the
microsoft
teams.
Extensibility
built
using
spfx
is
growing
at
the
43
month
of
the
month
rate
right
now,
which
is
really
insane.
C
That's
probably
the
right
way
of
doing
that
professional
development
platform
also
for
microsoft
teams,
so
really
really
really
additional
capabilities
there.
We
already-
you
can
use
it
in
there
already
today,
but
you
will
see
more
investments,
some
more
capabilities
over
there
in
the
future.
The
next
slide
is
the
second
statement,
which
is
pretty
cool
from
jeff,
which
is
ship,
is
the
easiest
way
for
developers
to
build
powerful
solutions
that
reach
hundreds
of
millions
of
end
users
in
the
flow
of
their
work
in
both
sharepoint
and
microsoft.
C
C
Just
a
quick
recap
on
the
road
ahead.
We
didn't
actually
announce
anything
super
cool
on
the
ignite.
We
gave
the
opportunity,
for
other,
let's
say,
extensibility,
options
to
gain
more
visibility
as
well
in
ignite,
because
we
just
released
1.11
pretty
recently,
but
we
are
right
now,
focusing
on
the
performance,
improvements,
permission
and
off
chances,
so
we're
moving
from
old
model
and
authentication
model
to
the
msal
and
teams
improvements
plenty
of
those
in
the
pipeline,
and
then
there
will
there's
a
lot
of
improvements
related
on
upscaling.
A
All
right,
pnp,
js,
client
side
updates.
We
released
2010
two
weeks
ago.
That
was
a
quick
kind
of
fixed
patch
release
for
some
bugs.
We
found
that
we
introduced
in
209,
which
is
never
good.
So
we
got
that
out
really
quick
to
unblock
folks.
Sorry
about
that,
our
2011
regularly
scheduled
release
for
october
9th
we'll
be
back
on
our
normal
schedule.
Following
the
the
intermediate
update
there,
and
as
always,
you
can
follow
m365
pnp
js
on
twitter.
A
A
released
a
new
3.1
preview
with
updates
there
for
retrieving
and
moving
emails,
retrieving
powerapps
365
service
messages
and
historical
microsoft,
365
service
status.
We've
welcomed
a
new
maintainer
welcome,
mark
palani
to
helping
out
with
the
cli
appreciate
you
jumping
in
and
if
you've
tried
out
the
cli.
Definitely
let
everybody
on
that
team
know
how
it's
working
for
you
and
the
cli
is
now
available
natively
in
the
azure
cloud,
shell,
which
is
very
very
exciting
to
see
that
integration
happen,
and
you
can
use
that
right
out
of
the
box
in
the
cloud.
A
Shell,
so
encourage
everybody
to
check
that
out
on
the
reusable
components:
react
controls,
2-0,
so
supporting
office,
ui
fabric
v6,
a
new
file,
picker
control
with
new
properties,
a
few
bug
fixes
and
for
migration
from
v1
there's
a
migration
guide
for
both
the
controls
and
the
property
controls
included
so
encourage
everybody
to
try
out
these
controls.
It's
a
great
way
to
get
outstanding
out
of
the
box,
appearing
support
for
various
editing
and
display
components
right
in
your
applications
without
a
whole
lot
of
extra
work
and
v2
supports
sharepoint
online.
A
Only
so
just
a
note
there
sometimes
you've
got
to
make
choices
and
v2
is
going
to
be
sharepoint
online.
Only
for
on-prem
v1
will
continue
to
be
supported
for
the
foreseeable
future
and
modern
search,
pnp
model
search.
So
building
the
modern
search
experience
with
a
flexible
set
of
web
parts
version
315.2
is
available.
That's
the
september
2020
release,
so
minor
fixes
some
bug,
fixes
and
refiners,
and
six
contributors,
six
new
contributors
very
excited
to
welcome
all
of
those
folks
and
v4
is
slowly
getting
started.
A
We've
had
a
little
bit
of
back
and
forth
on
how
that
design
is
gonna,
go
so
very
excited
to
see
the
work
moving
forward
there.
We're
gonna
have
a
plug-in
style
architecture
for
templating
in
a
search
backend
with
graph
search
support.
So
that's
important
addition
there
to
get
onto
the
microsoft
graph
and
then
killing
some
existing
custom
render
and
replacing
with
web
components.
A
And
then
you
can
see
the
link
there
for
v4
if
you're
interested
in
checking
out
the
work
going
on
or
want
to
perhaps
work
on
that
and
contribute
pnp,
modern
search
tree
version.
Four,
you
can
find
that
on
github
under
the
branches
menu
for
microsoft,
dash
search
and
the
current
version
3x
still
not
looking
for
prs
for
new
features,
only
doing
kind
of
bug
fixes
for
version
three,
so
modern
search,
another
excellent
tool
in
your
tool
belt.
Please
do
check
that
out
and
for
the
samples,
I
think
that's
going
to
be
hugo.
D
That
is
me,
thank
you,
so
the
pnp
samples
are
repositories
that
can
help
get
you
started
by
providing
samples
that
are
built
by
an
inclusive
community
that
welcomes
everyone
and
encourages
a
positive
attitude
and
helping
each
other.
So
if
you're,
looking
for
samples
or
you'd
like
to
share
some
cool
stuff,
you've
done
from
simple
concepts
to
complex
solutions,
please
visit
aka.ms,
spfx-webparts
and
aka.ms
spfx-extensions.
D
These
are
the
updates.
From
the
last
two
weeks.
On
the
extension
side,
we
have
a
new
pnp
field,
renderer
helper
by
alex
trentev,
which
demonstrates
how
to
use
the
pmp
reusable
control
field,
renderer
utility.
We
also
have
two
updates
to
the
app
insights
web
parts
or
extensions
from
xiaoli.
So
thank
you
for
that.
C
C
C
A
E
All
right,
thank
you,
patrick
hello,
everyone.
So
they
say
that
you
know
it's.
It's
good
to
start
a
presentation
with
an
interesting
fact.
So
the
interesting
fact
for
today
is
today
is
world
bollywood
day.
Yeah!
That's
right!
Today's
world
bollywood
day
and
now
you
might
be
wondering
how
is
that
relevant
to
the
presentation
that
I'm
doing
so
what
happened
was
a
couple
of
months
back
a
microsoft
graph
apis
for
taxonomy
were
released,
and
I
did
a
little
bollywood
dance
after
that.
E
So
that's
why
that's
why
it's
related
anyway,
that's
by
the
way.
So
in
today's
presentation,
we'll
be
mainly
focusing
on
that
the
microsoft
graph
apis
for
taxonomy
a
couple
of
years
back,
I
wrote
my
first
blog
on
on
managed
metadata.
So
that
time
I
used
json
to
get
all
the
data
from
the
term
store
and
display
it
onto
the
page
using
some
html
fast
forward.
E
Two
years
we've
got
the
graph
apis
now,
which
can
talk
to
the
term
store
and
display
the
data
right
all
right,
boring
slide.
So
that's
me
anu
tati,
I'm
a
sharepoint
developer
at
content
code
and
that's
my
blog
on
medium
at
under
the
username.
Another
and
my
I'm
on
twitter,
as
well
with
username,
tells
I
tweet
about
sharepoint
and
then
that's
my
github
repo.
E
E
If
I
go
on
to
the
page,
which
has
the
the
web
part
for
today's
demonstration,
so
here
I've
got
a
web
part
and
what
what
I
do
is
I
just
edit,
the
web
part
and
then
set
the
the
property,
the
only
property
which
is
the
term
set
id
as
the
id
of
the
of
this
term
set,
which
is
our
locations
and
and
after
that,
what
happens
is
they
were
part?
Queries
queries.
E
The
term
store
gets
all
the
countries
which
are
the
which
are
present
in
the
term,
store
and
displays
them
in
this
drop
down.
And
then,
if
I
select
a
country,
it
goes
ahead
and
queries
the
transfer
again
to
get
all
the
cities
under
the
selected
country.
So
in
this
case
we
get
london
and
manchester,
and
then,
if
I
select
london,
it
goes
ahead
and
shows
the
location
in
in
a
map
of
the
you
know
of
these
selected
city.
E
So
they
here
we
are
using
the
the
pnp
spfx
maps
control
to
to
display
the
map
and
regarding
the
the
pointer
or
the
exact
location,
the
way
we
are
displaying,
that
is
by
using
the
latitude
and
longitude
that
have
been
set
and
if
I
just
quickly
go
back
to
the
term
store
and
then
select
london.
What
we
have
done
here
is
in
the
description
so
which
is
right
over
here.
E
E
So
all
the
web
part
is
part
of
the
pnp
spfx
dev
samples
repository,
so
you
can
find
the
code
over
there
and
what
I've
done
here
is
I've
just
expanded
the
that
particular
web
part
and
we'll
go
through
it
before
going
through
this.
I
just
want
to
thank
you
for
the
presentation
tips.
I've
used
hugo's
ideas
in
in
this
presentation.
So
what
I've
done
here
is
I've
highlighted
the
main
component,
which
is
the
cascading
managed
metadata
and
that
component,
let's
start
with
the
render
method
of
that.
What
it
does
is.
E
It
renders
the
different
controls
so
basically
a
drop
down
for
the
country
drop
down
for
city
and
then
the
map
control
and,
finally,
the
message
control.
So
if
that's
what
we
see
you
know
at
the
top,
we've
got
the
country
drop
down
the
city
drop
down
and
then
the
then
the
maps
and
then,
in
that
same
same
control,
we've
got
a
method
or
a
function
to
to
get
the
countries.
So
just
before
going
to
that,
I
I
want
to
mention
that
we
are
using
react,
functional
components
over
here.
E
So
that's
why
what
we
do
is
we
hit
the
graph
endpoint,
which
is
term
store.
Slash,
sets
slash
term
set
id
slash
children,
so
we
would
have
gotten
the
term
set
id
from
the
properties
that
we
said
so
just
to
give
you
a
a
quick
look
at
the
term
set
again,
we've
got
the
our
locations
and
then
all
the
the
countries
are
under
that
and
that's
what
we
populate
in
the
drop
down
on
the
left
side.
E
Now,
once
we
have
all
the
countries
populated
what
we
do
is
you
know
when,
when
a
user
selects
a
country,
we
then
need
to
get
the
children
or
the
child
terms
under
that
selected
countries.
So
again
we
hit
the
graph
endpoint,
which
is
now
terms
slash
the
term
id
and
children
that
will
go
ahead
and
fetch
all
the
first
level
children
under
that
under
that
term.
E
So
in
this
case
you
know
we
we
selected
uk
as
the
country
and
then
the
first
level
terms
under
uk,
where
london
and
manchester
so
that's
what
we
get
back
from
the
api.
And
you
know
we
we
feel
those
details
in
the
top
down
and
then
what
we
do
is
once
we
when
we
get
back
the
cities,
we
we
also
get
the
description
of
the
term.
So
in
this
case
for
london
we
get
the
description
as
the
the
coordinates
of
the
term.
E
So
what
happens
is
once
the
cities
are
populated
and
the
user
selects
a
city?
We
then
go
ahead
and
call
this
function,
which
is
on
city
change,
and
what
we
do
here
is
we
get
that
particular
city
and
then
the
the
description
which
has
the
latitude
and
longitude
gets
stored
as
the
key
of
the
drop-down
item,
and
so
we
get
that
key
and
then
get
the
latitude
and
longitude
from
that
key.
You
know
we
just
split
it
by
semicolon
and
then
that's
what
we
use
to
to
display
the
map.
E
So
once
we
have
the
coordinates,
we
just
set
the
state
with
the
required
latitude
and
longitude,
and
the
map
control
makes
use
of
these
latitude
and
longitude
values
to
display
the
map
so
that
that's
the
web
part
in
a
sense
now.
The
services
that
we
are
using
here
is
mainly
microsoft
graph,
so
we've
got
a
file
here
called
mscraftds.es,
and
I
would
like
to
thank
michael
swenson
for
this
for
this
code,
so
he
has
written
a
nice
blog
article
on
how
we
can
use
graph
in
spfx.
E
E
So
all
we
have
to
do
is
just
pass
in
the
the
required
endpoint
to
one
of
these
methods
and
then
the
rest
is
taken
care
and
caching,
so
caching,
as
in
is
an
important
thing
in
in
any
web
part
or
in
any
code
that
we
write.
So
here
we've
got
a
file
called
mmd
service
for
ts.
So
what
we
do
here
is
we
don't
want
to
hit
the
term
store
again
and
again
to
get
the
data.
So
that's
why,
whenever
the
web
part
tries
to
get
these
cities
under
the
selected
country?
E
O
stands
for
an
object,
so
what
I
tend
to
do
is
usually,
though
the
first
one
will
be
the
constant
log
source
that
you
know
with
which
we
can
easily
see
the
logs.
So
if
I
just
show
you
an
example
of
how
it
looks
in
the
browser,
I
open
the
the
console
and
then,
if
I
search
for
cascading
mmd,
I
it
just
filters
all
the
messages.
E
So
in
that
way,
it'll
be
easier
to
you
know,
look
at
the
information
and
to
see
what's
going
on
right,
a
couple
of
improvements
that
can
be
made
to
this
web
part.
So
at
the
moment
the
web
part
supports
only
two
level
cascading.
So
that's
we
select
the
country
and
then
we
select
city,
so
maybe
in
the
future
we
can
add
dynamic
level
cascading.
So
maybe
in
the
web
part
property.
E
E
We
use
the
description
of
the
term,
so
instead
we
can
use
the
you
know.
The
coordinates
can
be
stored
in
the
local
or
the
custom
properties
of
the
term.
Now
I
didn't
find
any
method
using
the
graph
api
to
get
these
properties.
So
that's
why
we're
using?
I
was
using
this
the
description
to
store
it
store
the
coordinates,
but
in
future
you
know
if,
if
there
is
an
end
point
to
get
the
custom
properties,
then
we'll
be
using
that
one
or
if
there
is
one
already.
E
A
F
F
So
today,
as
already
announced
in
the
intro,
I
want
to
talk
about
a
new
capability
of
sharepoint
framework.
This
was
available
or
is
available
since
only
1.11
to
use
spfx
for
task
modules
in
teams,
especially
in
messaging
extensions,
and
I
will
also
how
to
how
simple
it
is
from
there
to
access
the
microsoft
graph,
as
we
know,
from
spfx
in
general.
F
So
let's
switch
to
my
short
demo
scenario.
Some
of
you
might
notice.
I
presented
quite
the
same
scenario
seven
weeks
ago
in
the
general
death
call
and
those
time
it
was
a
normal
teams
teams
app,
and
that
was
a
search
based
messaging
extension,
and
today
I
showed
this
in
an
action-based
specs
variant.
So
in
short,
we
have
some
documents
somewhere
which
need
a
review
from
time
to
time.
F
F
This
is
why
I
formatted
the
point
a
bit
different,
but
we
will
pick
this
one
selected
with
a
double
click
and
there
we
are
back
in
our
communication
with
an
adaptive
card
which
shows
the
details
about
the
document
together
with
two
actions:
the
first
action,
the
view
action
quite
boring,
just
opening
in
the
well.
The
second
one
is
much
more
interesting
for
us.
This
will
put
this
document
automatically
on
reviewed,
but
not
the
simple
way,
because
when
we
click
it,
we
will
get
another
task
module
which
will
now
gather
some
input
from
us.
F
Here
we
have
a
quite
simple
scenario.
We
only
ask
for
a
date
for
the
next
weighted
review
in
the
near
future.
We
can
pick
one
and
kick
it
off
with
the
review
action
and
now
the
task
module
inside
spfx
was
writing
this
backward
graph
to
the
library-
and
we
can
already
see
this
year
over
a
few
seconds
ago-
was
my
last
review
date.
That's
strange,
but
it
should
there.
It
is
yeah
there.
It
is
new
dates
and
that's
so
called
fine.
F
F
In
spfx.
We
have
our
manifest,
which
points
out
the
messaging
extension
as
a
so
called
compose
extension,
and
here
the
most
important
thing
is
the
task
info
notation
and
the
url
this
url,
you
can
see
at
the
bottom
as
well.
I
pulled
this
out
a
bit
to
make
this
a
bit
more
visible.
It
has
some
parameters
and
here's
first
to
mention
the
team
side
domain.
This
is
an
automatic
parameter
resolved
by
teams
itself,
so
we
do
not
really
have
to
care
for
this,
but
the
second
one
is
what
we
have
to
care
for.
F
This
is
the
component
id,
and
this
component
id
is
exactly
the
same
than
our
webpart
id,
which
we
know
from
our
webpart
manifest.
In
our
case,
you
have
seen
two
test
modules,
so
my
solution
contains
two
web
parts
and
you
will
later
see
the
second
url
with
a
different
component
id,
but
here
for
the
moment
this
is
the
first
one,
and
this
tells
teams,
when
someone
invokes
this
messaging
extension
to
render
that
specific,
sharepoint
component.
F
Once
this
starts,
we
can
press
detect
if
we
are
really
in
the
right
context.
This
can
be
done
in
the
on
init
method
with
yeah
this
line,
especially
which
shows
that
the
app
context
application
name.
If
this
is
team's
task
module
application,
then
we
are
inside
a
task
module,
because
this
task
module
has
no
specific
supported
host
property,
as
you
might
know,
from
web
part
or
team
steps
or
single
page
applications.
F
This
property
supported
host
does
not
really
matter
in
this
case.
So
here
we
detect.
Hey,
we
are
really
inside
a
team's
messaging
extension
taking
this
as
a
boolean
parameter
and
handing
this
over
to
our
root
react
component,
where
we
can
later
execute
our
code
or
not.
If
we
are
in
the
wrong
context,
next
thing
is
once
we
have
rendered
our
task
module
in
this
case
with
I
use
the
fluent
ui
list.
F
There's
one
method
called
item
invoked
which
is
executed
once
the
user
double
clicks,
an
item
in
that
specific
special
case,
I'm
checking
here
already
mentioned:
hey-
are
we
on
the
team's
messaging
extension
and
if
so,
we
call
from
the
teams
sdk
the
submit
task
function
and
hand
over
our
document
item
to
this,
and
now
we
are
switching
the
solution
and
coming
to
the
backend
to
our
bot
solution,
which
is
quite
small.
We
only
have
one
class
with
two
functions.
We
will
see
so
the
most
of
the
logic
in
the
spf
x,
dot.
F
What
we
are
doing
here
in
the
first
function.
You
cannot
really
see
the
name,
but
this
is
the
messaging
extension
submit
action
which
is
executed
because
we
just
executed
submit
task.
We
will
take
some
data
from
the
item,
for
instance,
here
the
url,
where
I
shortened,
by
the
way,
the
body
here
to
make
this
more
visible
and
point
out
the
important
things
we
can
create
an
adaptive
card
from
this
and
insert,
for
instance,
a
submit
action,
but
not
a
normal,
submit
action.
F
F
First
thing
is:
I
already
announced
this.
We
have
a
second
component
id
here
which
we
included
in
our
url.
I
pointed
this
out
again
for
better
readability
and
the
second
interesting
thing
in
this
time
where
I
use
this.
Quite
the
same
url
structure
again
is
that
I'm,
additionally
adding
a
custom
property
which
I
can
also
do
here
in
this
case,
because
here
I
can
control
the
url,
so
I
can
hand
over
my
item
id
back
to
the
task
module
to
the
next
one.
We
will
see
and
say
hey.
F
F
F
This
action
once
again
detects
hey.
We
are
in
a
team's
messaging
extension
or
not
calculate
some
dates
and
finally
initializes
our
graph
task
and
sets
the
document
to
reviewed
and,
at
the
very
end
it
calls
another
submit
task
function,
this
time
without
a
parameter,
and
this
is
or
this
achieved
that
only
the
task
module
gets
finally
closed.
There's
no
round
trip
to
the
server
again,
so
the
bot
class
will
not
be
reached
again
with
this
action.
F
Let's
finally
have
a
look
into
the
graph
service
and
point
out
some
other
thing.
What
we
can
see
here
is,
I
pointed
out
that
you
use
the
document
the
get
documents
for
review
function,
the
writing
backwards
reviewed
function
is
quite
the
same.
What
we
first
do
is
we
retrieve
a
configuration
from
a
parallel
sp
service
controller.
F
F
This
isn't
quite
an
easy
operation
inside
sharepoint
framework
inside
the
native
teams
application.
I
would
think
about
different
options,
because
that
would
be
much
more
complex
to
to
retrieve
it
from
sharepoint
tenant
properties,
and
what
I
use
in
fact
are
two
parameters
here,
my
site
id
and
my
list
id,
which
I
need
to
retrieve
my
data
from
the
right
library.
F
And
this
thing
or
this
demo
or
this
this
code
sample,
is
part
of
a
series
that
I
wrote
in
my
blog,
you
might
have
seen.
As
I
mentioned
seven
weeks
ago,
I
was
presenting
in
the
general
dev
call
a
search
based
messaging
extension,
where
the
authentication
took
place
in
the
back
end
where
the
bot
channel,
then
I
wrote
an
additional
option
where
I
used
the
action-based
variant
for
this
same
scenario,
and
then
the
authentication
took
place
in
the
front-end
via
teams
sso,
and
now
today,
you've
seen
the
spfx
alternative
by
authentication
yeah.
F
Last,
not
least,
some
resources,
my
blog
post,
which
also
points
out
to
the
rest
of
my
series.
The
sample
is
already
available
in
the
teams.
Dev
samples,
pmp
repository
for
those
checking
this
out.
Forgive
me.
I
need
another
pr.
I
check
this
so
because
my
code
does
look
a
bit
ugly
in
terms
of
redemption,
and
so
so
I
will
update
this
soon.
In
my
own
repository
you
can
reach
by
my
blog.
F
It
already
looks
a
bit
more
cleaned
up
and
finally,
there's
also
a
small
microphone
documentation
on
this,
how
to
expose
a
webpart
as
a
microsoft
teams,
messaging
extension
on
this
with
a
quite
popular
sample
behind,
and
therefore
I
took
some
of
the
shown
things
here,
but
not
all
of
them
and
that's
from
my
side.
So
thank
you
and
if
you
have
questions
feel
free
to
use
the
chat.
A
G
Thanks,
patrick,
yes,
I'm
ready
to
go
yeah
hi
everyone.
Today,
I
will
be
talking
about
an
spf
x
webpart
we
from
where
we
can
test
some
pnpjs
sharepoint
methods.
This
the
part
is
developed
by
me
along
with
kunsangani.
So
before
starting
little
bit
about
myself,
I
am
sitting
ragashi.
I
am
a
technical
consultant
and
these
are
some
of
the
social
handlers
to
which
you
can
connect
with
me.
G
I
would
also
like
to
extend
my
thanks
to
punch
who
collaborated
with
me
on
this
particular
sample
webpart
and
helped
me
develop
this
web
part.
These
are
some
of
the
social
handlers,
I'm
sure
he
would
be
on
this
call
if
you
would
like
to
connect
with
him.
So
this
is
the
reporting
to
the
dave
webb
parts
where
the
sample
is
there.
G
So
driving
factor
like
as
we
know,
there
is
an
heavy
usage
of
spfx
to
customize
our
sharepoint
based
and
now
team-based
solutions,
also
and
among
this
customization,
which
we
do.
We
know
that
we
all
spfx
developer
kind
of
use,
pnpjs
every
now
and
then,
rather
than
calling
the
native
rest
apis
around
sharepoint
and
graph,
also
right
so
during
the
development.
G
What
we
I
mean,
what
I
have
found
is,
you
know
there
were
times
where
we
wanted
to
know
what
all
attributes
or
properties
are
getting
returned
in
the
response
right
and
typically,
what
we
do
is
we
either
use
console.log
or
either
we
debug
the
javascript.
We
write
some
line
of
code
and
see
what
all
attributes
are
giving.
What
names
are
there
like
internal
names
of
the
columns
and
everything?
And
then
maybe
we
go
back
to
our
code
and
change,
something
right,
and
so
this
was
the
one
of
the
most
driving
factor.
G
You
know
wherein
I
wanted
to
build,
something
which
we
can
from
which
I
can
quickly
test
the
pnpjs
method
and
see
what
output
or
what
response
it
is
giving
us
right.
So
there
are
other
tools
also
which
are
available,
which
I
have
found
when
I
posted
something
on
the
twitter
regarding
this
webpart,
which
helped
us
doing
so,
but
this
can
comes
in
handy
at
times,
and
I
personally
do
use
this
for
to
test
dp
and
pjs
methods
coming
to
this
summary.
So
this
is
basically
an
utility
webpart
right.
G
It
also
has
support
for
get
and
post
methods,
and
there
are
some
of
the
examples
which
we
have
kept
in
the
web
parts
itself
so
that
we
get
used
to
on
how
to
use
this
web
part
right.
One
thing
I
wanted
to
note
here
is
that,
as
of
now,
this
webpart
only
supports
the
or
maybe
we
have
tested
only
with
the
sharepoint
method.
G
So
now
this
is
the
web
part,
okay,
and
there
is
a
option
to
either
select
the
get
and
post
method.
Okay-
and
this
is
the
text
box
where
we
can
put
the
command
and
now,
like,
typically,
let
me
go
back
and
what
we
do
is
if
you
wanted
to
try
some
of
the
pnp
js
code
right,
we
use
the
pnpjs
documentation
and
like,
for
example,
if
I
wanted
to
see,
I
like
I
wanted
to
get
the
title
of
the
current
web,
which
I
am
running.
So
what
we
do.
G
We
write
this
similar
kind
of
code,
but
if
I
wanted
to
know
what
is
the
title
or
if
I
wanted
to
know
what
response
it
is
going
to
give
me
in
which
format
what
I
can
do
is
I
can
go
and
copy
paste
things
here
and
I
can
just
run
the
query
and
it
will
give
me
the
output
of
the
json
and
that
output
will
be
displayed
in
the
json
viewer
here
right
so
similar
way.
The
other
examples
which
I
can
think
of
would
be
typically
to
get
the
maybe
current
user
data.
G
So
if
you
click
on
the
samples
there
isn't
some
of
the
samples
which
we
have
included,
which
we
can
directly
use
by
just
customizing
some
of
the
columns
or
the
list
name
on
which
we
wanted
to
run
so
like,
for
example,
if
I
wanted
to
test
this
particular
method
to
get
the
current
user
using
pnpjs
method.
If
I
run
the
query,
it
will
give
me
the
response
which
I'll
return
and
in
fact
there
we
can
see
you
know
what
all
attributes
or
what
all
properties
have
been
written
by
this
particular
method.
G
A
similar
way
just
another
example
like
getting
the
item
from
the
sharepoint
list.
Okay,
so
this
is
most
typical
use
case
we
use
during
this.
So
I
do
have
a
list
which
is
created
so
I'll
just
modify
the
list
name
in
the
command
and
if
I
put
run
query
on
it,
what
I
get
is
I
get
the
output
and
it
is
getting
displayed.
G
So
basically,
the
output
is
from
this
particular
list,
which
has
two
items
and
whatever
response
we
are
getting
that
is
getting
displayed
here,
and
this
can
be
then
used
to
check
the
column,
names
and
the
values
which
we
are
getting
or
what
all
properties
we
are
getting.
So
it's
more
like
an
go
to
web
part
which
we
can
deploy
it
at
one
place
and
try
that
out
and
then
just
go
and
write
our
spfx
code
right.
So
another
thing
is
we
can
also.
G
We
can
also
try
post
thing
like,
for
example,
if
I'll
just
put
a
simple
example
here
like,
which
is
to
add
a
a
list
item
into
a
particular
sharepoint
list.
So
if
I
talk
about
this
timeline
list
right
and
if
I
put
an
item
here
so
what
I
do
is,
I
just
change
the
name
of
the
list,
and
this
is
the
simplest
json
object
which
we
can
pass
because
we
know
the
title
column
would
be
always
there.
G
And
if
I
rely
on
this
query,
it
will
give
me
error
because
it
doesn't
it's
not
a
get
function.
So
I'll
put
a
post
and
if
I
run
the
query,
the
post
method
would
be
triggered
and
if
I
go
and
refresh
the
page
here,
you
can
see
that
the
items
are
there.
So
maybe
this
was
the
item
which
I
created
previously
right.
So
this
is
how
we
can
test
the
methods,
so
any
method
which
is
there
in
the
pnp
sp
methods
can
be
tested
here.
G
Other
thing
which
I
wanted
to
highlight
is
like
what,
if
we
wanted
to
run
it
into
a
different
site,
collection
context
right,
so
for
that
there
is
an
option
where
we
can
just
say
you
know,
use
for
other
site
collection
or
subside
and
to
demonstrate
this
I
have
a
different
site
collection
here.
So
what
I
do
is
I
just
put
the
url
of
that
particular
site
collection
and,
for
example,
if
I
just
wanted
to
get
the
items
from
this
particular
demo
list,
which
is
there
which
is
available
in
this
site
collection.
G
So
I
just
change
the
name
to
demo
list
and
if
I
run
the
query
okay,
so
this
would
be
a
get
method.
If
I
run
the
query,
I
get
the
outputs
on
that
particular
method
and
there
are
other
options
like
if
I
wanted
to
show
the
data
types
or
not.
If
I
say
yes,
it
will
tell
us,
you
know
what
kind
of
data
type
it
is
giving.
G
I
can
also
select
the
count.
So
basically,
these
are
the
25
items
are
basically
the
property
count
for
each
object
which
we
have.
There
are
total
five
items
there.
I
can
also
enable
clipboard
where
we
can
just
copy
the
output
of
that
particular
attributes
or
property
which
we
have,
and
there
is
an
option
to
expand
and
collapse
everything.
G
So
this
is
about
the
demo
and
just
to
know,
get
used
to
this
web
part.
Okay,
I
have
just
all
provided
the
link
to
pnpgas
so
that
it
takes
us
to
the
whatever
methods
which
are
supported
into
pnpjs
here
now
coming
to
the
code.
What
we
have
is
this
is
a
react-based,
spfx,
webpart
right
and
so
from
the
webpart.ts
file.
There's
nothing
fancy.
We
are
just
passing
the
context
of
the
webpart
to
the
react
component
and
within
react
component.
First,
let
me
go
to
the
render
method.
G
So
we
are
using
office
ui
fabric
to
build
the
user
interface,
which
we
have
like
the
drop
down
and
text
field
and
check
boxes
and
everything.
So
this
is
pretty
much
what
we
are
generally
used
to
to
develop
a
spfx
webpart.
So
I
won't
go
into
detail
of
this
and
it
is
using
states
and
everything
to
control
what
all
methods,
sorry,
what
a
input
user
is
providing
and
what
all
output
we
wanted
to
put
it
into
the
user
right.
So
then,
another
thing
is
the
main
method.
G
Is
the
execute
command
right?
So
this
is
the
method
which
gets
called
when
we
click
on
the
run.
Query
button
right
and
the
first
thing
we
do
is
we
set
the
pnp
method
so
within
the
set
pnp
method,
what
we
have
is
if
the
option
is
selected
for
other
site
collection,
url
right,
so
we
all
know
that
with
pnp
js,
what
we
can
do
is
we
can
set
up
the
pnp
either
to
a
particular
sharepoint
site
or
a
sub,
or
we
can
directly
put
the.
G
We
can
directly
provide
the
context
which
we
have
from
the
web
part
right.
So
this
is
just
basically
to
set
up
the
pnp
js,
so
if
the
other
site
is
selected,
it
will
go
and
put
the
site
context
to
that
particular
site
url
using
the
base,
url
property,
and
if
not,
it
will
run
in
the
current
contact
side
where
the
web
part
has
been
deployed
or
where
it
is
running.
G
Then
other
thing
is:
this
is
just
to
clear:
the
state
objects,
okay
and
to
display
the
json
which
we
get.
I'm
using
an
npm
package
react
json
view
which
requires
just
and
json
object
as
an
input,
and
it
will
automatically
take
care
of
displaying
it
in
the
expand
collapse
where
which
we,
which
we
have
seen
already
so
this
is.
These-
are
some
of
the
cleanup
strings
which
I,
which
I
need
to
do
is
because
thing
is
what
happens?
Is
there
are
some
methods
where
we
wanted
to
use
get?
G
Well,
we
don't
wanted
to
put
get
and
everything
so
to
make
it
consistent
everything
I
typically
tested
some
of
the
methods
and
try
to
find
out
what
all
commands
are
available
in
the
pnp
js
documentation
and
then
used
the
custom
logic
to
replace
the
string
which
is
provided
by
the
user
and
then
to
control
while
running
this
particular
command.
Okay,
now
interesting
theory
thing
here
is:
how
do
I
run
this
command
dynamically
right?
G
So
I'm
not
sure,
but
there
is
I
mean
who
all
know,
but
there
is
a
command
javascript
method
which
says
eval,
which
basically
allows
us
to
evaluate
a
javascript
code
and
execute
it.
So
this
is
interesting,
and
this
is
how
I
am
running
the
pnpjs
method,
dynamically
onto
that
particular
web
part
right.
G
So,
if
suppose
there
is
an
error,
it
will
still
go
and
display
the
error.
Saying
that
you
know
maybe
the
column
doesn't
exist.
Maybe
the
list
doesn't
exist
that
would
be
displayed
in
the
json.
So
we
know
that
we
are
making
some
mistake,
while
writing
the
while
testing
the
command
code
right
the.
So
this
is
important
method,
and
this
is
the
smallest
function
which
you
are
using
so
idea
behind
this
web
part.
G
Is
you
know
the
magic
happens
here
so
like
dynamically
executing
the
pnp
command,
which
user
is
importing
for
the
sample
commands,
which
we
see
on
the
right-hand
side
panel?
What
we
have
done
is
we
have
created
a
sample.json
file
where
we
have
put
all
the
commands,
and
then
we
are
just
dynamically
building
the
action
button:
okay
by
using
the
map
function
so
that
all
the
commands
are
executed
and
once
user
clicks
on
any
of
the
command
it
automatically
gets
populated
to
the
text.
Web
part.
Sorry
text
box
right.
G
So
this
is
about
the
code,
and
another
thing
I
wanted
to
highlight
here
is
that
we
are
using
a
older
pnp
version,
which
is
2.0.5,
but
they
can.
This
can
be
easily
upgraded.
The
only
thing
we
have
to
do
is
because
this
is
a
simple
spfx
web
part.
We
have
to
just
update
the
mpm
package
to
get
the
latest
version
of
the
pnp
and
all
the
latest
method
and
all
the
latest
bug
fixes
which
have
been
done
in
the
latest
package
would
be
available.
So
this
is
about
it.
G
A
So
great
demos
from
everybody,
thank
you,
marcus.
Thank
you.
Anub.
Thank
you,
siddharth
very
cool
to
see
that
pm
pjs
explorer.
I
know
there
are
a
few
comments
in
the
chat
about
opportunities
to
enhance
that.
So
I
imagine
you
are
open
to
having
some
contributors
to
help
enhance
that
as
you
go.
So
I
encourage
folks
to
check
that
out
and
did
see
the
idea
of
sharing
that
via
the
docs,
so
we'll
take
a
look
at
doing
that
outstanding
demos.
Everybody.
Thank
you.
Thank
you.
Thank
you.
A
If
you
are
interested
in
demoing,
please
reach
out
to
myself
or
vasa,
and
we
will
make
sure
to
get
you
on
the
schedule.
We're
just
going
to
take
this
slide
out
in
the
future
and
want
to
encourage
folks
to
check
out
the
recording
which
will
be
available
in
about
24
hours
on
our
youtube
channel.
Give
or
take
you
can
follow
us
on
twitter.
Our
next
spf
x,
focused
call,
will
be
on
october,
8th,
that's
in
two
weeks
same
time,
and
our
next
general
dev
call
will
be
next
thursday
october
1st
same
time
as
this
one.
A
We
do
have
an
upcoming
monthly
community
call
for
october
on
october
13th.
So
thank
you
all
for
joining
the
call
today.
There's
a
whole
host
of
other
community
calls.
You
can
attend
if
you
have
the
time
and
interest
and
encourage
you
to
check
out
one
or
more
of
any
of
these
lots
of
great
topics,
lots
of
great
communities
out
there
to
be
a
part
of
in
your
development
life.
So
thank
you.
Thank
you.
Thank
you.
Everybody
thank
you
for
all
the
contributions
from
everybody
and
thank
you
for
all
the
demos.