cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
lfinman
Advocate I
Advocate I

Designing multiple 'screens' in responsive layout canvas app

I have a Canvas App that I originally designed using 'Phone Layout', as that was the primary target platform.

 

We now wish to use it both on the web & phone.  It appears my best (only?) option is to create a new Canvas App using 'Tablet Layout', copy/paste from the old app into the new Tablet Layout, updating to a responsive layout so the new app will work on both phone & web/tablet.  I have reviewed https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout and https://powerapps.microsoft.com/en-us/blog/new-properties-for-responsive-canvas-apps/  and have done some preliminary tests.

 

I am left with a basic design question - hoping to get feedback before I go too far down the wrong path.

 

In the Phone Layout app, I have one screen displaying a gallery, when an item is selected, a second screen is opened to edit the data.  There are several support screens but I am focused on these two for now.

 

For the Tablet Layout/responsive design, the gallery will display on the left, the edit form will display on the right, filled in with data when the user selects an item in the gallery.  When this app is run on the phone, I will need it to display just the gallery (sized appropriately) and open another 'screen' when an item is selected.  

 

I can use containers to place the edit form and additional controls on the right side when viewed on a tablet/web.  But what is the easiest way to display this contained group on a separate 'screen' when viewed on a phone?  Do I:

 

1) put everything on one screen, and when in tablet mode display the edit container on the right.  In phone mode hide the edit container until something is selected, at which time I hide the gallery and display the edit container where the gallery used to be.  This mimics transitioning to another screen.

 

2) create a second 'edit' screen that is only used when running on the phone (or any narrow portrait mode).  Because this is a separate screen I cannot use the same contained controls that are displayed on the right in tablet mode (as I am doing in option 1), so I will have to duplicate the controls.  Maybe it is possible to point all/majority of the control configuration back at the edit container on the first screen?

 

Is there a standard way to do this? 

 

These are the two screens in the current phone app:

phone screen 1phone screen 1          phone screen 2phone screen 2

 

Thanks,

Lyn

1 ACCEPTED SOLUTION

Accepted Solutions
Pstork1
Dual Super User
Dual Super User

I don't think using responsive design concepts you'll be able to use a single screen in the Tablet layout and 2 screens in the phone layout.  I've done a similar app using responsive design and the best solution I've been able to come up with is to have the 2 screens in the phone app extend down the screen with a scrollbar.  This is normally how its handled doing responsive design on a web page also.  So for the Tablet layout I show the containers side by side and the phone layout I set them to stack above and below each other. I think that is the best you can do short of having two different projects.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

View solution in original post

2 REPLIES 2
Pstork1
Dual Super User
Dual Super User

I don't think using responsive design concepts you'll be able to use a single screen in the Tablet layout and 2 screens in the phone layout.  I've done a similar app using responsive design and the best solution I've been able to come up with is to have the 2 screens in the phone app extend down the screen with a scrollbar.  This is normally how its handled doing responsive design on a web page also.  So for the Tablet layout I show the containers side by side and the phone layout I set them to stack above and below each other. I think that is the best you can do short of having two different projects.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

Thanks @Pstork1 .  My imagination was handicapped by the fact that I started with a phone app, I guess.  It's starting to make sense.  I appreciate the response.

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Community Call Conversations

Introducing the Community Calls Conversations

A great place where you can stay up to date with community calls and interact with the speakers.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Top Kudoed Authors
Users online (4,047)