PowerApps Component Framework (PCF) - Custom Navigation Component

hey everybody today i am going to be following up on our first video which was focusing on building out the navigation and now what we're going to go through the the process we're going to go through today is building that into a canvas component so one not only is it a great benefit to learn how to standardize something like this and go through the process of picking different pieces from your app that you can simplify and reuse but also we'll start talking about the ins and outs of canvas components so the first thing here is you can see we just added a few different things to our app we added a simple logo and a basic label or just header time management and what we're going to go through today like i said is bringing that into a canvas component and then copying that to each of our screens so in case you do not have the components you can go to file go to settings advanced settings and if you scroll down you will see components right here so make sure that this is on and then once you come back you should see it right here in the tree view next to screens so now in the tree view uh let's go ahead and create our first component and we will call this one sidemav and so when you create a component it takes in much more static values for the basic design of it so you can see here we can fill out the size within height and the general fill as well the customization capabilities these are just some basic properties we can adjust with them and then once we get into it i'll show you actually the custom properties that we will make so if we want this component to fit in our screen we'll need to adjust it to represent the size of where we want it to sit so in this case the side navigation here we have the backdrop rectangle we can copy the 263 and 768 as the size of our component and now you can see this has the tall structure like we had so it's easy enough thankfully uh just like we can copy and paste content from one screen into a different screen i'm going to hit control a or you could shift click all of these individually as well but i'll hit control c i'll go into the components and ctrl v and so just as we're able to take in the dynamic global variable menu navigation here we can still create and rather pass through this information into our component but we do have to set that up explicitly so if we look at our component and come back to that custom properties this is where we're going to start passing in different parameters for our canvas component to read and use for the ui so i'll go ahead and create a new one and this first one is going to be called menu data and the display name and name are just the basic references for this i could actually put a space there and you can see that this is more the internal name uh with the description table that contains menu navigation links and so here under property type is where we can start to see how we can change this to either be an input what is data that's coming into it from the canvas app or output what can we actually bring back out into the app for other components to rely on in this case we just want this to be an input and now we can choose the data type so we have a wide range here all the standard schema that for the most part at least that we have in powerapps and canvas apps in particular and so what we want this to be is actually a table and the reuse onset if we were passing this more dynamically from other values we would want this checked for the our case we don't need this checked right now so i'll go ahead and create and so when we create these input properties especially how the app starts to understand how to read it is by giving it a example schema of what you are eventually going to pass into it from the canvas so with the side nav here now i can go and look at menu data and this is where you can see that example schema i was talking about and so i'll go back over to screens and i'll go back to look at my global rather the collection that i made menu navigation uh here in the onstart and so we have the label screen and ref and so what we'll do is we can just take a copy of this again ctrl c go back to our component and let's just replace this existing one with that and so you can see the text fields it picks up easy enough the screen is where we have the first little quirk of the canvas components and that is because we don't have a way to reference a screen from the formula bar in and of itself so what we can do is actually use a workaround uh by creating another example another custom property that actually represents our screen so i opened up new custom i'll say screen reference and so uh property type will keep the same though we could probably change it but i'll change this one the data type now to screen and i'll create and so here in the screen what i can do is actually change this to sidenav dot screen wrap and now it's understanding that this is actually a screen and i can validate that by now updating my gallery uh so rather than pointing at menu navigation i'll point this at sidenav menu data and that's where you can see my home page i uh is coming from the table reference i gave it here so now i can actually come back go to my screens and so here through the insert tab is now the custom grouping i'll see side nav appear and i'll go ahead and enter that disappeared but i can put that over here just for reference and we can see thankfully because i copied uh the buttons here i already had the existing dynamicism built into the fill so this formula is still driving through the component uh whether or not this is the main item but we need to actually update this so the side nav once we embed it into the canvas we still have the ability to look at those properties since they are inputs so menu data and you can see it brings through the example data but we're going to replace this with menu navigation and now you can see the home page time entries project view what i can do here is now copy this to all the other screens and now you can see that that's on each different screen and the function that's running the buttons fill is updating accordingly now where the real value of this comes in is let's say the time management maybe i wanted to change the label of that if i was to do this just normally through uh the just collection of components i created if i change let's say the background of that then i'd have to go here change each of these and maybe accidentally i changed the label for this to be time management i'd either have to copy all of these over each time or just keep track and you can see that the chaos just continues however with my component example if i go back to my component and here for the rectangle i change that to the blue fill and if i want to change the label i can come back to the screens and you can see that that automatically changes and going to each one you can see that that kept the reference for all single one now we have the ability to keep this updating every single time and reduce the headaches

Channel: Kumo Partners

Views: 610

Rating: 4.6363635 out of 5

Keywords:

Id: lS1y5TacC28

Length: 9min 23sec (563 seconds)

Published: Fri Sep 04 2020