web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Designing multiple 'sc...
Power Apps
Unanswered

Designing multiple 'screens' in responsive layout canvas app

(0) ShareShare
ReportReport
Posted on by 68

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

Categories:
I have the same question (0)
  • Verified answer
    Pstork1 Profile Picture
    68,697 Most Valuable Professional on at

    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.

  • LynF Profile Picture
    68 on at

    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 796 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 327 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard