Power Apps Smart Navigation Menu

hey everyone this is daniel and in today's video we're going to talk about powerapps smart navigation menu and we'll build this menu using a combination of collections galleries and components and i call it smart because the navigation pane will be smart enough to know which screen you're currently in and will highlight that item in the navigation menu so stick around but first here's my intro video so let's get started now before we jump in and build it from scratch i wanted to show you what the finished product looks like now granted this doesn't look very fancy but what it outcome is that's the most important one so over here i've put the navigation menu on the bottom and as you can see when i click on a couple of things happen first of all when i click on it it does get highlighted both on the top with a horizontal little bar and then the whole thing gets highlighted at the same time the top menu or the top navigation it will go ahead and tell you which screen you are in and it actually says welcome to the add screen this by the way is all happening automatic based on what you've selected over here third it will also go ahead and keep track of which screen you are in based on this back option that i've put over here the return option of the back option because when i click on it it is able to keep track of which screen you are in before and will highlight that as well that little piece is not as easy as you think but i'll show you how to walk through that as well all right so now that you've seen it let's go build that from scratch so what i've done over here is i've gone into the canvas studio and i've gone and actually started building this app and by started i mean all i did was open it and i named it to this one app which is power app smart navigation recording demo that's all i've done nothing else next thing i want to do is actually go start building some screens let's add some screens over here and start playing with the smart navigation system so the first thing i'm going to do is i'm actually going to come and type in this name and i'm going to call this as my home screen and i'll give it this very specific text syntax i'm going to call it home space and then screen so that's what i'm going to do and then i i'm going to go ahead and add seven more so i just come over here i click on duplicate and i change this one to the following the top one was home screen this one i'm going to call that as add screen and so on and so forth so here we go let's just go ahead and start building these other screens so i keep seeing i did the at the home screen i did the add screen i'm going to add the edit screen and just watch me go ahead and do the other ones and there you go i've gone ahead and built all these eight screens again building them wasn't very fancy but just to show you what i did i went ahead and created one and then i went to the ellipsis and i clearly created or clicked on the duplicate screen and i just renamed it so this is the way i went and actually created the screens and just got the process started next thing i need to do is go ahead and build my collection and the collection i'm going to do is build it on the app and i'm going to go over here and click on the app on start so that's where i'm going to build a collection now i do want to pause and mention this one thing to you is that um i have intentionally put this in the components of that app and the reason i did not use the components library is because it's still in preview but i promise you the moment that thing goes live i will walk you through recreating this in a components library and then you can go ahead and leverage that over here right that is my promise to you cool just thought i'll kind of mention that let's go and get started so now i go ahead and click on the app select the on start and on start we're going to go ahead and now build our collection so here's how i build the collection what i do is i go ahead and start with the clear collect and in the clear collect i'm going to add very specific two columns so here we go i'm going to call this as clear collect i'll let the intellisense kind of give me some options and i'm going to call this as collection screen nav and that's just being my style i put and so the whole collection i just call it col screen and then nav that way i kind of know what's going on that coll tells me yep this is the collection screen says this is a collection for the screen and nav is it tells me about the navigation so this is just how my brain works that's the way i kind of come up with my collection name you might have your own style and that's great just thought i'll share mine with you so now i'll hit the comma and then after that i go ahead and open the brackets and i close the brackets i click on um now yeah let's just start over there so in this case i'll go and say i d colon 1 comma screen and then i'm going to put in another colon now here you don't want to type in any text or you know don't want to type in any text inside the double quotes you actually want to get that screen name so i'm going to start typing and let intellisense help me i'm going to start saying home and then there's two homes so not the first one but the second one because this home screen that's the home screen over there but the reason i know that this home screen over here that you see on the bottom is the one that you're seeing on the tree view because it's giving me that one single quote so i kind of know in addition when i click on it i'm able to see this slanted green highlighter with that underline that tells me that yep that's the screen name so this is very important because that's what we're going to use and leverage in the collection don't put text because even if you accidentally put text and you just avoided this part what i'm saying you're going to start getting errors moving forward so very important we're calling in the um clear collect the column name as screen but we're actually using screens over there so what i'm going to do now is i'm going to go ahead and just start populating things so watch this i'm going to go and say now id i'm going to put that colon and i'll type in screen and i'll intentionally just do it this way and i'm going to go now comma go down keep going i'll do a few more i haven't really counted how many i have but what i'm doing is just kind of getting an idea a ballpark figure and then i'm going close the bracket all right so we got one two three four five six seven eight awesome i didn't even count but it just worked out well all right so the first one was home screen grade for number two this is going to be add so i just click type add intellisense gives me that perfect let's go to the next one three three is going to be edit so i type that edit we got the edit screen four is the view screen so i get the view and just in case i'm getting these names from here so if you notice that this um chronological order that i'm going through matches the order that you have over here right that's that's all i'm doing i'm not making this up i'm actually just doing a very simple copy and paste so got that copy screen and number six is the summary screen and by the way i had to literally think through to come up with these screen names because i wanted to create this scenario to teach you how this works you will have your own scenarios you could have a standard screen naming convention style that you use repeatedly across your entire app whatever it is go with it don't stick with what i'm saying i came up with this to kind of build this uh video so just thought i'll share that with you and adam i mean admin i got the admin and then executive so what i notice now is you also notice today when we were building it we were getting some errors because we had not finished the formatting but now that we've finished it we are good so all the errors are gone i'm not seeing any squiggly lines we are all in good shape so now i'll do is i'll go ahead and um do a right click and i'll do a run on start and after i've done that i can come back to my file i can go to collections and i can see that the information is populated and now the screen is actually almost like a variable so if i click on it it's gathering all of this information including the name so see the name is on the top but it's kind of important that you see that little difference which is that that screen information we put over here this screen is not a text it's a screen and screen has a lot more information in it cool so that was the first and the very important step that we needed next let's focus on that top navigation so now we're going to switch gears and look at it on the component side so i'm going to click on the top tree view there we were all the time on screens let's switch over to the components and in the components i'm going to click on the plus new component i'll go ahead and give me this name i'll click on the ellipsis i'll select rename and i'm going to rename that to header component and that's literally as simple as that now in our header component i am going to do one thing i'm going to go ahead come on the right for the custom properties i'm going to click on that new property right there and on the new property i'm going to call that as my header label and put that as as this down i keep the name as is over here i can go ahead and leave it as is so i can just say that uh but this is it that's pretty much as simple as that so i'm going to click on create and it'll show up over here so that was actually the most simple piece that we have to do on that side next let's focus on this entire um format that we have over here so what i want to do is now i want to match the header to the actual the app that we have so i'm going to start putting in a few things so what i want to first do is match this dimensions which is the x and the y the height and the width to the actual app itself and that's actually fairly simple you've actually seen me do this a lot in my responsive app designs but i'll walk you through that over here anyway by the way i've put the link to my responsive uh design down over here so take a look at it i highly recommend that so the app i mean the width we're going to go ahead and match that to the app width and one thing i've noticed is that when you are specifically in this components the intellisense takes a little extra time to do it uh pick it up so make sure that you actually give it good intellisense tips so in this case i just typed an app and it didn't really pick it up what you want to do is type in the uppercase pp you start typing it in and now the intellisense picked it up so this is a little tidbit that i'm sharing with you is that for some reason in the components it just takes a little bit longer but helped the app kind of go through it oh this is what danny was looking for so can i just help it all right it's still learning you know be nice all right so we got the width width is pretty responsive height is completely up to you height is where you've got to make an educated guess how high that you want it what is going to be the height of that so mine is going to be 70 um 640 was the default i'm going to stick it to 70 and this this looks good to me so i'm going to stick that to 70 over here all right cool now let's go ahead and start adding some things to it so the first thing i'm going to do is drop a label so the label comes in and i'm going to go ahead and now match it to this now i'm doing it manually you can go ahead and go you know really go intellisense i'm sorry you can really go responsive on this one where i can come in i can go to the x make sure the x is zero i can go ahead and go to the y make sure the y is zero and instead of dragging dropping you come over here and just put these names then after i've gone ahead and done that i can go and put its width and it's with instead of typing that in we can go ahead and do app you know with so you can go crazy with this i'll leave that up to you point is we want to populate it to the same dimensions as we did for the header component cool now let's go and make it look a little nice so i'm going to click on home i'm going to go ahead and fill that too i like this color i'll go and change the text to white i'll go ahead and make it central you know kind of makes it a little nice um text itself let's switch that over to its um its size to 28. cool that's looking a lot nicer all right so now we're going to go and start making this a smart navigation one all right so in the top i want to basically tell the user welcome to the and the name of the screen that is where we're going to start using the active screen function it's very important to understand what this active screen is it's telling you the current screen you are in what is that active screen and get me information about that active screen this active screen is going to be the key ingredient to help you make it smart now i know that it's not very new but how you use it where you use it that's the whole idea of this app so kind of get used to it uh because we're going to heavily leverage that leverage throughout the entire build app building so let's let's start using it okay so i'm going to say welcome to the and i'll intentionally put a space i'll make sure that the double quotes closes then i'll go outside it i'll go ahead and put in an ampersand and then we're going to go ahead and say now app dot active screen and there you go it's app.activescreen but what property of that active screen that you want so i'm going to click on that and now i'm going to go in and get give me the name of the screen now i don't get any information over here because we're building a component but at the same time i don't have any errors over here either which means we are doing everything right cool let's actually do a quick test let's go up to a screen uh into the screen section in the home screen let's drop it and see what it looks like so i'm going to go to the insert tab on the top on the menu i'm going to drop down on the custom section and then there we go we see our header component on the header component right there it shows you hey welcome to the now see on the components it just says welcome to the but in screens it is smart it knows that hey welcome to the home screen ah so daniel is that the reason why you were so careful in naming that screen that's it that was in fact i gave you a little bit ahead of time instead it's very important that you name these screens in a very clear fashion because you're going to leverage that name very moving forward and this is why we're going down and using it right so kind of um understand that tidbit in fact all right let's keep continuing on this place all right so we got the label which was great what i want to do is i want to now drop an icon so i'll come in i'm going home i'll go ahead and oops i want to go to insert then click on icons and then i'll just drop an icon and i'll make sure it comes over here and then there i'm going to select a search for back and that's the one that we want and put in whatever color it is for the sake of this one i don't want to go fully wide i don't want to go you know i'll stick with kind of this little gray color kind of has a nice effect to it almost looks a little white by the way let's see over here when you go and zoom in it almost looks like that circle piece is touching and kind of getting a little edgy so if i select it and move it out a little bit more kind of has a nice effect to it now you see the whole round so it's just these little things which makes such a big difference right i know cool so we select on that and now in its on select i'm going to search by just the on select and in the on select we are going to use a set function bar create a variable back and i'm literally going to use the back and in the back i'm going to put in fade because i want to give it that fade effect and so that is it it actually works really well now back is a really really powerful function back actually remembers which was the previous screen you were in it will take you to that screen but the one thing i'm going to show when you're demoing this is it just not only does it remember the previous screen but man it will remember four five six seven screens even before you are in the exact same format that you came in the exact same sequence that you came in you might have come to a home screen and you script over to the edit screen whatever it knows in the back which range you came from and it goes over there it's a really powerful screen um function and you know we don't give this as much you know kudos as it actually deserves so we'll we'll test that as well all right so honestly we are done with the top smart navigation piece so let's go back to the search cool and make sure that it showed up and now let's just for the sake of simplicity go and add it everywhere so i'll come back now to the add screen i come here i go to the top i select on the header screen make sure it shows up perfect and when it shows up we know it works because the screen name on the left tree view is add screen on the actual screen on the top it says welcome to the add screen so we know that what we build is really powerful and it is working in fact it is very smart cool and let's go to the home screen go and drop that let's go to the summary screen it's literally that simple copy and paste in fact let's just test that i already tested if i come over here and you're going to copy go to the executive screen if i go and do a paste does it make any difference actually no it works really well cool i just learned something new so i'm going to come in click on save just to make sure that all the work we've done we don't lose any of that it's going ahead and saving it and come back in and it looks great cool so now let's go ahead and focus our attention on the footer because footer is where we'll spend a lot more time on so now i come in here i'm going to go and create another component in that other component i'm going to go and change that to the footer component now the footer component pretty much has that same thing where in the screen level itself i'll go ahead and match it to the same dimensions we have here so on the screen i'll go ahead to the width the width i'm going to go ahead and match it to the app.width picks that up it's height i'll go ahead and change that to 70. so i'll kind of match that consistently the header and the footer has that consistency so we got that taken care of now we got to do something very important because if we miss this step you're going to start getting errors and it will blow your mind why am i getting these errors it's correct what we have to do is click on this access app scope one of the important things that the abscess access app scope does is it allows you to use the collections that you've created in the app that's the big thing and i've put the link down to what this access app scope does if you are interested in reading about it because it has a lot more features key key thing is you want to use the collection in the app that you generated at the app on start you got to turn on that access app scope now um some of you may be in sync if you went ahead and did that in the collection library how is this going to work and i'm glad if some of you are thinking that way because over there it's a whole different things i'll give a little tidbit right now over there we'll actually build a collection inside the components area over there and we'll call that in it's actually using a table function and we can make it really smart but i don't want to kind of jump into that yet i thought i'd share a little bit with you there is a little bit of work we'll have to do when we do it in the components library but i promise you i'll build a video on that so the next important thing that we got to focus on is the actual navigation like how is it going to navigate when i click in the gallery inside this uh component so with that you gotta go and add a custom property so i'm gonna click on this new custom property and i'm going to name this custom property as destination screen i'll call this as destination screen that'll be the display name i'll leave everything as is but the important thing is this is not an input property this is an output property output is when i click on it it's going to tell me which screen it goes to it is doing that output type function and therefore it is an output property but the data type is going to be a screen key key thing important whether it's an output and the data type is screen so let's just go and click on create and we are good over here we might have to come back and add an additional property but we'll we'll see if we need to do that all right okay so we've taken care of that now let's just focus on our gallery because we've got to actually add a navigation pane over here so for this one i'm going to go and do a horizontal one because that's going to be a horizontal not a vertical so i click on the horizontal and what i'll do is i'll just go ahead and populate this right now i'll just you know fill it up to what it is you know it'll go and take again for the custom gallery it's the same thing i can go ahead and you know make its height and width you know just match it to what it is so i'm not going to focus too much on the responsiveness over here because you already have an idea and i've got my video down uh link below so what i did was i just went and changed the gallery name to footer gallery so take care of that and then we're going to go ahead and actually remove some of these things like i am not going to use an image so i'm going to go ahead and delete that image all right i'm not going to use the subtitle either so i'm going to delete that now it gives me an um error message over here because it doesn't like its x and y if you literally just take it move it that error goes away so it's kind of a little tidbit that i shared with you now in addition to this title what i'm going to do is add a rectangle now i'm going to have to actually search for that rectangle in this case i just scroll all the way at the bottom because i know where it is that rectangle search doesn't work in these icons i need to actually tell our product group on that but that's the for another day so i'll just go and move this and i'll kind of make it a little bit you know for now we'll have to you know um work on that a little bit and i'll show you some tricks on how to make that a little responsive but let's actually just start with something enough to see what it is so i'm going to guesstimate for now at least i should be able to add about four maybe five navigation items we'll leave it for this one right now but we'll be able to come back in a minute so now that we've already done some design work let's actually put that data over here so what i can do is i can come in and i can type that name over here in the items or i can come to the right and then the data source i can just select that this is my screen and it actually works really well what i want to do is actually change it it's got one two three so i'm going to select on that title on the top it says this item id i'm going to come back click on dot and i'll say screen name so that is what it gives me the screen but remember it's not just a text it's a screen so i'm going to click on that dot another i'm going to get the name and this is how i get that effect over here so just because you typed in screen you get it squiggly line because it's not just a text so what i can do now is i can actually start making it a little bit more responsiveness over here so what i'll do is now i'll um i think i'm going to go up to one more screen added over there so i'll make this a little bit more smaller change its width i'm trying to work on the responsiveness a little bit so that actually should be good enough for now all right we can come back and change that a little bit smaller what i could do is i can actually go ahead and the top which we're going to use to see the active screen i can go ahead and make that a little responsive so this is how you basically do that what you do is select that rectangle icon then you go down and search for its width and instead of it getting a number this is what you type in you put the gallery name which is footer gallery you click on dot and here you search for the template width and then it will go and fit immediately what it is now you can make this look a little bit nicer i can do template width minus two and it gives you that little bit of glass gap which makes it look a little nicer so play around with this and do something that you like okay so i'm going to stick with this one right here is these many screens we might have to go and manipulate that a little bit because check this out the screen name is a little bit bigger so watch this i'll have to make that smaller and i might even have to make the text a little smaller just so that it has that nicer effect right so what i don't like is i don't like this half cut thing it just it looks very unprofessional so what i'll do is i'll go ahead and actually make it such that the entire gallery itself is only showing that much which is you know these six of them that way i don't have that half cut item all right just thought i'd kind of share that with you and this one you can go ahead and highlight that so gives you a little effect you know however you see it's fit can come in change the formatting make this a little center just kind of play around with it but i know i don't get too distracted this is what we're going to stick with right now now let's go focus a little bit at the gallery level you want to add that title level let's figure out a gallery here what i want to do is i want to take this scroll bar off it's kind of making it look a little messy so i'm gonna actually take that scroll bar off but i'll go ahead and get the navigation pane so navigation pane will actually help me look a little bit more nicer okay this is again my personal uh style of doing it you are welcome with the navigation pane just increase that height too whenever you did 70 maybe bump it up to 100 so do what you think is nice i just kind of did it you know which for my aesthetic appeal all right so now let's work on this you know piece and the template design and just work on some of this smart effects over here so the first one i want to focus on is this rectangle one right so rectangle one we made it a little bit smart by going and giving it a template name but what i want to do is now focus on its fill so the fill i can go ahead and base to find the fill i can just click on that fill or you know whatever but that is the filter that effect that we're going to work on over here now here is the if fun condition format that we need to work on and here's how it's going to be it's going to be if this item and it's going to be this item dot screen equals app dot active screen equals app dot active screen comma if this screen name is the active screen then go ahead and give this a highlighted color and now for the color we'll just go and give it the same color that it had before i'll go ahead and do that 56 comma one i think 56 96 comma 178 comma 1 that was comma 1. i'll go ahead and just give it that one otherwise go ahead and give it a different rgb one which was rgb actually it's rgba that's why it's giving me that error rgba and the other rgb was just four zeros so zero comma zero comma zero comma zero and i'll close it and that's what it is so i'm not getting any errors over here no squiggly lines because everything's correct it's just not it's in the components it's giving us an error but if you go out to the screens and we test it i will go and drop it in now so let's go back to the home screen in the home screen i'll go to insert i'll go on the top i'll go put in the footer in the footer we'll go ahead and drop it all the way down as you can see it is already working i'm on that home screen and on the home screen it actually goes ahead and highlights it to that home screen which means if i went say all the way to the bottom to the executive screen right if i go over here i go and drop the footer i'm going to get it down i don't really see it here but if i now go and go all the way to the end the executive screen goes ahead and you know gets highlighted it is smart enough to know which screen you are in and it works really well cool so we'll have to kind of play around and think around with some of this design piece over here but i'll save that for you it doesn't take a lot of doing i want to focus on the sparkness of this cool so now we've actually got it going right it's getting a little smart i like the way it's having this effect over here what we need to do is now actually make it a little bit more smarter and i'll tell you why let's go back to the components and in the components we will go ahead and do this template fill the template fill is basically it highlights to tell you which item you've currently selected and that will go and highlight it now all this for years after years in fact any of you who have done the app in the day you also know this one in fact i've been doing this for years is i have gone ahead and used this formula i put if this item and i'm going to put a comma over here so that the intellisense starts working if this item dot is selected then go ahead and give me a light blue or whatever color that you want you can go with the light blue otherwise stick with this rgba color i'll close it see it it works really well because it knows that this was the item that was selected and that's why it's going to go ahead and select that color if you go and test it in the screens it still works really well i clicked on the view screen it works right here it goes and highlights it click on that it goes and highlights it works really well now when i come back i still have to finish that because only the selection the color is changing it's not actually acting upon that coloring and the navigation piece so what i got to do is i got to still go to my footer gallery on my footer gallery i got to go ahead and now use this new property that we have so i'm going to come in and i'm going to go and select on the destination screen and on the destination screen i got to go ahead and change this from the app.active screen to the footer gallery dot selected dot screen that's how it's gonna work and now it'll actually be able to go and have that effect when it goes and changes it and for that effect to take effect we have to effect to take effect that's funny we have to go ahead and now click on the footer gallery and go to it's on select so let's go and take a look at that i'm going to go to the footer gallery and it's on select this is easy gonna go navigate in the navigate i gotta go and now say the footer component dot destination screen comma and then whatever effect that you want i usually go for the cover right okay so i think we've gotten all thinking of let's go test it go to the screens click on the play and now i select it it went to the view screen view screen we didn't add that effect so let's actually on the home screen we have the effect it is smart enough because it knows that hey on the home screen we selected it it went down and highlighted that i know we added it into the executive one so if i go click on the executive screen it took us to the executive screen it went and highlighted that so we know that it is smart enough so now that we've got most of it working we've got the footer working let's go back to the screens and let's go and fill up the footer in all the other ones so i'll come back now in this um active screen which is sorry the add screen and the custom ones i'll go and drop the footer i'll go ahead and get this all the way down in fact at this point i can do a control c and then i can go to the edit screen i can do a paste and that way it always you know shows right at the bottom i don't have to keep going and dragging up if i'm up there so i'll click on the view screen i'll do a control v now click on copy screen ctrl v click on the summary screen ctrl v and as you can see it is so smart that it knows automatically which screen it is and it goes and selects that highlight over there so it works really well i'm kind of tickled how well that works it truly is a very smart screen so cool event and got it on all screens just to make sure i'm going to go ahead and click on save and we've got that so we can now go ahead and check to see our edit screen edit screen gets highlighted we know it's on the edit screen it's on the top edit screen and i keep coming into the summary and it just works really well one of the things that i'm concerned about is does the back button reflect that because for example you know we were on the edits the you know the executive screen and when we click on it we know we're on the executive screen but if i go and click on the back we are on the home screen all right the home screen did not get highlighted let me show you what i mean i came back over here i am on the summary screen but the home screen is the one which is highlighted which means that template fill effect is not smart with that this item is selected formula that we used and that formula is something that i've been using for years and years so we've got to make this home screen which is the template fill effect as smart as how we've gone ahead and done with this effect over here so let's go and modify that template fill formula that we have so go back to our components we'll go back to our footer component and specifically the entire footer gallery and that is the formula that we've been doing is this in the template fill so what i'm going to do is i'm going to just comment this out i won't delete it because you'll always be able to compare what we've done and this is going to be now the new formula to make it smart i'm going to say if now this item dot screen and i'll just make sure it's intellisense picked up screen equals the app dot active screen then go ahead and give it this effect so i'll just copy it from top there and i'll change that so we've the from the original formula which was this item is selected i'm going to change it to this item.screen equals app.activescreen i'll do that and now it'll become really smart so let's go test that right let's go to the screens and now we'll go and do on this so remember pre for testing we got to make sure that besides the fact that the view screen which is the selecting me manually on selecting it even the back one should work which means now if i'm going to select the back one and if our formula is correct both the top color as well as the highlight should both be for the same item selected so check this out now if i go ah so it worked because remember last time the highlighting the template fill coloring didn't carry over using that back one so i'm going to select that uh it's working now all right so you see that big important back function which i talked about is that we were so used to stuck in our ways of using the this item is selected one that now we have to change our thought process we had to change it from is selected to active screen and it's working and it's working really well now the last thing i want to focus on over here is the option where and it's not so much as an option what's happening is that every once in a while you are going ahead and selecting this executive screen or you might go ahead and select you know an edit screen when you do that the screen that you selected sometimes gets moved away specifically not just the screen itself but in this navigation even though you are on the homes you know executive screen it sometimes the navigation will take you right back to the home screen over there it does that it doesn't always do it but it seems to have that effect but every once in a while the screen that you've selected doesn't actually show on the select over here even though you're on that screen and i want to kind of solve that by this one simple problem now i need to create a variable which will tell me which screen i'm already selected somehow i should be able to remember that screen so i can reference it and for that i'm going to use the galleries on select so check this out let's go to our components let's go select our gallery which is the footer one and on its on select i'm going to add this one set function so in the set function i'm going to say bar select for variable selected i'm going to say this item dot screen and that's as simple as that so that way i'll be able to capture what is that screen and then dot and i'll get the screen name so that way i'll be able to capture that screen name all right so now i want to come over here to the the gallery and then i go and select the default and in the default here is the formula that i want you to put in i put a lookup lookup collection screen nav comma and i get the screen itself equals var selected and i close it actually it's the screen dot name and i close it and this will now make sure that whatever regardless of wherever your screen is and regardless the navigation that is going on you will always be able to see that effect let me just explain that to you if i can get the demo so now if i'm on the executive screen even though the executive screen is way to the end this will not power over the gallery will not hover over to the left and you know kind of take you into the home screen for example it won't for whatever reason it won't default over to the home screen even though in the executive screen it basically will help you remember which screen you are in and the gallery will always show you what screen you are in regardless of its way to the back or regardless of its way to the front because on select we've made that as the default item of the gallery it will always show that screen both on the gallery as well as on the screen very powerful it's a very small little change that should make but it's a really powerful one because it has that effect wasn't that awesome we've successfully gone ahead and built a smart navigation menu using a combination of the collections components all in a gallery and it worked so well now remember walk through the entire thing step by step and don't miss anything because even if you accidentally miss that little property or the on select and you missed that variable then none of this is gonna work so hopefully this was helpful and as always keep using powerapps thank you so much for watching my youtube video remember this is all free with fresh content that is updated on a weekly basis so if you already subscribed to my channel thank you and spread the word if you haven't already subscribe click on the bell notification and let the learning begin

Channel: Daniel Christian

Views: 5,022

Keywords: Power Apps Smart Navigation Menu, Daniel Christian MVP, powerapps collections, powerapps gallery, power apps components, powerapps component navigation, powerapps components examples, reza dorrani powerapps, shane young powerapps, april dunnam powerapps, power apps navigation menu component, power apps navigation, power apps navigation bar, power apps navigate to another screen, powerapps header component, Power Apps footer, Power Apps Com, PowerApps Active Screen, power apps

Id: aXWJLf56rJo

Length: 35min 3sec (2103 seconds)

Published: Sun Sep 05 2021