PowerApps flyout menus, floating buttons, and X Y Controls

and today's show you learn about positioning controls and power outs so we're gonna talk about the X and the y coordinate how to manipulate that how to get it off the screen how you use timers all types of fun things that will help you move things around with two end results in mind one is to help you build a flyout menu and then two is if you have a gallery who has different amounts of data keeping something at the bottom of that based on the size of the gallery so should be fun should be fast but first here's our intro hi my name is Shane Young with power-ups nine one one those guys in today's show we're going to talk about positioning controls on the screen alright probably not the most exciting topic ever but the good news is is we're gonna use it to teach you about four or five other little concepts that once again go into this idea that we have to build very flexible very malleable new eyes for our users and so we're gonna teach some simple stuff and I'm also gonna open the door up for you guys that are understanding more complex things you can do you know I think the things like the flyout menus and stuff those are pretty practical solutions so let's just take a look so a switch over to my desktop and the first thing I wanted to do well just kind of give you guys a demo of what we're gonna build so here I've got a button on the screen or I says toggle menu and so when you click that you can see that the button menu right the menu slides in we toggle the menu off it slides out and everything goes you know and so we're gonna do is we're gonna talk about how to recreate that in your power apps I'm going to talk about how to control you know you see mine kind of moved slowly probably what's yours and move faster so that's a pretty fun one also with that one we're gonna I'm gonna link you off to another video that a friend of mine did Dan Christian and so what Dan does is he takes that concept it makes it a lot more complicated does multiple state steps and things like that but we're not getting into that I'm gonna give you the foundational so you go learn from his video also then let's jump over here and we'll go to the next page whoop and so then this is a gallery and so keep an eye on the submit data button right so for the question right there's a first item of my gallery there's my second there's my third only that submit data moves and stays at the very bottom but when there was nothing there submit data kind of floated so a couple of cool concepts there you know we'll also see if we delete an item it comes back up if we need them all it puts itself in a spot there so pretty fun little tricks there and that's actually a pretty interesting one because that's starting to lay the foundation for hopefully here very soon I'm going to put out the video on how to do repeating tables with power-ups I know a lot of people have asked about that I'm trying to get all the kinks out right I've got it working now but I don't love a couple of behaviors so I'm writing some weird dual things to do it and so what I thought I'd do is I'd introduce one of the neat concepts that I figured out for part of that and that's this idea that you want to have your submit data button move up and down based on the size your gallery pretty awesome huh I think so alright so this jumper here we build a new app right because I don't want cheap I'm not gonna pre-baked anything so we'll say apps and then we will say create an out all right after a few seconds we're just gonna say tablet layout boom and a few more minutes that air cut out they're not minute seconds we'll say skip this alright because we have a blank canvas and before we do the two cool things I showed you we gotta start with the basics right because this is where I had to start to figure out how this worked so just do that we're gonna grab we're gonna throw a rectangle on the screen now clearly it doesn't have to be a rectangle all the controls behave the same but I don't for the reason I like to use a rectangle okay so my big blue rectangle here now if you look over here on the right you'll see that it's that I move it around right this X&Y number is gonna change you see so when you drag it with the mouse is automatically change and just so you kind of a point of reference X is the up-and-down from this point right so this is 0 0 so this is saying this is 270 pixels down and then the Y is the left and right so the 204 pixels to the right so if we go show it the corner you'll see 0 0 right so that's not very interesting I understand but one of the things you want to know is that with x and y right those are properties over here because we know that chain likes to work from right here so I can manually type in you know what this got to be 500 and this guy to be 300 all right and so now it's our type than 3,300 and it set those 1 the things I find off-putting as I'm trying to teach you guys this is I can't drag something off the screen all right oh it will not let me go past zero up here or zero over here and so that causes me a lot of grief what I figured out though is if you use a control or a function to set the value of x and y you can do off the screen all right so watch this we're gonna do a control we're gonna do a slider put it over here I'm gonna set the default value to be zero and I'm gonna set the men to be negative one thousand and then we're gonna set the max to be positive I shall make it 2,000 so I get off the screen like so okay so then now if you go over here and we change the X property from zero what we can do is we can say you know what I want you just to be slider one dot value so now grab your slider mmm grab your slider slide it off the screen I can slide it off the screen this way so he gives me that ability to move and set it off the screen right this is laying that foundation for the flyout menu I fly off menu sits off the screen and then when you press the button to show the menu it slides onto the screen and so you have to understand that controlling the X and the y with a controller or a function is the only way to do it probably took me half an hour to figure out that's why I couldn't make flyout menus the way I wanted all right well bonus trick here I could I didn't know this until today we're making this video grab another slider right we're gonna use this one for the Y so we'll do the same thing with your zero we'll do max of what I do mm I mean doesn't really matter but mm and then min of negative a thousand okay so there's that but ready for this I thought this was a coolest thing if you can click on layout I had never realized but you can do vertical sliders oh how much easier that makes me you eyes so there now click on a rectangle change our Y to be slider to dot value you uh-huh look grab it and now we can move our guy off the screen nice yeah we can move it this way so hard to grab these things for so and then that's even gonna work if we do preview right right so this is how you're doing you're flying in menus right we'll use sliders but being able to play with sliders I found was the easiest way to make this make sense how you move stuff around maybe not maybe like the I got this like five minutes gonna quit time on Shane we're bored maybe oh well okay now that we understand X&Y how it controls things now it's time to do the flyout menu you wanted all right so go here let's do a new screen don't have to do a new screen I just found it easier to do new screens we're going to start with a rectangle again that's where that list gets longer and longer all right so do a rectangle and some of them kind of make it fill the spot here connected in the last one all right so there's our rectangle and so now we need to set the X and the y but we want to set those dynamically right so what I'm gonna do I'm gonna add a button and we're going to say I mr. button when someone clicks you I want to update contacts right Sakon create a contextual variable available so I'm available for this screen if you don't know about variables there's a link below on a whole video on variables we're gonna say update contacts and we're going to create a variable name show menu and we're going to set it to true all right oh I forgot my little curly braces why don't you guys tell me root of you okay it's a curly brace curly brace boom okay no so that would just set the variable to true right you can have a separate button for false I don't like that I want to make the button toggle so we're gonna use a trick that we've talked about in other videos but what you're gonna do is I'm gonna say that I want the show menu to equal the opposite of show menu all right so what's what is that doing that's saying I make show menu a boolean variable right which is true or false and so whenever they cook this button just make it to the opposite so by default when you load a page it comes on as false and then we and you click the button it'll be true you click the button again it's false in the easiest way if you've never done that before right is you can grab a label I just throw it on the screen here like I could see why you wouldn't want to trust me so say don't not show show menu sorry so what it says show menu all right wait play and so as you could get false true false true false true whoo awesome okay so I'm upset you want me to prove that to you it's okay okay so then what we're gonna do is we go here alright so rectangle I need your X alright we're not gonna mess with Y you could do all the same stuff with y we're just gonna do X and we're gonna say if show menu alright and this is why it was important that I used a boolean variable I cannot do any comparison I'll just say check if it's true or false or if it says yes or no show menu either comes to true or false right now it's false but so if show menu right so if show menu is true that means we want to see it then what then we're going to set the the x coordinate to be 0 right because we want it right here in this corner so you can see it but if show menu is false so we do not want to see it then we're going to take advantage of another property and we're gonna say all right rectangle - let's not call right angle - let's rename it real quick let's rename it to menu menu boom we're gonna say I menu we want your width property right and so what we want to do is we want to set this value to be the negative width right so right now the we know that the width is 423 so we're going to set because the show value is false we're gonna set the width to negative 423 which puts it exactly one pixel off the screen so if we say play right we don't see it there's no indicator over here there's a menu if we hit button we see our flyin menu woohoo out in out and that is the most basic concept of how we're going to do this leave it okay so that's pretty uh pretty fun right I want to show menu just so that's not as confusing okay but you guys don't like boring stuff right it's kind of weird that it flashes on flashes off you want a nice animated menu right I'm probably also want a button let's do a button first let's grab a button will change his color to be one of these pretty colors over here boom okay so now I got a button I'll put it right in the middle now if we look at the button what I want you to do is I want you to notice that right now the buttons X is 132 why is that important because we want to set his X to be the same X as the rectangle or the menu but plus 132 so it stays in the same spot so what we can do oh yeah this is right so we're gonna click on X so right now it is 132 yeah that's just so instead we're gonna do is we want to say you we want you to be menu dot X plus 132 which puts it in the same position here but also if we say show menu and then we'll go back over here you can look even when it's off the screen the button stays in the same place because in a second we're going to animate that moving in so it's important that the button always stays in the relative correct location and so the way that we did that was we just said alright we know that menu X is correct that's the one that we keep fixing now I just want you to be whatever menu X's is plus 132 got it got it okay that was a little tougher so let's make it even tougher on you okay and for this section we're gonna have to do a little math a little thinking here okay so what I want you to do is that once you go back over here to your show menu and we're going to do two changes here and so the first one is we're gonna create another variable and we're gonna put it at the front which is a little weird but I'll explain why in a second so I'm gonna say update context and we're going to create one called start my timer okay and we're going to set that to be false and once again you guys let me forget to do the square we braces so sparse curly braces in power she just autosuggest so it knows I need them okay so we're going to create a variable called start my timer we're gonna set it to be false then weirdly enough we're gonna go right over here we're gonna do a comma and we're going to say set start my timer to true okay and so the real short reason for that is is we need the variable to go to false so it becomes true so it triggers an activity what activity you probably already guessed based on the name is we're going to insert a timer since through a timer I'm gonna stick it down here I'm going to set its duration to be a thousand milliseconds right so one second alright and you can mess with the the duration or any that but we're going to the duration for 1000 and what we're going to do then is we're gonna go over here right and so we had our start timer and so we're going to tell this timer that the start property for you it's no longer false all right could we know you start a time by clicking it but what we wanted to happen with the timer to start when the show mini gets clicked so we're just going to change this guy to be start my timer and that's why I was important that we ain't get fall stand true because there be false and it'll be true in time like oh I got a do count to a thousand just like you told me to and so every time you press the button it will go to 0 or I'll go to false and it back to true and Big O gotta go to a thousand because that's gonna be how we control the animation all right so we've got a timer running we've got a button to set it so let's go over here and play with our X now so it used to be that X was 0 or it was menu width right well this is not we want anymore now we want to come in right we want to move across the screen in kind of a nice little fashion and so in order to do that we're going to say alright what I want you to do is I want you to take that negative menu width and I want to do x and then we're going to say timer 1 dot value and divide this out and then / timer one got duration right we're putting these in parentheses because we want that calculation to happen right the idea is that the numbers going to at the beginning it's going to be you know a really tiny number but as the timer fills up it's going to become and move into where it sits one in the end right value divided by duration will be one but the beginning there'll be point zero zero one and it's going to slowly move and so the idea and we're just doing this right now for the false worried about the true after we prove this works is what hit play and so if we say show men you see how that goes off the screen and that slow motion it's going to snap back on because we didn't fix the on but then it goes off and that's because of the timer's duration so we set it to take one second to go off you know maybe you want it to take ten seconds you know like icebergs or you could make it I think three hundreds what Dan uses and that seems to be a little snappier so you can play whatever makes the most sense for you but that's how we set our value so that it moves nice and easy okay so then what we're going to do so that is how we go off the screen with style so now we need to go onto the screen with style right and so to go onto the screen with style what we're going to do is we're going to say all right we need you to be menu width right so let's give that mouse other so quiz make it weird menu width and then we want to do plus and what are we going to do plus menu width times this same stuff again right and so basically what's happening is in the beginning the x-coordinate is going to be that negative you know 400 number right and then plus 400 times zero which will be zero so boom but then it'll be you know 400 times 0.5 which is 200 so then it's moving alright so that's what's going to cause the movie is that this value just gets updated so if we hit play let me say show menu oh look at that it came across nice it goes back nice also pay special attention that the button he just moves and we don't even have to think about him right why because menu or that button is just always a hundred and thirty two I think it was greater than whatever excess so that means he'll always stay relative you'll always stay in is the same exact spot but you don't have to go and fix the function or adjust him in any way because he's just being derived so if you add another control all right if we want to add another icon here let's do a smiley face because I deserve a smiley face for this that's pretty excited earlier when I figured out some of this stuff all right we put our smiley face over here I hope he's off the screen that's why I can't drag the smiley face over there man the other thing we can do is change the smiley faces color oh so much for a quick little thing make it green or just hit menu thank you show me my menu Joop thank you we'll put it on top of that Oh see what happens when I leave is its negative or it's uh the variables false that's why it's off the screen over and over again but all we need to do is change the X for this guy to be way don't do don't do menu for show menu no not show menu menu menu dot X what do you think plus forty right so then there it is he will always be in that location his Y is still whatever his Y was before now notice here when I grab this that it reset X to zero very important to note when you manually put controls like if I click on button and start to move him it will reset everything so you got to be real careful about that so we'll redo what we did but I wanted you to see that because I did that to myself earlier and I was really annoyed right I'm gonna do forty you know do fifty boom so then same thing show menu whoop-whoop pretty cool yes no skylight flossing I can't floss though um all right so that was that one so let's close out this was making another new screen and now let's talk about galleries so with the galleries what do we want to do we're gonna we need a couple buttons from an assertive button and we're gonna say this buttons gonna be you know make it bigger like this button item to collection alright so I'll add an item to the collection will make another button we'll put it right here and we'll make this button called clear collection okay like so and then yeah I probably should copy this they're the same what do you do alright so on select here we're gonna do is I want to do a collect right so once again if you don't know what collections are you that there's a video below so so collections and we're just call this test collection very descriptive name and then inside there we're going to set an item this will call item and we'll just set it to be one very very elaborate and then we'll say animal and we'll set it to animal with an L all right you guys belly animal that's how I spell animal like so and like so and so then when we click that button it's going to create a collection and then we'll set this button and this button would just be responsible for clearing the collection so if we want delete it all right so we'll hit play and we're going to click the button one time because the next steps easier if you have an item in your collection so we do that and we'll do gallery we'll do a vertical we'll kind of drag it right below these guys like so and so then we'll choose our collection we'll say you know what we just want title and subtitle and so we'll make one of these animal one of them I'll okay alright so then we do this boom boom boom we keep adding dog in one because we don't care we just need some data to play with all right so now notice right away that my collection or my gallery is you know this high I don't even know what else I it is probably 500 something and so my calorie is automatically that high and I could resize it but I want to have the gallery actually be a dynamic size so in order to do that you need to learn a couple things so one of the things you need to learn about that is if you go in here and look at the template size it's 104 so this is telling me that a card right so for every item it's gonna be a hundred and four pixels that's important to note right and yours might be different if you move things around you resize your cards so this isn't a step not a standard number this is gonna be a number based on what you've done inside of here so mine's 104 so I'm going to go to my height property right and this is the height of the gallery make sure you're on the gallery so right now it's 438 what I'm gonna do is I'm gonna say you know what height I want you to be a hundred and four times I want you to do the count rows function so this counts how many rows is in your data set so how many pieces of data do I have in test collection right now I have 0 so it's gonna be zero but so however now I have 4 so then my 4 yes we're gonna do mine on b4 so as to be four times on and four so the height that my gallery is gonna be 416 and so you'll see it kind of moves up and down maybe what we'll do real quick is we'll take our gallery and we'll turn on the the border let's offset the border thickness door to one so you can kind of see the border alright so if we go over here and do play if we add an item my gallery gets bigger if I clear it out my item becomes through all the way shrink all right so then we add so this is um showing you that now we have a dynamic height for our gallery right as well as questions I've got a few times and never had a really great answer but that's how I do it and you wouldn't even have to do the size right I could have done you know could have figured out like the size of each one of these but that gets really weird so we're not gonna do that but so then now what I'm going to do is I'm going to take my submit my data button right because ultimately this is going to become a repeating table solution so submit data and so right now it's on the bottom but if I hit play and I had an item now there's overlap so don't with that what I'm gonna do is submit data as I'm gonna say you know what well guy your ex is not 280 it is going to be gallery 1 dot height plus gallery 1 dot X all right so remember X is this number right this is where gallery 1 is and then height is the size of it and so then that puts him right on the bottom so then now if I add an item of the collection oh well by an eye under the question it's going to do nothing why because I set the X that I mean to set the Ickes no I did not so we will cut that out of there I meant to set the Y so we'll say hey your Y is I just do this put this guy right here okay so then now your why is this and we'll change this guy to be Y like so the Shane much better so I say play and so if we're the collection it comes to top and as we add items submit data moves up and down mess up oops what you do um but now you can see how you can put a button so it always at the bottom now you do have to think about things like if you keep adding items and you go off the screen there is no workaround for that we're sorry this solution there's not a workaround for that but what I ended up what you can do is you can end up creating your screen as a scrollable screen so then it won't the whole thing would scroll but we're not going down far down the rabbit hole I'm giving you the pieces you guys can build cool selections solutions but one other thing that bothers me is right now if I clear collection this comes and slams up against the top I don't like that so last thing to learn so right now that is why okay but what I'm going to do is I'm gonna say you know what I don't want that to always be the case I want you to use this function called Max and so Max is going to pick the largest number that I show it and use that as the value so I'm going to do the max I'm going to do that formula that we just did which we know is zero now and then I'm going to do a hard-coated let's see you don't do 250 that seems reasonable and so that's just 250 from the top of the screen so then if we do play and we say add an item to the collection submit data didn't move we say add item again now submit data starts moving because the combination of these two guys was bigger than the 250 that I had before so this is another one of those tricks that you know it keeps you out of trouble right max just pulls the largest value so I always want to be the bigger of the bottom of this or 250 and in reality I probably wouldn't use 250 right I probably would have done the X of this guy plus 100 or something like that or plus 200 that's probably the more or not the X the why you guys keep letting me mess it up the Y of that guy all right write Y up and down X left right alright so anyway hopefully that gives you guys what you're looking for I get you started in how to position data how to move data and all the fun things that you can do with it now this is a lot of little things a lot of little nuggets in here though these are how you're gonna build your bigger larger solutions by stealing little pieces of this and when you do leave me comments below and tell me you've stole for me because I'd like to hear that that's why I make these videos and as a bonus of since you guys hang out and watch to the end you can see I finally got some merch I got my power power out so nine-one-one squishy bow here right we're stress-free because we have stress balls you know my kids told me I'm really cool now because my youtube channel is official when you got some merch so I got some merch so who knows whatever it's Friday afternoon I'm gonna go outside and play some golf I hope you guys learn some fun things here and hey it's me again if you got a second click the subscribe button that always keeps me making more videos or if you want to work together need some help getting your power apps going hit me up with power apps 9-1-1 always happy to work together or finally if you're always looking for more videos that's probably what it is check out the power ops playlist over here and you know enjoy that alright thanks and have a great day

Channel: Shane Young

Views: 71,568

Rating: 4.9484239 out of 5

Keywords: powerapps, powerapps tutorial, shane young powerapps, powerapps911, flyout menu, expandable menu, max function, Template Size, x + y, powerapps dynamic menu, microsoft powerapps, gallery height, gallery button, floating action button, shane young, bold zebras, powerapps tutorial for beginners, powerapps tutorial video, powerapps tutorial youtube

Id: D_Kb7AXSE0s

Length: 28min 51sec (1731 seconds)

Published: Fri Apr 27 2018