Power Apps - Creating menu component

[Music] hi this is Laura GB and today we're gonna build a menu component so here we are in our app and I've got three screens that I just want to put a menu so that I can navigate between these menu down the left-hand side so straight to components and we're gonna add a new one I'm gonna rename it to be menu and we're going to so we want to pass into here the list of our menu items and which screen they should navigate to so let's put in a new custom property we're gonna call it menu items keep going down [Music] it's an input slightly more importantly it's not table it's a so it's not text it's a table and let's click create so now we need to put in some example data to go into there so it knows the data types so I'm going to take everything out of those squiggly brackets inside that table function and we're gonna put in the first column is gonna be many texts so this is the text that's going to be displayed second column is going to be the menu screen the screen that's going to go to so I'm gonna put in app dot active screen and that allows you to have a screen variable type which is quite cool so that set up one of my inputs coming in and I'm then going to come into here and I'm just gonna resize my app so my width over here on the left hand side I'm just going to change to be 200 just that looks right okay and then we're gonna insert a gallery I'm gonna go for a blank vertical so ignore the data the data source for the moment let's just resize it a second so not a not why the width is going to be parent width the height is going to be parent height so they are my gallery fills the whole thing so let's get back to that items so go come to data source and it would give you if I go right to the drop down on data source it's asking for data source that I haven't got but I have got in my component a input that's coming in so instead of custome galleries sample I'm gonna put in menu which is the name of my component dot menu items okay so that gives me that part so now let's zoom in a little bit on this gallery and let's edit so let's resize that to be a lot smaller that's my individual item in my in my menu and what we're gonna put into there is we're gonna put in a text label so let's go for the plus text label and drag it into there and again I'm just quickly gonna do some fixing and a width is going to be parent don't go for width and height because that causes you problems later go for parent template width and height is gonna be parent height note see that's where it goes wrong not parent height parent template height okay so that fixes that part and we are also going to put in the text that's in there okay so this item dot menu text that's right so that's what we want okay so that's giving me that part now I want it that when you click on that so much' quickly to check them in the right place when I'm on that label okay I the action to be to unselect is to navigate to this item dot menu screen comma and let's go for screen transition none close the bracket okay so that's putting bows right so that's first stage I've got it a little navigate I put things in there so I'm just gonna quickly go back in to my screens and zoom out a little bit because I assumed in just a little bit there we go and we're gonna insert my custom component and I'm just gonna put it so that it is there right now what I'm going to do on my app start is I am going to create a collection so let's just quickly build that code I will speed this up so there we are we have a collection there called CC menu and I'm just gonna run that okay so now I can go back onto my components my menu items is going to be equal to CC menu and I can press play and click on my items and that takes me to the right screen so let's just go back to home and I'm just gonna Nick that for a second I'm gonna do a trick that I saw on Twitter just yesterday if you times your X and your Y by one so therefore your x and y are now a formula I can now copy that go to my next screen and paste it and it appears in the same place which if you've done copying and pasting before they don't so they are I now have a menu that I can click on to go round them but I haven't got the highlighting happening here so we're just going to do that as a quick extra on the end of this so I go back into my component and we're going to go for our the fill of this of this text so what I'm gonna do is onto my component I'm gonna add in a new custom property that is gonna be called brand color oh I should give credit for that hint I just gave about copying and pasting and that is Sancho who is another person if you want following on Twitter you should be I will put links to both him and Brian in to the description at the bottom and so brand color should be a color that you are pasting in and click create and for the sake of keeping this nice and quick we're gonna put in some let me put in 200 into there and 200 into there what kind of color does that give me a revolting yellow will cope so that's what I'm going to use and I'm gonna go back to my label here and I'm gonna go for the fill of that label we're going to put in a quick if so if this item dot menu screen equals app dot gotta put capital a on app behaves a lot better if you do that active screen so if if we're on that screen okay then let's make it menu dot brand color otherwise let's make it RGB a what it was before [Music] and close bracket okay so there we are we can see it's gone yellow we've only got one item in here so therefore it's gonna be yellow okay so let's go back to my screen it's revolting yellow by the way please don't pick that as your color but into here oh I've put in black into there my apologies let me just quickly go and fix that do not we gonna cheat and just fix that by putting in a zero he'll solve that problem so back to my screens zooming in and out and seeming out it's a lot here so let's press play and there we are we have a menu which we can put down there as our component to navigate around so that was me creating a menu component with great hips from Brian down and sancho if you haven't already please press subscribe take care now

Channel: Hat Full Of Data

Views: 7,525

Rating: 4.8655462 out of 5

Keywords: PowerApps, Power Apps, Components

Id: 5G-gVWRItmc

Length: 10min 30sec (630 seconds)

Published: Fri Jan 31 2020