Stop making useless Groups in Power Apps! Containers for the win

last week Daniel asked me hey is there any reason to use groups I was like what do you mean he's like well you know containers do everything that groups does but better and I was like that's interesting I hadn't thought about it but it turns out that Daniel was right so in today's show what we're going to do is we're going to build a pop-up first using powerapps groups and then we're going to turn around do the same thing in containers show you how that's better more functional has a lot more flexibility it's just generally a good idea but first here's our intro hi my name is Shane Young with powerapps911. those guys and today we're going to talk about groups versus containers in powerapps and so the idea here is that you know we've used groups forever right and I honestly I don't use them enough but groups are actually the same their logical construct they're not actually a control and so sometimes that causes some weirdness and some challenges and so recently what we've discovered is that by using containers instead of groups that you can get a better result easier to use and more flexible options but don't fret if you've already built everything using groups we're also going to talk about how to change a group over a container or if you don't like containers we'll talk about how to get rid of containers without losing all your work so we're going to kind of go through all the ins and outs that and we're going to do that by building a couple of different pop-ups because let's face it pop-ups are the number one place that most people encounter this even though we do use groups and containers in other places especially like we're building elements visual things we kind of want to stay together and move around so yeah all right that's enough for the blah blah blah let's switch over to my desktop and table it all right so just to show you what we're going to build real quick I made this lovely little picture of me and Buddy boo-boo and then here if we're gonna always say rate it we get a little pop-up you say how cute is buddy it's five stars of course and then we hit save and we get it all thanks for voting you're done it all goes away okay so this is what we're going to build so how would we build something like that right let's just pop in we do a new screen and let's do it kind of the way that we would classically have done it and so you know first off we would throw ourselves a image control on here drag it somewhere there and then we will just throw in a buddy Nicola picture all then we'll throw in a button and then we'll say hey put the button on the top we'll say hey if you press this button we want to update context and then we're just going to say VAR show pop-up I know very technical right we'll set that to true bingo bingo that'll make a variable all right so then you would say okay we want to uh first insert a rectangle here we'll drag this to kind of take the whole screen remember this we're going to build this the first time using kind of that groups methodology and so then we would take that we would say all right let's turn the fill here into 169 169 169 and then 0.75 just like so if you build a bunch of pop-ups before and you're like I know all this remember you can always use the chapters down below to jump ahead so then we'll also then insert ourselves another rectangle we'll kind of make this one a white let's do this to change its color to white and then we'll throw a label inside there and say hi buddy everybody's currently over there trying to find the right spot to sleep and then uh we'll just have a button to say hey we finished that thing right okay we're not worried about saving the data or any of that we're just trying to build out the functionality and so basically we'll just say um now once we've done that for the moment we'll call this done right so then what'd you do you'd say update context bar show pop-up back to false okay so there's a little pop-up now typically what we'd say is go over here to the left and find all the pieces so the two rectangles label on the button so we hold down the shift key and select all four of those we'd right click that and we'd say group okay and then you go up here and you click on the group and you say visible and say hey visible B when VAR show pop up so this is the first lesson we want to understand so groups are actually not a container they're not a control they're not an actual object that we can adjust they are a logical construct just some fancy way of saying this is one of those things that makes it easier in studio but it doesn't really have any advantages it doesn't have any pieces right like notice I can't I can select button seven I can't just select the group because there's nothing there to select also like when we went here's where the group hole selected we set the visible to VAR show pop-up what actually all I did was it went and cascaded if we look at every one of these controls they now say VAR show pop-up so by setting group it said hey all the controls that have these properties we're going to go ahead and set that so with the group selected you'll notice there's you know some things right they've all got on selects they've all got X's they all got y's widths you know so all the things they have in common it can set those for you but it's just really changing all those individually so if we want to add something else to the group we're like oh you know let's press group show up we want to add that star rating so we insert here or is that it's an input isn't it it's new menu I'm not sure I'm totally comfortable with it throw this in here so we add this look it's outside the group so then what you have to do is you have to select the group and that control and then you would say group them and they would go into a group a new group called group two so it would have lost your naming but what's really important to understand is if you check the visible property it's blank because they all don't have the same visible property if you look at rating two its visible property is true once again because groups don't right it's just a construct it's just a way to push settings around and kind of keep things together so we then manually have to remember to change this and I can tell you all the time I forgot to do that okay but then now they all have the same setting so another important thing to understand about these being logical construct is if you're doing or not if you're doing you should be doing accessibility you should be thinking about how does your app work on other devices right and for example screen readers screen readers do not honor groups because groups don't exist they're right they're ghost and so to that end a screen reader would not know to show all these things in order it would just be reading across one at a time instead of looking at the group as a whole so another negative for groups also with this remember in the last one what did I do I ended up having a uh that second pop-up right so when we clicked on rate it and then we said save we showed the second pop-up so in a group scenario what would happen there is I actually have to make two groups because groups cannot be nested inside of each other either right you probably this is like the beat on groups thing it is but groups also do not allow you to Nest so if you want to have two um groups then you'd have to have them independent so then you gotta once again manage all the settings independent because there really is a bunch of independent controls Loosely coupled together so we would not really want to do that now what if instead though we wanted to do this same thing as a container so let's just kind of let's do this let's duplicate the screen right try to think the fastest way to show you this and then let's just delete the group all right bye-bye group so let's just start over here again where we want to build this okay so what the first thing we want to do is we're going to actually go to insert and then under layouts there is going to be uh containers remember horizontal container vertical containers those are primarily used in responsive scenarios because you add control and it like lays them out it spaces them out in a very either you know horizontal or vertical way right makes sense so but the container container terrible name the container container doesn't do that like it's a blank workspace so the container container gosh I gotta quit say that um the way that it works is that you add things inside there and the top left corner of the container is the zero point so everything that you add in there is relative but you can control things so with horizontal and vertical right things go where they want to this container you can put things anywhere you want so to build our pop-up this time what are we going to do we're going to add this container okay we're going to take it and stretch it and then instead of throwing a rectangle in here I can just change the container's color to be you know our dim gray right so we'll just go up here to fill and then we'll do our rgba 169 169 169.75 how many times in my life have I typed that a bunch so right because look containers are a control they have their own properties that's one of the cool things about this so then now what do we do now inside my container now we can insert and so this is up to you we're going to stay on par with what we did before we're going to insert another rectangle but really what I wanted to do here I'll show you when we get done is I really wanted to put in a a container inside the container that would be the ideal thing you know what we're just going to do it delete that so then in my container I'm going to Nest a container right remember you can't do this with groups but so then I'm going to use this one as the white rectangle once again we can set its color boom but then now what do you want now we want to insert inside there the text label Joop and then right what was this this was hi buddy and then once we did that then we could also insert the button and put it down here now you might be thinking yourself Shane why don't you make this one a vertical container because you want this to stack vertical I love that idea this video is not about vertical containers but that's what I probably would really prefer you did here but what I want to show you is that look if you look at this button I want to look at its X property for a second so its axis 172. if we drag it to the left it is zero up here it's X and Y are both zero right you can see it over here on the right as well so remember that all of the pieces inside a container this is their zero point so when you're setting their properties of where they go you're using the the container um you know to kind of set those coordinates so kind of a good thing to keep in mind I know that confused one of my students two weeks ago so I want to point that out but look so now we got a container inside the container we've got the the button the label and then uh what else we have the uh we'll add the rating in just a second just to show you okay so that's what we did last time and so now to set the visible look if I go up here to container one I'm going to set visible to say VAR show pop-up now what's really important right let's make sure it works it does and so we'll make sure this button hides it right so we'll go to on select just so we can tag through things so if we go here we go to VAR show or no it's not that it's update context VAR show pop-up false Okay now what's super important to understand here though is that if we look at this buttons visible property what's it going to be it's going to be true why because we're not changing the visible property right changing the containers properties does not affect all the objects inside there but because all of this stuff is inside a container one if container one's not visible then nothing inside of it is visible hmm that's where you start to really kind of think all right I got some interesting things going on here right because now if we go to container two and insert our um our starter control again rating throw it in the right spot once again I did not need to go set its visible property I didn't have to go combine groups it's just in the right spot very cool and what if we want to do the whole um fun game where we're going to show two containers right so we want to have the thanks for saving right so we'll go back to this button and we'll say hey when you select this button we don't want you to set VAR pop-up we want to make a new one VAR show thanks I shouldn't give thanks right that would have been a nicer thing to say more positivity Shane get it together but if we do that so that's the variable we want to sit there what we're going to do now is we're going to insert another oh sorry we're going to go into container one we're going to insert another container and so then we're going to call this container thanks and so this one all right just to kind of keep what we did last time we're going to throw this in the middle it's back it's filled with blue and then we inserted a label and look we're just right in con things I love that this just kind of works I don't have to think right so I'll say thanks for saving oh what did I do cancel press the button I didn't mean to now the ideas things oh gosh stop suggestion yes please all right all because I Got Fingered one thing terrible all right and then um what do I need audience need about to make this go away so insert a button oh that blue and blue button does not look very nice but we'll just change its fill to be red there we go we'll say done and then on this one we're going to say update context varsh show pop-up to false and then what else VAR show thinks to false and so then now we would go to con thanks and we'd say hey you're visible is VAR show thanks so then now we press this that one shows up we press done they all go away nested containers yes right so if you have those complex scenarios we've got multiple pop-ups multiple things going on right I got the one parent container its whole job really was just to be the gray background and then I've got these other two containers that are then providing a different functionality inside there each one is independent of the other you know their visibles are different right so that one is um so container things only shows in that case this one I think it's visible is just always true right because basically if container one is showing I want to show this one if I wanted to hide it then I could add logic there and it's not affecting the controls yes such a better way to build okay so then your questions are going to be well Shane what if I'm using groups today I buy what you're selling good job you then how do I get rid of it well I'm glad you asked that so go here to groups I'm going to take this one we're going to duplicate this screen and so this one's currently using groups right so one of the things that I did not know until I started researching for this video I can actually go to this rate group and look there is a thing that says add the container it will automatically turn it into a container and put all the controls inside there what I know so now if we say rate it oh the container is on top so then what do we need to do we need to then go and set the containers visible to be VAR show um what is that varsho pop-up and so then now if we press the rate it we get our lovely how cute is Buddy very neat right now one of the things I probably would have done was I would have selected all of these controls ahead of time and set them back to the weight right their visibles are of our show pop-up I would just set them all to true so they acted more like I would expect them to so quick little change there but so then now we've got that main pop-up you could also then start to clean up right we know that we could get rid of this rectangle if we wanted to because you know we know that's just providing the gray we know how to do that with the container but so just something to keep in mind you can take your containers and uh start to combine them or sorry not combine them you can turn your groups into containers that's why it's trying to say so if we do the same thing with this we will say hey uh actually you know what I'm gonna do I'm gonna cheat and do what I meant to last time we'll say visible so just set all of these to true so now it's all popped up which is super confusing then we will say add a container it makes its own container and then we'll say contain thank you and then we will set the visible just for the container to be VAR show VAR show thanks boom and then that one's on top of that one so then if we press save we got what we wanted we do done so and then once again you can start to rework this you could then take this container like you know what I want that one inside the other one right then control X go in here Ctrl V now that container is inside that container and you can start to work through all that kind of fun right what if you go the other way let's go here let's see this one we did it on so what if you decided that you really hated containers right also keep in mind that with containers you can right click right here and you can say or not right click click the ellipses right clicking works too actually and you can say remove container and then it will just remove the container and it'll just drop all the controls on the screen all right so if we go here to yeah let's see that remove container and so then now all my controls have been elevated container one if we just remove container one let's just remove that one there we go so now all the controls are visible right it's going to break functionality I got to rework everything but I didn't lose all the controls so if you do go to containers and you want to get rid of them then that is possible now the only little quick little nuggets with containers I want to make sure you know is that inside of a container you cannot put the PDF viewer data tables or the old web Barcode Scanner I don't know why you'd really use any of those controls but all three of those are not supported in containers so just a small nugget there um also you know explore this container type and if you start to think wouldn't it be nice if this stuff all lined up wouldn't it be nice for this stuff did different sizing that's where you might start finding yourself saying hey maybe it's time to look at the responsive stuff right I'll put a link up there to one of my getting started responsive videos but those uh the horizontal and vertical containers they're similar but they are a lot more particular about where content goes which can make them more challenging or more powerful depending on what you want so that's it for today what'd you think did you like this do you buy into the whole idea that you powerapps groups bad container is good I hope so right thanks to Daniel for nudging me along I would have never had this Epiphany moment uh without him yes comments thoughts any of that stuff leave them below I always try to check those out and if you haven't subscribed hit the Subscribe button and with that I'm going to say thanks and have a great day hey me again before you go click on the Subscribe button right join the list of hundred thousand plus people that subscribed already or if you need any help right check us out at powerapps91 we do big projects little projects we do training we do everything and we can help you or if you want to see more videos you probably do then just click on the playlist above cool thanks and have a great day

Channel: Shane Young

Views: 29,110

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, powerapps group, powerapps group controls, power apps group items, powerapps container vs group, powerapps container control, powerapps modal popup, powerapps modal dialog, powerapps modal screen, powerapps popup screen, powerapps popup message, powerapps popup confirmation, powerapps popup window, powerapps popup message box, powerapps popup box, power apps group, power apps container, learn powerapps, powerapps tutorial, video

Id: BL7a5PmgZoc

Length: 20min 20sec (1220 seconds)

Published: Mon Nov 14 2022