►
From YouTube: Power Apps Web Part
Description
Hugo Bernier (@bernierh) and April Dunnam (@aprildunnam) walk through an enhanced SharePoint sample web part that shows how to embed a Power App that resizes, adapts to themes, and supports dynamic properties. It also resizes the app to fit the web part dimension. The sample demonstrates how to react to changing theme colors and section background colors and can pass theme colors to the embedded Power Apps application.
Power Apps web part https://aka.ms/AAa2fsf
Taken from the October Power Apps community call https://youtu.be/AxdFVpkAt5Q
Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog
A
A
Add
that
in
here
and
then
you
see,
the
two
settings
that
we
have
to
configure
are
obviously
the
link
to
the
powerapp.
So
I'm
going
to,
I
want
to
integrate
this
timesheet
application,
so
I'm
going
to
copy
that
url
and
I'm
going
to
paste
that
in
there
and
really
the
only
thing
other
than
that
that
we
can
configure
is
whether
or
not
to
show
a
border
and
you'll
notice
that
when
I
embed
this
in
with
that
web
part,
the
powerapp
is
really
small
and
I
have
no
control.
A
You
know,
even
though
that
this
is
optimized
for
the
tablet
you
know
in
the
desktop
it
takes
up
so
much
space
when
we're
using
it
in
the
powerapps
portal
itself,
but
when
we
use
it
here
in
embedded
sharepoint,
it's
just
not
really
optimized
right.
It's
just
pretty
small.
A
little
bit
hard
to
see
and
to
work
with,
so
that
was
one
of
the
first
things
that,
with
this
web
part,
you
go
helped
us
address.
A
So
if
we
go
and
add
his
new
enhanced,
powerapps
webpart,
you'll
kind
of
see
the
difference
right
off
the
bat
here,
so
we're
going
to
click,
add
an
app
it's
going
to
look
some
similar
and
I'm
going
to
add
in
that
same
link
to
the
the
app
and
you
see
when
we
do
that.
Now,
that's
actually
taking
up
the
the
width
of
the
column
that
we
have
here
within
the
sharepoint
page,
much
easier
and
more
user-friendly
to
work
with.
A
So
I
mean
this
alone
to
me:
is
a
big
improvement
just
seeing
visually
like
the
difference
between
this
small
one
and
this
nice
easy
to
use,
because
what
it's
doing
behind
the
scenes
is
it's
taking
the
scale
that
you
have
of
your
power
app.
So
if
I
go
edit
this
web
part
and
scroll
and
open
up
the
appearance
section,
we
see
that
we
can
control
and
customize
the
aspect
ratio.
So
we
can
either
dynamically
resize
it
based
off
of
that
aspect.
A
A
A
A
A
So
if
you
wanted
to
do
something
like
what
we
have
over
here,
have
a
sharepoint
list
of
tickets
and
then
be
able
to
click
on
one
and
have
it
show
that
relevant
ticket
in
your
power
app.
We
can't
do
that
today
with
the
out-of-the-box
web
part,
but
we
can
with
hugo's
enhanced
web
part,
so
I've
actually
implemented
this
here.
So
if
I
click
on
one
of
these
tickets,
you
have
a
powerapp
on
the
right,
and
you
see
it
takes
me
directly
to
that
item,
and
this
is
again.
A
What
really
gets
me
excited
about
this
web
part
and
it's
as
simple
to
configure
as
we
edit
this
page.
I've
obviously
added
his
web
part
on
here
and
what
I
did
to
make
this
functionality
happen.
Is
I've
expanded
out
the
dynamic
properties
and
when
you
click
the
option
here
on
yes
to
and
turn
that
on,
to
pass
dynamic
properties?
We
have
these
dropdowns,
where
we
can
select
the
content
that
we
want
to
pass
from.
So
it
knows,
and
it's
getting
the
context
of
every
web
part
that
I
have
on
the
sharepoint
page.
A
So
it's
going
to
ask
me:
okay,
do
you
want
to
pass
in
context
from
this
tickets
list?
So
I'm
going
to
select
that
and
then
you
can
define
what
what
are
you
wanting
to
pass?
So
you
wanted
to
pass
a
column
value,
for
example,
which
is
what
I
wanted,
because
I
want
to
pass
the
id
of
the
selected
item
into
my
powerapp.
A
So
I'm
going
to
select
that
column
containing
the
filter
value
and
then
it's
going
to
list
out
once
you
do
that,
all
the
columns
that
you
have
in
there
that
you're
able
to
pass
in
so
I
just
went
in
and
selected
the
id
column
and
then
finally
you'll
define
the
parameter
name.
So
this
is
what
powerapps
is
going
to
see
to
be
able
to
read
with
the
param
function
and
know
to
get
the
value.
So
I'm
just
going
to
put
that
as
id.
A
A
I
want
them
to
be
able
to
use
the
application
embedded
and
submit
and
browse
and
submit
a
new
item
that
way.
But
then,
if
they
click
on
the
item
pass
the
value.
So
that's
what
I'm
doing
here
is
use
the
browse
gallery
selected.
If
that's
blank,
but
if
it's
not
look
up
to
our
tickets
list
and
find
and
get
the
id
with
the
matching
value
from
our
parameter,
so
you
can
use
this
concept,
for
you
know
anything
that
you
can
imagine
here
where
you
want
to.
A
You
know,
pass
data
from
one
web
part
to
another
other
one.
So
one
of
the
things
you
know
going
back
to
teams
apps,
okay,
we're
able
to
inherit
the
theme
of
your
team
again
within
sharepoint.
We
don't
actually
have
that
right
now,
but
thanks
to
hugo's
enhanced
web
part,
we
can
now
pass
in
theming
elements
from
your
sharepoint
site
to
your
powerapp.
A
So
if
we
go
back
into
the
edit
mode
of
zab
and
expand
out
this
theme
property,
you
see
that
we're
able
to
with
this
drop
down
see
all
of
the
different
variants
of
your
sharepoint
theme.
So
if
I
wanted
to
use
any
one
of
these
like,
for
example,
I
have
body
text
selected
or
a
button
background.
I
just
select
those
from
the
option
here
and
now
I'm
able
to
pass
those
as
parameters
into
my
power
app
and
customize.
A
The
look
and
feel
so
all
you
have
to
do
is
keep
in
mind
of
which
one
you
want
to
set
the
color
for.
So
if
I
want
to
utilize
button
background,
I'm
just
going
to
type
that
in
as
my
parameter
value
to
look
for
in
the
powerapp-
and
it
is
case
sensitive,
so
make
sure
that
you're
aware
of
what
the
the
case
is
when
you're
doing
this,
it
even
shows
like
here
so
just
use
the
color
value
param
and
then
the
parameter
from
the
theme
property
that
you're
wanting
to
use.
A
A
So
this
is
the
the
great
thing
about
his
web
part
and
just
lots
of
possibilities,
and
it
really
makes
you
know
integrating
your
power
apps
within
sharepoint,
just
that
much
more
powerful,
and
with
that
I
think
I'm
going
to
turn
over
to
hugo
now,
just
to
talk
a
little
bit
more
of
well.
How
do
you
actually
get
his
web
part
installed?
So
you
can
start
using
it
and
go
over
a
little
bit
more
details.
There.
B
B
But
if
you
don't
have
what
you
need
to
actually
build
the
web
part,
we've
actually
created
the
pre-built
version
of
the
web
part
for
you.
We've
included
the
url
in
the
presentation,
but
if
you
go
to
this
github
repo,
which
which
is
the
sharepoint,
the
the
microsoft
sharepoint
web
parts,
samples
repository
and
you
go
to
the
enhanced
web
powerapps
web
part,
you
can
just
download
the
sppkg,
which
is
what
a
sharepoint
package
is
once
you've
downloaded
it.
B
C
B
B
Clicking
on
this
link
here
will
prompt
you
to
create
an
app
catalog,
but
if
you
have
an
app
catalog,
it'll
actually
just
take
you
there
and
when
you
get
to
the
error
at
catalog,
you
want
to
go
to
the
library
called
apps
for
sharepoint,
and
you
just
want
to
upload
the
file
that
we
just
downloaded
so
I'll.
Just
go
here.
B
The
first
thing,
you'll
notice
is
it
asks
for
your
permission
now.
This
web
part
requires
absolutely
no
permissions
whatsoever
because
it's
running
in
the
context
of
the
user,
but
it's
always
important
when
you
add
custom
web
parts
or
custom
solutions
that
you
pay
attention
here
to
what
it
says.
This
is
only
saying
it
will
go
to
your
sharepoint
online.
It's
not
asking
for
special
permissions
or
anything
like
that.
B
B
Click
on
add
an
app,
and
if
the
demo
gods
are
with
me,
we
should
now
have
the
react.
Enhanced
powerapps,
client-side
web
part.
I
know
the
name
is
not
very
fun.
It's
just
a
default
name
that
it
gives
when
you,
when
you
add
a
web
part
or
when
you
create
a
new
web
part.
So
here
it
will.
It
will
take
a
few
seconds
to
add
it
and
I
don't
think
the
page
refreshes
itself
automatically,
but
if
you
just
kind
of
refresh
this
a
few
times
eventually,
it
will
show
up.
B
But
thankfully
this
is
like
a
cooking
show.
I
had
prepared
things
in
advance
just
to
make
sure
so
once
the
web
part
has
been
added
to
your
site,
you
can
just
add
it
now
to
a
page
and
just
to
show
you
how
I
would
have
done
that
I
would
just
go
here.
I
would
just
insert
webpart
and
then,
if
you
look
at
enhanced,
there's
an
enhanced
web
part
here-
and
this
is
the
part
that
you've
already
seen
april
demonstrate.
B
But
some
of
the
things
that
I
wanted
to
show
you
that
are
also
available
here
and
april
did
a
great
job
but
demonstrated
the
concept
of
the
dynamic
properties.
But
there
are
a
lot
of
dynamic
properties
that
are
available
to
you
and
it's
worthwhile
exploring
that
we
have
a
few
more
minutes.
So
let
me
just
show
you
so
the
first
thing
here
is
when
you
select
yes,
I
want
to
pass
dynamic
properties
as
a
parameter.
B
But
if
you
click
on
page
environment,
which
is
the
environment
or
the
information
about
the
the
page
in
which
this
web
part
is
running,
it
actually
extracts
other
things,
including
things
like
the
site
properties,
which
would
be
things
like
the
url
of
the
site,
the
name
of
the
site,
the
classification,
the
title
description
and
so
on
and
so
forth,
which
you
can
use.
So
you
can
actually
have
different
flavors
of
the
same
powerapp
app
depending
on
where
it's
attached
from
the
current
user
information
is
also
available.
B
So
you
can
leverage
that
to
take
advantage
of
things
like
username,
email
or
login
name,
and
one
of
the
cool
ones,
is
the
query
string.
So
the
query
string
allows
you
to
whatever
url
will
be
called
when
you
display
the
page.
Whatever
comes
after
the
question
mark
here
will
be
available
as
a
query
string
parameter.
So
if
you
click
on
query
parameters
now
here
you
see
by
default,
the
the
page
just
says
mode
equals
edit.
So
the
only
property
that
should
be
available
here
is
mode.
B
But
if
I
change
the
mode
here
see
you'll
already
pass
the
edit
property.
So
if
you
wanted
to
add
more
things,
you
can
create
urls
here
and
add
more
parameters
in
here.
Again,
it's
a
great
way
to
do
this
and
then
the
search.
This
is
great.
If
you
actually
embed
a
search
web
part
into
the
page,
you
can
take
advantage
of
the
search
properties
to
actually
retrieve
the
information.
B
All
right,
so
just
one
last
thing
that
I
wanted
to
point
out
here
is
that
there
are
there's
always
this
one
parameter
that
we
pass
all
the
time,
which
is
the
locale
information,
so
you
can
actually
create
localized
versions
of
your
powerapp
apps.
So
if
you
want
to
have
a
different
power,
app
or
different
resources
that
load
based
on
whether
the
the
user
speaks
english
or
spanish
or
french,
you
can
absolutely
do
that.
That's
always
passed!
You
just
need
to
use
the
pram
locale,
that's
pretty
much
it,
but
wait
if
you
order
now.
C
B
Page
to
embed
it
in
a
teams
right,
so
this
is
the
same
page
and
there
you
go
so
I
use
the
same
page
here,
but
I
embedded
it
in
in
the
teams
environment.
So
the
great
thing
about
this
is
now
you
can
build
something
again,
a
master
detail
situation
that
is
using
the
context
of
the
page
but
embed
it
inside
of
a
teams.
I
could
remove
all
the
heading
and
all
the
stuff
and
make
it
really
look
like
it
belongs
inside
of
teams,
but
that's
pretty
much
it
for
me.
B
I
I'm
always
looking
for
suggestions
on
ways
to
improve.
As
I
was
telling
april,
I've
been
working
on
adding
the
ability
for
it
to
list
all
the
apps
that
you
have,
so
you
don't
have
to
copy
and
paste
the
url,
but
I'm
looking
for
more
suggestions.
So
if
there's
anything,
you've
always
wanted
the
out
of
box
web
part
to
do
just,
let
me
know-
and
yes,
if
you
order
now
in
the
next
30
seconds,
we'll
also
include
another
web
part
for
you.
Thank
you.
Everyone
for.
C
So
how
about
we
take
we
make
an
oakdale
power
app
and
we
put
our
charting
components
in
it,
and
then
we
stick
it
on
a
sharepoint
page
with
your
web
part,
and
then
we
pass
in
the
color
scheme
of
the
sharepoint
site
when
you
click
on
a
list
item
it
gives
you
a
chart
that
shows
the
details
for
that
list
item
and
the
chart
matches
the
color
scheme
of
the
sharepoint
site.
So
basically
we
learned
how
we
could
do
that
exact
thing
today
with,
like
writing.
Hardly
any
code
at
all.