Power Apps: Make Your Canvas App Responsive

Make your Canvas Power App responsive to improve the user experience on multiple devices and increase the adoption and success rate of your app!

It’s a fair assumption to expect the apps we use on our phones and tablets every day to be responsive with the user interface automatically adapting to the device we use, the orientation we use it in, and the resolution of the display to provide the best user experience.

It would also be fair to assume that low-code solutions for developing business apps would be optimised to deliver responsive apps as a standard however, this is not the case with Power Apps and even the best apps will fail the user adoption challenge if a responsive interface hasn’t been considered as part of your app design process.

Of course, it is entirely possible that you know your app will only ever be used on a tablet device with a 16:9 ratio display in landscape orientation. In this scenario, you’re less likely to be concerned about accommodating smart phones or other mobile devices. If you know your app will be made available to end-users with both phone and tablet devices, then configuring your Canvas Power App to be responsive at the start will save you a lot of pain down the line!

Creating a new Canvas App

When you create a new, blank canvas app in Power Apps, you’ll notice the first thing you’re prompted to do is provide a “format” for your app with the two options being Tablet or Phone.

In the example below, we’ve selected Phone as the format for our app which has created a blank Canvas app displayed in portrait layout with a fixed display width and height.

Configure for Responsive Design

The first thing we need to do to lay the foundations for building a responsive app is disable the Scale to fit option for the app display.

Click Settings then Display under the Settings menu on the left then disable the Scale to fit option as shown below. Close the Settings dialog to return to the app design canvas.

With the app configured to support responsive design, the next step is to make sure your app screen(s) are configured to be responsive as well. Select the Height and Width properties of the screen and set the following formula to each:

Height

Max(App.Height, App.MinScreenHeight)

Height

Max(App.Width, App.MinScreenWidth)

Working with Containers

Containers are building blocks of all the responsive design. A container can be an auto-layout container in vertical or horizontal direction, or a fixed-layout container. Auto-layout containers can be used to automatically lay out the child components and determine their position so that you never have to set X, Y for a component inside the container. In addition, auto-layout containers can distribute the available space to its child components based on the settings, as well as determines both the vertical and horizontal alignment of the child components.

Containers will be covered in more depth in a separate post but for now, here are some tips for building your app’s UI with containers:

• Always create UI elements that form a UI table inside a container.

• Allows the container to have its own responsive properties and settings to specify how it is positioned or resized on different screen sizes.

• Allows you to change how its child components are laid out with respect to responsiveness.

Next Steps

With the basics for responsive design now configured for your canvas app, you can start testing and building your canvas app. Look out for a series of follow-up posts on this subject or contact us at illooma if you have any questions.