Power Apps Responsive Design Containers & Screen Templates
HTML-код
- Опубликовано: 1 авг 2024
- In this video on Power Apps Responsive Design Containers & Screen Templates, we will walk through setting up your App for responsiveness with the new responsive horizontal and vertical containers. We will also leverage the responsive screen templates.
If you create a responsive screen, controls can respond to different devices or window sizes, making various experiences feel more natural.
0:00 - Introduction
0:42 - Responsive Containers Setup
1:28 - Add Responsive Containers
2:19 - Responsive Container properties
7:25 - Responsive Screen Templates or Layouts
9:41 - Build a Responsive Screen with Header, Footer, Gallery, and a connected form control.
Responsive Design Using formulas - • Power Apps Responsive ...
Microsoft Blog: docs.microsoft.com/en-us/powe...
#PowerApps #ResponsiveDesign #ResponsiveApps #Containers #HorizontalContainer #VerticalContainer
Hi Reza, Great Video! I literally spent several hours developing a responsive app as I had many containers and I had to calculate coordinates of every control within each container to make it wirk on different sizes of the screen as well as on tablets. For smartphones I decided to create a standalone app to save some time especially considering there was no preview of the responsive behavior. These new containers and the size window option will help saving a lot of time to design the layout. Thanks again
Thank you for such amazing feedback.
@@RezaDorrani I would like you to comment on something I have in mind. Why in the new type of screen there is a container acting as father for the other three containers while the main screen might work with a similar role? Is it because without this container it is not possible to use the property indicating the ratio of the screen for each child container? Thanks again for your great videos
I can't resist myself to say thank you in middle of watching your video. These containers features are going to be extremely helpful and time saving.
Thank you for your kind words Ashok. I agree that containers are useful.
Hey Reza... I've watched a few videos on these new features but yours is by far the best. You cover all the key properties and their combined effects. Keep doing what you do and thanks so much.
Thank you so much for your kind words.
Great walkthrough! I am so glad you demonstrated the ScreenSize property.
Thank you Christophe
Fabulous tutorial on these great new (to me) canvas app feature, Reza. Thank you!
Thank you for watching. I have been using them a lot recently in my Apps.
Very informative. As usual to the point. Well done Reza! Thank you!
Thank you Fady
Watched a couple of videos on this topic and while they were helpful I find yours explained it the best for me. Keep up the good work!
Awesome, thank you!
Thank you so much. Very helpful and clear explanation. Great start for those who are new to this concept.
Glad it was helpful!
Super good stuff Reza, Thank you for putting this together!
Most welcome and thanks for watching
Amazing as always! Thanks for sharing, my friend!
Thank you! Cheers!
My first steps in Power Apps! Great videos!!
Thank you for following and hope you take a million more steps
Late in the day, but many thanks Reza! - Another master class.
I now have a bit of rework to do on something I am currently working on, but based on some of the features you have showcased in this video, it will be well worth the extra effort!
Thanks Gerard. I am planning a responsive design video series. Here is the playlist where I would be adding those videos to - ruclips.net/p/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_
@@RezaDorrani Many thanks Reza.
Once again, the King of Power Apps has delivered an incredibly insightful and informative tutorial! 🚀 Your content never fails to amaze and educate. Thanks for making complex topics so accessible and enjoyable to learn. Keep up the fantastic work, and I can't wait for your next video!
👏😊
Happy to hear that! Thanks so much for watching and liking the videos
beautiful way to be responsive!
Thank you David
great video to show the responsive design in power apps
Glad you liked it! Thanks for watching Suresh.
Thank you.. this is really helpful video. The way you explain the code, is fabulous
You are most welcome
Great explanation Reza. Thanks for share
Thanks for watching
Great as always! Congrats!
Thank you! Cheers!
Very informative. Great Stuff. Thanks
Thank you
Hello Reza, Very clear explanation and another hit video.........
Thank you Nayana
Very good information! Thank you
Thanks for watching
Very helpful - thank you
Glad it was helpful!
very helpful, thanks!
Thank you for watching
Thanks so much for this tutorial, Reza!
Thank you for watching
@@RezaDorrani , never stop learning!
Got the containers now waiting a Ship to arrive.👍👍👍
Love this comment :)
The best video you have ever done. Well done and thank you.
Wow, thank you!
I have a more recent video on responsive design which you may like.
Check it out here ruclips.net/video/1o2L0DADzKQ/видео.html
@@RezaDorrani Thanks. Would you say it is best to start from a Tablet size canvas app when designing responsive apps, rather than mobile?
@@philglew-deval Yes.
Awesome, thanks 🙏
Thanks for watching
Amazing, thank you very much for sharing this, very helpful.
Thank you for watching Vidana
@@RezaDorrani i have tested this and came up with two issues. 1. I tested on two tenancy, one tenancy working according and responsive . But on the the other tenancy the app is not responsive. Checked all settings and everything are similar except one tenancy has E3 Nd the working one hase E5.
2. I hve added an image on the top section and when yhe app on preview mode i can see the img, but when i run it i cannot see the img on both tenancy.
Any idea/advice please. Thanks.
@@vidanaweer1662 These containers are currently in preview and has some known bugs that are being worked upon. I reported the issue where app does not play well in browser but works in preview mode. I will report the Image issue as well. Thanks for trying it out and letting me know.
You are a master piece 🔥🔥🔥
Content is the master.
Hi Reza, Your way of explaining with an example is very nice. Continue...(Y) Some of your other videos are in the Watchlist. I'll see after my practice is completed :-)
Thank You for the amazing feedback. Thanks for watching my videos.
Awesome! Thank you for sharing Reza.
Glad you enjoyed it! Thanks for watching Marlon.
Hello @@RezaDorrani , I encounter an issue , when I played the app it's not showing the full width of the gallery, but on preview there's no issue.
@@marlonjhonmonsanto5554 I did report this issue to the MSFT team. A fix is in the works.
@@RezaDorrani Thank you Reza. Really appreciate it!
I cannot thank you enough! 💕
You are so welcome!
Excellent one. Really enjoyed it and exploring more and more. Thanks again man for the wonderful video.
Glad you enjoyed it Karu.
Eagerly Waiting for the next one 👍
@@karukarthi2609 I am always looking for suggestion you know :)
@@RezaDorrani Please explain about sharepoint list items bulk update by using power automate. For an example, I have the sharepoint list exported excel file in one drive and connecting that file power automate then update the corresponding items in sharepoint list. List items count : more than 5k items.
What would be best approach to do?
Very nice. Thank you very much :)))
Most welcome!
Great Job Thanks Reza
Thank you for watching
RUclips should add a function called auto like so any video you add should be liked by me 😂😂 thanks for the great effects
🤩 Thank You
Awesome
Thanks
Great video ✌🏻
I will take that as Great Video :)
My bad, damn autocorrect 😅😂
@@SumitSahoo 😆
Thanks Reza
Most welcome Sundra
Thanks Reza, it is very helpful. I plan to use Text and Image instead of the Gallery in the Main horizontal containers. I would like to know if its possible to use the same functionality of flexible height and width option for Text Input and Add Image alternatives instead of galleries?
Gallery is for showcasing multiple records.
Text and Image are single controls.
You can add any control of your choice in containers depending upon your scenario.
Hi Reza,
It’s great to watch your video and gain some knowledge.
Have a question about the container .
Can we display control one over the other in horizontal or vertical container?
I believe for that you would have to place it out of the container.
Hi Reza, It is a great video and the responsiveness works as awesome. Could you please let me know how the new preview feature with window size and the canvas size options has to be enable, because I am unable to see that in my app.
Thanks.
Check my playlist on responsive design. I have covered that - ruclips.net/p/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_
Thanks a lot Reza Dorrani
Hi Reza Thank you for great video please let us know what would best way keep submit and exit button after a new form will it be in footer or main section container. Thank you.
Regards,
Deviprasad
I would add that in the main container.
MSFT also recently released a nice video on this. Do check it out - ruclips.net/video/Vul9jqpA0xE/видео.html
Hi Reza, very helpful explanation. One question. At 20:08 you apply the responsive height formula to the gallery and then the form. Could you have applied that formula to the mainsectioncontainer instead and then given the gallery parent.height?
Hi Ryan, you are absolutely correct. I could have applied it at that level which probably was a better choice :)
I always get so happy when someone identifies a better or an alternative approach. Thank you!
This video is 2 years old, your comment is 2 years old and today I was searching exact this solution after making an app responsive and come to trouble with the height of a container. You guys are amazing, many thanks to both of you.
Hi Reza, highly informative and practical to the point - 100/100. Thanks a lot
Thank you
Wow you are a life saver thank you. I dont know if it is just me but i dont see in the new screens all the available container templates. 😔
Oh i figure it out. Thats because im on mobile screen size. 😅
I was about to ask you to check it :)
Thank you for watching.
This is great - Microsoft doesn't seem to have updated their documentation yet. Do you know of anyone who's done a blog post with a text explanation I can reference?
I have not seen any written blogs yet. Documentation should be updated soon.
Meanwhile you have my video :)
Great video. A question: if I put some containers in a horizontal container with wrap on and the inline containers wrap in several rows, is there a way to set the height of the horizontal container to a height of (number of wrapped rows) x (height of inline containers)?
Thanks.
I have not explored that. My guess is yes.
Wrapping gets complex as it depends upon min height or min width of containers.
@@RezaDorrani as i am reading your answer it comes to my mind: I use the full wide of the screen for the horizontal container, the inline containers all has a height of 60 points and a width of 150 points so I just can divide the screen.width (or the width of the horizontal container) by 150 (round up) and multiply the result with 60.
Will try this tomorrow at work
Hey Reza, quick question.. I set the Align in container property to Stretch and achieved the same (splitting of screen into two halves) result without using the formula.. can you please confirm if my observation is correct?
Correct. Many minor updates have been pushed out since I recorded this. Some features were not working earlier.
I need to plan another version for this video may be :)
Another doubt, As said earlier I added side bar layout screen, when previewing this screen alone display in full screen and other screens are displaying normal, Also i have a pop menu option to select windows size or canvas size. I don't want to show this option to user and all my screen should have same appearance, what changes should i do for this
Hi Papitha, this would require screenshots and more understadning of the controls added to the screen. Post your question with screenshots and other details to the Power Apps community forum at - powerusers.microsoft.com/t5/Building-Power-Apps/bd-p/PowerAppsForum1
hi Reza, can we add container later once the app is built?
Yes.
First, thank you. I didn't know the containers, but I am thinking where I could use them hahahaha
Will its good to use like messages? Until now I created group but maybe the container s will be perfect
The responsive container controls are the way forward.
Thanks Reza. Wonderful Tutorial. I tried making the app. I got the error whole giving a colour coding to the galary upon item selection. The moment i start writing the formula, it turns the entire gallery black. Not sure why it happened. If you could help further, would be very helpful.
I will recommend posting your issue with screenshots on the forums at powerusers.microsoft.com
Great vid Reza - I'm not getting the ability to preview the app. I even tried it in a preview region, but everything just shrinks to fit. Any ideas?
Hi Rory,
1 - Make sure your environment refresh cadence is set to Frequent (env level setting)
2 - Change the version of your App to the latest (by going to Account settings in the Power App)
3 - Scale to Fit should be turned off under advanced settings of the Power App
4 - Containers preview feature needs to be turned on in advanced settings of Power App
@@RezaDorrani Actually it was operator error. I just needed to go to the settings, screen size and orientation and turn off scale to fit. It's in your vid👍
How to make round edges of gallary contents which are highlighted in grey?
Put gallery in container and use radius property of container
There are actually 3 container options. what exactly is containers? Is it something still under preview? thanks!
The container can hold a set of controls and has its own properties - docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/control-container
Container control does not have the responsive properites.
The new horizontal and vertical container controls do.
These are in preview.
Ok first, let me say that so far (I'm more than 1/2 way through), your video has made me the most successful (I have watched about 10 others' tutorials here on RUclips and am just frustrated) _ You actually gave me the true 'basics' by defining a container and showing a gallery, etc. HOWEVER, now I'm stuck again:
At 14:40 you map both a DataSource AND A GALLERY to the same Form Control - I am just not grasping this whole gallery thing. All I want is to make a simple data entry form for my users to populate the SharePoint table. A nice blank data entry form - no gallery of defined records required. I cannot find a single video to help me do that with all the semantics. I miss MS Access - it was so much easier!!!!
Here are my playlists which will help. Check my form control videos in the Power Apps Playlist.
Power Apps - ruclips.net/p/PLTyFh-qDKAiEIVlidnhELx5BusnzlDzkR
Responsive Design - ruclips.net/p/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_
Hi Reza, I tried a similar set up, but I found that the Form on the right side is not responsive. Some columns are hidden. They do not wrap as I decrease the scren width. What could be the reason?
Did you try the widthfit set to true for all data cards?
I would also recommend you post your issue/query with screenshots on the forums at powerusers.microsoft.com
Hi Reza, Great Video, I have a doubt,can we use this Layouts and Container features in Powerapps, why am I asking that to know is this features are in preview stage or else are general available. Please suggest me I want to develop apps for production, but am little bit concern about preview.Please suggest me on this. Looking for your reply.
Great question. Typically Preview features should not be used in production scenarios.
However, there are certain features like Containers that have been in preview for over a year. COVID has had an impact on a lot of the release timelines.
I don’t see any breaking changes that would affect responsive containers. There would only be more features added prior to GA.
I have worked with customers that have accepted the 1% risk of a potential breaking change of a feature prior to GA.
@@RezaDorrani , Thank you very much for your quick response. Could you please clarify me to use containers and Layouts before starting the app which layout we have to choose (Phone, Tablet). Your video is started with already an app is created and worked on screen. My app should work for all gadgets at lest Phone, Tablet .
@@jaganv8343 I prefer starting with Tablet.
@@RezaDorrani Thanks for your advice, please keep posted this kind new features on 365 platform. It will be helpful us.
Hello Reza. One things has been bugging me about the Containers lately. I am trying to figure out a way to change position of say an image arbitrarily within a container using relative positioning. i.e. parent.width + 10 or Parent.X+10 but none of these seem to have any impact on the image position within the container. Could you help? Thank you very much Reza.
I don't believe relative positioning works with responsive containers. You may have to use the standard container control.
Hi Reza, just wondering can we leverage Scrollable screen template to create an Intranet like page using PowerApps? If you can make a use case scenario considering that factor then it will be really helpful. Additionally if we can create an Intranet like experience similar to Valo or Unily or Powell like 3rd party companies then we can actually dissolve our dependency on such intranet.
I have not done any work with scrollable screen and responsive containers.
For Intranets we have SharePoint. Valo and others leverage SPFx & SharePoint OOTB components.
@@RezaDorrani yes Reza just wondering if similar kind of experience can be achieved using PowerApps? We mostly exposed SP pages for those requirements as of now. But just wondering if similar kind of Intranet can be done using PowerApps?
@@ArijitDas-fr8ss Probably but I have not explored it
@@RezaDorrani no problem Reza, just a thought I want to share with you. ☺️😊
I have added side bar auto layout a screen, Am not able to resize the containers.
this message is popping up ,resize the component using property pane
Thats correct. All settings are in properties of the containers.
I have an app that was built for a long time ago. But I cannot find this template layout
Screen templates are only on apps built with Tablet form factor
Hi Reza how we can move a controls to custom place within containers using container width, height ,X and Y properties and kindly make one long video about this topic reza thank you...
I make videos when I receive multiple requests on a topic. I have not received any requests so far for this scenario. I recommend checking on forums in case someone has done something similar powerusers.microsoft.com
@@RezaDorrani OK reza but this topic little bit confusing to new power apps maker.
@@madhanlakshmanan5113 I understand and that's why forums is the best place to get help from for a beginner.
@@RezaDorrani ok reza thank you🙌
Hi Reza! I need to create a flow that generates an email when a column in excel uploaded in sharepoint is updated for a specific value. Can you help me on this haha plsss :(
Wow. This surely is related to responsive design :)
Did you try asking your question on the community forum - powerusers.microsoft.com/t5/General-Power-Automate/bd-p/MPAForum
Can this container alp can be used for sharepoint lists??
You mean use SharePoint list connector in Power Apps and use containers? Then Yes.
@@RezaDorrani When we Customize sharepoint list forms in powerapps like New,Edit,View
@@santukondapally Ahh. I do no believe so. I tried with adding Power Apps to Power BI and it did not work.
🐻🐻🐻
👍
How to stop the form itself from left justifying?
I believe that's the default behavior of the form control.
You can turn off the snap to columns feature for the form control but then you would have to control a lot of the positioning of the data cards.
After following this - When I right click on the browser and select Inspect, I notice the screen does not look responsive, no matter which device I select from the dropdown at the top. It only shows a portion of the form.
I will have to look at your App in action to provide any guidance. My guess is you may have not turned off scale to fit on your App.
I would recommend you post your issue/query with screenshots on the forums at powerusers.microsoft.com
@@RezaDorraniI am trying to use the template used in the current app(header, footer and main container screen type), but it is showing spaces below and above the containers, also the footer is not visible after viewing it playmode from the app url. Could you suggest me how to remove spaces between containers and resolve the issue
@@Tejasvi-l8u Check gap property in container. Best to post your query with screenshots on forums powerusers.microsoft.com
@@RezaDorrani thank you. I was asking about the gaps of containers of the screen selected.
Could you tell me how to remove it
@@Tejasvi-l8u and my response was check Gap property on the container
At 11:00, when I run my app; there is no ability to resize my canvas within the Preview as you demonstrate to test responsiveness. WHY?
At 14:00, why do you "Insert Label" when you have already connected the Data Source --> should you not have to select the object? In MS Access, it would auto-populate all the labels/fields from the Data Source. This feels like a step-back not an enhanced feature!
At 19:40, when you introduce "need the height of the SCREEN" in order to set the height of the GALLERY; and it is not same property as previously set for height of the CONTAINER which is fixed at 200 (numerically I do not understand how the CONTAINER = 200 but the contents within the container are 575 and 500). Also, as I follow along with you, and do exactly what you say, I get an error on the formula here - even if I don't rename the Screen - I cannot mirror this part of your video forward. (My preview is not same either - i am unable to play with the size in Preview mode to see the responsiveness). Please advise!
For 11:00 to work, you need to ensure you have the App setting "scale to fit" turned off as shown in 01:10
For 14:00 - Gallery is connected to data source, but to showcase info in the App, I need to use label control. I selected a blank gallery layout.
Sir, do you not listen to how fast you speak! I have to rewind you 3 or 4 times to see what is happening on the screen because you don't say or speak slowly enough and the screen just changes! I am so frustrated right now because you are the first one covering topics I have been begging to learn and I'm on my 3rd day and still not creating a working form!!!!!
Hello, I do listen to feedback. My latest videos have me speaking slower. In RUclips there is an option to slow down the video speed, set it to 0.5 or 0.75.
I have a full playlist on responsive design. It covers a lot of use cases. Check here - ruclips.net/p/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_