►
Description
In this 15-minute Developer focused demo, April Dunnam and Hugo Bernier introduce us to an alternative to the out-of-box Power Apps Web part in SharePoint, an enhanced – more configurable Power Apps web part. Configure screen sizing – multiple aspect ratios or fixed height and theming - pass SharePoint theme color values into Power Apps. Also, pass dynamic data from page elements to Power Apps – such as a selected item on a connected list or an environment variable such as the user’s locale. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on August 27, 2020.
Demo Presenters:
• April Dunnam (Microsoft) | @aprildunnam
• Hugo Bernier (Tahoe Ninjas) | @bernierh
Supporting materials:
• Video - PowerApps Enhanced SharePoint Webpart | https://youtu.be/EFhP4uu0rlo
• Repo – React Enhanced Powerapps | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-enhanced-powerapps
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
Yeah,
so
I'm
really
excited
to
be
here
to
show
off
the
enhanced
power
apps
web
part
that
hugo
built
being
a
heavy
power,
apps
user
and
sharepoint
user
myself.
I
know
that
this
web
part's
really
going
to
make
a
lot
of
my
fellow
power
rappers
excited
because
it
really
addresses
some
of
the
long-standing
feature
requests
which
I'll
show
off
today.
A
A
So
to
get
that
you
would
go
to
powerapps
find
the
app
you
want
to
embed
in
sharepoint
click,
the
dots
go
to
the
settings,
oops
sorry
go
to
details,
not
settings,
and
then
you
can
either
copy
the
app
id
or
the
web
link,
whichever
one
then
the
web
part
will
take
that.
So
I'm
going
to
copy
that
link
and
you
paste
that
in
and
as
soon
as
you
do
that
it
updates
the
web
part
and
you
see
your
embedded
power
app,
but
really
with
the
out
of
the
box.
A
That's
the
only
thing
we
can
configure
other
than
showing
or
hiding
a
border
for
that.
So
if
I
publish
this
you'll
kind
of
see,
so
one
of
the
main
feature
requests
that
you'll
see
in
the
community.
Is
this
current
web
part?
You
can't
really
make
it
take
up
the
full
real
estate
of
the
screen,
it's
kind
of
forced
at
a
certain
aspect
ratio
on
here.
So,
even
though
this
is
a
tablet
based
power
app,
it's
not
taking
up
the
full
real
estate
of
the
screen.
A
A
You'll,
see
that
if
we
expand
out
the
appearance
section,
so
we
can
take
advantage
of
certain
aspect
ratios
that
you
would
be
familiar
to
you
if
you
already
in
power
apps.
So,
for
example,
I
have
this
power
app
open.
If
I
go
to
file
settings
and
screen
size.
These
are
the
same
aspect
ratios
that
you
currently
get
within
powerapps,
so
you
can
take
advantage
of
those
in
his
enhanced
web
part.
A
But
one
of
the
things
that
gets
me
really
excited
about
this
web
part
is
the
ability
to
pass
in
dynamic
properties.
Okay.
So
to
me
this
is
a
game
changer.
This
is
something
that
I've
personally
wanted
for
a
while,
and
I
know
everyone
in
the
community
has
but
to
be
able
to
have
a
scenario
where
you
notice.
I
already
have
a
list
here
on
this
page
with
some
list
formatting
on
it,
and
this
is
the
list,
is
the
back
end
of
my
powerapp.
So
wouldn't
it
be
great
if
we
could
have
these
two
talks.
A
A
All
we
have
to
do
is
turn
on
the
pass
dynamic
properties
option
here
and
then
it's
going
to
tell
us
what
source
you
want
to
connect
to.
So
we
only
have
one
list
on
here,
so
I'm
going
to
connect
that
to
my
time
off
request
list,
and
then
we
just
use
the
drop
down
to
select
okay.
What
do
we
want
to
pass
into
that?
So,
in
my
case,
I'd
like
to
get
the
id
of
this
currently
selected
item
and
pass
that
here
into
the
power
app.
A
So
I'm
going
to
select
the
column
containing
the
filter
value
option
and
he
could
have
made
it
more
easier
because
we
can
just
use
the
drop
downs
and
point
and
click.
So
now
I'm
just
going
to
select
my
id
field
and
then
the
only
other
thing
we
have
to
do
is
specify
the
parameter
name.
So
this
is
the
parameter
value
that
powerapps
is
going
to
look
for
so
that
it
knows
how
to
get
the
parameter
value.
A
So
I'm
going
to
call
this
id
because
that's
what
I
already
have
coded
into
my
powerapp
so
now
all
I
have
to
do
is
like
click
out
of
this.
Let's
republish
this
app
and
let's
see
I'm
going
to
select
this
one
here
and
you
see
as
soon
as
I
do
kind
of
reevaluates,
and
it
takes
me
directly
to
that
record
in
my
power
app
automatically.
A
A
Okay
and
you
can
just
do
a
check.
So
you
see
I'm
checking
to
see
if
there's
a
parameter
using
the
param
function
called
id
and
if
that's
not
blank,
I'm
going
to
set
a
global
variable
called
selecteditem
to
the
selected
item
from
my
entry
with
that
parameter
value.
So
that
sets
the
item
and
then
I'm
saying
navigate
to
my
edit
screen.
A
If
that
parameter
value
is
there,
so
in
my
edit
screen
I'm
just
have
a
form
control
and
I'm
setting
that
items
property
of
the
form
control
to
that
selected
item
value,
so
it
just
gets
passed
in
seamlessly
right
so
again,
game
changer
here
now.
The
other
thing,
though
so,
wait,
there's
more
that
this
will
do
is
theming.
A
So
if
you
have
a
sharepoint
theme-
and
you
want
that
to
apply
to
your
powerapp,
we
can
pass
your
sharepoint
theme
elements
to
the
powerapp.
So
you
have
one
consistent
holistic
brand,
so
we
can
select
the
theme
option
and
we
can
control
all
these
different
theme
variants
from
sharepoint
to
pass
that
into
powerapps.
So,
for
example,
I
could
take
our
button
background,
hovered
variable
and
once
I
select
that
I
can
pass
that
into
powerapps,
so
I
already
have
this
kind
of
wired
up.
A
So
if
I
go
into
let's
republish
this
one
of
these
items
again
to
go
into
that
edit
screen,
I'm
just
going
to
refresh
the
page,
see
let's
select
that
one
this
time
I
can
make
it
change
this
background.
Color
based
off
of
the
theme-
and
I
happen
to
just
select
one
where
it's
already
blue
and
it
matches
the
exact,
but
it's
really
simple-
to
wire
up
on
the
powerapps
side
of
things
as
well.
A
A
A
B
Thank
you.
Let
me
share
my
code.
Okay.
So
if
you
look
at
the
out
of
the
box
web
part,
really
this
is
the
out
of
the
box
web
part.
If
you
look
at
the
code
that
it
produces,
it
just
produces
an
iframe
that
has
a
whole
bunch
of
parameters
and
a
whole
bunch
of
things.
So
the
first
thing
that
I
did
and
I'm
sorry
this
this
code
is
actually
embarrassingly
simple.
B
So
the
first
thing
that
I
did
in
my
web
park
itself
is,
I
actually
imported
the
dynamic
property
from
the
component
base
so
that
I
can
make
dynamic
properties
and
I'm
sorry.
I
have
a
hard
time
saying
that
word
in
english
property,
then
what
I
did
is
I
imported
some
dynamic
property
pane
a
field
set,
so
I
can
actually
show
those
dynamic
properties
in
the
property
pane.
B
I
also
use
a
new
control
that
I've
created
for
the
pmp
property,
reusable
property
controls,
which
is
an
html
control
that
allows
you
to
embed
html
in
the
property
pane.
Just
make
it
easy
for
you
to
do
that,
then.
What
I
do
is
I
define
a
dynamic
property
of
type
string,
which
is
going
to
be
the
value
that
we
want
to
pass
as
a
dynamic
property.
I
also
keep
track
of
the
name
of
that
thing.
B
B
B
And
then
all
I
really
do
is
I
get
the
value
of
the
dynamic
property
if
it's
available.
Otherwise
I
just
say
it's
not
defined
while
I'm
there,
I'm
also
grabbing
the
locale,
so
the
current
language
configuration
of
the
of
the
current
context
so
that
we
can
pass
that
information
to
the
the
power
apps
as
well,
and
then
I
grab
the
client
with
the
web.
Part
is
actually
very
well
aware
of
its
own
width
and
trying
to
get
the
components
inside
the
web.
B
Part
to
be
aware
of
their
width
doesn't
always
work
so
well,
but
if
you
let
the
web
part
notify
its
its
children
elements
that
it's
been
resized.
It's
a
lot
easier
to
do
this.
So
that's
what
I
do
here
and
then
really.
This
is
probably
cheesy
code,
but
I
just
calculate
the
aspect.
Ratio
based
on
the
selection
that's
been
made
and
that
allows
me
to
calculate
the
height
of
the
web
part
based
on
the
width
of
the
web
part,
and
I
pass
all
this
information
to
the
component
and
then
in
the
property
pane
itself.
A
B
I
use
the
property
pane
toggle
here
to
actually
do
some
some
interesting
stuff.
The
property
paint
toggle
is
the
one
that
allows
you
to
say.
Yes,
it's
on
or
no
it's
off,
and
that's
where
I
say:
do
you
want
dynamic
properties
and
then
what
I
do
here
and
again.
This
is
another
thing
that
I
don't
think
a
lot
of
people
are
aware
of.
B
I
grab
the
property,
the
dynamic
property
value
and
the
name,
and
then
what
I
do
here
is
I
iterate,
through
all
the
theme
values
that
have
been
selected
by
the
user
and
I
pass
those
values.
I
just
concatenate,
basically
a
really
ugly
url,
where
I
pass
in
the
query
string.
I
pass
all
the
theme
values
that
I
want
to.
I
want
to
send
to
our
apps
and
then
I
build
a
really
really
ugly
frame.
B
Url
again,
I
say
ugly,
it's
actually
not
that
far
off
from
the
original
url,
if
you,
if
you
paid
attention
earlier-
but
I
do
add
some
extra
values
here
and
then
I
really
all
I
do.
Is
I
import
the
same
iframe
or
just
render
the
same
iframe
with
the
extra
width
and
height
preset
and
the
frame
border?
Obviously
reset
it's
really
that
simple.
B
B
It's
on
the
spfx
webparts
repo,
so
you
can
look
at
the
code.
You
can
submit
prs,
but
that's
it
for
me.
Really
thank
you
april
for
demoing
this
and
april.
I
don't
think
you
mentioned.
You
have
an
awesome
video
on
youtube
that
walks
you
through
in
full
details
how
to
create
a
power
app
that
uses
this
webpart,
so
we
should
probably
put
the
link
in
the
chat
window.
Thank
you.
Everyone,
fantastic
demo.
I
really
appreciate
that.