►
Description
In this 14-minute Developer - focused demo, Paolo Pialorsi delivers an option to extend or replace the Power Automate Flow Panel with a Flow Launch Panel built with SPFx that’s accessed from within SPO/Microsoft Teams, and that triggers flows by content type or status, and allows flow reuse across multiple lists and libraries. The SPFx launch panel delivers a comfortable level of abstraction and behind the scenes intelligence that prompts users only for needed information in the simplest terms. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on November 19, 2020.
Demo Presenter: Paolo Pialorsi (PiaSys) | @paolopia
Supporting materials:
• Document - List channel messages | https://docs.microsoft.com/en-us/graph/api/channel-list-messages?view=graph-rest-1.0&tabs=http
• Document - chatMessages: delta | https://docs.microsoft.com/en-us/graph/api/chatmessage-delta?view=graph-rest-1.0&tabs=http
• Document - List channel message replies | https://docs.microsoft.com/en-us/graph/api/channel-list-messagereplies?view=graph-rest-1.0&tabs=http
• Document - Get a reply to a channel message | https://docs.microsoft.com/en-us/graph/api/channel-get-messagereply?view=graph-rest-1.0&tabs=http
• Document - Create subscription | https://docs.microsoft.com/en-us/graph/api/subscription-post-subscriptions?view=graph-rest-1.0&tabs=http
Learn more:
• 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
I
will
just
introduce
the
topic
with
a
couple
of
slides
and
then
I
will
move
to
the
actual
demo.
So
the
idea
today
is
to
see
how
you
can
use
a
sharepoint
framework
to
extend
the
user
interface
of
power
automate
when
it
is
needed,
and
that's
why
I
want
to
share
with
you
a
couple
of
information.
So,
first
of
all,
with
power
automata.
A
With
the
flow
launch
panel,
you
can
collect
input,
arguments
which
can
be
text,
information
or
a
drop
down
a
list
of
options.
Yes,
no
fields
and
a
file
attached
to
the
flow,
an
email
address
or
a
number
or
a
date
which
is
really
cool
and
great,
because
you
can
improve
the
quality
of
your
flows
when
you
start
them
from
within
sharepoint
online.
A
However,
what
if
we
need
to
do
something
more
like,
for
example,
we
need
to
collect
specific
users
or
groups
using
the
people,
picker
eventually
with
some
filtering
criterias,
or
what,
if
you
want
to
collect,
for
example,
terms
using
the
taxonomy
of
sharepoint
online.
Nowadays,
the
taxonomy
is
back
to
life,
let
me
say-
and
it
is
becoming
again
very
important
in
the
token
management
solutions
and
information
architecture
of
solutions
based
on
sharepoint
online.
So
why
not
using
the
taxonomy
to
collect
information
which
will
be
additional
input
for
our
flows?
A
Why
not
having
the
capability
to
support
multi-language,
ui
or
a
ui
that
can
be
adapted
to
the
context
when
we
are
rendering
the
flow
panel
to
request
information
to
the
user
and
why
not
having
constraints
or
validation
rules
about
the
input
fields
that
we
collect?
All
of
these
capabilities,
unfortunately,
are
not
available.
If
you
just
use
the
flow
launch
panel
and
that's
why
I
want
to
show
you
how
you
can
leverage
a
sharepoint
framework
to
do
that.
A
Moreover,
you
can
add
custom
logic,
of
course,
and
many
many
other
things
whenever
you
use
sharepoint
framework
to
build
the
ui.
And,
moreover,
when
you
think
about
the
flow
association
targeting
sharepoint
online
well
in
flow
in
power
automate,
you
can
associate
a
flow
to
a
list
or
a
library.
But
for
example,
you
cannot
associate
a
flow
to
a
specific
content
type
unless
you
use
some
tricks
in
the
flow
that
you
create.
A
At
the
same
time,
we
cannot
use
the
same
flow
on
multiple
libraries
again,
unless
we
use,
for
example,
tricks
like
registering
a
flow
to
listen
for
a
web
book
for
multiple
list
libraries
and
then
inside
the
flow.
We
try
to
understand
what
the
target
list
or
library
is.
So
there
are
some
challenges,
and
nowadays,
when
you
want
to
do
more
than
what
is
provided
out
of
the
box
and
again
so
if
we
want
to,
for
example,
associate
or
start
and
make
it
possible
for
end
user
to
start
the
flow.
A
A
So
in
all
of
these
scenarios
again
being
able
to
extend
or
replace
the
flow
panel
of
flow
with
something
built
with
sharepoint
framework,
I
think
is
really
useful,
as
well
as
to
being
able
to
associate
or
use
the
same
flow
targeting
multiple
lists
or
libraries.
So
let
me
move
to
the
demo
environment
and
let
me
show
you
how
you
can
do
that
using
spfx
integrated
with
the
power
automate.
A
So,
first
of
all,
let
me
show
you
a
solution
that
I
have,
and
here
we
have
a
document
library
in
a
modern
team
site,
and
here
I
have
a
flow,
a
flow
defined
with
power
automate.
So
I
can
select
an
item
I
can
go
to
automate
and
I
can
start
a
new
flow
with
the
launch
panel,
and
this
is
the
launch
panel.
I
was
talking
about
so
no
matter
a
few
seconds.
We
will
be
able
to
provide
some
input
arguments
like
some
text.
A
For
example,
we
can
select
some
input
values,
we
can
choose
a
boolean,
we
can
upload
a
file
if
we
like
it
can
be
whatever
you
like.
I
don't
know,
I
really
don't
know.
Let
me
get
a
sample
document.
Okay,
this
one.
Let
me
provide
an
email
address
which
can
be
my
address.
So
now
you
can
spam
me
if
you
like,
can
be
a
number
and
can
be
a
date.
So
still
some
good
options
available
out
of
the
box
with
flow.
You
can
run
your
flow
and
in
your
fro
you
will
get
the
information.
A
In
fact,
if
you
go
to
the
user
flowing
power
output
which
I
define,
we
can
see
that
we
just
or
we
will
have
a
flow
running
or
maybe
I
didn't.
Okay,
I
didn't
get
a
proper
email
address.
Sorry
about
that.
So
let's
get
this
one,
for
example,
run
flow.
Okay,
and
here
we
will
see
a
matter
of
two
seconds-
the
flow
which
was
executed
so
all
good,
and
we
got
a
bunch
of
input
arguments
inside
the
flow
now.
A
A
Okay,
let
me
select
this
item
and
if
I
leave
this
item
as
a
specific
content
type
or
as
a
specific
status
in
a
field,
I
want
to
have
using
spfx
extensions,
a
common
set
which
will
allow
me
to
start
the
flow
with
the
custom
dialog,
which
will
have
a
more
customizable
user
experience
like,
for
example,
this
one,
which
reminds
me
the
approval
flows.
We
were
used
to
use
in
the
past
with
the
approval
flows
of
sharepoint
2010,
far
memory,
but
still
customers
often
want
to
have
such
kind
of
experience.
A
They
want
to
be
able
to
define
a
list
of
approvers
dynamically.
So,
for
example,
I
can
have
myself
as
an
approver,
but
I
can
also
define
that
I
want
to
have
another
approver,
which
can
be
one
of
my
colleagues
here
or
I
can
do
more.
I
can
choose
a
date.
I
can
use
a
taxonomy
field
and
so
on
and
so
forth.
By
building
such
kind
of
solution,
you
can
easily
extend
and
provide
a
better
ui
based
on
spf
x,
but
still
integrated
with
the
power
ultimate.
A
In
fact,
by
clicking
on
the
start
flow
button
here
I
can
see
that
in
another
flow
that
I
have
in
my
power
automate
here.
Let
me
go
here
my
flows,
and
here
I
have
my
spfx
flow
ui.
We
can
see
that
we
have
a
flow
which
is
running
right
now.
This
is
just
creating
an
approval
task
and
sending
an
approval
task
to
the
two
users
that
I
selected.
A
And
we
can
see
that
in
this
flow.
If
I
click
on
this
one,
it
is
working,
it
is
running
and
most
likely
now
it
is
completely
executed.
Okay-
and
I
will
be
able
to
see
in
my
inbox
that
I
have-
or
I
will
have
soon-
a
message
coming
from
the
flowing
power
automate
with
the
assignment
of
an
approval
task
to
my
user.
So
how
can
we
build
such
kind
of
solution?
A
First
of
all,
in
sharepoint
framework
we
can
define
an
extension,
a
common
set
extension
and
in
the
common
set
extension
in
the
on
list
view
updated.
We
can
easily
check
if
the
content
type
of
the
selected
item
is
the
one
we
are
looking
for
so
by
accessing
the
event
object
that
we
get
as
the
input
to
this
method.
A
We
can
simply
collect
the
content,
type
id
information
and
field
of
the
selected
row,
which
is
just
one
item
in
this
scenario,
and
we
can
compare
this
one
with
a
setting
that,
for
example,
we
could
have
in
the
settings
of
our
command
set.
In
fact,
in
the
properties
of
the
command
setter,
we
defined
a
target
content
type
id
property
which
can
be
configured
whenever
we
associate
these
command
sets
to
a
specific
target
list
or
library,
which
is
what
I'm
doing
here.
A
A
I
will
simply
render
a
an
array
of
approvers,
for
example,
where
every
single
approver
is
yet
another
react
component
which
will
simply
use
the
patrol
that
we
have
in
pmp
in
order
to
collect
what
the
user
is.
What
is
the
user
selected
by
the
end
user
triggering
the
new
flow
and,
of
course
we
can
dynamically
render
the
approval
controls
inside
the
ui
rather
than
having
a
predefined
set
of
fields
like
we
do
have
using
the
out
of
the
box
flow
launch
panel
of
power
automate.
A
A
I
can
simply
use
the
out
of
the
box
capabilities
of
power
automate
to
get
the
file
object
to
get
the
metadata
of
the
file
and
whatever
else
I
need
to
do,
and
I
can
go
through
all
of
the
approvers
to
assign
them
an
approval
task
which
can
be
a
sequential
or
a
parallel
approval
task,
depending
on
what
I
want
to
do
in
my
business
logic.
So
quite
easy,
quite
simple
to
do,
of
course,
in
order
to
use
this
trigger,
we
need
the
premium
capabilities
of
power
automate
to
be
fair.
A
There
is
a
kind
of
a
workaround.
We
can
eventually
store
some
information
inside
metadata
fields
of
the
currently
selected
item
and
avoid
using
the
http
trigger.
But
as
such
we
will
not
be
able
to
associate
the
flow
to
multiple
lists
and
libraries
so
up
to
you,
depending
on
the
fact
that
you
want
to
use
the
premium
capabilities
or
not
of
a
power
automate.
But
as
such,
this
is
a
I
think,
a
great
way
of
extending
the
ui
of
power
automate
in
sharepoint
online,
using
a
sharepoint
framework.