WiseOwl Training - Established 1992 Wise Owl Training

Established May 1992
30 years in business
Wise Owl Training
30 years in business
See 519 reviews for our classroom and online training
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!

  1. Changes and new features on our Power Apps course
  2. Horizontal and Vertical Containers (this blog)
  3. Cascading dropdowns
  4. Charts
  5. Other new features in Power Apps

Posted by Andy Brown on 20 June 2022

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

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:

List of films

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:

Containers menu

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:

Vertical container example

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:

Vertical container properties

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:

Buttons in horizontal container

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:

Horizontal container properties

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:

Button properties

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.

This blog has 0 threads Add post