Power Apps: Dynamic Dimensions to the Next Level

Our newly developed learning series continues. Read on for tips from Yusuf on taking your Canvas App dimensions to a new level. As you dive in, be sure to leave your questions at the bottom in the comments section, or feel free to let us know what else you’d like to see.

Whether it be a Power App or a Power BI report, components or visuals that don’t line up perfectly can easily degrade the user’s trust in your process or data. I mean, come on, if the time couldn’t be taken to line up two graphs, who’s to say you took the time to double-check your data accuracy?!

For that reason, I have made it a habit in my own Canvas App development never to have a hard-coded X, Y, Width, or Height property. In the past, this was even more important when containers weren’t available (all hail containers!), but even with containers, systematically setting your dimensions can add a huge value.

As with many things, I have discovered patterns and common best practices. I have listed below the ones that I find myself using most frequently.

Stay at 0

Often times you’ll have to copy and paste components to different screens, and you don’t want the X and Y value to increment by 40.

Instead of 0, use Min(0).

Centering

Often you want to center horizontally and/or vertically. You can use the align feature, but that’s not smart enough when you then change the width or height!

Instead, set:

X = (Parent.Width - Self.Width) / 2

Y = (Parent.Height - Self.Height) / 2

This is a great trick, because it also works within containers!

Creating a Buffer

To bring continuity, set a global variable to act as your standard buffer between visuals. My go-to is Set(gblBuffer, 20). I also suggest turning off the non-blocking OnStart rule. This will ensure that all the visuals render without a freaky transition.

Cascading Visuals

As I mentioned above, I try to never hard code dimensions and a key to that is referencing other visuals dimensions. Just as the eye tracks, I set dimensions starting on the top, and then cascade down and to the right (F – pattern).

Therefore, if you have two Labels, Label_Title and Label_Subtitle that sit one above the other, set the second labels X and Y variable as follows:

X = Label_Title.X

Y = Label_Title.Y + Label_Title.Height + gblBuffer

See how I snuck in the gblBuffer! With that there's no guess work.

Stretch it to the Bottom

Sometimes you want a visual to stretch all the way to the bottom of the page. That’s easy with:

Height = Parent.Height - Self.Y

But, if you’re using a buffer:

Height = Parent.Height - Self.Y - gblBuffer

This works just the same with widths:

Width = Parent.Width - Self.X

Width = Parent.Width - Self.X - gblBuffer

Now what if you have a footer at the bottom of the page and you can’t stretch the visual all the way to the bottom (and you can’t use a vertical container)? No worries, you can reference the footer to adjust the height too!

Height = Label_Footer.Y - Self.Y

With these quick dimensional tricks, you’ll be surprised how quickly and neatly you can transform a Canvas App screen into a dynamic masterpiece!