How to create responsive Power Apps!

What is responsiveness?

The meaning of responsiveness, per vocabulary.com, is the ability to respond/react quickly to stimulation. In terms of apps, responsiveness means the ability of an app to quickly adapt to factors like user's size of the screen, orientation, and platform. Most native apps/website we use these days are responsive.

Are Power Apps responsive?

Model-driven apps are responsive by design. However, canvas apps are not. For best user experience, it is always, well almost always, better to have an app that is responsive. I say almost always because you might be fine having a non-responsive app if you know all your users will have the exact same device. This, however, is hardly ever the case. Because even when you create a desktop app, users will most likely have monitors of different sizes. It can be challenging to convert a non-responsive canvas app into a responsive one. Hence, it is always recommended to make an app responsive as you are building it.

How can you make Power Apps responsive?

A canvas app can be made responsive by two methods/approaches:

1. Traditional containers - These have been available for a long time, and are a way to group a set of controls together. They are different from "Groups" in that the controls inside a container can use the "Parent" reference to access any property of the container itself. An advantage of using this option is that these containers allow complete control over layering/positioning controls. The disadvantage (if Math is not your favorite subject) is that you will need to write expressions for X, Y, Width, and Height properties.
2. Layout containers - These are the "newer" of the two options. They are supposed to make making an app responsive easier. I say supposed to because this ease comes at an expense. The advantage of using these new containers is that you can get away without writing mathematical expressions. However, within a layout container, you can either arrange controls horizontally or vertically. So to get complete control, you will end up nesting layout containers, multiple times.

Traditional containers are my first preference and hence, I use them in every app that I build. However, every maker should try out both approaches and pick the one they like. I will be covering traditional containers in this blog series. If you want to learn more about layout containers, you can read this series by my friend and coworker Matthew Devaney (Twitter/LinkedIn).

Examples

Here is a preview of some of the examples I will be covering in this series:

1. A gallery with cards aligned in the center of the screen

   

2. A gallery with cards aligned to the left of the screen

   

3. Responsive popup

   

Related articles

1. Create a Pinterest like gallery!
2. Create checklists using galleries in Power Apps!
3. Calculate the height of a flexible height gallery!