BLOGS BY TOPIC▼
BLOGS BY AUTHOR▼
BLOGS BY YEAR▼
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!
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:
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.