cancel
Showing results for 
Search instead for 
Did you mean: 

Responsive Design

Hi,

 

I've been enjoying PowerApps a lot. I come with a background of custom applications, SharePoint customizations, as well as some InfoPath Forms. The general trend for years has been in responsive design. This means that you design your applications to work with variety of different devices, instead of targeting to a single device type. InfoPath has never has this, it has been awful at different devices. So with PowerApps I assumed that Responsive Design is the natural course, and I was wrong.

 

Althought PowerApps is build Mobile First (and Cloud First), it is not taking Responsive Design as its design principleas I assumed. I would like to build Apps that work on any device with ease, but with current PowerApps design I'm stick with X, Y, Width, Height attributes of all the controls on the application. As far as I know, there is nothing responsive in PowerApps, and I'm deeply worried how will this affect the usability of the applications.

 

The responsive design would be possible to achieve in PowerApps relatively easily. Instead of string X, Y, Width, Height attributes, you just drop your controls into HTML flow. As an example, look this: https://mva.microsoft.com/en-us/training-courses/building-responsive-ui-with-bootstrap-8378?l=BDfMAH...

 

Anyway, I do hope that PowerApps would add Responsive Design as alternative to current fixed designs availabe.

 

Cheers,

 

Olli

Status: Started

We are excited to announce that we have started work on introducing responsive capabilities. The first piece will introduce the ability to reference the app display width and height (when it is playing) which would allow advanced makers to write expressions to create relative control sizing to achieve responsiveness. However, that is only a first step. We are evaluating different layout methods and will continue to provide updates as we make progress. 

 

Thanks for all your input. Please continue commenting with any requirements or suggestions. This is an exciting journey that we are beginning! Smiley Happy 

Comments
Level: Powered On

@zarski I'm affraid you will need to make a full regular app if you need to test this new responsive design features right now Smiley Sad

Level: Powered On

Hi,

 

I have tried the new responsive design on

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout

 

On the bottom it says how to swap screensize when the device is rotated. This does not seem to work on my device (Google Pixel XL 1)

 

What I did is the following:

1. Took a powerapp that used to be locked to landscape view

2. Removed Scale to fit, Lock Aspect Ratio and Lock Orientation

3. I set the screen width & height formulas (see below)

 

When I launch the app holding my device in portrait mode, a horizontal scrollbar is displayed in spite of setting screen width and height properties to following formulas:

Width = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Height = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

 

I should not see a scrollbar, so this means that the width of the screen was not schrinked when changing orientation.

 

This is even the case when I launch the application holding my device in landscape mode and turn the device to portrait mode.

 

Anybody else has the same experience... is this a bug or am I missing something?