When you want to leave it up to the user what device they use, responsive designs in Power Apps becomes important.
Responsive design patterns
I will start this post by listing a number of standard design patterns that help make the elements on your screen adjust to the size available on the screen.
For websites responsive designs are important, but for apps it is all just the same. Sometimes the process of building responsive apps can feel like hiding an elephant behind a tree.
The following responsive design patterns are something that you will come across quite often:
- Hide/Show controls
- Move the positions of controls
- Resize controls
- Prioritize controls
- Replacement of controls
- Minimum size required
Prioritize controls
The first thing that we have to decide on is the priority of the controls. When we run out of space on smaller screens which elements on the screen can be removed?
When you follow a mobile design first principle the prioritization is of controls will be done already. And rather than removing elements you can now decide which pieces of ‘clutter’ can help your user improve their experience.
As an example I will use the Office 365 menu. Do you know what the icons below mean? As an experienced user the icons are likely good enough. For the inexperienced user a description of the icons is a nice to have.
The availability of the apps however was given a higher priority than the description of the app.
Or if we look at the top bar in SharePoint Online we can see that the options available change.
Search in this has been given the priority above the settings and the help.
Minimum size required
In the above example of the SharePoint top bar when we use small mobile device then the visibility of the elements will be reduced even more.
At some point you might just have to look at what the minimum screen resolution is that you want to support. In case of that top bar this isn’t too important as the content underneath the top bar will tell us what space we need to display something sensible.
The minimum size required isn’t something that is just related to the full screen, it can also be about parts of the screen. e.g. a navigation menu on the left hand side could display icons and descriptions when there is space and then reduce down to just icons. However a menu without descriptions and without icons is not a menu. We could now decide that the menu needs at least to be wide enough to hold the icons.
Size ranges
Sometimes we might be able to just resize the controls and calculate the size of each control, however you might find that the calculations change fundamentally within certain size ranges.
You could consider large, medium, small screens and then adjust your strategy depending on those 3 sizes.
Hide and Show Controls
As we saw earlier, one of the patterns will be to show or hide elements on the page depending on the screen size available.
When the screen size is smaller the less important parts on the screen can be hidden.
Move the positions of controls
It is important to understand that as screen sizes drop a scroll bar going down is often ok, but a horizontal scroll bar is a real pain. This means that we can extend virtual screens sizes by introducing scrolling down.
From a responsiveness perspective this means that we can move elements. So for example if we have a label and an input box on a form this could look las shown below:
But don’t underestimate the complexity of this. As we move labels it means that all controls on a form underneath may have to move as well.
Resize controls
One of the typical things that can be done within responsive designs is resizing of images, fonts and controls. Cutting or adding space between elements on the screen. We do however need to make sure that accessibility doesn’t get forgotten. For example, placing two small buttons next to each other without any space in between can cause problems on smaller devices.
Replacement of controls
The replacement of controls is actually a variation of the hide and show pattern. As shown below the menu icons are available within the menu and as the screen size shrinks the main content of the page takes over the space used by the menu.
Responsive Design patterns in Power Apps
Now that we looked at some of the challenges in general I want to look at some of these patterns within Power Apps.
To make any responsive app you will need to switch off the Scale to fit in the app settings.
To ensure that the above setting has been switched off in your app you could add a label with App.Width and a label with App. Height. You don’t want to leave this in your app of course, but having the current width and height displayed will help during the development of responsive apps.
Hide and Show controls
In Power Apps I created the following screen.
The main content displaying the weather on the right and then a menu on the left with icons and descriptive text.
The text will now need to be removed as the screen size drops behind a certain size. But before we can do that there is a lot more work to do.
I’ve added the Height and width and I’m going to decide when I want the descriptions to disappear. It makes sense for the descriptions to disappear when the app width falls below 1400.
If you though that you could simply hide the description labels. then you will be wrong. We need to do more. The content on the right should be moved to the left.
Instead of playing with the visibility, I’m going to set the width of my label control.
Now to make the Weather icon move to the left, I will set the X location of the icon to
lblDescription.X+lblDescription.Width
Resizing controls
So far our app hides the description nicely, but we get some unused white pace on the right hand side. It would be good if we could resize the weather icon to fit the screen.
To resize controls, we need to know a few things. How much space do we have a available and how much space would other controls need. In my example app I’m very much working from left to right. My menu needs a certain amount of space depending on the size of my app. And then the weather icon can take the rest of the space.
So in the Hide and Show section of this post we already set the X of the weather icon. We might as well make uese of this.
With the following code I can set the width of my icon to adjust itself
App.Width - Self.X - 20
With the above expression we will take the app’s width and take away the icon’s location and an additional 20 to ensure that there is a consistent bit of white space on the right. Do you remember the Self function to find a control’s properties?
So far we have build the app that looks like this
The above example is simple. Single controls that respond to each other and the size of the app. When you have more controls in your content things will become a little trickier. You might now have to group multiple controls into a component or you could group then in a container.
I will look at the more complicated scenarios on responsive designs and patterns in future posts.