►
From YouTube: Introduction to Power BI layout containers
Description
In this 5-minute citizen ceveloper-focused demo, Charles Sterling inserts multiple chart - Power BI tile controls into a row container. The arrangement of controls in the container is manipulated in the reference example’s left nav (columnar container) consisting of 4 toggling buttons - column/row, wrap/no wrap, allow/not allow horizontal and vertical overflow (scroll bars or not). See Daniel Christian’s demo on this same date on how to make static tile content refreshable inside a container. This PnP Community demo is taken from the Microsoft Power Apps community call - February 2021, recorded on February 17, 2021.
Demo Presenter: Charles Sterling (Microsoft) | @chass
Supporting documents:
• Blog post - New Layout containers in canvas apps make responsive apps easier | https://powerapps.microsoft.com/en-us/blog/new-layout-containers-in-canvas-apps-make-responsive-apps-easier/
• Documentation - Power BI tile control in Power Apps | https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/control-power-bi-tile
Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/M365DevYouTube
• Blogs https://aka.ms/M365DevBlog
A
In
my
saturday
post
I
went
out
and
said:
hey
here's
everything
that
we've
done
in
the
last
month
of
january
and
I
included
the
new
layout
containers
they
weren't
released
in
january.
They
were
released
in
november,
if
I
remember
correctly,
but
they
are
trans
transformational
in
the
way
that
you
actually
can
go
out
and
lay
out
and
create
your
applications.
A
Brian
who
I
mentioned
earlier
does
a
great
job
of
actually
having
lots
of
different
samples
where
he
actually
calculates
this
with
math.
So
you
have
to
figure
out
the
offset
from
the
upper
left
and
the
and
the
right.
You
have
to
go
out
and
do
your
padding
and
it
can
get
quite
quite
complicated.
So
what
most
people
end
up
doing
is
making
them
static?
I
know
I
fall
victim
to
that,
rather
than
actually
going
out
and
do
the
math
to
making
it
static.
So
let's
go
ahead
and
show.
A
What
am
I
talking
about?
First
of
all,
you'll
see
that
there
are
two
different
layouts
and
I'm
going
to
show
this
in
a
second
I'm
going
to
show
how
to
get
started
with
this,
but
there's
a
columnar
layout
and
there's
a
row
level,
and
this
is
actually
called
horizontal
in
the
ui.
But
this
is
the
actual
setting
underneath
the
covers
that
I'm
grabbing,
so
I'm
just
toggling
this
and
now
what
I
can
do
is,
let's
just
say
it's
such
a
row,
but
the
wrapping
and
again
I'm
gonna,
show
this
in
the
ui.
It's
a
default.
A
If
I
actually
set
the
wrap
to
true
you'll,
see
that
this
is
now
flowing
down
in
like
a
serpentine
automatically,
I'm
not
doing
anything.
All
I'm
doing
is
setting
one
property
to
true
we'll
look
at
the
code
in
a
second
and
now
this
you'll
actually
see
that
I
don't
have
a
scroll
bar
at
the
bottom,
and
that's
because
I
haven't
set
this
since
I
run
it
this.
This
variable
is
just
uninitialized,
so
it's
set
to
false.
Now
when
I
hit
this
actually
it
sees.
A
Maybe
I
got
my
horizontal
on
vertical
mixed
up
and
maybe
I
will
have
to
take
a
look
at
the
code
and
I
now
have
a
scroll
bar
because
that
I
actually
set
this
to
oh
there
you
go
now.
I
actually
have
the
correct
one
okay.
So
here
we
go.
I
I
was
gonna
say
that
doesn't
look
right,
that's
not
horizontal!
So
let's
go
ahead
and
set
this
up
so
the
vertical
since
it's
flowing
down.
When
I
set
this
to
auto,
I
can
actually
go
out
and
scroll
up
and
down
if
I
show
it
to
hidden.
A
I
can't
right
same
thing
here
now
when
I
actually
set
this
to
auto.
I
don't
get
a
scroll
bar
here
and
the
reason
I
don't
have
a
scroll
bar
here
is
because
it's
flowing
it
down.
If
I
actually
set
it
to
columner
and
actually
go
ahead
and
set
this
to
not
hidden,
you
can
actually
see.
I
now
have
a
scroll
bar
at
the
bottom,
so
those
are
the
big
four
properties
that
you're
going
to
want
to
learn
and
play
with
and
get
to
know.
How
do
you
create
this
or
how
do
you
get
started?
A
So
what
I've
done
is
I
actually
have
an
empty
one.
There's
no
containers
whatsoever
in
here
and
what
we're
going
to
do
is
go
to
the
plus
sign
and
under
layout
and
you'll
actually
see
that
I
have
this
horizontal
and
vertical.
It
doesn't
really
matter
which
one
you
choose,
because
what
you
can
do
is
you
can
toggle
it
to
the
other
one
by
going
out
and
and
setting
it
right
here
now,
let's
go
ahead
and
make
it
a
little
bit
bigger
and
what
I'm
going
to
do
is
because
there's
actually
a
couple
glitches
with
this.
A
I
don't
know
if
daniel
you
run
into
this,
but
what
we're
going
to
do
is
go
into
charts
and
we're
going
to
go
out
and
play
with
the
control
that
daniel's
going
to
play
with
for
a
little
while
and
he's
going
to
walk
into
the
the
workspaces
quite
a
bit
more
than
me
and
he's
going
to
go
into
these
properties
in
depth.
So
I'm
not
going
to
bother
doing
that.
I'm
just
going
to
set
it
so
that
way
we
have
something
to
look
at.
This
is
fine.
A
Okay,
and
I
want
to
resize
this.
So
it
actually,
it
looks
a
little
bit
smaller
and
what
I'm
going
to
do
is
I'm
going
to
cheat
a
little
bit
now.
This
control
is
outside
this
container,
all
right
they're,
not
inside
of
it.
So
what
I'm
going
to
do
is
I
am
going
to
put
it
inside
of
that
container.
I'm
going
to
do
that
by
going
into
the
the
layout
view
itself
and
I'm
going
to
go
out,
click
on
the
container
and
hit
plus
or
hit
control
v
now,
you'll
notice.
I
actually
can't
grab
this.
A
A
No,
it
won't
even
do
that,
so
I
actually
want
multiples
of
these.
What
I
have
to
do
is
I
have
to
go
into
this
layout
view
itself
and
paste
a
couple
of
these
and
you'll
notice
that,
since
we're
actually
in
a
low
row
layout,
it
actually
went
ahead
and
put
those
over
here.
If
I
go
out
and
change
that
to
let's
just
say
that
I've
turned
the
wrap
on
you
can
now
see,
it's
actually
put
it
back
in
serpentine,
and
this
is
that
button,
that's
in
the
middle
of
there.
A
A
There
we
go.
If
I
get
enough
of
these,
I
can
actually
go
ahead
and
set
those
overflows
on.
So
again,
this
started
with
the
layout
controls
and
if
you
want
to
interact
with
them,
you
will
want
to
actually
do
out,
go
out
and
take
a
look
at
the
layout
view
itself.
So
that
way
you
can
actually
grab
these
because
you
cannot
grab
them
inside
the
containers.