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?

 

 

Level: Powered On

Are you using the US preview environment? You can check if you're using the last version of powerapps under versions tab of your app. Here you can see an example, the first one will update App.Width and App.Height values since is using the last version of powreapps, but the second one (using the production version of powerapps) it won't. You can find information about setting a preview environment here.

 

powerapps_version_preview.png

 

Please also check that your Google Pixel XL1 is set to auto rotate and not fixed to portrait/vertical mode. It happened to me once and I was thinking powerapps was not working properly on my device, but it was just me preventing it from rotate to landscape mode from the device itself.

 

You could also make similar tests using the developers tools (F12) and there the device toolbar (Ctrl+Shift+M) under chrome browser from a PC. Remember that it just works when you're running the app, not when previewing (or playing while you're editing). You could check from there to see if the problem it's just on your device or if went wrong on there could be the app itself.

 

You can use a text label with value App.Width or App.Height to check if the values gets updated when you turn or scale the window, if they're not changing I suspect you're not on the preview environment with last version of powerapps or your app layout or advanced settings are not set properly.

 

Regards,

Òscar Calaf

Level: Powered On

Hi Ocalaf,

 

Really sorry for the very late reply... i have put this off for a couple of months and picking it back up now.

 

My environment is of version 3.19061.14

Rotation is properly set on my device

 

So that should be ok, still it doesn't work, no matter how I turn it.

 

I have following components:

* screen: width and height set as in documentation:

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

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

* AddMediaWithImage: needs to cover complete screen, both the uploadedimage and addmediabutton use following properties

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

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

 

It is still displaying scrollbars, so it's still not using the real dimentions of the device.

 

Best regards,

logic app scrshot.png

Peter

 

 

Level: Powered On

And then just when you think it doesn't work...

 

I put some labels on the screen with the measurements like you suggested and it turns out that you can achieve responsiveness by simply putting width of a screen to app.width and screen height to app.height... there seems be no need (anymore?) for these complicated formula's like the ones in my previous reaction.

 

There is still quite a bit of extra work redimentioning button sizes and fonts for changes in Device Orientation. For those calculations you can sometimes use Parent.Orientation to decide on size or on App.Width<App.Height if Parent.Orientation is not available.

 

If somebody at microsoft reads this and can confirm (I would really appreciate an answer either way), please update your documentation accordingly!

 

Peter