This page has 0 threads | Add post

Blogs

Finding our blogs useful? Please consider helping us to share more!

Changes and new features for our Power Apps course Part two of a five-part series of blogs
Much has changed in the 2 years since we first launched our Power Apps course - this blog is intended to give previous course delegates a chance to catch up on anything you might have missed! Changes and new features on our Power Apps course Horizontal and Vertical Containers (this blog) Cascading dropdowns Charts Other new features in Power Apps

Changes and new features for our Power Apps course

Part two of a five-part series of blogs

Much has changed in the 2 years since we first launched our Power Apps course - this blog is intended to give previous course delegates a chance to catch up on anything you might have missed!

Changes and new features on our Power Apps course
Horizontal and Vertical Containers (this blog)
Cascading dropdowns
Charts
Other new features in Power Apps

Posted by Andy Brown on 20 June 2022

In this blog

About Responsive Design
Example of a Vertical Container
Example of a Horizontal Container

Horizontal and Vertical Containers

This is probably the new change with the potential to save you the most time!

About Responsive Design

Suppose that you want to create an app to show a list of films like this:

You want to be able to click on a film to show its details, or click on one of the buttons at the bottom to add a film, return to your main menu or exit your app.

Previously in Power Apps you would have to work out contorted properties to make sure that your vertical and horizontal layouts worked for all combinations of screens and orientations.

This topic is called "Responsive Design", and consumes vast amounts of manpower! It's the reason, for example, that this blog is readable - I hope - on a laptop, a tablet and a mobile phone.

Power Apps has now introduced vertical and horizontal containers:

The new menu options for adding vertical or horizontal containers to a screen.

Example of a Vertical Container

For our example above, you could create a vertical container to hold the title label, middle gallery and bottom set of buttons:

The bottom part of this vertical container will actually hold a horizontal container of buttons, as we'll see shortly.

Here's what you could set for the properties of this container:

For this example, we'll let the label and gallery stretch to fill any available space, but (as we'll see in a moment) the buttons section will have fixed height. There will be a 50 pixel gap between the parts of the vertical container, and a vertical scroll bar will appear if necessary.

Example of a Horizontal Container

Our horizontal container will show the buttons:

We want to make sure our buttons are equally spaced, but give the middle one double width.

The first thing to do is to set the height of this horizontal container:

The important properties of the container are shown boxed. It will occupy the entire width of the vertical container in which it sits, but its height will be fixed at 40 pixels to stop it growing to fill any available vertical space.

We could then set each button's properties to ensure that the buttons co-exist happily in their box:

Each button has flexible width (but has to be at least 160 pixels wide). The left-hand and right-hand buttons have fill portion of 1, but the middle one has a fill portion of 2 (implying that the middle one will take up 50% of any available horizontal space).

If you've done website design you'll recognise that horizontal and vertical containers allow you to create grid layouts. You can nest one container in another (as we've done for this example), saving yourself hours of responsive design workarounds and tweaks.

Parts of this blog
Changes and new features on our Power Apps course Horizontal and Vertical Containers (this blog) Cascading dropdowns Charts Other new features in Power Apps