Canvas PowerApps Dynamic Navigation Tutorial - Part 1

hey everyone my name is storm anderson and today i'm starting a multi-part video series here to really dive into one of the first things i ran into that really gave me a headache from powerapps development and what that is is really navigation and more specifically that's standard navigation components that you have across your canvas powerapp so we're just going to jump right in what you can see here is i just created a basic canvas app in the tablet form that has three screens first one being sidenav drop down nav and the admin page which is just acting as another screen for the demo so how do we first get into creating this section uh to represent the side nav and there's many different ways we can do this for the eye but i always just like to carve out this section first with a rectangle this is really handy for just creating kind of basic structures and outlines if you will so i'm going to stretch this to the whole little corner here and make this somewhere around 260 width and even though i think this does a good job separating the blue versus the white uh just to make this a little simpler i'm actually going to change the side nav the screen's background fill itself to be light gray and then even though this looks still pretty good to me um i'm gonna make it even simpler and just make it white so now i have the area let's just put a label just to give us a little information and context main menu and so depending on if you're familiar with powerapps if we want to bring someone to a different screen or a new screen the way to do that is to use the navigate function so as i type here you'll see navigate the first property is the screen itself and then you can pick whatever kind of screen treasure transition you like uh you can maybe dive into the weeds and figure out the cover and uncover back and forth but i'm just going to keep it simple and fade and then just to give it a little more information uh let's give this side navigation a label of side navigation view now this is pointing at the same screen so this really isn't too handy to show and test it but if i wanted to now expand this right i would maybe copy and paste copy and paste and then go one by one updating each of these buttons and so the next logical step here is once i've updated each of these buttons and changed the labels i would then have to copy all of these buttons go to the next page update here go to the next page but let's say i forgot to update either a label or some ui ux behavior i would then have to delete all of these from each of these again come back to the main one update that button recopy and you can see where this is just slowly turning into uh very redundant painful behavior you're trying to be more agile in what kind of ui ux behavior you're looking for so let's skip all that and look at how we can standardize and make this ui uh the nav drop down or excuse me the side navigation buttons are more dynamic and so how we can do that is rather than having each button have its own representation of the label and the screen is pointing at we can instead create a global or rather a collection that will store all of the different information we need and so we're going to call this menu navigation and we're going to create our own record schema that is very similar to what we just used right so the button needs a label so then this can be side navigation view the button needs a associated screen and in this case the first one is sidenav and something i'll explain once we uh get all the buttons created is we need a reference of the screen name but as a string and so you can just copy and paste and put it in quotes and like i said i'll show you real shortly how we're going to use that so now that we have our schema let's add two more just to represent a little shorter and i will call this the now i'm just going to update each of these you can see all these show up in intellisense which makes it pretty easy for me to just fill this in admin and close it up and there we go now we have our own menu navigation whenever we make changes to onstart always make sure to rerun your onstart function and now that we have this data you can double check that by double clicking and we can see that's all here now we can go ahead and implement the dynamic buttons and how we're going to do that is by inserting a gallery so i'm just going to size this roughly to about the same size here we can adjust this and so with the gallery uh the main piece of course is the button going into the gallery so let's just control x come to the gallery we'll edit the card and i will control v and now we have the button and you can see that it's dynamic based on uh the collection of items here oh man i forgot to change this to menu navigation there we go now there's three so two things i on the gallery i'm going to keep the padding for now i think that gives it some space but i am going to make the template size the same height as the button in this case the button is 46. uh let's meet these in the middle let's say 50 and for the gallery now we'll bring the template size down to 50 and you can see that that auto adjusts everything for us but the button still needs to be updated so first let's go ahead and update the text we can take out that static string and now use this item.label we can go to the on select where we have the navigation and now change this out for this item dot screen and for the third piece uh when we want to use that ref how we're going to use that is actually in the fill property of the button and so what we want to do here is if the button is representing the current screen that we're on right sadness side navigation view would mean side nav drop down drop down nav and so on we want to show that that's the screen we're on to help the user understand just from a ui and ux standpoint and and guide them along a little bit easier so a great way to do that is to make the fill or the display mode of the button more dynamic so we can do that and by saying if this item dot ref equals and in order to get the current screen we can use the global app dot active screen and we can reference the activescreen.name comma and i have just a simple formula which pretty much takes the same color we had before the blue and then makes it a little bit lighter uh just to create some kind of ui difference and now you can see automatically the side navigation button highlighted and because we're on sidenav we don't have this on any other screen just yet so let's go ahead and move this also make my menu a little bit larger that's better so i will copy all these items ctrl c let's change the fill on these other screens really quick so i'll change the fill control v i'll go to admin change the fill again to help us distinguish control v and now if i play you can see admin view drop down nav we're on drop down now side navigation we're on site navigation and that is how we do the basic structure for a dynamic gallery so the next thing we'll cover is how to actually implement the drop down navigation uh using a similar approach here so let's go to the drop down nav page and we can keep these other screens for now let's go ahead and take these components out just for the time being and all right if we want to start from scratch here we can now again add another rectangle again rectangles are one of my favorite ways to distinguish content like i said uh for a top nav i typically go for somewhere around 56 just to give us some space with some of the other out of the box components and so when we want to present the dynamic gallery let's actually go and copy this back and then we will come back to our drop down now and let's just place it where we about want it for the moment so there's two things here just like we adjusted the template size to represent the button when we have this drop down and if we make this white just to distinguish it you can see we have all this extra space and that's because the gallery doesn't know how many items is in it it's simply just allowing us to drag it and set a static representation so let's make this dynamic just as we made some of the other functions of the button a little more flexible and how we can do this is for each of the template size which is 50 we can say 50 times count rows menu navigation but it doesn't cover all the way and that is because this padding really kind of screws us up here so for this case let's just take it out and you can see that now it's not bringing the scroll but we need to adjust the button just to take up a little more space so now that we have it displaying one problem is if we always have this displaying it's going to cover up other content and if this gets longer it's going to eat up space in the ui so the better way to approach this is to make this appear and disappear also in a dynamic fashion and how we'll do this is we will use a button an icon would also work as well if you wanted to present like a menu navigation button but i like to take this approach because it's an easy way to present the user so we can use the global user function and then access the full name and you can see now that that displays and for the on select for this we're going to create another variable but this time we're going to use set instead of a collection to say show drop down nav and we're going to just make this toggleable so we're just going to set it to the opposite of what it is using the exclamation point so now as i click this it'll change but we don't have the display of this hooked up so we can go to the gallery we will go to the visible function and now we can use our show drop down nav i can go ahead and play and you can see that this will now appear and disappear and if i click it it still works in the same behavior the one thing i would add here is as you can see as we're switching through screens where the side nav is always kind of displaying we want this to go away once we navigate here assuming that the person navigated to where they wanted to go so one thing we can do is just as we set the state with this button we can actually go to the screen itself we can use the on visible and rather than setting it to toggle the value we can just say false that one more time set and so now we can click my name go to side navigation i can come back and you can see that it's away as a final little touch uh i will show that if we add the image as well and just put that in the top corner here won't spend too much time but we can place this right here on the button that's holding our name i will take off the border radius and let's actually add some more padding to the left hand side and now i can set this to user and rather than email or full name i can put image and once you start loading the app uh the and if you have an image set it'll actually start showing up for you the one thing is finally just you'll notice that i can't click the image so one quick approach here is for the images on select you say select in this case button 4 which represents the button we just created so now if i click the image it still opens the drop down navigation and there you have it there are two of the common side navigation and drop down navigation example approaches and i also showed you how to do that dynamically so that now even though the buttons and the larger piece still has to be copied now at least we're controlling that if i did need to change any one of these values navigation let's call this maybe i rerun and now anywhere i go that's automatically updated which saves us a heck a lot of time and makes our lives a lot easier so i hope you guys enjoyed it if you have any questions or feedback i'd be happy to hear it in the comments otherwise looking forward to the next video thank you

Channel: Kumo Partners

Views: 2,796

Rating: 5 out of 5

Keywords:

Id: Xu1nwcKwtro

Length: 16min 7sec (967 seconds)

Published: Thu Jul 30 2020