How-To: Building Really Responsive PowerApps

Building responsive Microsoft PowerApps has been a tricky thing. However, there are a few new options available in order to create really responsive PowerApps. So let’s jump right in and check out the new features!

Let’s start with creating a new PowerApp from the PowerApps Portal. In this case, we choose a Canvas-App, of course. I recommend choosing the tablet layout for playing around to have more space to edit the PowerApp. However, keep in mind the format we’re going to choose will be the minimum screen size for the app! Items will still scale probably on smaller screen sizes, but you may see scroll bars or you may be able to scroll „outside“ the app on mobile phones! So although we’re building a responsive app, a minimum screen size must be set. The screen orientation (landscape, portrait) will remain relevant as well. However, we can still change these settings later but I suggest to choose a proper size from start on.

Creating a Canvas-App

Having created the PowerApp, navigate to File → App settings → Screen size + orientation and then scroll down to Advanced Settings. Toggle the setting Scale to fit so it’s turned on if it hasn’t been so. That activated the ability to create responsive apps and access those required information. After that, don’t forget to apply your settings by pressing the button Apply in the bottom right corner.

Activating the Scale to fit option

Let’s see how it works with an easy to understand example: First, we can create a a standard label field and edit the text to the following value:

"Screen Size: " & App.Width & " (W) x " & App.Height & " (H)"

Those two parameters return the current width and height of the application which is (by default) 1366 pixels (width) and 768 pixels (height). The screen size including the orientation and the aspect ratio can be changed in the previously visited app settings page.

Using App.Width and App.Height in PowerApps

Keep in mind that there are a few things in PowerApps that only work if a PowerApp is saved and published. This also applies in the case of responsive apps. To do so, navigate to File → Save as and save the PowerApp by clicking the button Save. And you’re done.

In order to see the effect, you have to navigate to your PowerApps and start it from outside the building studio. You can do that by opening a new tab click Play on your PowerApp:

Starting PowerApps from Portal

Having startet your PowerApp, you can see that the label dynamically changes its width and height values based on your internet browser window size or the screen size on phones and tablets.

Okay, let’s start with something more exciting and place a button in the PowerApp and make it responsive. Having inserted an item (in our case the button), you have to consider four properties where to edit in order to achieve full responsivenes:, you have to set the Height and the Width property to its equivalents:

  • Height
  • Width
  • X (Position)
  • Y (Position)

Let’s take a look at them and how to apply those properties to the items:

PropertyValue (example)Result
Item.HeightApp.Height * 0.2item has 20% of the height of the PowerApp
Item.WidthApp.Width * 0.5item has 50% of the width of the PowerApp
Item.XApp.Width * 0.5 – Item.Width * 0.5item is centered horizontally
Item.YApp.Height * 0.5 – Item.Height * 0.5item is centered vertically

Always remember to save and publish your PowerApp in order to see the result.

Let’s have a look how this would look like in real life:

Creating a responsive button

And here are a few pictures of the PowerApp working probably in different sizes:

Really Responsive PowerApps in Action

Have a look at those scroll bars which appear if the window is smaller than the minimum screen size. As I mentioned at the beginning, a proper minimum screen size still has to be set.

Please keep in mind: Once you drag and drop an existing item on the canvas, it will automatically chance its position and therefore the X and Y parameters. PowerApps doesn’t keep your responsive settings for the item; it will go back to pixels and it will make that part of your PowerApp non-responsive anymore. Therefore, my best practice is to first create the desired layout and then use App.Width and App.Height properties to make the PowerApp responsive.

Additional information on how to continue your journey can be found here:

Show CommentsClose Comments

2 Comments

  • Helge
    Posted 7. August 2019 at 01:14 0Likes

    Thank you for providing this useful information, Lennart.

    I got confused with the question of whether the phone vs. tablet and landscape vs. portrait settings are really still relevant when I’m building a completely responsive canvas / app.

    At the moment I’m developing an app using tablet layout with 16:9 option and landscape setting. When I test this app on iPhone and Android I don’t see any scrollbars although the template width and height are larger than the iPhone and Android screens.

    Nevertheless I should possibly better use custom resolution settings for the tablet mode and set them to small numbers representing a small phone screen resolution to make sure that my responsive layout works on all screen sizes. Would you confirm from your understanding that with the new responsive layout options it has become irrelevant whether I use phone or tablet layout if I want to build a single app for all types of devices, ranging from mobile devices to desktop devices?

    Thank you,
    Helge

    • Lennart Wörmer
      Posted 7. August 2019 at 09:56 0Likes

      Hello Helge,

      thank you very much for your positive feedback.

      From my understanding and my experience as well as the current implementation in PowerApps, there are only two important things to remember regarding screen size and screen orientation when building a responsive app:

      • When you select the landscape mode, the app will open in landscape mode in the PowerApps app on your phone and tablet. It works vice versa with the portrait mode.
      • The screen size will be used as a minimum screen size. For example, if you choose an app screen size of 800 x 600 pixels and and your device had a screen size of 300 x 200 pixels, the items will scale probably and the app will look perfectly. And you won’t see any scroll bars. However, you’re able to scroll „outside“ the 300 x 200 pixels since the app has a 800 x 600 pixels. So the selected screen size has to be seen as a minimum screen size. However, the app will always scale perfectly when using the App.Width and App.Height properties.

      I hope you find this information helpful. In case you have any more questions, simply reply to my comment and I’ll try my best to provide you the information you need.

      Best greetings from Germany!

Schreibe einen Kommentar zu Helge Antworten abbrechen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.