Skip links

Power Apps - This function activates responsive apps!

PowerApps offers users the option of dynamically adapting apps to the respective device and screen size and thus building responsive apps.

In the following article, you can find out which settings you should use for this and how you can massively improve the display on mobile devices with 3 simple tips

Tablet or phone - which format is the right one?

modern powerapps format

The first step in creating a Power App is to select the format.

As a rule, there is nothing wrong with the "Tablet" format, as most Power Apps are used on desktop and/or tablet PCs. In this case, "Phone" is only suitable if the apps are mainly used on smartphones.

This setting can be changed at any time within the app.

Customise scaling - Why you should deactivate this option

In the settings of your Power Apps, you will find the "Adjust scaling" option under "Display". This controls how the app reacts to different screen sizes.

Screenshot 2024 01 12 at 15.04.34

The following are examples of the various settings:

Adjust scaling - ON

As can be seen here, the application is scaled accordingly for smaller screen sizes. What appears to make sense at first glance, however, results in elements and fonts becoming tiny and the application no longer being usable.

Adjust scaling - OFF

If scaling is switched off, the individual elements are no longer scaled, so they retain their size. In addition, so-called "breakpoints" are used, which ensure that certain content such as containers are no longer displayed next to each other, but one below the other. This also corresponds to the behaviour of typical responsive websites.

3 tips for better responsive power apps

The following tips show you how you can get the best out of your Mobile Power app in combination with deactivated scaling (adjust scaling: off).

Use templates

modern powerapps layout templates

When creating a new screen, there are 4 possible layouts to choose from. These are preconfigured containers that are already fully suitable for responsive use. A good starting point for your new Power App.

Activate "Wrap lines"

Screenshot 2024 01 12 at 17.20.18

This option can be activated within a container to enable responsive behaviour depending on the screen width. In combination with the "Minimum width" setting, content above a certain width can be displayed dynamically below instead of next to each other.

Use "Min width" correctly

powerapp min width

In combination with "Wrap lines", the minimum width controls the minimum width that an element must have within a container in order to be displayed next to each other. If the elements would become smaller than the minimum width when collapsed, they are wrapped instead and displayed one below the other in the full available width.

In the following example, a minimum width of 300 pixels is configured for both the orange and the blue container.
You can see that if this minimum width is not reached, the lines are wrapped so that the containers now appear one below the other.

Responsive apps - a conclusion

As you can see, Power Apps are in no way inferior to classic native apps or websites when it comes to display on mobile devices.

We hope this article helps you to create your next Power App.
Leave us a comment if you have any questions or requests for further blog posts.

Portrait of Jérémie Constant, co-founder of Novalutions.
"With Power Apps, I build extensive business applications in days, not weeks"
Contact us

Hi, I am Jérémie - Expert for PowerApps

With Power Apps can The company Business applications and -processes digitise and these Apps simple itself Manage and develop further. Gladly support we you with Workshops, Training courses or Development support with yours Digitisation project. The Initial consultation is with us free of charge, so hesitate not us to contact us!

info@novalutions.de

0221 - 42317679

Questions & Answers

Frequent Questions tostar 2Responsive Power Apps

Leave a comment

  1. What exactly happens when you deactivate scaling? Does it work similarly on all devices or are there differences?

    1. Hello Cihan. The "scaling" is basically a zoom function. Without "scaling", the app uses the additional space on large devices to display more elements.
      With scaling, a small app is simply displayed larger on desktop devices and does not utilise the additional space effectively and is therefore not responsive.