Responsiveness – how to test in the studio!

What is responsiveness?

Responsiveness is the ability of an app to adapt to different screen or window sizes and/or orientation. In a responsive layout, controls respond in terms of size and position to different device/window sizes. This leads to a more natural user experience. To get started, turn off the "Scale to fit" setting. In turn, this automatically turns off "Lock aspect ratio". With these changes in place, the next step is  to set the positioning and sizing of all controls with expressions rather than absolute values. Watch this video by Reza Dorrani to get started with making controls responsive,.

What are containers?

To make the process of making an app responsive easier, we now have container controls. Containers allow you to create hierarchical layouts that in turn help with responsiveness. Group all controls with containers and then set the size and positioning of each container using an expression to achieve responsiveness. The advantage of using containers is that the controls within a container need to be anchored to only the container rather than to the entire screen. Please note that this is an experimental feature at the time of writing this post. To enable this, go to File->Settings->Advanced settings->Experimental features->Container control. I will cover containers in detail in another blog post.

Testing responsiveness

The old way

Traditionally, the only way I could test responsiveness was to save/publish the app and then play the published app. I would then resize the window to see how the controls behaved.

Demo

The new way

There's now a slightly better way. The biggest advantage is that you will not have to save and publish the app with every single change. The responsiveness can be tested from within the studio.

Setup

Let's say you have 3 containers in one of your app screens - one for the header, one for the left navigation (gallery), and another for viewing the details of the record selected in the left nav. And let's say its the details container's width that we want to adjust based on the width of the app/window.

Container properties

I did the following updates to these containers:

1. Set the header container's width to Parent.Width (so it can adapt based on screen/window width)
2. Use a fixed value for the header container's height to not allow it to get squished.
3. Use a fixed value for the left nav container's width to not allow it to get narrower.
4. Set the left nav container's height to Parent.Height - Self.Y
5. Use Parent.Width-Self.X as the details container's width
6. Set the details container's height to Parent.Height-Self.Y

Based on these settings, I expect my details container's width to be anywhere from 388 (Minimum screen width of 708 - 320) to 1046.

Updates to enable studio testing

Given this setup, follow the steps below to enable testing within the studio:

1. Add a slider control to the screen, not inside the container control you want to test responsiveness for
2. Set the Width (or Height) of that container (details container in this example) to Slider.Value
3. Set the Min and Max value of the slider based on what you expect the minimum and maximum values for the width of the container, in this case 388 and 1046.

Demo

Now from within the studio, either in the preview mode or by selecting Alt+dragging the slider, you can see how the controls respond to different screen/window widths.

Summary

To summarize, to test responsiveness within the studio, follow these steps:

1. Add a slider
2. Set its min and max values based on the min and max values of a container's width
3. Use the slider to control the container's width by setting it to Slider.Value

Recent Articles

1. Power Apps Buttons – know when to use AutoDisableOnSelect
2. Data tables – New vs Old
3. Changes to the Launch function