Building reactive canvas apps for mobile AND table

[mikecollins]

Hi All, 

Pretty new to PowerApps so apologies if this has been asked before - I had a quick look and couldn't see anything.  I simply want to know if the following is possible before I waste too much time trying to work out how to do it (I've come from a native app development background where everything is possible).

I was to build a canvas app that will function correctly, visually on both mobile and table devices, both in landscape and portrait.  Most of my app's UI design is based around a simple list, which then drills through to a details page i.e. master-detail structure:

1. In portrait, on both mobile and table, I simply want the gallery to resize to occupy the full screen (currently I cant work out how to make the gallery row container anchor things like the > chevron button so when I move from table to mobile, the > is off the screen).

2. When in landscape, on mobile, I want to mirror the behaviour above i.e. resize to the screen size.

3. When in landscape, on tablet, I want to display the details panel / screen along side the gallery.

Any input, suggestions or direction would be greatly appreciated. If anyone has any useful resources that they want to point me at, that would also be greate.

Thanks in advance

[TuongDoan]

Use this template:

---------------------------

If the solution I provided assisted you in resolving this issue, kindly select "Accept as solution" This will help others in finding the solution more expediently 😄Also, a Thumbs up would be a great compliment!

[mikecollins]

Hi Tuong, 

Thanks for the feedback - I'll be honest, I hadn't even seen that there were multiple screen templates.  So, I created a quick test screen using the 'Sidebar' template.  However, when I preview things, using the 'Preview the app', it doesn't react to changes in the orientation

And the same is true when previewing on mobile.  Is this just a nuance of the 'Preview App' functionality?

The same thing happens when I deploy to different, physical devices.

Thanks in advance

[TuongDoan]

You're almost there! Please follow this instruction:

---------------------------

If the solution I provided assisted you in resolving this issue, kindly select "Accept as solution" This will help others in finding the solution more expediently 😄Also, a Thumbs up would be a great compliment!

[mikecollins]

Almost, but not quite 😀

So, by toggling off the "Scale to Fill" option, the screen is now not scaled down, but the 'wrapping' of containers isn't happening in any way, regardless of mobile / table /  orientation:

Any more thoughts?  By the way, thanks for your help and time so far...

[TuongDoan]

You don't have to resize the Browser windows. Just keep it maximized and open preview mode again.

Or you can publish the app, then, try to open the app (not preview it in editor), then resize the windows. The app will wrap accordingly.

---------------------------

If the solution I provided assisted you in resolving this issue, kindly select "Accept as solution" This will help others in finding the solution more expediently 😄Also, a Thumbs up would be a great compliment!

[mikecollins]

I didn't resize the browser window - it was full screen - I just snipped the display so I could post the images on here.  I get the same behaviour when I publish and view on my mobile device