Building Reponsive PowerApps Canvas Apps

Introduction

What is a Responsive Interface Anyway?

Learn all about how to create responsive canvas apps in this post and video.

Learn all about how to create responsive canvas apps in this post and video.

A responsive interface is designed in such a way that a single interface can be used by viewing portals of different dimensions.

For example a responsive web page could be rendered on mobile phones, laptops, desktops and tablets with screens of different dimensions.

In this case, the term responsive reflects the idea that the interface “responds” or adjusts to create a an arrangement that is suitable for the dimensions or size of the viewing portal.

Here is a good read from the good folks at Smashing Magazine on responsive design: Click Here to Read More About Responsive Design

Responsive UIs in PowerApps Canvas Apps

This post is all about creating responsive interfaces in PowerApps. We will cover the following:

  • Setting up your PowerApps Canvas App for Responsive Design

  • Creating an anchor control as a reference point for other controls in your app

  • Assigning Dynamic X and Y coordinates to your App’s Controls

  • Other important tips

Rather watch a Video?

The content from this post is also available as video!

Step 1: Do you need a Responsive UI? Understand Your Requirements

How are your users going to be executing your application - will your users actually need a responsive interface?

We’ve worked on a number of applications where they are solely mobile applications i.e. people working on their phones in the field capturing data and syncing it back. We’ve also worked on applications where the users are only executing them on their desktops / laptops in an office environment.

If your app’s users are going to be only working on a single type of environment or similar environments, maybe you don’t need to use responsive design. Save your (or your team’s) time and effort for other projects.

Step 2: Plan your Design Up Front

General Layout Planning

If you’ve decided on a responsive design, think about and plan your design beforehand!

  • How many fields there are going to be in your app / screens

  • Can the fields be placed in logical sections as the user is filling out the form

  • How many columns do we need in the form

We are lucky here at Fidelity Factory - we have a professional designer on our team to help us with making our applications look good. The solution developer - who builds features in the PowerApps we create, have to execute on the well thought out designs created by our designer.

The more planning you can do up front in terms of how the form looks and functions, the less work / rework you’ll have to do later on.

Specific Layout Planning

Once you have a handle on how your form will be laid out, it’s a good idea to have a standard (for example) field width.

If we were building a layout where a standard form has 3 columns - we choose a standard control width which would allow 3 controls to fit across the width of the screen without issue. You would then set this standard control width as a variable in your application (either globally OR on the screen level via the OnVisible event for example).

All your controls will be set to this standard width. This approach makes it easier for you in the long run in case you need to change the value later on OR… if you need some smaller or larger fields, they can all derive / or be calculated from a standard value.

Step 3: Scrollable Screens in PowerApps for the Win

You might have 9 fields and associated labels which fit great in a three row and three column layout for larger dimensions. BUT if a user is looking at that same layout on a mobile display, you might want to shift all those controls into one column and your screen height will need to grow, you’ll need to make sure your interface can grow in height as well.

When adding a screen to your application, be sure to select the Scrollable Screen which has a Card object in the center of it. Cards can grow to a larger size than your actual screen height and are scrollable. This also gives you a handy dandy header bar placed at the top so you can keep important information visible to the user at all times if necessary.

Step 4: Apply the Necessary App Settings

One of the first things you need to do is setup your application to accept or be ready for responsiveness.

Microsoft does a great job of making things look good for you automatically, but if you want to control that, you have to turn those helping settings off.

  • Navigate to: File -> App Settings -> Screen Size / Orientation

    • Turn off Scale to fit (which automatically turns off Lock aspect ratio)

    • Turn off Lock Orientation.

If we are controlling the responsiveness / look of the app, we are responsible for making it look good no matter the dimensions of the viewing portal that the app is being rendered in.  i.e. landscape vs. portrait on their phone or on a desktop / tablet in the office.

Step 5: Start with an Anchor Control

Its always good to start with an anchor object / control. Here are a few important points about the anchor.

  • This control won’t move much or at all. (keep in mind, your anchor could be your form / app as well)

  • The other controls on the screen will then position themselves around or in relation to this one anchor object.

  • You can also have more than one anchor object on your form…for example, if you have a form with 2 columns, typically the top most control is the anchor control.

  • If the app size changes though, you can switch to a different control as your anchor.

Your form needs to be responsive to changes in size

i.e. if the controls or objects are going to start smashing into each other OR if they start moving too far apart. After your anchor control is place, the controls that follow in the layout will derive their X and / or Y properties based off the X and Y properties of the anchor control.

Building a Responsive UI

Here are a few steps you can follow to create a responsive UI.

Set a Standard Control Width

Start out by creating a variable to store the standard width in.

Use a standard control width. Set it into a variable for later reuse, reference or calculation.

Use a standard control width. Set it into a variable for later reuse, reference or calculation.

Begin Layout of Controls

Place a label on your form, this is your anchor control. Change the name of it to be lblTitle.

  • Set this control’s width to be the width you had defined previously in a variable.

    • varStandardWidth

  • For the Y property of lblTitle, set it to 40. We always want it to be 40 pixels from the top of our form regardless of size.

  • For the X property of lblTitle, set it to the formula below:

    If(App.Width > varStandardWidth*2,((App.Width/2) - varStandardWidth) / 2, (App.Width/2)-(varStandardWidth/2))

Add a textbox on the form. Change the name of it to be txtTitle and set the width to be the width you had defined previously in a variable.

  • The textbox’s Y property / vertical position, is going to be directly under the anchor control. Set this control’s Y property to:

    • lblTitle.Y + 40

  • For the X property of txtTitle, set it to the formula below:

    If(App.Width > varStandardWidth*2,((App.Width/2) - varStandardWidth) / 2, (App.Width/2)-(varStandardWidth/2))

Place a new label on your form to the right of your first label, this is going to be another anchor control but for a second column.

  • Change the name of it to be lblEmployeeName and set the width property to be varStandardWidth.

  • Because we now have two labels or controls side by side, we need to consider the screen width, if the screen gets too constricted, we’ll need to move the right most label to be under the controls already on the left and the ones on the left might need to shift as well. Enter this formula in the X property of your new lblEmployeeName:
    If(App.Width > varStandardWidth*2,((App.Width/2) - varStandardWidth) / 2 + (App.Width/2), (App.Width/2)-(varStandardWidth/2)) 

  • Basically this statement says:

  • If the app width is greater than two of my control widths place the control in the center of the right half of the screen. 

  • If its smaller than 2 of my controls side by side, place the control in the center of the available space. 

  • Going back to the formula for our anchor control X property and its accompanying txtTitle control, it basically says the same thing EXCEPT if the screen with is greater than 2 of the controls inline horizontally, it centers it in on the left side of the screen.

  • For the Y property of our lblEmployeeName, this is the formula we use:
    If(App.Width > varStandardWidth*2, 40, (txtTitle.Y + 40))

    • This statement says, if the app width is great than two of my control width’s then put this control at the top of the screen. If not, then put it directly under our txtTitle control.

  • Drop one last textbox on the form. Change the name of it to be txtEmployeeTitle and set the width to be the width you had defined previously in a variable.

  • The X property of txtEmployeeName will be exactly the same as the X Property for the lblEmployeeName, you can copy it across.

  • The Y property of the txtEmployeeName will mimic the txtTitle control except it will be under the lblEmployeeName 

You should now have 4 controls on your canvas and their X and Y values tell them where to be based on the screen width - rendering a layout that is either side by side (two column) or stacked under one another (single column). 

You should now be able to save / publish your app and test it in a browser.

Opportunity to Improve

You might be able to see some areas for improvement in what we’ve shown here.

Especially those long (ugly) formulas for the X properties. You could set these up as their own variables when the form loads…this will definitely reduce the amount of script / code you have to maintain.

One Last (Very Important) Thing

Once your form is complete, be careful. If you move the objects on the canvas with you mouse OR if you accidentally move the control when selecting it…it will overwrite your entered X / Y values. In this case Ctrl-Z (undo) is your friend. Remember to save often friends!

Reference: This article from Smashing Magazine was of help for us along the way! Click here to read the article

Conclusion

We hope you found this post to be useful! Good luck on creating responsive Canvas Apps and happy building.