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

@Peter1234

https://docs.microsoft.com/en-us/business-applications-release-notes/october18/powerapps/planned-fea...

 

Towards the bottom of the Capabilities for app creators section

 

Create canvas apps with responsive layout

Public Preview

January 2019

PowerApps Staff
Status changed to: 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 

Level: Powered On

Hi Emmac,

 

That is wonderful news, does that also include an event when the orientation is changed of the device? If we can get this event together with the updated resolution of the screen, it would already be big step forward.

 

I hope you will also introduce a content grid that would allow 2 or more labels that are next to each other in one resolution to be moved underneith each other in another resolution, etc...

 

Very excited about this announcement!

 

Level: Powered On

 @emmac
Can you please tell me how I can get the app display with and heigt?
I have a screen named LayoutScreen. I added the expression LayoutScreen.Width to a Textbox.
When I start the app and changed the size of the window I expeced that the value should be changed. But nothing happend.

So what do I have to do, to get this running?

Level: Powered On

I think I found how to test responsive design. I leave here some instructions summarizing the setup. If you already have setup a test environment this is not needed, but if you want to test and doesn't know how, try this:

 

  1. You need to create a new environment (using the Preview US one), you can do it from here: PowerApps preview Admin center
  2. This will give you access to a proper Preview experience throught: PowerApps preview web portal
  3. Now you can create an app using this Preview environment, and that will grant you access to the last versions of PowerApps components
  4. With that done you only need to disable "auto adjust scale" and "lock orientation" from the display and orientation section of the configuration settings of your app, in order to let the app freely being resized or reoriented.
  5. Now (after you publish this app) you can start seeing how app.height and app.width values are dynamic and get updated when you resize your browser window.

Please note that as far as I tested this will not work under the create studio (just previewing using F5 under the web studio), but it will work only after you publish the app, playing properly as a user (opening the app).

 

Now it would be nice seeing how Powerapps starts getting more and more functions in order to help us programming proper responsive logic. Knowing just the actual width and height is a nice starting point but it would be nice to extend it in some ways like:

 

  • Detect device max resolution
  • Detect device orientation 
  • Etc.

 

If you find this solved your question it would be nice to get my first "marked as solution", so thanks in advance!

 

You can find more details about the preview program here:

PowerApps Blog announcing preview program

 

You can finde more details about the responsive release notes here:

https://docs.microsoft.com/en-us/business-applications-release-notes/powerplatform/released-versions...

 

Level: Powered On

Ok, this is a good step forward, but this doesn't seem to work with customized SharePoint list forms or am I wrong? I tried it but mys app's screen didn't react to browser size. Maybe it's because with SharePoint integration, options for "auto adjust size" or "lock orientation" are missing. So we still cannot create only one app for desktop and mobile use if we want to use SharePoint lists?

Level: Powered On

I have an app with several tables showing data from a Sharepoint List, if that is your setup you should be able to play around with for example the width of the table and set it to App.Width-10 and see how nicely fits your display giving 5 pixels of margin in both sides.

 

To make it work you will need to disable all checkboxes under the resolution and orientation settings (disable autoscaling and disable block orientation).

 

You maybe will need to start your app from zero (or maybe just importing components) using the Preview environment. If you try to package your app from the production environment and then import it in the preview one, it will keep the old versions of powerapps during importing. You can check the used powerapps version under your app details, in the versions tab. Maybe this is preventing you the change this options.

 

Level: Powered On

By the way the only important problem I found as far as I tested is dealing with the proper scale of the text and this kind of things.

 

A part from knowing the width and the height it would be very nice to have the possibility of knowking the display pixel density of the device using the app.

 

Just knowing the orientation and the resolution is not enough for determining the proper scale of things. We want also to know if we are on a 72dpi, 96dpi screen, and ideally the real size of the screen, don’t we?!

 

Should I open a new idea for “device properties: dpi, size, etc.” or this “Responsive Design” is meant to gather all related things with responsive design?

Level: Powered On

I think you have raised a good point, but either way I feel that it is all related to responsive design.

 

How can we develop a single app that can scale from a tablet to a 4k monitor. Or From a Phone to a tablet is something that I'm looking forward too.  I would like to use button that can arrange themselves either vertically or horizontally, depending on the screen realestate or device orientation.

 

So feel free to add your use cases to this thread and that way we can keep all the "responsive design" scenarios in one place. Smiley Happy

 

Cheers,

James.

Level: Powered On

Thanks @ocalaf-mediapro . If I create an app from PowerApps home and connect it to SharePoint data, everything works ok. But if I want to customize SharePoint forms with PowerApps https://docs.microsoft.com/fi-fi/powerapps/maker/canvas-apps/customize-list-form , then app.width and app.height are not working. There are also no advanced options in screen settings like in "normal" apps. Our users use SharePoint lists and forms mainly with a PC and the default screen layout is wide, but we should also have the ability to at least create new list items in a mobile view.