Lennart Wörmer

Innovation and Technology Specialist. Aviation Enthusiast. Smart Garden Influencer.

Lennart Wörmer

Follow me on social media for innovations.

How To Building Really Responsive Microsoft PowerApps Titelbild

How-to: Building Really Responsive Power Apps

Building responsive Canvas Apps (Power Apps) is one of the tricky parts of Power Apps. However, there are a few new options available in order to create really responsive Power Apps. So let’s jump right in and check out the new features!

Tutorial to build responsive Canvas Apps

Building responsive Canvas Apps (Power Apps) is one of the tricky parts of Power Apps. However, there are a few new options available in order to create really responsive Power Apps. So let’s jump right in and check out the new features!

Create a new Canvas App

How To Building Really Responsive Microsoft PowerApps 1 Create Canvas App

Let’s start with creating a new Power App from the Power Apps Maker Portal: In this case, we choose a Canvas App, of course. Please choose the tablet layout to have more space to edit the Canvas App and to have all options available.

Turn off “Scale to fit”

How To Building Really Responsive Microsoft PowerApps 2 Activate Scale To Fit

Having created the Power App, 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 off 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.

Work with App.Height and App.Width

How To Building Really Responsive Microsoft PowerApps 3 App Width App Height

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 default screen size including the orientation and the aspect ratio can be changed in the previously visited app settings page.

I’ll add content within the next days about these specific additional settings:
+ breakpoints / screensize.medium
+ design.height / design.width
+ parent.height / parent.width

Work with Containers

I’ll add content within the next days.

Work with Screen Templates

I’ll add content within the next days.

Publish and test

How To Building Really Responsive Microsoft PowerApps 4 Start App

Keep in mind that there are a few things in Power Apps that only work if a Power App is saved and published. This also applies in the case of responsive apps. To do so, navigate to File → Save as and save the Power App by clicking the button Save. And you’re done. In order to see the effect, you have to navigate to your Power Apps and start it from outside the Canvas App Studio. You can do that by opening a new tab click Play on your Power App.

Having startet your Power App, 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.

Examples, Use Cases & Details

Okay, let’s start with something more exciting and place a button in the Power App 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 Power App
Item.WidthApp.Width * 0.5item has 50% of the width of the Power App
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 Power App in order to see the result.

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

How To Building Really Responsive Microsoft PowerApps 5 Create Responsive Button
Creating a responsive button

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

How To Building Really Responsive Microsoft PowerApps 6 Different Screen Sizes
Really Responsive Power Apps 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. Power Apps doesn’t keep your responsive settings for the item; it will go back to pixels and it will make that part of your Power App 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 Power App responsive.

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

Questions & Answers

How can I build responsive Canvas Apps?

Make sure to deactivate “Scale to fit” option in settings. Then, work with App.Width and App.Height as well as other variable formulas to specify positions of controls.

Are Canvas Apps responsive?

By default, no. But you can make them responsive with a few settings and dynamic properties (X, Y, Height, Width) for controls on screens.

Cloudways – Premium WordPress Hosting with Excellent Support

Cloudways is one of the top notch providers that specialize in WordPress hosting. You can choose between different hosting platforms at very fair prices. Extremely skillful support by WordPress specialists. Best in class performance with NGINX cache, SSD, latest PHP versions, dedicated Content Delivery Network (CDN) and more.

Comments

  • 7. August 2019
    reply

    Helge

    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

      • 11. October 2019
        reply

        Helge

        Dear Lennart,

        big apologies for my late response!

        Thank you so much for taking the time to share your thoughts as well on this topic. Since I had to pause my project now for two months already I’m now a bit away from the theory behind this topic. But at least I remember that my further testing was satisfactory enough for me to have the feeling that I have gained enough understanding of the way these parameters work and what output they generate. The only topic remaining in my project is a bug in PowerApps which Microsoft will hopefully address soon 🙂

        Thank you again and regards,
        Helge

        PS: I received your email notification . Unfortunately I got immediately after involved in an unexpected emergency case regarding a project which I support. It totally blocked in the past weeks from anything else.

Post a comment