The Ultimate Guide to PowerApps Containers and Layouts | Beginner to Advanced

this is a responsive power app that can be viewed on a desktop tablet and mobile device and in this video series I will show you how to build yours this video is the first in my new series on power apps containers layouts and responsive design in the first video we will learn the basics of the container control in the second video we will then go through how to use the container control to create modern app layouts and the tips and tricks in using it to create modern uis in power apps in the third video we

will learn how to take new or existing PowerUp designs and make it responsive to fit whichever device is being used be it a desktop tablet or mobile device anyway with that being said let's get into the [Music] video if you've watched some of my previous videos you will know that I sometimes use containers container container container container container container container container okay maybe a little more than sometimes I'm even getting called out in the comments but all of this is because the container control makes p development a whole lot easier so before we get into

how to use the container control you first need to answer this one question why should I use containers Microsoft release power apps sometime in 2017 and for the next 3 to four years developers build what I will classify as first generation canvas apps these apps were generally simple apps mostly set up with a busy gallery form and some unnecessarily huge icons yeah I was also guilty of that anyway since there were very few controls on the screen there wasn't a practical need to group your app controls into sections as time went on developers not only

needed a simple way to build responsive apps but also static layout apps that contain more controls then Microsoft release the container control which will then bring the second generation of canvas apps the second generation canvas apps utilize the classic controls and containers to build modern looking apps with well defined sections and content groups whose size and position could be static partially responsive or fully responsive now on to the next question what is a powerups container the powerups container control is many things and can do many things but it's B basic function is to group controls

is as simple as that every other trick or tip to using containers is all based on the fact that they can group controls these child controls can be anything from a simple text label to a form to a gallery or even other containers since the container is also a control we can place containers inside of a container then Place containers inside that child container then Place containers inside that child container of the child containers then also Place containers inside that child container of the child container of the boy that escalated quickly anyway you get the

point containers can group controls including other containers and once they are grouped the position and size of all child items can be controlled using the parent container now we know what containers are the next step is to learn the types of containers and how to use them if you set container in the inide panel there are three three types to choose from we have container horizontal container and vertical container and though there are three options here containers are basically divided into two categories for those who have watched some of my previous videos you will have

heard me classify um the horizontal container and vertical container as responsive containers and then classify the container as a non-responsive container but apparently that is not the actual category name so let's check that out I've added one of each container type to this screen and I've also added a black fill with 30% opacity to each of them so using the yamu code Vil um let's check the actual names of this controls the horizontal container and the vertical container is classified as Auto layout containers and the container is classified as a manual layout container why am

I pointing this out this will help us understand the basic function of each container type so let's check it out but before that it has come to my attention that 82% of viewers are not subscribed to the channel come on now do come on man if you've learned something in this video or this series please like the video and subscribe to the channel to get notified when I release new content so let's get back to our video starting with the manual layout container I've added three labels as child items within the container and as the

name implies it is a manual layout container and this means that you have full control over the positions of all the child items for example you can move this label however you want move any of them however you want you can Tice them however you want there's basically no restriction to the position of items or child items inside the container and also you can select the container and move the container around you know with the child items and the child items move around with the parent container so that is the manual layout manual layout container

as name implies the layout of each of the cloud items can be set manually and you have full control for the auto layout containers I've also added three child items into each of them and the position of these child items can only be in One Direction so if it's the horizontal container by default the direction is also horizontal so he moves he adds the um child items from left to right so a a b c add them from left to right for the vertical container the default direction is vertical so it adds them from top

to bottom so a b and c so the reason why I said the vertical container and the horizontal container fall under the same categories because you can always switch between directions for each of them so it's basically just one control with the same settings however they have different default uh default values for the direction now since it is auto layout you can't move the child items in the same way we moving the um manual layout items if you try to move it it will always be in the same um direction that has been set aside

on the P container see you can't just move it however you want same thing for this one you can't also move it however you want it always has to be in the um based on the settings you've added for the parent container so now let's go to let me just move this now let's go to the actual um settings for each of the container so depending on whichever direction you've set it gives a primary access and a secondary access so if it's if the direction is vertical the primary access is vertical however the secondary axis

is then horizontal but for the horizontal if you select the the direction as horizontal the primary axis then becomes horizontal and secondary axis is now vertical so for the primary axis you can set the alignment to either make it be at the start at the middle at the end or space between so at the start is like this at the middle it moves it to the middle at the end takes it to the end and space between will have space between and it's the same thing for the vertical container it's just in a different Direction

since direction is horizontal so I've done start middle end and this is space between and then for the horizontal um sorry for the um what's it called now for the secondary axis in this case the secondary axis is the horizontal axis it also has similar alignment properties it has starts moving into the start it has um in the middle it has at the end and it has stretch which basically stretch it stretches it on the um hor Al axis sorry on yeah on the horizontal axis which is the secondary axis for the horizontal container the

secondary axis is the vertical axis so we can move it to the start the middle um the middle the end or stretched on the um vertical axis which is the what's it called now the secondary axis so that is alignment you can always play around with all of this dependent on depending on what kind of Vis you're trying to achieve with a container the next um um one is Gap and this one is for anything apart from space routin basically so if you set start or middle all items by default have no G between each

other but then if you set a particular Gap that gives it you know this Gap you can always reduce it increase it however you want the next setting I'll talk about is the padding and the padding is basically self-explanatory it gives in a padding around the container so if you sets let's say 40 at the top 40 at the bottom that gives it a padding all around it so you can also move put some padding on the left also it's basically works the same way padding Works um in labels for instance and the other one

so the size just basically determines you know whatever um actual size of the container that one is straightforward then color border border radius drop shadow all those ones are you can find them on other control and basically they work the same way I will just clear the padding again and then we can move forward horizontal and vertical overflow is used to determine what happens when the content of a container exceed the size of that container so there are two options hide and scroll to test this I've added a couple more labels into the Container so

when the selected option is hide the extra controls are hidden I however when the selected option is scroll the container automatically adds a scroll bar so we can see the hidden items this is very useful for cases where you need to add a higher number of controls to a screen and I use this technique in one of my previous videos where I wanted to add more filter options to my gallery without being constrained to the size of the screen and by adding a scroll bar I was able to add as many filters as needed to

that screen not bad not bad as for the WRA property this is used to position controls on the next line when the container is smaller than the content this setting is mostly used um when building responsive apps and as I've said earlier in this video we are just treating the basics of the container control however in part three of this series we will be covering respons design and then I will show you how this property Works in app development now we understand all of this the next part is to tackle the sizing of individual child

items so this is the part where a lot of people have issues but I'll try to break it down as much as possible so you can understand it easily we would use the horizontal container for this example starting with the secondary access you can set a static size to the child item when the Align inment is Start Center or end and when the alignment is stretched what you can set is a minimum size and in this case that will be the minimum height if I set the minimum height to 500 and I try to reduce

the height of the container you can see the label reducing in size to match the container but once it gets to a height of 500 it doesn't reduce any further this works the exact same way for the vertical container however the secondary axis is the horizontal axis so what you will be setting is the width of child items as you probably as you've probably noticed um positioning and sizing on the secondary axis doesn't have to be the same for all child items while you can set it as a while you can set it as a

group on the parent container you can also set it for the individual child item so you can set it for them one by one lastly as for the positioning and sizing on the primary AIS we only have two options we either set a static size or a flexible size in the case of the horizontal container you can set a static width or a flexible width static width is pretty self-explanatory you just need to make sure that flexible width is turned off and then you can set whatever static WID WID you want in the width property

as for flexible width what this does is to take whatever space is left after the static width child items have taken their own space and then divides this remaining space among the child items that have flexible width turned on for instance if I set the width of label a to 100 and I said B and C to flexible width you can see that label B and label C stretch to fill the remaining space inside of the container if I also turn on flexible width for label a since there are no child items with static width

the container just goes ahead to divide the available space between the three child items by default the container would always divide the available space equally among the child items with flexible WID but in most cases you would want custom sizes for each of your child items and that is where the FI portion property comes into play what this property does is to take the total flexible space available and divide it by the total number of field portions then assign it to the individual child items depending on their field portions for instance the total fuel portions

here is three with label a label B and label C having one field portion each what this means is that the total available space will be divided into three parts and one part is assigned to each child item with this logic you can do whatever sizing you want for instance if I want label a to take 50% of the width and then label B and C should take the remaining 25% each I would set the field portion of label a to two and then leave label B and C as one if I wanted label B

to take 60% of the width and then label a and label C to take 20% each I will set the few portion of label a to one set the FI portion of label B to three and set the fu portion of label C to one so it's basically like a game of maths and fractions so 50 ratio 25 ra 5 is the same thing as 2 ra 1 ra 1 20 ra 60 ra 20 is the same thing as 1 Rao 3 ratio 1 and if you have issues understanding fractions a simple trick is to

just apply the percentages as is so you can add 20 for label a 60 for label B and 20 for label C and you'll notice it is the same size as when we applied um 1 ra3 ra1 for the FI portions one thing to note is that for child items with flexible width there is a property called minimum width and as the name implies it is basically telling the system that though this child item size should be flexible based on the fuel portion ratio its size must not be smaller than this size that I've set

in the minimum wave to show how this works I've set the container width to 1,000 and I've changed the labels to show the width of each child item so I set it to self dowi the field portion ratio is 1 ra3 ra1 so the first and the last child item should always have the same size regardless of the parent container size but if I set the minimum width of the first child item to 400 let's see what happens item a that should have been 200 is now 400 I mean that one was pretty obvious we

just set it to have a minimum WID of 400 like 2 seconds ago however it gets interesting for the other two child items the size of B and C is 450 and 150 respectively and if you guess correctly what the system is doing is to take is to take item a a static width of 400 right and then divid the remaining space among the child item based on their field portion ratio in this case the remaining width is 600 and if we divide that based on a three ratio three um 3:1 ratio right we get

a um size of 450 to 150 so label B takes 450 label C takes 150 understanding how field portion work and minimum width and minimum height work in power development is very very important especially for those building um responsive apps and as I've said this video is just basics in part three of this series we will be covering responsive design in detail and I'll will show you how all of this I've just explained Works in app development so make sure you subscribe to know when that video is released all I've just explained is the same

for the vertical Auto layout container the only difference is that the layout is vertical and we deal with flexible height and minimum height instead of flexible width and minimum width I don't want to have to explain the whole thing again it's pretty much the same thing to be honest and yeah that is that as regards Auto layout containers however some of you are most likely wondering what about cases where we need to place items on top of each other for example if I want to add a background image for child item C the liel C

if I simply add in an image control it will add the image control as a child item in line with other child items which is not what we want we want the label C to have a background image that I just um added so in cases like this what you need to do is to utilize the manual layout container since the manual layout container gives you full control over size and um position of his items all you need to do is to first add in that manual layout container as a child item and then size

it however you want then add in whatever items you want placed on top of each other inside that container in our case I will first add in that image control and make sure the image um control FS the print container by setting X and Y to zero and then I'll set the width and the height to parent. width and parent. height respectively then I would add the label inside of that container also I'll make sure to fill in the make the label F the container also then I would size it as needed and style it

as needed and this way you can add items on top of each other nice that brings us to the end of the first video in this series and as I've said this first video was just handling the basics of the container control in the second video of this series we would go through how to implement these Basics we've just learned and use that to create more UI designs in power apps so make sure to subscribe and turn on post notifications to get notified when I release the next video anyway if you've enjoy this video or

at least learn something please hit the like button and follow me on LinkedIn thanks for watching and I'll catch you in the next one [Music] oh