►
Description
Viva Connections & SharePoint community call on October 20. Two demos: Copy Views SharePoint Framework Web Part and Using the Azure AD on-behalf-of flow within your SharePoint Framework solution. Announced extending SPFx solutions to Outlook and Office.com - aka.ms/spfx-ignite2022. Project releases include: PnPjs Client-Side Libraries – v3.8 (GA) and CLI for Microsoft 365 – v5.9.0 (beta). See or listen to the latest episodes of Microsoft 365 PnP Weekly. The host of this call is Garry Trinder (Microsoft) | @garrytrinder. Q&A takes place as always in chat throughout the call.
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - https://aka.ms/m365pnp/blog
• Download invite for bi-weekly SharePoint Framework call at: https://aka.ms/spdev-spfx-call
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
B
Connections
and
SharePoint
framework
bi-weekly
sync,
it
is
October
the
20th
and
I.
Am
your
host
Gary
trinder
I'm
from
Microsoft?
Let's
move
forward
onto
the
agenda
so
we're
going
to
have
a
latest
update
on
the
SharePoint
framework
and
we're
going
to
be
covering
all
the
latest
from
patterns
and
practices,
so
we'll
be
talking
about
pmpjs
CLI
for
Microsoft
365
and
reusable
PMP
spfx
controls
and
we're
going
to
have
new
community
samples
and
we'll
have
our
optional
picture
time.
So
get
your
camera
ready.
B
So
there's
plenty
of
opportunities
to
participate
in
in
PMP.
You
can
come
on
and
you
can
do
a
demo.
You
can
contribute
on
GitHub
and
you
can
also
give
feedback,
and
so,
if
you're
working
on
something
you
know
incredibly
cool,
you
just
want
to
show
that
off
obviously
get
permission
before
you
do
that
from
your
company.
B
So
if
there's
things
that
we're
doing
well,
not
so
well,
and
then
please
let
us
know
and
yeah
we
can
just
make
things
absolutely
much
better
than
than
they
already
are.
Okay,
so
there's
plenty
of
resources
for
you
to
find
information
on
how
to
develop
on
Microsoft
365.
So
we've
got
the
official
Microsoft
365
developer
channel,
so
go
here
for
new
feature
updates
from
Microsoft.
B
We
have
tons
of
sample
galleries
as
well
across
teams,
SharePoint
framework
and
Power
Platform
list
formatting,
and
but
we
also
have
the
unified
sample
Gallery
so
check
out
that
that
unified
gallery
and
you'll
be
able
to
see
all
of
the
samples
across
all
those
different
areas.
And
if
you
can't
remember
any
of
these
links
or
where
to
go,
the
best
place
to
go
is
to
the
Microsoft
365
platform
Community
home
page.
If
you
go
to
akms,
M365
Community
you'll
get
access
to
all
of
these
lovely
resources.
B
So
we
have
many
Community
calls
taking
place
where
we
have
the
weekly
Tuesday
Microsoft
365
platform.
Call
where
we'll
have
Microsoft
employees
coming
and
and
doing
sessions
for
for
the
community
and
we've
also
got
other
calls
that
are
covering
adaptive
cards,
identity,
office,
Power,
Platform
and
obviously
this
call
as
well
for
fever
connections
and
SharePoint
framework.
B
So
the
next
Microsoft
365
platform
call
is
on
the
25th.
We've
got
three
sessions,
so
we've
got
Sheena
Macker,
who
is
going
to
be
showing
how
to
extend
Microsoft
teams
apps
to
office
and
Outlook
mobile?
We
have
a
Hugo
who's
going
to
be
covering
the
general
availability
of
power
pages
and
we
have
Vasa
and
Alex
who's
who's
going
to
be
covering
using
your
SharePoint
framework
Solutions
in
teams,
Outlook
and
office.com.
So
two
sessions
there
for
for
extending
teams
apps
into
office
and
Outlook.
B
A
Excellent,
thank
you
Gary.
Well,
friends,
as
you
heard,
Gary
talk
about,
there
is
a
ton
of
opportunity
to
contribute
to
the
community.
Many
of
those
are
in
ways
of
samples
or
demonstrating
a
presentation
on
this
call
perhaps
blogging
there's
a
number
of
ways,
but
but
it
can
be
a
little
scary,
sometimes
there's
some
landscape
that
you
might
not
be
aware
of
things
like
GitHub
pull
requests
and
forking
or
perhaps
speaking
for
the
very
first
time
we
want
you
to
feel
comfortable,
empowered
and
confident
so
sharing
is
caring.
A
A
We
really
appreciate
your
patience
as
there's
been
a
lot
of
things
in
the
last
couple
of
months
summer
and
a
number
of
events
that
have
have
kind
of
had
our
attention,
but
we're
setting
up
some
scaling
opportunities,
we're
setting
up
some
recordings
as
well,
so
you
can
kind
of
consume
that
on
demand,
because
we
want
you
to
be
able
to
be
a
part
of
this
community
as
much
as
you
desire,
so
don't
hesitate
to
keep
an
eye
on
our
website.
Aka
dot,
Ms,
slash
sharing,
is
caring.
A
Now,
once
you
have
contributed,
we
want
to
recognize
and
appreciate
in
a
formal
and
official
way,
all
the
work
that
you're
doing,
because
it
is
amazing
the
amount
of
work
that
you're
all
contributing
to
this
community.
The
recognition
program
has
been
set
up
to
just
do
that.
It
is
powered
by
credly
the
same
credly
that
does
those
certification,
Badges
and,
in
fact,
don't
miss
out
on
the
Oktoberfest
badge.
This
is
a
one
month
only
available
badge
here
in
October
for
Oktoberfest,
so
we
definitely
want
to
make
sure
that
you
take
advantage
of
that.
A
It's
only
available
once
we
do
need
you
to
opt
in
you're,
going
to
see
some
of
those
coming
out
in
the
next
few
days
as
well.
We're
processing
a
number
of
pull
requests
as
fast
as
we
can
and
getting
even
more
involved
to
help
out.
So
we
appreciate
all
of
your
contributions-
and
this
is
just
one
of
those
ways
in
which
we
want
to
formally
and
officially
show
that
appreciation
share
it
on
LinkedIn
the
show
it's
here,
Consultants
show
it
to
your
customers
and
your
managers.
B
C
Updates
in
here,
I
I
do
have
actually
some
great
news.
So
let's
go
forward
first
of
all,
all-time.
The
most
usage
is
two
weeks
ago
on
two
states
bit
of
a
strange
jump,
so
we're
kind
of
we're
not
sure
if
that
was
a
real
Trump
or
a
maybe
a
data
glitch
somewhere,
but
it
is
definitely
crowing.
So
if
that
wasn't
the
highest
usage
all
time
it's
in
this
week,
so
we
can
see
a
massive
adduction
all
around
the
SharePoint
framework
users
across
the
Microsoft
Trace
S5,
which
is
awesome.
C
Thank
you
for
that.
So
main
announcement
for
spfx
in
ignite
was
really
the
fact
which
we're
gonna
actually
demo
live
next
Tuesday
is
that
you
can
take
any
SharePoint
framework
solution
which
works
in
SharePoint.
Of
course.
Previously
we
already
enabled
that
same
code
without
any
code
changes
key
so
same
piece
of
code
automatically
to
be
running
in
the
Microsoft
teams,
without
hosting
all
of
that
taken
care
of,
but
now
we're
actually
announcing
support
for
Outlook
and
office.com.
Well,
it's
not
office.com
anymore.
C
Apparently
we
have
renamed
that
to
be
a
Microsoft
365
app,
but
you
understand
what
that
is.
So,
basically,
exactly
the
same
application
now
works,
then,
across
all
of
the
different
experiences
in
Microsoft
traces
to
find-
and
it's
automatically
hosted
it
has
the
automatic
single
sign-on.
It
has
all
of
the
cost
efficient
way
of
doing
API
handling.
So
really
the
easiest
way
to
build
your
Microsoft
365
extensibility
tuners
in
here
I
updated
the
images
and
logos
you
can
now
guess
on
the
chat.
C
What
are
all
of
those
logos,
so
you
can
actually
recognize
all
of
those
logos
which
are
Now
supported
and
because
two
of
them
are
completely
new.
Actually,
three
but
1.15.2
is
the
latest
for
production.
1.16
is
actually
coming
as
an
updated
preview
version.
Next
week,
most
likely
it's
going
to
be
Tuesday
before
just
before
Oracle
or
just
after
the
call-
and
they
say
that's
going
to
be
already
a
close
to
GA
version
of
1.16,
we're
looking
into
getting
1.16
out
in
November,
as
within
upcoming
weeks,
with
great
great
cake,
improvements
and
documentations
on.
C
How
do
you
get
any
SharePoint
framework
to
work
in
Outlook
in
office
or
in
teams
or
in
SharePoint
so,
which
is
really
really
cool?
1.17
is
the
ETA
is
in
the
first
quarter
of
2023,
and
now
we
already
are
finally
starting
to
look
into
introduction
SharePoint
framework
B2,
which
will
most
likely
happen
in
the
second
quarter
of
2023,
so
we're
looking
into
making
certain
changes,
not
critical
changes
on
the
implementation
style
site.
C
So
if
you
have
done
the
implementation
or
SharePoint
framework
solution,
that
will
remain
familiar
for
you,
but
certain
changes
on
the
packeting
and
messaging,
and
all
of
that
so
we're
looking
into
potentially
making.
Finally
a
B2
announcement
with
that,
but
a
little
more
clarity
on
that
one
as
we
move
forward
with
the
upcoming
months,
but
that's
it
for
the
spfx
site.
So,
let's
move
on
the
open
source
projects
thanks.
B
D
Hey,
thank
you.
We
did
a
release
version
3.8
on
October
14th.
We
presented
this
a
couple
weeks
ago
and
nothing
changed.
We
didn't
add
anything
new.
So
this
is
the
same
bit
of
information.
Just
the
general
documentation
updates
updates
to
caching
and
searching.
We
did
do
some
significant
improvements
on
testing.
That's
still
in
progress,
though,
we're
going
to
be
doing
some
more
work.
There
updates
on
folders
and
files
copy
by
path
move
by
path.
D
We
added
some
new
functionality,
a
file
from
path
and
file
from
absolute
path
to
make
it
simpler
to
move
things
from
one
site
to
another
and
oh,
and
that
added
ability
to
the
get
the
context
info
from
any
SP
queryable
derived
object.
So
that's
like
dot
list
list
is
an
SP
queryable
type
object.
So
then
you
can
get
context
info
which
tells
you
what
that
path
is
actually
going
to
access.
So
that
is
a
handy
new
feature.
D
We
are
working
on
some
new
stuff
for
the
next
release
and
don't
forget
that
about
those
nightly
builds
so
anytime,
a
pull
request
is
merged.
You
can
go
check
out
the
at
PMP
SP
or
at
PMP,
slash
graph
at
V3
nightly
version,
and
that
will
be
the
latest
build
based
on
all
the
pull
requests
that
are
in
before
release.
D
B
Great
thanks,
Julie,
okay,
moving
on
CLI
for
Microsoft
365..
So
this
is
me
Okay,
so
we've
just
released
5.9
beta
and
we've
have
we've
got
tons
of
updates,
it
is
Oktoberfest
and
lots
of
people
have
been
getting
involved.
We
have
lots
of
activity
on
the
repo,
so
there's
tons
of
new
commands,
mainly
for
Power
Platform,
so
support
for
retrieving
cards,
tables,
Solutions
and
tenant
settings.
We've
got
tons
more
issues
in
the
list
to
enhance
these
scenarios
for
for
power
platforms.
B
So
if
you're
interested
please
check
out
the
repo
we've
also
got
new
commands
for
SharePoint
online,
so
removing
event,
receivers
and
more
commands
for
managing
file
and
folder
permissions
as
well,
and
we've
had
a
slight
enhancement
to
being
able
to
filter
shared
teams
channels
when
you're
retrieving
them
from
the
command.
But
there
is
a
whole
load,
more
of
kind
of
small
changes
as
well.
So
please
do
check
out
the
release
notes
for
the
full
list
of
of
all
the
changes.
B
Contactors
at
CLI,
Microsoft
365
on
Twitter
get
in
touch
with
us
on
the
repo
and
if
you
are
on
Discord
and
you
haven't
joined
our
Discord
server,
then
please,
you
know
come
in,
have
a
chat.
There's
the
invite
link
on
the
on
the
presentation
just
get
involved
in
in
the
chat
and,
more
importantly,
get
involved
in
the
server
because
we
have
a
birthday
party
coming
up.
So
the
CLI
is
five
years
old
in
November,
so
we're
going
to
have
a
nice
little
event.
So,
if
you've
been
working
on
the
CLI,
we'd
love
it.
B
C
B
Fantastic,
thank
you
for
that
update,
okay,
moving
on
to
PMP,
modern
search,
so
a
new
release,
a
4.8.0
beta
and
for
September
2022.
So
thank
you
to
Emily,
K,
Dave
and
Paulo
for
for
getting
involved
in
there.
So
the
support
now
for
actionable
adaptive
cards
and
again
check
out
the
release,
notes
for
all
the
all
the
details
on
that
as
well.
B
Moving
on
to
SharePoint
framework
samples,
so
Hugo's,
not
in
the
call
today
so
I'll
just
cover
this
one.
So
yeah.
If
you
do
have
any
samples
like
I
mentioned
at
the
beginning,
you
know
we're
always
interested
to
unders.
You
know
to
see
understand
what
you've
been
working
on.
So
if
you
have
anything
to
share,
then
it's
a
great
way
to
contribute
to
the
community
so
check
out
the
unified
samples
Gallery.
You
know
if
you
have
a
a
sample
that
you
want
to
share,
don't
quite
know
how
to
do
it
check
out.
B
C
Gary
quick
point
from
my
side
in
here
we're
a
bit
delayed
on
processing
some
of
the
pull
requests,
so
we
do
apologize,
especially
on
SPF
examples.
We
are
trying
to
catch
up,
there's
a
lot
of
a
lot
of
contributions
already
pending
and
we
have
to
apologize
on
the
delay.
We've
been
in
there
really
really
busy
conferences
and
so,
but
we're
getting
up
we'll
get
them
processed.
Thank
you
for
everybody.
C
And
so
let
me
share
my
screen
a
lot
of
backtracks
on
the
on
the
screen.
So
let
me
do
that
there
we
go
now
we're
getting
there,
so
we
have
50
seats
in
the
room.
A
few
more
seats,
a
few
more
seats,
lightweight
I
will
show
you
the
timer.
When
we
start
recording,
I,
guess
we're
hitting
the
50
seats.
Let's
get
moving,
we'll
get
the
three
two
one
and
action
thanks
everybody
for
joining.
It's
really
cool
to
have
you
once
again
on
the
call?
Thank
you.
Thank
you.
C
B
E
E
I've
got
this
I
build
a
an
SPF
example
recently
and
I'd
like
to
demo
for
you
how
this
is
working.
So
the
idea
is
that
SharePoint
currently
has
this
great
features
to
create
new
sites
based
on
existing
sites,
which
is
awesome
functionality,
but
we
had
a
customer
that
would
really
like
to
allow
users
to
copy
views
across
sites
and
across
lists
and
libraries
to
watch
other
lists
and
libraries.
E
So
if
you
have,
if
you're
a
user-
and
you
have
changed
a
single
view-
you
would
you
would
like
to
be
able
to
copy
that
view,
and
you
know
get
your
changes
on
the
other
lists
as
well.
So
the
question
was
what
it
will
copy.
Well,
it
will
copy
which
columns
are
visible.
It
will
copy
a
sorting
mechanisms.
E
Grouping
by
a
group
group
by
it
will
copy
view
formatting,
it's
a
copy
filtering
stuff
like
that,
but
when
a
column
is
missing
in
the
Target
list,
so,
for
example,
you've
got
a
list
with
a
lot
of
columns
and
one
of
those
columns
is
on
your
view
as
you're
copying,
The
View,
and
if
that
column
is
not
available
on
the
target
list,
that
part
of
the
view
must
not
be
copied.
So
the
the
Target
The
View
must
of
course,
render
valid
and
not
invalid,
because
there's
some
view
or
some
column
missing.
E
So
this
is
basically
the
scenario
we've
built
it
I
built.
Let's
say
that,
like
that
I
built
it
as
a
web
art
and
an
extension,
so
there's
a
lot
of
shared
code
in
this
sample.
You
can
use
this
webpart
just
to
you
know,
set
it
in
the
central
place
to
to
allow
people
to
manage
their
views,
or
you
can
just
use
it
from
your
lists
and
libraries
and
copy
your
views
just
very
quickly.
E
The
let
me
just
show
you
how
it
works.
I'll
just
switch
to
my
other
screen.
This
is
my
Dev
tenant
and
I've
got
this
sample
site
with
a
sample
document
library,
and
this
document
library
has
got
a
very
nice
view.
I've
even
called
it
a
nice
view.
It's
got
a
choice,
column
and
it's
got
some
view.
Formatting
and
I.
Have
this
copy
views
button
right
in
the
command
bar?
This
is
the
list
view
extension
samples
if
I
click
it
okay.
E
So
the
demo
goals
are
not
really
favorable
to
me:
I'm,
not
seeing
any
errors,
it
just
won't
open.
Let
me
just
try:
if
I
can
do
it
like
this?
Okay,
so
I've
got
this
web
part
right
on
my
screen,
as
you
can
see,
not
as
in
as
an
extension
but
there's
a
web
part
and
I
have
my
current
site
selected
I
can
select
a
list
or
Library.
Let's
call,
let's
select
the
documents,
library
and
I
can
select
a
view
that
I
want
I
want
to
copy.
E
E
Let
me
get
back
to
the
the
slides,
so
let
me
talk
a
bit
about
the
component
structure,
so
I'm,
using
for
this
sample,
I've
used
the
class
components
which
is
like
the
the
classic
way
of
using
react
in
typescripts
the
class
components
and
there's
this
big
component.
The
parent
component
is
called
the
copy
views
container
and
within
the
copies
use
container.
We've
got
a
few
child
components.
The
Source
list
View
and
the
target
list
view
form
and
within
those
we've
got
a
few
Pickers.
E
So
we've
got
a
source
site,
picker
Source
list
picker.
This
shoe
picker,
switchbox
and
Target
list
speaker
every
time.
I
change,
one
of
the
values
of
one
of
the
pickers
they'll
communicates
the
value
of
that
figure
back
to
the
central
copy
use
container
and
when
I
click
the
copy
button,
which
is
right
on
this
on
the
on
the
right
left,
it
will
start
copying
the
tasks.
E
So
as
soon
as
I'm
clicking
the
copy
button,
there's
a
list
of
tasks
that
will
be
created
and
it
will
start
a
parallel
execution
you're
using
the
using
a
parallel
you
promised
at
all
and
as
soon
as
that
task
is
is
successful.
It
will
just
update
the
state
of
the
task
and
that
will
immediately
be
visible
on
the
on
the
screen
by
you
know.
Nice
check
check
marks
so
now
on
to
the
on
to
the
what's
really
going
on
below
the
below
we're
using
pnpgs
to
copy
to
do
the
actual
copying.
E
So
the
first
thing
we
do
is
to
get
everything
we
need.
So
we
need
some
information
from
the
source
list.
We
need
the
view,
we
need
the
the
fields
and
we
need
some
information
from
the
target
list
as
well.
So
we
need
to
know
what
fields
are
on
there
to
be
able
to
exclude
fields
that
are
not
available
on
the
target
list.
E
We
need
the
to
see
if
there,
if
the
view
is
already
available,
so
we
can
update
it
instead
of
edits
as
soon
as
we
have
all
the
information
we're
going
to
build
a
properties
objects
and,
as
you
can
see
here,
if
you've,
if
you've
worked
with
with
the
rest,
API
or
with
bmpgs
or
with
any
any
SDK
against
SharePoint
you'll
notice,
and
we
recognize
a
lot
of
these
properties.
So
there's
a
lot
of
classic
view.
E
Properties
like
row
limit
hidden
includes
root,
folder,
all
those
things
that
are
being
updated
on
the
Target
or
those
other
things
that
are
being
updated.
On
the
target
list
and
there's
also
some
more
modern
properties
like
custom,
formatter
and
few
type
2
which
are
being
updated
and
but
the
the
most
important
one,
of
course,
is
the
The
View
query,
because
that's
that's
a
camel
query
and
that's
the
most
complex
one
to
update
and
I'll.
Show
you
a
bit
because
view
filter.
Query
is
basically
camo
query,
so
that
might
have
the
following
structure.
E
It
shows
a
bit
of
XML
Group
by
part
and
order
by
part
and
a
condition,
apart
with
the
condition-
and
this
might
be
very
very
long.
Of
course-
I
mean
if,
if
you
have
multiple
ends
or
or
conditions,
there
might
be
a
very
deep
structure
visible
here
and
in
the
end,
if
you
know,
if,
if
we
have
some
column
that
only
exists
on
my
source
list,
then
this
view
query
needs
to
be
parsed
and
needs
to
be
changed
and
needs
to
be
changed.
E
For
example,
if
that
column,
some
column
that
only
exists
on
Source
list,
if,
if
we
have
to
remove
that,
it
will
need
to
look
like
The
Following
on
the
right
hand,
side
of
the
screen,
you
know
the
the
eventual
view
query
that
we
use
needs
to
be
cleaned
up
and
things
field
references
need
to
be
removed,
Etc.
So
how
can
we
do
that?
E
I
use
the
Dome
parser
for
it?
So
I
looked
into
a
lot
of
of
options.
You've
got
a
few
things
like
XML
to
GS,
which
can
parse
XML,
but
in
the
end,
I
decided
because
we're
running
in
a
browser
we
can
use
a
dome
browser
API,
which
is
a
regular
browser
API
and
you
can
parse
a
XML
string
and
and
update
it.
So
basically,
what
we're
doing
is
just
parse
the
XML
of
the
view,
query
I'm,
adding
a
root
element
because
that's
not
available
by
default.
E
In
the
view,
query
property
of
The
View,
I'm,
parsing
it
as
XML
and
I'm
going
to
you
know,
remove
some
references
and
update
the
structure
of
the
view
query.
So
you
can
do
a
lot
with
it
on
parser,
for
example,
if
you've
got
the
reference
camel
I'm
doing
things
like
get
all
elements
by
tag
name
so
that
I
have
all
the
field
references
so
so
I
can
check
if
fields
are
in
the
camel
that
are
not
on
the
target
list.
E
E
So
you
need
to
check
if
one
of
those
children
is
removed,
you
need
to
collapse
the
structure
a
bit,
which
is
what
I
what
I
did
as
well.
So,
basically,
if
you've
got
some
column
that
is
missing,
the
entire
camo
is
being
reformed
into
a
very
simple
and
more
simple
demo,
and
it
will
just
work.
It
will
just
show
how
it
should
be.
E
So
that's
basically
what
I
did
using
the
the
dawn
parser
and
well,
if
you've
got
the
the
properties
object.
With
the
new
view,
query,
we
can
just
call
SharePoint
using
pmpgs
and
add
the
view
or
update
the
view
and
after
adding
or
updating,
we
also
have
to
update
the
view
fields,
which
is
a
separate
action.
E
E
I'm
thinking,
you
know,
if
you
like
to
contribute,
do
do.
Maybe
you
would
like
to
pick
this
up.
Canon
boards
and
modern
type
boards,
I
I,
did
not
support
them
from
in
the
first
version
because
they
they
require
you
to
add
a
field
as
well.
For
example,
the
kendan
boards
depends
on
a
column
with
a
few
values
in
this
case
test
buckets,
so
it
will.
It
will
manage
the
the
buckets
of
the
of
the
view,
so
you
would
need
to
add
the
field
as
well.
E
E
B
F
Yes,
thank
you
Gary
and,
yes,
we
are
going
to
talk
about
how
we
can
Leverage
The
on
BL
flow
Grant
flow
in
SharePoint
framework,
Solutions,
I'm,
Paul
Pelosi
from
pcs.com,
and
here
you
can
find
my
reference
on
Twitter.
So
first
of
all,
I
will
start
with
some
Theory
just
to
better
understand
what
we
are
going
to
talk
about
and
to
be
sure
that
we
are
all
on
the
same
page
and
then
we
will
see
how
we
can
use
the
NBL
flow
in
a
SharePoint
framework.
F
So
the
idea
of
the
on
real
flow
is
just
to
have
yet
another
option
just
get
another
mode
to
get
an
access
token
in
order
to
consume
a
backend
API
through
Azure
active
directory
when
we
are
using
a
middleware
and
we
want
to
consume
from
that
middleware
a
backend
API.
So
the
idea
is,
we
have
a
front
end.
The
front
end
will
rely
on
the
middleware,
providing
an
access
token
to
access
an
API
or
a
service
in
the
middleware,
and
in
there
in
the
middleware
we
will
be
able
to
get
get
another
access.
F
I
have
a
diagram
which
will
explain
you
how
the
ambial
flow
works
from
a
functional
point
of
view.
So
imagine
that
we
have
an
application
where
we
have
an
end
user
consuming
that
application
and
we
want
to
consume
a
back-end
service
or
a
backend
API
through
a
middleware
leveraging
the
identity
platform
in
between
the
Microsoft
identity
platform
in
between.
So
the
idea
of
the
Overflow
is
that
the
application
will
provide
or
will
send
a
request
to
the
middleware,
providing
an
access
token
for
the
middleware.
F
Indeed,
in
this
diagram,
I'm
already
talking
about
a
scenario
where
the
user
already
authenticated
and
already
got
an
access
token
for
the
middleware
API,
once
we
provide
the
access
token
to
the
middleware
API,
the
middleware
API
will
provide
that
access
token,
together
with
a
client,
ID
and
a
secret.
So
with
the
client
credentials.
F
Making
that
request
and
as
such
we
can
leverage
the
delegated
model
and
we
can
get
access
to
information
like
the
mailbox,
the
personal
data
of
the
user.
We
can
send
messages
on
behalf
of
the
user
and
stuff
like
that.
That's
the
idea.
The
basic
idea
of
the
on
behalf
flow
when
we
do
that
and
generally
speaking
whenever
we
consume
an
API
using
an
Azure
active
directory.
There
is
also
the
need
for
a
grant
for
the
permission
in
order
to
have
the
application
consuming
an
API
on
behalf
of
a
user
to
be
granted
to
do
that.
F
So
how
does
it
work
when
we
have
a
middleware
in
between
and
we
use
the
on
behalf
flow
in
order
to
consume
a
backend
API,
because
indeed,
when
we
use
a
diagram
like
the
one
that
I
just
showed
you,
we
cannot
have
a
dialogue
prompting
the
user
to
Grant
permissions
for
the
middleware
to
access
the
backend.
So
how
does
it
work?
Well,
there
are
few
options
available.
F
One
is
to
Define
in
the
manifest
definition
of
the
middleware,
the
fact
that
there
will
be
a
known
client
application
for
our
middleware,
so
that,
when
the
front
end
will
make
a
request
for
Access
token,
the
very
first
time
for
an
access
token
to
consume
the
middleware.
The
end
user
will
be
prompt
not
only
to
Grant
access
to
the
middleware,
but
also
to
Grant
the
consent
to
access
the
resources
and
the
services
in
the
back
end
through
the
middleware
and
that's
one
option.
F
Another
option
is
to
use
the
pre-authorized
application
section
of
the
manifesto
which
will
simply
Define
what
are
the
applications
that
are
pre-authorized
with
a
grant
for
some
specific
applications
are
a
third
option
that
we
have
is
the
so-called
admin
consent,
meaning
that
an
administrator
of
our
tenant,
a
tenant
admin
will
grant
10
and
wide
the
permissions
to
the
middleware
to
call
a
backend
API,
which
is,
for
example,
the
scenario.
The
scenario
that
I'm
using
in
the
demo
that
I'm
going
to
show
you
right
now.
F
So
how
does
this
relate
to
SharePoint
framework,
because
what
I
said
so
far
is
just
related
to
Azure
ID
to
open
authorization
into
consuming
an
API?
Well,
what?
If
we
want
to
try
to
use
this
model
in
SharePoint
framework
and
why
it
is
worth
being
able
to
do
that?
Well,
first
of
all,
let's
start
with
a
trivial
question.
Let
me
say
in
SharePoint
framework
we
already
have
the
MS
graph
client
and
the
ad
HTTP
client
available.
So
it
should
eventually
be
enough
in
order
to
being
able
to
rely
on
a
backend
API.
F
So
let's
say
you
want
to
use
micrograph
well,
you
can
easily
do
that
in
SharePoint
framework
using
the
MS
graph
client
and
making
a
rest
request
targeting
the
Microsoft
graph.
However,
when
we
do
that
in
SharePoint
framework,
we
need
to
declare
in
the
in
the
configuration
of
our
solution
in
the
web.
F
Moreover,
whatever
we
use
and
whenever
we
consume
a
backend
API
from
SharePoint
framework,
we
are
actually
running
a
code
which
is
running
in
the
browser,
meaning
that
if
the
user
will
close
the
browser,
whatever
we
were
doing
with
our
client
site
code,
will
stop
doing
that,
because
the
browser
will
not
exist
anymore.
As
an
instance,
so
what
if
we
need
to
do
something
which
will
need
additional
processing
time
or
if
we
need
to
run
long-running
processes
in
the
background?
F
That
said,
let
me
move
to
the
actual
demo.
So,
first
of
all,
let's
see
the
user
experience.
This
is
a
very
simple
and
trivial
solution,
because
the
goal
is
to
show
you
how
to
Leverage
The
ambient
flow
model
and
not
to
create
a
really
fancy
SharePoint
framework
part.
But
this
web
part
will
allow
us
to
specify
the
URL
of
a
back-end
middleware
and
through
that
backend
middleware
I
will
be
able
to
make
a
couple
of
requests.
F
One
will
be
a
simple
one,
which
will
simply
give
me
back
who
I
am
as
an
end
user,
so
that
I
can
see
that
we
can
read
that
information
through
the
on
behalf
of
flow
access.
Token,
as
well
as
will
give
me
back
information
about
how
many
read
messages
I
have
in
my
inbox,
which
could
be
another
interesting
information
to
get.
F
I
can
also
use
this
solution
to
send
a
message,
for
example,
to
my
colleague
Widow.
Let
me
search
for
him
and
I
can
send
a
message.
I
agree,
though,
all
good
there
and
I
can
send
the
message
in
teams
in
teams
I
have
a
chat
open
with
my
colleague
Guido
and
as
soon
as
I
will
press
the
button,
we
will
see
that
we
will
have
a
new
message
popping
up
in
the
one
to
one
chat.
F
F
First
of
all,
in
Azure
active
directory,
we
have
an
application
registered,
which
is,
in
my
scenario,
called
spfx,
OBO
middleware
and
in
this
application
the
key
information,
the
key
settings
you
need
to
be
fully
focused
on
are,
first
of
all,
the
application
relies
on
a
client
secret
because,
as
I
said,
in
order
to
get
a
novel,
sorry
I
keep
on
saying
over,
which
is
the
acronym
of
on
behalf
of
flow.
Sorry
about
that.
F
But
if
you
want
to
get
a
noble
access
token,
you
need
to
use
decline,
credentials
so
a
client
ID
and
a
client
secret,
together
with
the
access
token
that
the
middleware
has
got
from
the
consumer,
and
so
we
need
to
have
a
client
secret.
Secondly,
in
the
API
permission
section
of
the
middleware
application,
we
need
to
declare
the
permissions
that
we
need
in
order
to
consume
the
backend
API
in
my
sample.
The
backend
API
is
micrograph,
so
here
I
need
to
read
the
user.
F
User.Read
read:
email
mail
mail.red,
so
we
need
to
being
able
to
create
a
chart.
The
one-to-one
chat
between
me
and
the
target
user
so
I
need
the
chat.create
permission
for
teams
and
I
want
to
send
a
message
so
chat.read
right
still
from
A
team's
point
of
view,
plus
I
have
the
user.read.all,
because
I
need
to
read
the
information
of
the
user
that
I
want
to
involve
in
involved
in
the
chat
that
I'm
going
to
create.
So
these
are
the
permission
that
I
need.
F
F
Now
this
is
my
middleware
and
I
want
to
be
able
to
consume
this
middleware
from
SharePoint
framework
and
that's
why-
and
this
is
the
the
third
and
last
steps
in
the
configuration
of
my
application
in
the
exposing
API
of
my
middleware
application
image.
Ready
I
also
declared
that
I
have
a
unique
application.
Id
URI,
which
I
would
advise
you
to
use
as
a
string
and
not
as
a
good
like
the
auto
generated
one
so
I
usually
replace
the
auto
genetic
grid
with
the
name
which
is
better
recognizable.
Whenever
you
will
need
it.
F
My
scenario
API
and
then
spfx,
album,
middleware
and
then
I
have
a
permission
scope.
You
can
easily
create
one
one
more
by
clicking
on
otherscope
and
providing
all
of
the
information,
and
this
will
be
the
permission
that
SharePoint
framework
will
need
in
order
to
consume
my
middleware,
and
then
my
middleware
in
the
back
end
will
rely
on
these
permissions
on
behalf
of
the
user
to
consume
Microsoft
graph
in
the
back
end.
Okay,
so
that's
it
from
the
Azure,
the
application
registered
as
the
middleware.
F
F
So
here
I
simply
say:
okay,
give
me
a
client
in
an
adhdp
client
to
consume
that
specific
API
and
then
I
provide
the
instance
of
the
middleware
client
as
one
of
the
properties
to
my
react
component,
which
I
use
to
render
the
actual
UI
of
my
webpart.
So
in
the
web.
Part
I
simply
have
a
really
trivial
UI,
where
I
have
a
couple
of
buttons
and
the
people
picker
from
the
MGT,
because
why
not
and
a
text
field
and
a
button
so
the
primary
button,
the
one
that
I
used
to
just
get
my
personal
data.
F
We
rely
on
the
get
personal
data
method
wondering
what
okay,
so
the
get
personal
data
will
simply
build
the
URL
of
the
target
API
based
on
the
base
URL
that
we
have
in
the
settings
of
our
web
part.
So
this
one
right
now
I'm
running
the
local
version
of
my
function,
to
show
you
in
the
back.
What
will
happen
under
the
cover
and
I?
F
Have
that
I
make
a
get
request
for
that
specific
URL
and
I
will
get
packages
and
response
through
which
I
can
see
who
am
I
the
Inbox
and
read
item
and
the
inbox
total
item
count
simple
as
that:
okay,
when
I
do
this
request
under
the
cover?
What
happens?
Let
me
do
it
again
with
F12
I
can
see
in
the
network
oops
one
more
time.
Sorry
I
make
a
request
for
get
personal
data.
F
I
Target
this
endpoint
in
my
Azure
function,
which
is
running
locally
in
my
visual
studio
code
in
the
bug
mode
and
if
I
scroll
a
little
bit
down
I,
can
see
in
the
authorization
header
that
I
have
a
bear
access
token,
which
is
the
one
generated
by
the
plumbing
in
SharePoint
framework.
To
give
me
an
Access
token
to
consume
the
Target
middleware.
In
fact,
if
I
copy
and
paste
that
access
token
right
here,
we
can
see
that
right
now,
I
have
an
access
token
for
this
audience.
F
Now,
what
happens
is
that
when
I
make
a
request-
and
let
me
do
that-
let
me
put
a
breakpoint
in
my
Azure
function
here:
I
have
an
Azure
function,
built
with.net,
6,
isolated
mode;
I
have
my
Azure
function
running
in
Visual
Studio
code,
and
here
I
can
put
a
breakpoint
to
show
you
what
happens
under
the
cover.
So
let
me
make
one
more
request:
oops
right
here
and
let
me
move
to
visual
studio
code,
and
here
we
can
see
that
okay
I
see
that
I
got
my
call.
F
I
can
see
if
I
have
a
authorization
header
in
the
request
and
if
not
I
will
complain
and
say
you
are
not
authorized
if
I
have
one
I
will
get
the
better
token
that
I've
just
got
from
the
request
from
the
client
request
and
I
can
rely
on
a
utility
function
that
I
created,
which
will
give
me
access
to
the
ombi
alpha
flow
token.
So
let
me
put
a
breakpoint
right
here
and
let
me
show
you
what
happens
so.
F
So
basically
I
get
the
access
token
that
was
provided
to
me
by
sharpen
framework
and
I
will
use
it
to
make
a
new
request
for
a
new
access
token,
which
will
be
on
behalf
of
the
user.
But
it
will
be
a
different
one
and
in
fact,
if
I
go
here
and
I
copy,
the
value
of
my
access,
token
and
I
show
you
again
with
jwt.ms.
Here
we
can
see
removing
the
quotes
that
we
have
a
different
access
token,
where
now
the
audience
is
micrograph.
This
is
the
unique
ID
of
micrograph
everywhere
in
the
world.
F
F
So
we
made
our
week
our
request
and
we
have
got
our
information,
the
user,
principal
name
of
the
user
and
the
number
of
unread
messages
in
the
inbox.
So
this
is
the
round
trip
that
we
make
in
order
to
rely
on
the
oboe
flow
now
to
describe
the
journey
I
mean,
for
example.
If
you
think
about
the
function
well
in
the
function,
you
have
to
retrieve
the
access
token
you
should
validate
the
access
token.
Then
you
have
to
retrieve
the
about
token.
F
You
have
to
provide
it
back
to
Mexico,
so
quite
a
quite
a
tough
journey,
I
would
say
so
just
for
the
sake
of
making
our
life
easier
in
the
sample
that
you
can
download
from
the
sample
Gallery.
You
can
also
find
this
additional
function,
which
is
the
same
teams,
chat
message
in
this
one
I
implemented
for
you
also
based
on
another
Community
sample,
which
I
slightly
changed
and
I
wouldn't
say,
improve,
but
I
would
say
adapted
to
my
scenario.
F
Access
to
the
Overflow
token,
without
the
need
to
do
all
of
the
stuff
that
I
showed
you
before
manually,
because
you
can
just
rely
on
this
functionality,
which
will
be
based
on
the
middleware
functionalities
of
the
Azure
functions
engine.
This
is
not
a
session
about
the
Azure
function,
so
I
will
not
dig
into
it,
but
you
can
just
see
that
I
can
set
this
flag
and
say:
okay
from
the
function
contest.
F
Give
me
the
principle
of
the
user
and
give
me
the
on
the
alpha
of
token
and
that's
it,
and
then
you
can
use
it
so
again
feel
free
to
download
the
sample
and
dig
into
it.
I
will
not
dig
into
the
internal
implementation
of
this
functionality,
but
I
think
this
will
be
really
useful
for
you
to
easily
and
quickly
be
on
board
of
these
new
scenario
now
last
thing
that
I
want
to
share.
We
do
before
giving
the
stage
back
to
Gary.
F
Is
that
if
you
want
to
do
that
for
real
in
a
real
solution,
you
will
have
to
host
your
Azure
function,
for
example
in
a
real
hosting
environment
in
Azure
and
as
such?
If
you
will
do
that,
remember
that
you
have
to
configure
the
course
settings
in
order
to
have
your
SharePoint
online
tenant
in
the
list
of
allowed
Origins,
for
course,
for
your
Azure
function.
Otherwise
it
will
not
work
because,
of
course,
related
issues.
F
So
let's
say
the
I
think
it
is
quite
a
long
journey
to
see
all
of
the
steps,
but
thanks
God
we
have
the
recording,
so
you
can
go
through
it
again,
step
by
step
and
I
think
this
is
a
really
useful
scenario
whenever
you
want
to
have
a
background
task
running
on
behalf
of
the
user
and
when
the
user
will
trigger
it
from
SharePoint
framework.
That's
it
back
to
you
Gary
and
thank
you.
C
The
token
is
visible
in
here,
and
that
means
that,
if,
for
whatever
reason,
there
would
be
a
situation
that
in
the
same
browser
window
and
session
there
would
be
malicious
code
potentially
that
code
could
actually
get
access
on
this
token
right,
yeah
right,
that's
correct!
We
need
to
be
so
that
sounds.
Oh
my
God
terrifying!
C
F
And
that's
why,
for
example,
if
the
SharePoint
framework
solution
and
I
forgot
to
tell
it
so
thank
you
Visa,
because
you
reminded
it
to
me
implicitly
by
saying
what
you
said:
I
have
to
declare
in
the
web
API
permission
request
that
I
want
to
allow
the
SharePoint
framework
solution
to
have
access
to
my
middleware.
In
order
to
have
this
permissions
called
middleware
consumer
and
a
tenant
admin
of
SharePoint
will
have
to
Grant
this
permission
in
order
to
make
it
possible
to
happen.
F
B
Thanks
Paolo,
absolutely
fantastic
demo,
I
really
enjoyed
that
one
I'm
sure
yeah
I'll
be
checking
out
the
sample
and
the
recording
definitely
when
it
arrives
right.
So
thank
you
to
Paulo
and
to
Martin.
So
this
recording
of
the
call
will
be
available
in
24
hours
that
will
be
published
on
the
Microsoft
365
Community
YouTube
channel.
So
if
you're
not
subscribed
to
get
the
update,
then
please
do
go
along
and
subscribe
today
and
follow
for
all
the
latest
news
at
Microsoft,
365
Dev
and
at
M365
PMP.