Containers in responsive apps in Power Apps

When you develop responsive apps in containers become very important. In this post I’m trying to help with the common challenges.

Horizontal vs Vertical containers

A while back I wrote an introduction into responsive designs, in this post I will have a look at how to implement a responsive design.

Please note that this is not always going to be easy!

In general I would advise to create mock-ups of the app that you want to create. Quite often it is useful to create two sets of mock-ups for each screen that you want to develop.

For this post i’m going to look at any random website. I’m going to look at any random website and then rebuild that within Power Apps.

Before doing anything I’m going to divide the site into horizontal and vertical containers.

Horizontal and vertical copntainers can be added by using the following options:

If you happen to pick the wrong one, don’t worry. You can always change the direction in the properties of the container.

If you don’t worry about the height and width of each section on the screen then you will be able to recognize the structure of the original design.

Adding controls to containers

I will start with some easy parts. Adding a label control to the top container:

Then I can add another one and I’m going to use a gallery to display the social media icons at the top. This is where the troubles start.

The gallery can quite quickly show some images, but the height of the gallery is totally messing things up.

Where as you can drag the gallery to rthe right size when you don’t use containers, you will not be able to do that now.

First steps first. Make that gallery fit within its parent container. The minimum height of the container is set to 287. This needs to be reduced.

I’m going to set this top the height of the image control inside the gallery.

The gallery straight away reduces in height, however it is now reducing to the maximum height supplied by the container.

We can now set the parent container to not have a flexible height and then set the height of this container to for example 50.

Now the container sizes are starting to look like how we want them. But there is a better way.

By setting the height of a container to the height of the tallest control inside the container the container will adjust to the size of its content. So for example this could be done using the Max function as shown below.

Max(Label6.Height,Label6_2.Height,Gallery1.Height)

Nesting containers

You might have noticed that I already started to nest containers as my top level container stretches across the full page.

But i’m going to move down the page a bit to show some more nested containers. My containers 1_5 and 1_6 are nested inside Container 1_4, while container 1_4 is nested in Container 1_1.

The principles of sizing are still all the same as when you use normal controls like images and text, however you will find that resizing all the right parts may become confusing.

First of all, when creating responsive screens, I would strongly recommend to start at the top left and work your way down the page. Why?

Well, Power Apps will do a lot of calculation work on your page and it starts at the top. ( It could quite well be that it just works its way through the elements in the tree from the top down to the bottom). Every now and then you will find that as you develop your app, things are not completely 100% as you expect them to be.

Often when the screens look a bit messed up and you did all the right things in your app, saving the app and then reloading the app is a great way to reset a lot of the calculations.

Now when you work with nested containers, you should work the same way. Start at the left top and work your way through the container like it is a small screen.

Identifying your app mode

So far we have only looked at often using containers fro one design, but often the whole purpose of responsive apps is that there are multiple designs. We could do a lot of calculations of screen sizes in a lot of places, however we could also set a variable to the device type that we are currently using. So that we can identify easily if we are using a mobile device (small) or a desktop device (large).

We can make sue of the App.SizeBreakpoints, which will give the size of the screens where we want to identify different modes.

The following code can be added to an app startup ( if you only want to identify the device size when starting the app). In a similar way you could also find out if a device is running the app in landscape or portrait mode.

If(
    App.Width < Last(
        FirstN(
            App.SizeBreakpoints,
            Small
        )
    ).Value,
    Set(
        varAppMode,
        "Mobile"
    ),
    App.Width > Last(
        FirstN(
            App.SizeBreakpoints,
            Medium
        )
    ).Value,
    Set(
        varAppMode,
        "Small Desktop"
    ),
    Set(
        varAppMode,
        "Desktop"
    )
);

So now we can use simple code to set for example a font size.

If(varAppMode = "Mobile",10,20)

Changing direction

One of the typical differences between mobile views and desktop views is that elements on the page don’t appear next to each other but above each other. We could do that by setting the direction of a container like this:

If(varAppMode = “Mobile”,LayoutDirection.Vertical,LayoutDirection.Horizontal)

In a similar way we can also resize elements, or make then visible or invisible depending on the device that we are running the app on.

Some final thoughts

In this post I’ve described some of the basics of developing responsive apps. Good luck building your responsive apps.

If you need any help then please feel free to open the chat.