►
Description
Microsoft 365 PnP Community - SPFx & JS SIG call on October 8. Three demos delivered: 1) Microsoft Teams Messaging extensions using SPFx: Getting message data with Microsoft Graph, 2) Site User and Group Information Web Part, and 3) Building a list editing web part with React. Latest project releases include: PnPjs v.2.0.11 and v2.1.0 beta, CLI for Microsoft 365 v3.1, and PnP Modern Search v3.15.3 - September 2020 release updates. Samples delivered include 3 SPFx Extensions and 12 SPFx Web Parts. The host of this call is Patrick Rodgers (Microsoft) @mediocrebowler. Q&A takes place in chat throughout the call.
Demos:
• Microsoft Teams Messaging extensions using SPFx: Getting message data with Microsoft Graph | Vardhaman Deshpande (Valo Intranet) | @vrdmn
• Site User and Group Information Web Part | Daniel Watford (Watford Consulting Ltd) | @danwatford
• Building a list editing web part with React | Ryan Schouten | @ShrPntKnight
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
in
javascript
special
interest
group
bi-weekly
sync,
it
is
october
8th,
2020.
very
excited
to
have
you
all
with
us
today.
We've
got
another
great
call
and
let's
go
over
our
agenda:
real,
quick
updates
on
sharepoint
framework.
We
got
our
patterns
and
practices
program
updates,
new
community
sample
updates,
we'll
do
our
picture
time
and
together
mode,
and
then
we've
got
three
great
demos
again
from
vardaman,
daniel
and
ryan,
so
very
excited
to
get
to
those.
A
I
love
to
see
that
I
think
the
demos
continue
to
be
the
most
valuable
part
of
this
call
and
something
I
know
I
learn
from
every
week
and
see
new
techniques
and
new
capabilities
people
are
using
so
as
well.
We,
of
course
encourage
you
to
welcome
you
to
contribute
on
github
so
reporting
any
issues
you
might
find.
We
don't
love
issues,
but
we
love
hearing
about
them.
That's
how
we
can
get
them
fixed,
submitting,
pull
requests
all
of
our
patents
and
practices,
repositories,
encourage
and
welcome
you
to
contribute
through
pull
requests.
A
Those
could
fix
issues,
add
new
functionality
or
just
even
simply
documentation,
updates
everything
helps
everything
is
appreciated
and,
of
course,
if
you
see
other
folks
with
questions,
you
might
happen
to
know
the
answer
be
able
to
help
them.
Please
do
feel
free
to
jump
in
help
them
with
their
questions
and
issues.
A
A
Where
else
can
we
help
and,
of
course,
positive
feedback
is
okay
too,
if
there's
something
we
are
doing,
that
you
are
very
much
a
fan
of,
let
us
know-
and
we
can
perhaps
do
a
little
bit
more
of
that.
This
slide
here
is
going
to
cover
all
of
our
links,
so
we've
got
links
to
our
developer.
Videos
links
to
our
community
videos,
open
source
repositories
that
includes
the
microsoft
graph
repository
office,
dev,
pnp
and
sharepoint
encourage
you
to
check
all
of
those
out.
A
All
of
those
are
looking
for
contributions
and
people
to
participate,
sample,
galleries,
tons
and
tons
and
tons
of
amazing
samples.
I
know
I
use
these
a
reference
for
a
lot
of
stuff,
I'm
working
on
and
I
hope
all
of
you
are
as
well
tons
of
great
stuff
there
and
then
the
open
source
initiatives
and
samples
aka,
ms
m365
pnp,
is
your
one:
stop,
link
and
that'll
link
you
out
to
all
of
these
other
resources.
B
Thank
you
all
right,
everybody,
so
the
patterns
practice
community,
as
you
likely
well
know,
is
completely
open
source,
which
means
that
we
welcome
contributions
in
all
areas
of
the
pnp
resources
and
tools,
but
we
also
understand
that
the
process
of
making
those
contributions
can
come
with
some
confusing
barriers
around
the
use
of
github
and
exactly
understanding
what
that
contribution
landscape
looks
like
so.
The
sharing
is
carrying
initiative
helps
by
providing
everyone
that
would
like
to
join
hands-on,
step-by-step
guidance
in
live
small
group
session
settings,
so
we
have
multiple
session
top.
B
You
can
see
a
first
time
contributor
session
community
docs
session
for
different
dates
and
times
including
apac
time,
so
hopefully
that
helps
meet
the
needs
of
everyone's
scheduling
requirements
around
the
globe.
It's
also
worth
noting
that
this
is
not
a
developer.
Only
opportunity,
as
I
noted
those
first
two
sessions
which
cover
first-time
contributors
and
community
docs,
are
fantastic
sessions
for
everyone
and
anyone
looking
to
begin
that
contribution
journey.
B
We
also
understand,
though,
that
even
consuming
some
of
the
resources,
such
as
the
spfx
samples,
cli
and
other
projects,
can
be
a
little
overwhelming
and
confusing
with
all
of
the
moving
parts,
such
as
github,
the
open
source
tools,
etc.
So
we're
starting
to
provide
more
sessions,
how
to
take
advantage
of
getting
started
using
the
various
pnp
resources
you
can
register
for
any
or
all
the
sessions
at
dot.
Ms
forward
sharing
is
caring
and
again
they're
all
completely
free
of
charge.
A
Awesome
thanks
for
that.
I
do
definitely
check
that
out
if
you're
looking
for
ways
to
get
started
or
have
questions,
that's
a
great
forum
to
have
a
little
bit
of
a
smaller
group
and
ask
questions
and
and
get
started
with
contributing,
not
just
to
pnp,
but
those
skills,
of
course
transferable
to
any
other
github
project
that
you
might
want
to
participate
in
and
do
want
to
mention
as
well.
Hacktoberfest
2020,
the
pnp
repositories
will
be
participating
in
this.
A
So
you
can
submit
four
pull
requests
in
october
register
on
the
hacktoberfest
site
and
get
a
free
t-shirt
or
plant
a
tree
and
aligned
with
the
sharing
is
caring
initiative.
It's
a
great
way
to
get
started
contributing
and
give
you
a
little
bit
of
extra
motivation
there
to
get
started,
and
with
that
I'll
hand,
things
over
to
vasa
for
our
sharepoint
framework,
update
yeah,
excellent.
C
Nothing
too
much
on
here.
I
just
updated
quickly
the
stats
we're
seeing
a
massive
update
again
on
the
on
the
sharepoint
framework
usage
in
the
autumn.
As
you
can
see
the
last
few
months
and
weeks,
we
can
say
that
the
curve
is
getting
higher
and
higher,
which
is
obviously
awesome.
A
lot
of
that
curve
by
the
way
is
also
sharepoint
framework
targeting
microsoft
teams.
C
Just
a
quick
recap
on
the
on
the
key
areas
where
we
are
investing
nothing
new
changes
in
here
since
the
two
weeks
ago,
when
we
went
through
this
one
but
there's
a
lot
of
performance
investments,
there's
a
story,
investments
and
microsoft
teams
being
really
the
focus
area
for
the
sharepoint
framework
as
well.
So
don't
get
fooled
even
though
the
name
is
called
sharepoint
framework,
but
it's
only
for
sharepoint.
C
A
There
we
go
so
we'll
get
into
pmpjs
client
side
updates,
2011
was
released
on
october
and
I'm
sorry
scheduled
to
be
released
on
october
9th.
That
is
tomorrow,
so
we'll
have
some
documentation
updates
there,
graph
typings
updates
to
the
latest
version,
as
well
as
some
beta
endpoint
changes
for
term
sets.
So
as
that
endpoint
continues
to
evolve.
We
continue
to
involve
our
calling
of
it
as
well.
A
I
want
to
announce:
we've
got
a
beta
out
there
for
two
one:
zero
encourage
people
to
try
that
it's
it's
a
lot
of
changes
that
should
be
mostly
invisible
to
everybody
consuming
the
library,
but
we've
added
the
ability
to
have
isolated
run
times.
You
can
have
sp
objects
or
graph
objects
with
calling
separate
sites
all
within
your
code.
So
previously
our
configuration
was
global
across
the
entire
library
and
we've
made
some
changes
so
that
can
be
isolated.
A
Now,
that's
been
an
off
ask
for
feature
and
one
that
we
just
haven't
been
able
to
put
any
energy
behind
until
now.
So
really
do
ask
free
if
you
have
a
chance,
try
out
that
beta.
Let
us
know
the
feedback
a
lot
of
changes,
so
we
want
to
make
sure
that
you
know
we're
not
breaking
anybody.
It
should
be
fully
backwards
compatible,
so
nobody
should
have
to
change
their
code
to
use
this,
but
should
open
up
some
new
opportunities
there.
A
Please
do
socialize
and
follow
us
at
m365pjs
on
twitter
and,
of
course,
as
always,
please
direct
all
your
feedback
to
the
issues
list
that
just
make
sure
we
can
properly
track
it
to
resolution
and
as
well
pnp.github.io
pgs
for
your
docs
cli
for
microsoft,
365.,
so
release
for
version
3.1
with
retrieving
and
moving
emails
power,
apps,
microsoft,
365
service
messages,
historical
microsoft,
365
service
status,
as
well
as
removing
the
knowledge
hub
sites.
I
want
to
welcome
mark
as
a
new
maintainer
and
encourage
all
of
you
to
check
out
the
cli.
A
It
is
a
great
project
and
is
also
a
fantastic
way
to
get
started,
contributing
because
a
lot
of
the
the
tasks
are
laid
out
for
you
in
the
issues
list
as
well
are
a
little
bit
more
atomic
than
some
other
libraries.
You
can
work
on
a
specific
command
very
easily
there
so
encourage
you
to
check
out
the
cli.
A
If
you
haven't
checked
that
out
yet
npm
installed
dash
g
p,
p,
slash
cli
microsoft,
365
to
install
that
the
reusable
controls
we've
got,
the
react
controls
2-0
is
out
and
the
property
controls
2o
is
out.
So
those
are
now
using
the
office.
Ui
fabric
v6
improvements
to
the
file
picker,
a
few
bug
fixes
and
for
migration
from
v1.
There's
two
links
there
to
help
you
get
migrated
over
to
the
new
set
of
controls,
encourage
you
to
check
those
out
in
your
projects.
A
Modern
search
so
we're
working
to
build
a
modern
search
experience
with
flexible
web
parts.
So
v3153
is
available.
That's
the
september
2020
release
that
is
another
dot
release,
but
it
is
working
on
a
lot
of
regression.
Testing
really
solidifying
things
up
so
appreciate,
seeing
that
out
and
as
well
v4
work
is
beginning
on
this,
so
some
highlights
there,
but
a
lot
of
plug-in
architecture
for
templating
and
search
back
in
with
graph
search.
A
Getting
rid
of
some
of
the
existing
custom.
Renderers
and
replacing
some
of
the
web
components
also
encourage
you
to
check
out
pnp,
modern
search
web
parts
so
great
way
to
build
up
a
modern
search
portal
using
a
bunch
of
flexible
web
parts
and
as
well
a
great
place
to
contribute.
If
you're,
interested
and
pnp
spf
x,
samples
hugo,
take
it
away.
D
D
We
want
that
those
sample
repositories
to
become
really
the
first
step
that
every
developer
takes
when
they
start
a
new
solution.
The
updates
that
we
have
here
are
the
updates
for
the
last
two
weeks,
but
just
to
save
some
time,
I'm
not
going
to
go
through
every
single
one
of
them.
We
have
one
new
extension
by
alex
strantiv,
which
demonstrates
how
to
use
the
file
type
renderer,
pnp,
reusable
control,
and
on
the
web
parts
side
we
have
a
new
world
clocks
web
part
by
jerry.
D
D
Extension
allows
you
to
save
attachments
from
an
email
and
finally,
joao
mendes
has
added
new
custom
links
web
part
that
allows
you
to
add
new
links
to
the
web
part
and
customize
the
look
and
feel
color
font,
size,
height
and
width,
and
things
like
that.
I'd
like
to
thank
jerry,
alex
ryan,
beau,
enbo,
luis
ravi,
akash,
joe
and
joao,
for
contributing
this
month,
and
we
look
forward
to
more
contributions
from
everyone.
That's
it
for
me,
patrick
back
to
you.
A
A
So
fantastic
work
from
hugo,
not
just
on
that,
but
on
running
all
of
this,
the
sample
program
here
and
keeping
things
really
up
to
date,
so
fantastic
work,
hugo,
thank
you
for
all
that
you
do
in
the
sample
space
and
with
that
we
are
on
to
our
optional
picture
time.
So,
if
you
are
interested
and
would
like,
you
can
turn
on
your
camera,
we're
gonna
do
a
together
mode
picture.
Everybody
that's
interested.
C
Starting
starting,
oh,
we
can
see
there's
some
people
a
few
people
already.
I
think
we'll
get
more
and
more
people
here.
Hopefully
the
the
picture
is
getting
slightly
better.
Why
is
it
so?
It's
not
precise.
What's
wrong,
it's
wrong.
People
are
waving,
I'm
gonna
take
one
picture
out
of
that
already.
I
need
to
get
more
clarity
on
the
picture.
I
think
we're
hitting
the
limit
good
good.
Everybody
is
waving.
Everybody
is
waving,
no
idea
why
now
it's
getting
actually
better
much
better
quality,
much
better
quality.
C
A
A
E
Yeah,
let
me
share
my
screen
all
right,
so
hi
everyone,
my
name,
is
worth
amandesh
pandey,
I'm
an
office
development
mvp
and
I
currently
work
with
walo
on
the
team's
product
teams
based
product
where
we're
using
spfx
we're
using
bots.
So
recently,
I've
been
involved
in
a
lot
of
that
space
and
on
this
on
this
demo
on
this
call
we'll
go
through
something
called
teams,
messaging
extensions
and
teams,
task
modules
powered
by
spfx.
E
Now
I
wrote
a
blog
post
a
couple
of
weeks
ago
and
in
that
we
we
talk
about
specifically
messaging
extensions
and
spfx.
Now
now,
after
that,
we
decided
to
kind
of
agree
on
coming
on
the
call,
and
then
I
realized
that
it's
not
just
a
messaging
extensions.
It's
basically
task
modules
and
anywhere
task
modules
can
be
presented
in
teams.
You
can
do
that
with
spf
x,
you
can
have
spf
x.
E
Web
part
com
come
up
as
task
modules,
so
I
will
follow
this
up
with
the
blog
post
with
more
details.
So
the
demo
we
are
going
to
see
today
is
actually
has
couple
of
more
things
than
the
blog
post
so
and
then
I'll
follow
it
up
with
another
post
and
then
potentially,
I
will
push
all
of
this
to
the
pnp
samples
repo
as
well,
so
that
all
of
us
can
take
advantage
of
this.
Now
we
will
be
talking
about
messaging
extensions
and
task
modules.
E
So,
first,
let's
see
what
messaging
extensions
are
now
any
the
messaging
extensions
basically
help
you
execute
custom
code
or
custom
logic
within
the
context
of
or
with
without
leaving
the
context
of
of
teams.
So
you
it
could
be
that
you,
you
invoke
that
logic
on
messages
which
are
already
posted
in
teams
from
this
ellipsis
menu
going
to
more
actions,
and
then
you
you
can
have
certain
tasks
show
up
there.
E
Now,
let's
talk
about
the
message,
actions
or
the
messaging
extensions
which
are
invoked
on
messages
posted
already
in
teams,
so
I'll
go
to
the
ellipsis
menu
I'll
I'll,
go
to
more
actions
and
I'll
invoke
the
messaging
extensions
and
the
sharepoint
framework
web
part
can
be
can
be
brought
up
as
part
of
that
now,
where
do
we
configure
this?
There's
two
types
of
ways
in
which
you
can
configure
messaging
extensions.
E
First,
is
the
teams
manifest
in
a
teams
manifest?
You
have
the
compose
extensions
section
inside
that
you
can.
You
can
set
up
your
messaging
extension
there's
two
types
of
extensions,
static
and
dynamic.
First,
we'll
have
a
look
at
the
static
extensions
where
you
can
configure
the
entire
task
module
options
or
task
module
properties
right
from
the
teams
app.
So
you
can
see
that
the
teams,
the
spfx
url,
is
configured
here
and
the
way
to
kind
of
decide
whether
whether
the
extension
is
a
static
one
or
a
dynamic.
E
There
is
a
different
aspx
page
behind
the
scenes,
teams,
task
task,
hosted,
app
and,
and
then
the
other
information
is
more
or
less
similar,
where
you
specify
the
component
id
of
the
spfx
web
part
and
then
and
then
the
spfx
task
module
shows
up
now.
The
one
good
thing
about
this
approach
is
that
you
don't
need
to
do
a
lot
with
teams,
bots
and
stuff.
You
just
create
the
manifest
you
deploy
the
spfx
web
part.
E
You
configure
the
task
module
over
here
and
then
and
then
you
can
see
that
the
the
web
part
starts
working
within
teams
after
the
app
is
installed.
Now,
when
we
invoke
this
extension,
you
can
see
that
in
the
spfx
context
there
is
already
a
lot
of
information
available
like
what
was
the
team
on
which
the
extension
was
invoked.
The
channel
id
on
which
particular
message
did
you
invoke,
is,
but
there
is
not
a
lot
there's,
not
all
the
information
which
we
might
need.
E
For
example,
we
might
need
the
message
body,
so
this
information
is
not
available
by
default
on
the
spfx
side.
So
let
me
go
to
the
spfx
webpart,
and
this
is
a
this-
is
a
normal
boilerplate
spfx
webpart
without
react,
without
without
any
framework,
so
just
to
demo
the
the
pr
code.
So
you
can
see
that
inside
the
team's
context,
so
inside
the
spfx
context,
it's
the
teams
context
and
you
have
the
various
properties
available
already
called
group
id
channel
id
and
chat
id.
E
Now
when
we
invoke
the
messaging
extension
there
is
this
thing
called
parent
message
id
as
well,
we
will
fetch
that
and
from
there
then
to
get
more
details
about
the
message.
You
can
then
use
the
graph
api,
so
the
the
graph
teams
api
lets.
You
fetch
all
the
details
about
about
a
message
or
a
chat
message
or
a
channel,
so
just
having
this
id
available
as
part
of
the
spfx
context,
gives
you
some
some
some
data
which
then
you
can
use
to
fetch
even
more
relevant
data.
Now.
E
One
thing
about
this
is
that
we
have
to
depend
a
little
bit
on
what
properties
are
available
out
of
the
box
within
the
spfx
context.
Now
I
can
came
across
a
slight
limitation.
As
you
can
see,
this
is
a
top
level
message.
I
will
invoke
the
static
message
extension
and
then,
when
fetching,
the
body
will
get
the
message
body.
Now,
when
I
invoke
the
same
extension
on
a
reply.
E
So
just
a
sample
of
that
data,
you
can
see
on
the
microsoft
docs
files
that
this
this
data
is,
is
basically
everything
which
the
with
the
bot
behind
the
scenes
receives.
So
you
have
you
have
the
id
of
the
messages
on
which
it
was
invoked.
You
have
even
the
the
client
of
the
team
like
whether
it
was
a
desktop
client,
whether
it
was
the
web
client,
whether
it
was
a
mobile
client
and
so
on,
and
then
you
have
a
lot
of
channel
data
now.
E
I
knew
that
one
of
these
properties
was
the
was
the
id
of
the
reply
on
this.
So
then
that
kind
of
leads
to
the
other
type
of
messaging
extension,
which
was
the
dynamic
messaging
extension
now.
The
way
you
configure
the
dynamic
extension
is
is
like
this,
where
you
define
the
fetch
task
as
true.
That
means
that
teams
is
going
to
go
and
talk
to
the
configured
bot,
which
is
the
I,
which
is
this
bot.
E
It's
going
to
say
that
do
you
have
a
fetch
task
for
me
to
return,
and
so
it's
not
going
to
look
for
the
task
or
info
object,
which
is
configured
in
the
manifest
itself.
So
I
think
this
is
a
slightly
more
flexible
approach,
but
then
it
has
a
kind
of
a
sea
on
you
having
a
bot
configured
behind
the
scenes
and
inside
that,
then
you
have
much
more
options.
E
E
So
this
is
the
exact
same
thing,
but
done
in
the
backend
way
where
we
get
more
parameters
from
the
bot
framework
and
we
pass
those
parameters
to
to
spfx
inside
spfx.
Again
we
look
at
the
query
string
parameters
and
then
once
we
get
the
query
string
parameters
we'll
again
use
the
same
graph
calls
to
get
the
data
as
well.
So
to
show
that
if
I
go
in
here
and
invoke
the
dynamic
messaging
extensions
here,
this
sends
the
message
to
the
bot
behind
the
scenes.
E
E
Speaking
of
task
modules,
task
modules
are
not
only
limited
in
message
in
in
messaging
actions,
so
you
can
even
bring
up
a
task
module
from
from
the
compose
box.
So
just
like
you
saw
you
can
bring
up
spfx
webpart
as
part
of
from
the
compose
box
as
well.
Now,
here
the
chat,
id
message,
id
message
body
will
be
empty
because
it's
not
on
a
message
where
we
are
executing
this.
E
You
still
get
the
same
context
like
the
team
id
and
channel
id,
and
then
you
can
invoke
certain
third-party
services
or
you
can
do
anything.
Basically,
whatever
you
can
do
from
spfx,
you
can
do
in
a
task
module
and
then
another
place
find
person
is
from
adaptive
cards.
So
you
have
adaptive
cards
posted
in
teams
where
you
have
a
slightly
fancier
message.
Maybe
there
is
a
third
party
app
which
is
posting
these
adaptive
cards
as
part
of
the
spfx
or
sorry
as
part
of
the
adaptive
buttons.
E
You
can
have
spf
x
task
modules
open
up
as
well,
and
you
can
have
the
same
of
context.
Information
available
there
so
yeah
speaking
of
speaking,
of
coming
back
to
messaging
extensions,
as
I
mentioned,
there's
two
types,
the
static
ones
and
the
dynamic
ones.
The
dynamic
ones
require
you
to
do
a
bit
more
work
with
the
bot
behind
the
scenes.
E
So
I,
if
you
have
lots
of
complex
logic,
if
you
are,
if
you
need
the
immediately
all
the
data
which
is
available
as
part
of
what
framework,
then
the
dynamic
approach
is
probably
better,
but
if
you
just
want
to
get
started,
if
you,
if
you
want
to
see
how
your
spfx
web
part
looks
inside
task
modules,
there
is
there's,
obviously
the
the
static
ones
where
you
just
configure
the
url
in
in
the
teams
manifest
and
then
the
it
should.
It
should
start
working
in
terms.
E
So
it's
easy
to
get
started
but
like
if
you
want
more
control
over
your
messaging
extension
and
task
modules
with
spfx
the
dynamic
one
with
the
bot
is
probably
the
right
way
to
go
in
that
scenario
and
then
and
then
the
spfx
supports
calling
graph
api
using
aed
clients.
And
you
can
you
can
do
everything
you
you
want
inside
the
task
modules,
then
so
just
another
way
in
which
spfx
can
be
surfaced
inside
teams,
in
addition
to
boss,
in
addition
to
tabs
and
personal
apps
yeah.
C
Question
because
I
know
that
you're
you're
implementing
this
within
the
valo
as
well-
and
that's
not
this-
isn't
really
intended
to
promote
wallace
products
but
more
on.
Can
you
explain
the
scenarios
and
and
where
you've
been
using
this
within
the
within
your
implementation?
So
what
would
be
the
scenario
where
people
would
be
using
this
kind
of
a
messaging
extension
in
first
place
because
there's
questions
around
that.
E
Yeah
sure
so,
just
to
give
you
an
example
of
valos
specifically
so
we
I
I
work
on
the
ideation
product,
where
employees
are
kind
of
promoted,
or
rather
employees
are
encouraged
to
submit
their
ideas.
So
one
of
the
things
which
we
do
is
we
allow
the
teams,
tab
or
sorry
the
team's
message
to
be
promoted
as
an
idea
like
from
the
messaging
extensions.
E
You
could
promote
that
as
an
idea
throughout
the
throughout
the
tenant,
so
promoting
messages
then
creating
something
creating
some
things
like
forms
and
stuff
right
from
the
compose
box,
which
which
then
gives
you
the
option
to
do
that
with
spfx,
as
well
with
the
compose
extension,
so
without
leaving
the
context
of
teams.
If
you
want
to
work
with
teams
data
in
your
third
party
application.
C
Excellent
thanks
parchman,
so
really
good
clarification
on
the
use
case,
because
that's
always
the
the
key
point
is
to
understand.
Where
would
I
actually
use
the
capability?
Not
just?
How
do
I
use
the
api
or
or
implement
things
so
really
really
great
stuff?
So
thank
you
for
that.
Thank
you,
patrick.
I
think
it's
daniel
next,
isn't
it.
F
You,
okay,
hello,
everyone.
My
name
is
daniel
watford,
I'm
a
software
consultant
in
the
uk
with
my
company
watford
consulting.
We
provide
software
development
and
system
integration
services
to
help
customers,
modernize
processes.
I've
been
building
software
for
about
20
years,
embedded
in
enterprise
systems,
but
only
came
to
sharepoint
about
five
years
ago.
F
I
really
quite
liked
how
it
took
care
of
a
lot
of
the
busy
work
things
like
access,
control,
storage
and
search
all
ready
to
go
come
forward
a
few
more
years
and
I
find
sharepoint
has
just
got
easier
to
work
with
with
sharepoint
online
the
framework
and
pmpjs
helping
us
with
solution
development.
So
today,
I'd
like
to
demonstrate
the
a
web
part
I've
created
for
the
sharepoint
framework,
which
will
help
explore
the
relationship
between
users
and
groups
in
sharepoint
and
the
azure
active
directory.
F
So
as
an
example
of
where
we
might
want
to
better
understand
users
and
groups
in
sharepoint,
we
can
take
a
look
at
a
simple
solution
to
process
purchase
orders
in
this
list,
we'll
create
rules
specifying
the
maximum
purchase
order,
value
that
a
member
of
staff
is
allowed
to
approve.
If
a
staff
member
submits
a
purchase
order
with
a
higher
value
than
the
solution
value,
the
solution
will
then
pass
the
purchase
order
up
the
management
chain
as
an
approval
request.
F
Once
the
purchase
order
is
approved,
relevant
notifications
can
be
automatically
sent
to
other
departments
such
as
finance
and
purchasing.
Each
rule
applies
to
multiple
users
and
groups
specified
using
a
person
or
group
column
for
display
purposes.
I've
added
an
additional
column
to
the
list,
with
some
formatting
to
show
the
ids
for
those
users
and
groups
that
have
been
selected.
These
are
the
site,
users
and
site
group
ids
that
we'll
explore
in
this
talk.
F
So
what
are
sharepoint
site
users
and
site
groups?
So
here
we
have
two
users:
aad
user
1
and
ad
user
2,
along
with
two
groups,
aad
group,
1
and
aad
group
2..
Normally,
we
think
of
users
and
groups
at
the
organizational
level
managed
using
tools
like
azure
ad,
like
the
azure
id
portal
or
the
microsoft
365
admin
center.
F
These
same
organization,
users
and
groups
are
available
in
the
sharepoint
site,
where
we
can
refer
to
them
in
people
or
group
columns
or
assign
roles
to
them,
but
once
the
site
needs
to
refer
to
a
user
or
group,
it
doesn't
continue
to
reference
it
by
any
sort
of
azure
ad
identifier.
Instead,
it
maintains
its
own
list
of
site
users
mapped
from
those
azure
ad
security
principles.
F
Sharepoint
site
groups
are
created
and
managed
on
the
sharepoint
site
site
users
in
including
those
mapped
ad
groups
can
be
assigned
as
members
of
a
site
group.
Here
I
have
a
bunch
of
users.
This
diagram
shows
the
users
and
security
groups
defined
in
my
azure
ad
for
my
tenant.
The
arrows
indicate
that
diego
alex
adele
and
azaya
are
members
of
some
security
groups
within
the
same
tenant.
F
On
my
demo
sharepoint
site,
I
have
the
have
defined
two
sharepoint
site
groups,
sp
group,
one
and
sp
group,
two
grady
and
ad
group,
one
and
ad
group
two
have
been
assigned
as
members
of
those
site
groups
assigning
those
memberships.
As
course,
creation
of
ad
group
1
80
group
2
and
great
grady
site
users.
F
Adele
henrietta
and
ad
group
4
have
been
assigned,
read
permissions
on
the
site
directly,
causing
the
creation
of
their
corresponding
site
users.
So
note
that
alex
diego
and
isaiah
do
not
have
corresponding
sharepoint
site
users.
Their
only
relation
to
the
sharepoint
site
is
through
their
direct
or
indirect
relationship
of
ad
group
memberships
of
ad
group
1
and
ad
group
4..
So
let's
take
a
look
at
how
these
users
and
group
memberships
can
be
surfaced
by
the
user
and
group
information
web
parts
over
to
the
demo.
F
So
here
we
are
at
the
home
page
of
my
demo
sharepoint
sites
we're
on
the
sharepoint
site.
We
have
the
user
and
group
information
web
part
already
installed.
The
web
part
defaults
to
displaying
information
for
the
current
user.
So
here
we
can
see
my
user's
azure
ad
information
from
the
graph
api
and
my
sharepoint
site
user
information
from
the
sharepoint
api,
both
retrieve
using
pmpjs.
F
F
F
F
Let's
have
another
look
at
grady,
segrady
is
recognized
by
the
grady
archie
user
principle
type
and
that
user
principle
is
a
member
of
the
sharepoint
sp
group,
one
site
group
rather
than
selecting
from
existing
sites
a
user
and
group
information.
Webpart
can
also
search
for
users
defined
in
active
directory.
So
we
can
give
this
a
try
by
searching
for
diego.
F
Since
diego
is
not
a
site
user
I'll,
just
always
back
here
since
he's
not
a
site
user,
there
is
no
sharepoint
site
user
information
to
display.
However,
he
can
still
be
identified
by
the
site
as
a
member
of
ad
group,
one
with
the
security
group
principle
type
and
also
via
the
ad
groups,
membership
of
site
group
sp
group,
one
now
we'll
take
a
look
at
alex
so
like
diego,
we
can
see
that
alex
is
not
a
site.
User
x
can
be
recognized
by
the
site
as
ad
group,
one
with
a
security
group
principle
type.
F
F
In
asia's
case,
in
asia's
case,
we
see
that
it's
only
recognized
by
the
site
due
to
his
membership
of
ad
group
four,
we
can
also
use
the
user
and
group
info
web
part
to
look
at
user
and
group
profile
information.
So
if
we
go
back
to
adele,
we
can
click
on
the
various
ids
principal
names
and
site
groups,
access
her
profile
pages
so,
for
instance,
we'll
click
on
adele's
user
principle
or
get
taken
to
her
delve
profile.
F
If
we
click
on
one
of
our
ad
groups,
we'll
get
taken
to
a
user
information
page.
So
this,
I
think,
hopefully
demonstrates
that
we're
actually
looking
at
a
site
user
rather
than
a
site
group
in
the
case
of
active
directory
groups
and
then,
if
we
go
and
click
on
the
sharepoint
site
group
we'll
go
and
see
the
members
list
for
that
site
group.
F
The
user
and
group
information
web
part
is
implemented
using
a
react
framework.
Its
top
level
react
component
is
a
function
called
user
and
group
info,
which
holds
the
top
level
state
for
the
web
part.
This
state
consists
of
references
to
two
lookup
services,
one
for
accessing
azure
id
and
one
for
accessing
sharepoint.
F
It
also
stores
a
state
for
the
currently
selected
user's
email
address
and
or
site
id,
and
then
it
also
tracks
whether
a
user
is
currently
selected
at
all.
The
only
place
that
state
is
updated
is
in
the
on
selected
user,
changed
callback
in
response
to
selection
of
a
site,
user
or
searching
for
an
organization
user
lead.
State
changes
will
cause
components
to
be
re-rendered
with
new
data.
F
F
Both
child
components
also
take
the
web
parts
context,
but
this
is
only
used
for
populating
those
links
we
saw
that
took
us
to
the
dell
profile
or
to
the
group
membership
profile
pages.
We
looked
at
at
the
end
of
the
demo.
You
use
the
selection
component
rendered
at
the
top
of
page
takes
the
web
parts
context,
the
sharepoint
user
group
lookup
service
and
the
callback
that's
down
here.
F
F
Moving
on
to
the
user
info
component,
the
user
info
component
is
a
react.
Functional
component,
which
includes
two
promises
in
its
properties,
returned
from
the
sharepoint
and
azure
ad
lookup
services,
as
each
of
these
promises
resolve
the
two
sections
user
users
azure
and
ad
information
and
sharepoint
site
user
information
will
be
rendered
just
about
here
as
each
of
the
promises.
The
azure
ad
promise
is
created
by
the
azure
ad
lookup
services
gets
aad
user
function.
F
F
The
sharepoint
user
group
lookup
service
enables
us
to
retrieve
site
user
information
for
a
site
with
the
given
site
user
id,
although
not
needed
for
rendering
the
user
info
component.
The
lookup
service
also
goes
and
retrieves
group
information
for
the
site
user.
We
do
that
so
that
we
can
cache
it
for
use
later,
while
we're
rendering
the
bottom
part
of
the
screen.
F
Its
properties
include
a
promise
to
return
an
array
of
sp
group
membership
objects.
These
objects
define
a
relationship
between
a
site
group
and
a
site
user.
By
permitting
the
site
group's
details
to
be
undefined
in
these
objects,
we
can
represent
cases
where
a
user
is
known
to
sharepoint,
but
their
user
principle
is
not
a
member
of
any
site
groups.
F
Here
we
can
see
the
get
user
memberships
function
from
the
sharepoint
user
group
lookup
service,
which
returns
the
promise
of
sp
group
membership
objects.
We
saw
in
a
previous
slide
using
the
given
site
user
id.
This
function
will
retrieve
the
sp
group.
Membership
objects
that
describe
the
given
site
users,
membership
of
site
groups,
then
any
azure
ad
groups,
the
user
is
a
member
of
a
retrieved
by
this
next
line,
maps
to
the
corresponding
site
users
and
then
check
for
membership
or
site
groups
as
well.
F
F
First
of
all,
the
function
calls
and
awaits
the
get
sp
user
and
ksp
user
and
members
group
promise,
which
we
saw
earlier
this
retrieves
the
site
user
information
based
on
the
given
site
user
id
along
with
the
site
group
membership
information
that
we
cached
you
can
see.
I've
had
to
do
a
little
bit
of
casting
here
to
try
and
get
access
to
the
eyesight
group
info
array.
F
F
F
So
that
concludes
this
demonstration
on
the
user
and
group
information
web
part
at
this
link
mention
some
properties
about
site
user
and
site
group
ids
and
how
it
appears
they
might
be
stored
in
a
single
list
on
the
site,
but
for
now,
thanks
for
watching
and
please
feel
free
to
get
in
touch
with
me.
If
you
have
any
questions.
A
G
It's
sharing,
take
it
away
cool
all
right.
Welcome
everybody.
My
name
is
ryan
scowton.
I've
been
involved
with
the
pmp
community
for
a
few
years.
Changed
jobs
had
to
take
a
hiatus
from
meetings
just
due
to
being
in
the
middle
of
my
commute.
One
of
the
things
I
can
definitely
say,
I'm
thankful
for
about
the
coronavirus,
is
lack
of
commute,
so
I
actually
get
to
be
involved
in
some
of
these
things
now
so
and
also
because
that
has
allowed
me
to
kind
of
devote
some
more
time
to
contributing
with
the
community.
G
G
It's
been
a
sample
for
almost
three
years
now,
there's
a
couple
issues
that
were
listed
so
I
started
working
on
fixing
it
and
talking
with
hugo-
and
I
figured
hey,
this
is
kind
of
an
older
one,
so
it'd
be
good
to
kind
of
remind
people
that
this
thing
still
exists.
So
what
is
this?
The
react
list
form
web
part
is
a
react-based
web
part
that
allows
you
to
be
able
to
point
it
at
a
list
and
it
will
generate
the
list
form
now.
G
G
Some
of
the
stuff
that
I
added
was
some
more
recently
was
adding
in
the
ability
for
user,
multi-user,
taxonomy
and
taxonomy
multi
field
types
and
we'll
look
at
this
in
a
bit
and
then
also
working
on
a
issue
currently
or
cascading
drop
downs
in
for
lookups.
So
if
we
look
at
this
web
part,
we
can
go
in.
I'm
going
to
add
this
guy
to
the
site
and
scroll
down.
It
is
just
called
list
form.
G
And
then
we
need
to
give
it
a
list
to
point
at
so
for
this
first
demo
I
am
going
to
use
test
list
form
and
then
we
specify
whether
we
want
to
be
new.
We
want
it
to
be
edit
in
this
case
I'm
going
to
go
with
edit
just
so,
we
can
kind
of
see
what
that
looks
like.
So,
if
I
set
it
to
edit
by
default,
it
doesn't
know
which
item
you
need
to
load.
So
there's
a
query
string
parameter
and
in
this
case
I'm
just
using
item
id
equals
two.
G
So
there
also
is
the
option,
because
this
doesn't
quite
support
all
field
types
yet,
but
we're
working
on
those
as
people
need
them.
But
if
you
want
to,
you
can
also
check
the
un's
show
unsupported
and
before
the
request
I
was
working
on,
the
user
fields
and
taxonomy
fields
would
not
show
up
until
you
showed
told
it
to
show
unsupported.
Also,
one
of
the
cool
things
you
can
do
is
after
you're
done
doing
edit,
so
whether
it's
a
new
or
you're
doing
an
update
to
an
existing
item.
You
can
redirect
them
to
another
page.
G
So,
for
example,
I
could
redirect
them
to
a
details.
Page
say:
hey,
thank
you
for
submitting
your
form
and
then
I
can
also
do
pl.
There
are
placeholders
that
allow
you
to
specify
hey
here
is
the
id
of
the
item
that
was
either
edited
or
added,
so
you
can
actually
include
that
and
some
other
things
in
your
process
flow.
G
G
And
groups:
this
is
just
a
group
based
filtering
kind
of
testing
through
the
different
scenarios
as
we're
going
through
it
making
sure
it
only
returns.
People
that
are
in
the
group
that's
specified
and
then
we're
done.
I
can
go
ahead
and
also
add
an
attachment,
and
then
I
can
hit
save
now,
since
I
haven't
really
configured
to
go
anyplace
else,
we
got
just
a
message
that
says:
item
save
successfully
and
then
that
goes
away.
G
One
of
the
things
I
have
realized
is
there
also
is
the
ability
to
move
these
controls,
so
it
is
drag
and
droppable,
but
as
you'll
notice,
one
of
the
things
I
was
doing
my
testing
yesterday,
for
whatever
reason
in
the
current
version
it
doesn't
work.
Also
with
the
there
are
some
icons
over
here.
The
top
one
is
to
move
the
field,
and
this
one
is
to
remove
it
say
you
don't
want
to
show
a
specific
field,
you'll
also
notice.
The
remove
button
does
actually
work,
but
the
icons
are
not
working.
G
So,
as
you
can
see
there,
these
are
just
community
samples,
so
there
are
things
that
are
beneficial.
That
may
or
may
not
be
working.
These
particular
items,
I
noticed,
don't
have
a
an
issue
created
for
them.
I
will
probably
just
go
ahead
and
somebody
want
to
work
on
it,
but
just
kind
of
you
know
those
type
of
things
are
there
so
for
this
particular
one.
G
So
in
this
case
I've
got
it
set
up
to
test
a
multi-select.
So
on
this
one
I
have
selected
projects,
one
and
2,
and
then
our
subfields.
We
have
child
elements
that
correspond,
so
we
have
project
1.1,
2.1
and
then
subproject
so
on
and
so
forth.
Now,
if
I
come
back
up
to
the
main
project
field,
I
can
come
here
and
uncheck
project,
this
switches
down
to
just
project
two
and
also
the
other.
As
you
can
see,
the
other
fields
have
now
changed
that
we
don't
have
any
the
project.
One
options
anymore.
G
G
We
can
see
our
values
come
back
plus.
We
also
get
to
see
some
of
the
other
options,
so
it
does.
It
does
work
with
the
cascading
and
making
sure
everything
matches
and
then
carrying
on
with
that.
So,
for
the
most
part,
that's
a
fairly
simple
project
in
case
anybody
wants
to
work
with
it.
There
are
a
if
you're
coming
in.
You
want
to
work
with
the
sample.
There
are
a
number
of
fields.
G
Your
main
point
is
going
to
be
with
the
list
form,
but
if
we
look
at
it,
there
are
a
bunch
of
different
form
fields
that
help
handle
the
rendering.
So
we've
got
attachment
fields.
We've
got
boolean
choice,
date,
lookup
numbers,
rich
text,
url
fields,
user
fields-
and
I
remember
measure
text
I
mean
not,
but
all
these
are
fairly
basic.
So
if
we
come
into
the
taxonomy
field,
for
example,
we
have
a
control
and
then
it's
just
using
the
the
sharepoint
framework
react
controls
community
project
to
use
the
taxonomy
picker,
that's
associated
with
it.
G
So
a
lot,
not
a
lot
of
involvement
is
required
to
make
updates
to
this.
If
you
want
to
say
hey,
I
want
to
there's
this
field
type
that
I
want
to
go
in
and
I
want
to
add
to
it.
It's
fairly
simple
to
add
these
in
and
then
there
is
a
mapping
file
that
coordinates
the
changes
to
so,
if
you
add,
in
a
new
field
type
it'll
map
from
the
actual
field
type
to
visuals,.
G
G
Nothing
like
live
coding
demos,
so
we
can
save
this
guy
and
we're
ready
to
roll,
and
so
I
can
add
in
an
attachment
and
change
things
up.
So,
as
you
see,
a
lot
of
the
involvement
with
the
community
projects
are
not
super
involved.
There's
some
basic,
adding
in
some
functionality
saying
hey.
I
know
how
to
work
with
this
type
of
data.
Let
me
kind
of
contribute
and
add
those
in
and
that's
what
I
got.
Thank
you,
everybody
for
watching
and
I'll
hand
it
back
over.
A
A
So
thank
you.
Recording
will
be
available
in
24
hours
on
the
sharepoint
community.
Youtube
channel
check
that
out
follow
us
on
twitter,
m365,
dev,
m365
pmp.
Our
next
spfx
call
will
be
in
two
weeks
on
october
22nd
and
our
next
general
dev
call
be
next
thursday
october
15th
we'll
have
our
october
community
monthly
community
call.
Excuse
me
on
october
13th.
That
is,
I
believe,
next
tuesday,.
A
I
had
no
idea
so
great
to
hear
that
that'll
be
a
really
fun
and
informative
session,
as
always
with
the
folks
that
really
shape
what
sharepoint
or
sharepoint
framework
is
and
will
become
so
great
to
hear
from
them
on
the
call
fantastic
they're
able
to
make
it
lots
of
great
as
well
developer.
Community
calls
out
there
on
adaptive
cards,
microsoft,
graph,
identity
platform
teams
and
others
encourage
you
to
check
out,
of
course,
as
many
of
these
calls
as
you
can
lots
and
lots
of
lots
of
great
information
out
there.
A
As
far
as
I
know,
all
of
these
are
then
recorded
and
available
after
as
well.
I
know
everybody's
busy,
so
you
can't
always
make
it
live,
but
these
tons
of
great
resources
out
there
for
learning
and
continuing
your
journey
in
microsoft
365..
So
I
want
to
thank
everybody
for
coming
on
the
call
today.
I
want
to
thank
vardaman,
daniel
and
ryan
for
doing
the
demos
and
thank
all
of
you
for
being
with
us
here.
Bye.