How to build Responsive Power Apps | Responsive Layouts, Tabs, Galleries & Forms
Vložit
- čas přidán 29. 07. 2024
- This video is a step-by-step beginner’s tutorial for creating Responsive Canvas Power Apps. The responsive layout containers & screen templates will let us build truly responsive Apps that works across Desktop, Mobile and Tablet experiences. A responsive Power App is one in which controls in the App can respond to different devices or screen sizes.
Video covers key Microsoft PowerApps responsive UI design principles & concepts:
✅ Horizontal & Vertical Responsive Containers
✅ Container Properties - Stretch, Fill, Flexible width, Flexible height, etc.
✅ Screen Layout Templates
✅ Responsive Dynamic Tabs
✅ Responsive Gallery
✅ Responsive Form Control
✅ Responsive Filter Container Controls
My Responsive Design Playlist: • Power Apps Responsive ...
Microsoft Blog Screen Size Property & Responsive PowerApps: powerapps.microsoft.com/en-us...
Power Apps Role Based Security - • Implementing Role Base...
Liked my gallery control designs, then check this video • Power Apps Gallery Des...
Table of Contents:
0:00 - Introduction
0:39 - Responsive Canvas Power App Walkthrough
4:40 - Build a Responsive Power App
6:21 - Build a Responsive PowerApps Header
13:02 - Build Responsive Dynamic Tabs in Power Apps
24:22 - Build Responsive Gallery Control
30:06 - Add HTML control and make it responsive inside containers
30:36 - Make controls responsive in Power Apps & filter gallery data
37:39 - Responsive Dynamic Tabs formula
38:29 - Build Responsive Form Control
40:12 - Make responsive Apps based on screen size property - change text or font size
40:42 - Subscribe to Reza Dorrani channel
#PowerApps #ResponsivePowerApps #ResponsiveDesign - Věda a technologie
⭐ Recommended: Download the Sample Power App demonstrated in the Video from github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip
There was an editing mistake in the video!
When I set multiple person picker in Sharepoint List column 'Assigned To', the App is throwing now errors. How are we going to compare with multiple person being picked? Please help.
@@JamesLee-by5bt I would have to try that out at my end to know what those errors are and how to fix. I will recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
@@RezaDorrani how to be you? You are my Idol!
Hi Reza, thank you for the sample. I have replayed it maybe more than 500 times but no luck. This is I think because of changing powerups versions. Your sample could solve the problem. Thank you
@@WaliSayed Video has a mistake as I mentioned. Try the sample.
Just right into the core. I like how you teach, the pace, no chit chat, everything just excellent. Great content Reza. Really appreciate it. Very useful for those who wants to learn PowerApps from zero to intermediate just in a few minutes i would say.
I appreciate the feedback. Thank You so much. Goal is always to be to the point & remove all fluff.
Reza is a great teacher. The pace is fast, but sufficient for the capabilities of this forum. The content is somewhat hard to follow as some settings are done behind the scenes during edits so you must take care to watch the parameters window to see what has been changed that is not obvious in the actual instruction. This video actually has one point of instruction that is contrary to what you see on the screen, but this is pointed out in the comments/answers and is easily corrected. The author also makes his app available as Git so you can check the type of objects that were used and use that code in your own work. Overall I am very impressed with this teaching method and will definitely be using Reza's very large library of videos for my own learning. THANKS! for helping me on my path!
Thank You so much for the feedback.
Best of luck with your learning.
Hey Reza, thank you for another brilliant video. You explain things in such a simple way. You're an essential resource for anyone wanting to learn about Power Apps. I love it that you don't waste any time with unnecessary chunter like many other presenters do. It's straight down to business and pitched just perfectly. Please keep the videos coming.
Thank you so much for the amazing feedback.
Sometimes I wonder if I get into the details too quickly in the video 😊.
I will keep trying my best to post quality content.
Just wanted to give you a heads up...
At 14:47 you instruct people to add a blank horizontal gallery but what actually gets created is a blank vertical gallery. I only recognized this after trying to add this part over and over multiple times thinking I was doing something wrong when my tabs didn't turn out like yours. When I went back and added a blank vertical gallery instead of a horizontal it worked though. Thank you so much for these videos though! They are super helpful!
That's true!
Pinned comment on video has link to download sample app.
Thank you Michael for commenting on this. I have repeated this part over and over thinking the same thing. I had to scroll through the comments to make sure I wasn't losing my mind. Overall excellent video Reza... Keep up the good work!
Same I was losing my mind
@@keiljuanaphillips9663
Reza you absolutely rocked the tutorial out of the park! Awesome instruction and explanation. You have a wonderful talent of helping so many people. Keep up the awesome work!
Thank You so much
@@RezaDorrani Question: You have quite a few videos that I need to sift through. Any suggestions for which video to watch next which would provide tips for organizing my data in the best possible format to align with the above video?
@@keiljuanaphillips9663 I have my videos categorized in playlists.
There needs to be a part 2 of this exact same video there were still so many filter columns rows that were left unanswered but then again cant thank you enough for your efforts .
Thank you for watching.
I will plan another video on responsive design in future. Will wait for more new features to come in.
Thank you Reza! Your videos always help with my projects. Best channel.
Reza, you are a great teacher. Yes, your designer skill are also masterful but you present in a clear concise manner that is enjoyable to follow. Even if I already know how to do something, I still watch because it is enjoyable and I get the reinforcement.
Thank You so much.
Your channel is among top resources to learn Power Platform. Thanks man!
Thank You Saeed
Exactly what i was looking for. Perfect in explanation and details. Planning to watch all videos related to Power Apps. THanks a bunch for all your efforts
You are most welcome!
@11:30 I love how to you often point to the resources, it does help in learning and finding more resources for better understanding. Thanks.
I make a conscious effort to do that and glad to know it is noticed. Thanks.
Muito bom!! Mesmo eu não sendo fluente em inglês consegui entender bem o conteúdo. Parabéns pela didática e obrigado por disponibilizar um conteúdo tão rico 😊
Most welcome and thanks so much for watching and liking the video
Great video Reza! This has to be hands down, the best video I've come across on responsive layout for Canvas Apps. In one video, you've answered many of the questions I had on the subject.
Awesome, thank you!
I have 6 power app tutorials in my playlist for learning/re-learning during coding. 5 are from you, you are amazing! More power!
That is awesome! Thank you so much.
I am beginning my journey to develop PowerApps, and this video was very helpful to get a better understanding of the possibilities.
Awesome! Thanks for watching.
Excellent stuff again Reza!
More than a great start for my overdue dive in containers. Much appreciated.
One Q: @14:45 a horizontal gallery is created while later the wrap count is used to build the tabs.
Possibly due to a video edit the change from horizontal to vertical is not part of the video?
Just my I guess based on the name change of the gallery @14:50...
Thanks Marc.
You are right on the gallery wrap issue.
I uploaded the sample app on github. So you can check the code once you import the sample App :)
github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip
@@RezaDorrani Yes I was having the same issue.
@@EllieCarter5225 Even after downloading the sample App?
Excellent video as per usual! In my efforts to follow along, I keep running into issues at 18:10. When I try to set the template size to parent.height, all my tabs crunch together, and the size of the gallery does not change to fit the size of the container. I'm not sure where I'm going wrong here.
Thanks Chris. There was an editing mistake in the video. Link to download sample App -
github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip. Check the tab gallery setup in it.
Same. Spent half a day trying to figure out what went wrong.
For anyone else who stumbles across this comment, TemplateSize is NOT “parent.height” as shown in the video. It’s supposed to be Parent.Width/CountRows(Self.AllItems)
And the gallery isn’t using the blank blank horizontal template. It’s using the “title and subtitle” template with a minimum height of 0.
Might as well upload a corrected video.
@@antoniobranderas Sorry for the troubles! I did share the App and made the link available as a Pinned Comment so that folks do not have to run into oissues.
Reza. You are earning a lot of respect from thousand of PowerApps Fan. Keep it up.
Thank You so much 🙏
Great tutorial - thank you so much for the detailed explanations behind each step. I've been struggling so much with getting my apps to be responsive, and this video has cleared up all my misunderstandings about container properties and app layout.
Glad it was helpful!
First I saw this I was like cool I like the tabs, something to add to my app. But then I realized that your Power Apps environment works way different then mine. Templatesize is set to Parent.Height(100) but remains the minimum Height of 287 of the container. Wrapcount doesn't use all the available space, it just staking up on eachother. Therefor leaving the TemplateSize and Wrap count as it is gives me the best (same) result (edit: a lie, not the best same result because the width is hardcoded, when going to a small screen it adds a scrollbar). As the blank horizontal gallary is in a vertical container I even do not have the option to choose the layout like you have. Small details but stands out for me. Your Power Apps is not the same as mine and reacts diffrently then mine. Weird and shouldn't be.
Same here
For the Tabs try with wrap count 1.
I also made the sample App available for download so you can check the logic in there
github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip
If your issue was the same as mine, my workaround was to set the TemplateSize tothe formula... App.Activescreen.Width/CountRows(yourGalleryCollection)
I left wrap as 1... it seems to work now.
Same problem here. Working in the Power Apps for Teams environment.
@@reileybergin5833 Download sample App from github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip
Dear Reza, For me it is crystal clear show for responsive power app. Thanks for contributing the valuable content.
You are most welcome.
Dude -- this is MEGA helpful. And you're a great presenter!
Thank You Steve
This is the best channel explaining PowerApps
Wow! Thank You
Thanks Reza! Your tutorials are just amazing!
My pleasure!
Thanks for this Reza. You're an excellent instructor!
Thanks Ted
Perfect. Needed this at this very time in history!!!! Thank you @Reza.
You are most welcome
Thank you very much, Reza
Again, a great video straight to the topic - Responsive Design. It helped as a fast review. I like this format very much.
Most welcome and thanks for watching
What a great video you have done! 😍👌🏼👏🏼👏🏼👏🏼 Thank you so much Reza
You are most welcome Hassan
Hi Reza,This is the best channel explaining PowerApps, i am a big fan of you and your amazing videos.👌🏼👏🏼👏🏼👏🏼
Thank you Ajay.
Your appreciation makes me want to work harder to keep providing valuable content.
Thanks again for all your videos Reza, appreciate all your efforts.
Didn't know TRANSPARENT was a value for the fill property of a button. Have always used RGBA(56, 96, 178, .01).
Both work. Transparent is just simple to use :)
This video has so much knowledge, thank you Reza
You are most welcome
You just reached perfection thank you so much for this
You're welcome 😊
Once again amazing stuff, Reza! So many valuable information.
Glad it was helpful!
This is an entire new level for Responsive app. My app is a small baby compared to this! You are super MVP!
Wow, thanks! All Apps are small when you begin. Just keep adding to it. I started this video to just showcase responsive tabs & kept adding to it. Final result was a full responsive Power App.
@@RezaDorrani 😁 That’s what I am doing and I do really hope to reach similar results
Just on time! I am working on a similar implementation, this will help me a lot! Thks Reza!
Great!
So happy to have you here!
Thanks 😊
Thank you, Reza, for another enlightening Masterclass session. Your clear explanations make even the most complex concepts understandable. I am continuously learning from you and am committed to supporting you in any way I can. Keep up the fantastic work!
You're most welcome!
Your channel has helped me a lot to learn on Power Apps, thanks :)
Glad to hear that! Thank you for watching.
This is simply fantastic! Thanks a lot!
Thanks Bruno
Excellent Video, it captures everything that as a beginner I am thinking 'what if'. Thank you.
So glad to hear that. Thanks for the feedback and thanks for watching.
Reza, Reza, Reza, You did it again. Thank you!!!
Yes, Yes, Yes - Thank You 😊
Awesome! Flyout was just in time.
Welcome
Great content as usual. Thanks for taking the time to create these videos for people like myself. I do have a question. I created a responsive application using your approach as the foundation. When the first tab is selected, I show a series of cards (gallery) of items that the user can filter and select from. For instance, they can see and filter a list of locations. When the user selects a location, the goal is to move them over to another "tab", essentially simulating the click function on the tabcontainer control. While I am able to get the tab to display, I am not able to figure out the code that would fill in the template color to give the user the appearance that they are on the selected tab.
Any suggestions on how I change the templatefill color, if the user is not directly selecting/clicking that control??? It works fine when they select/click the control using the code (if thisitem.selected, blue, white), but not sure how to make it work when I am redirecting them to the "Tab".
Thank You for liking the video.
I will have to look at your App in action to know the exact cause of your issue & provide any guidance.
I have made the sample App available on my GitHub repo at github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip
I would also recommend you post your issue/query with screenshots on the forums at powerusers.microsoft.com
I love this channel. Thanks for what you do!
Thank you
thanks Reza, much much appreciate your efforts, really useful video, and should be one of basics responsive powerapps canvas.
Glad to hear that!
Incredibly helpful video. Thank you Reza.
Glad it was helpful!
Youre the man! best Power App youtuber!
Wow, thanks for the compliment!
Thank you Reza Sir for your power apps videos
You are most welcome
Brilliant!!! Love wtching your videos.
Thank you Rohan
What could I say ? ... your work is fantastic, so helpful, a damn good training for a beginner who aims for stars. Thank you. Merci infiniment
Thank You 🙏
Thank you so much for detailed explanation, this video is very useful for everyone to create responsive app.
Glad it was helpful!
This was increadible!! Thanks a lot ♥
Glad you liked it!
Amazing content as always Reza. Thank you so much
You’re most welcome
Thanks man! you are amazing! I always follow your channel and I have learned a lot. You should take courses with advanced features. I will be your student for sure.
Thank you Marcelo. I have plans for courses for next year.
Thank you @Reza for the great video! I created this tab as component and passed the tabs as collection to my component. I have one problem that I could not resolve . I do not know how to initialize the variable that show and hide the rectangle in the component so it be visible when screen opens for TabId = 1. Do you have any tips? You initiated this variable in the app start but I am not sure what to do for the tab component as it does not have APP on start
I will have to look at your App in action to provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
Hi Reze. I've question for example if i need to setup always Default start on the first Tab on header. Well,what can i do like this?
Set the variable to tab 1. The variable that defines which tab is selected. You can do so on Screen Visible function.
Your video very helpful for everyone who is staring learn Power Apps, and useful for me to learn how to create power apps taps
Glad to hear that. Thank You for watching.
Thanks Raza, you explain it in very simple way
Thanks for liking
Thanks again Reza for sharing!! I have one question/issue through - the section in the video from the18 minute to 19 minutes where you are setting up Gallery2 "TemplateSize" and "WrapCount" - I just followed the video and was trying to set these properties like you did but it was not working as expected for some reason. One difference that I noticed is that - in the video "Gallery Template Area" which gets highlighted when you click Gallery Edit Icon on Screen covers the full width of the gallery which is not happing in my case. Could you please help me with the same? For now, If I do not these two properties Tabs look OK but are not responsive.
Here is a link to download the sample App github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip.
Give that a try.
Awesome Video on Power App Tabs.Keep it up,Thanks
Most welcome
Another Great Video. I learned PowerApps a few years back from the 'Service Desk template' and made my first App, will get an upgrade soon based on your video.
You are a great teacher as well. Thank you (Thumbs up)
That is awesome! Thank you so much for the amazing feedback & keep learning.
Hi Reza, thanks for your great content.
I have a question around selecting a row on a gallery. I generally use a transparent button to fill the width & height of the gallery row. This provides a number of benefits:
- The cursor shows a hand for selection
- Set the buttons hover fill color - looks nice for users
Now my question is how can we do something similar for responsive galleries as setting the buttons flexible width property on fills a small area and turning this setting off and setting the width to span the entire row then pushes all the other controls underneath the button.
I know I can put an icon on the gallery row or make the button smaller but I was hoping to achieve the same functionality as non-responsive galleries. Any advice would be appreciated.
You can use the same transparent button logic.
Button width set to Parent.TemplateWidth and height as Parent.TemplateHeight
Amazing video as always. Thank you. I saw a transition on minutes 36:50 . You pass from regular gallery with arrow icon , to tiles. I really like the card/tiles that have the data on it . Please explain how you switch . Thank you again
Check pinned comment on video. It has link to download the Sample App demonstrated in the video.
Great tutorial Reza, you da man!
Thanks
Hi, your videos are so interesting that I could improving a lot my learning, thanks you for all.
You are most welcome.
I have been avoiding getting into containers due to the apparent complexity, however this video has convinced me to dive into them. Thanks Reza for another brilliant video.
Glad to hear that. Thanks for watching Tony.
Thank you Reza I learn and enjoy your videos 😃
Most welcome
Hi Reza, I agree, excellent videos! My question is, when setting the (varTabSelected) I do not have "ThisItem" as option. what am i doing wrong? Thanks in advance!
You must not be in the correct context of the gallery. ThisItem is a gallery property.
Check video again and see which control property is it being called in.
I would also recommend you post your issue/query with screenshots on the forums at powerusers.microsoft.com
Could this be applied to connect to several SP lists and document lists and dynamically filter them based on a common field in all of them? Say “Type” and your selection was “Escalation” on the first tab. Could all the corresponding tabs be filtered to only show where “escalation” was in the “type” column for several other lists that all have the “type” column? Similar to dynamic list filtering within SharePoint itself? Thanks!!!
Possible. You would need to apply that filter to tabs where those specific galleries exists. I do not have a video reference on this scenario though
This was very useful, Thank you!
Glad it was useful!
So much really great information in this Video, Thank you.
Most welcome. Thanks for watching Gary
Your vdo is really helpful much. Thank you. Keep looking for your new vdo.
You are most welcome
Any thoughts on stacking controls in a container? I have a sort icon covered by a transparent button with "ID" and other things to sort by. I cannot get the button to stack over the icon.
I have not tried this but you may have to write code for the X property of the control to position it relative to the other control.
Something interesting for me to try out.
I will recommend you check on the forums at powerusers.microsoft.com/
Hi Reza, Is there an option have only two columns in Forms for Screen Size>3 and only one column in Forms for Screen size
You can write formula to do that.
Check screen size and accordingly set the number of columns.
Great videos Reza. Quick question. I am building a very similar responsive gallery with tasks, but when I try to filter the tasks by the logged in user (which is compared to an 'Assigned To' column in my Sharepoint list which allows multiple people, I get a delegation warning. Is there a work around in a responsive power app. Your other videos demonstrate a hide rather than a filter feature, but I haven't found it usable with a responsive Power App. Any suggestions?
Thanks Jacob!
With SharePoint, multi select columns are not delegable. There is no perfect solution for it.
How would you push the picture label before the service desk label? Or does the positioning have to be correct when they are added to the container? For example if I had added 3 icons and I want the 3rd icon positioned before the others - to the left of the other two?
Yes, the positioning is important. You can right click on control and reorder in container.
Thanks Reza. This is really useful. However, when I use Preview App and resize the window towards phone size, it is "centering" the app, rather than yours which looks as though it is "left justified". Any ideas?
I will have to look at your App in action to provide any guidance.
I have provided the sample app for download at my GitHub repo at github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip
I would recommend you post your issue/query with screenshots on the forums at powerusers.microsoft.com
Good morning Reza, what’s the best way to auto send email to the Assigned To person? I have tried the list automate however it sends the link back to list and not the Power App. Thanks!
I have done videos on sending emails via apps and flows + video on deep linking to power app. Look into those videos.
Hey Reza, Amazing ocntent, as a low code profile I love how your explanations are easy to follow and super clear, thank you vey much for all your work. Would it be possible to use the same responsive logic applied to a custom sharepoint form instead of an APP?
Custom SharePoint list forms do not support responsive design.
Hi Reza, I have a request for a future video can you also help us demonstrate with a help of a single button when supposedly a ticket is created by a user then how can we create a flow which will send email to admins in a share point list along with the ticket details :) Thanks again for taking and time and doing an amazing job 👍
I have done videos on calling a flow from Power Apps where I have sent emails and reports. Same concept can be used to do so.
Will add it to my backlog but this is the first request on this topic. I will need a lot more requests on this topic to give this a higher priority.
Reza thank you so much for your video. I am not able to get the VarTabSelected function 16:22 of your video...
Here is the link to download the sample App github.com/rdorrani/PowerApps/blob/master/ResponsiveAppSample_20210728204723.zip
Thanks! you are the best
Thank You
This is so good. Demanding!!!
Thank You
Hey Reza, I was working on a canvas app with 5-6 screens which is targeted for mobile, tablets and laptops.
With just the container approach applied, the controls do become responsive. But what is the ideal way to apply responsiveness to all labels, buttons etc?
For example, a label at 30px on a laptop looks huge on a mobile, and maybe 15px would look better there.
Is there a one-stop solution for this where all controls can be formulated?
I wish there is a one stop shop solution. There is none.
That's the reason why I have built multiple videos on responsive design showing various options.
Check czcams.com/play/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_.html
Hey Reza is that possible that I can create a mortgage calculator in power pages because I can't find any way but right now I think I should create an canvas app and then link that to power pages
I have done no work with power pages. I will recommend posting your query on forums at powerusers.microsoft.com
I came across an issue when trying to move the datasource from SP to DV. The onstart won't play with collect(priority,choices(dataversetable.choicescolumn)). Sharepoint is fine to change data sources all over the place, but it doesn't love dataverse. The source is there and there are "choices" in the column in the table... Why would this be? Is there a specific dataverse type syntax compared to sharepoint?
I will have to look at your App in action to know the cause of your issue & provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com
OMG this is brilliant!!
Thank You!
Hello, thanks for the video! After clicking on the gallery after setting the TemplateSize to parent.height, the gallery shows that it's size is bigger than the Tabscontainer. Are there any other properties that needs to be changed?
I did this a long while ago. Do not remember running into any issues.
Thanks, Reza, for enlightening us on this RAD Tool.
Couple of Queries and Request, If you can address it:
1. Can we build dynamic Canvas app (Form) using meta data, like we will have the Control details stored in a data source and reading that we need to build the User interface.
Eg: We have Data stored in SharePoint List for an user form with following meta data
Field Caption Control Type Additional Remarks
Your Name Text Box -
DOB Date Picker/Field
Gender Option field / Drop down Applicable value:
Male , Female, Other.
2. Demo and usage of Child Flow forms.
1 - Dynamic forms is not something out of the box.
It will require building controls dynamically in a gallery. This would be complex and specific to a use case.
I have not run across this scenario. I will recommend you check on the forums at powerusers.microsoft.com/
2 - Child flows is in my backlog list.
Thanks for this awesome video!!
Most welcome
Hi Reza do you have a video of you doing that demo app the Power Apps Responsive Design?
My recent video on responsive design czcams.com/video/TWcQwocLsE4/video.htmlsi=OI9Gq-Z3rn9qNSqj has the same app which I have shared with channel members (silver and above)
thank you for share your amazing knowledge and skills.
Thanks for watching.
Wow Reza what a great video you have done thank you so much, i hope one day you can show us how to add left menu and popup same page
You are most welcome.
I do have 2 videos on left navigation.
czcams.com/video/dP74npyyvGc/video.html
czcams.com/video/3S0h2nODcxM/video.html
You are amazing, Reza.
Thank You Renato
Great video as always Reza.
Thanks Keith
Great video. Thank you Reza.
You are most welcome
Thank you so much for sharing this video more informative and highly recommended
Most welcome. Thank You for watching.
@Hi Reza thanks for educating us. I am using same example to create an app but Gallery Container is not working as shown. In this example when you are adding labels etc while editing gallery it is adding one where as in my case it is taking the total items from the collection by default. Also wrap property is not working as expected.
Download sample App. Link is in pinned comment of video.
First, thank you for your videos. I have been going through them and learning so much. I was thinking about something in regards to the responsive design aspects. is it possible to set up a landing page and depending on the size of the screen that it's being viewed on redirect it to a screen layout that is only for mobile devices? I have a landing page that I'm designing that is good for desktop but for mobile it doesn't need all the bells and whistles. So to offer a simplified version for mobile would be ideal.
Thank you for any insight that you can provide.
Ideally you should only have 1 landing page and depending upon the device user is accessing the app from, the screen resizes.
You can show and hide controls on screen based on dimensions as shown in the video.