Intro PowerApps Components including Input and Output properties

in today's show we're going to talk about power apps components so components allow you to have reusability within power apps so we will look at how we're gonna package up some different controls to make a menu navigation and put that into components we can reuse it and then we will talk about how you can push data in and out of components so a lot of flexibility and a lot of really cool power here but first here's our intro hi my name is Shane young with power apps 9-1-1 those guys in today's show is all about power apps components so what we want to do is we want to take and explore this experimental feature right it's currently March of 2019 so it's still in the early stages it's been out for a couple weeks now but what we're going to do is we'll go make sure you understand it and so you can start diving in and playing with it so that hopefully you can incorporate it into your apps as soon as it goes live in production and don't worry when it does become the published final version I'll make a new version of this video and there'll be a link below so if you're finding this you know months from now and you're like wait it's not experimental anymore that's okay my little video will get you there anyway so what the idea is is that in power apps we want to build different things we want to reuse them right so we have a lot of logic that's unique to our individual individual app or to the different buttons but sometimes you're like hey you know I have the same header at the top of all these or I have this really complex control for doing like geofencing or for doing some other type of cool thing and I want to package that up so I can reuse it multiple times within the same app or even take and export that off to other apps so that's what components are all about so we want to do today is just kind of walk you through how they work make sure you understand kind of what they do give me some pointers and then at the end show you you know some really cool examples of ways you might use them all right so let's just jump into my desktop and dive right in okay so over here I've kind of started to put together an app right this is pretty typical we start with kind of this consistent header right especially a lot of you people who are building them for yourself right inside your own company you've got the same kind of header footer different navigation elements you try and put all your apps or if don't you should because that gives users a level of comfort with kind of the alright I'm in power apps I know where the menu stuff is I know how this kind of works and it just gives that a little bit of sense to brand it makes power apps seem a little better so if you haven't done that today then you should but so here's one I quickly mocked up all right that it really doesn't do anything but you can see I've got a company logo up here I've got a purple bar just to kind of do the space I typically need a back button or all my screens so there it is and then we've also got you know the name the date and a picture of my pretty face because who doesn't like seeing my pretty face right I think every app chef picture my face no probably not okay but so these are an ideal situation of where we might invoke components so with components what we can do is we can take and turn this into one modular piece and then use that on all the other screens right because today think about what do you do you grab all this you're like alright let's highlight all these things I got that right you do control C you jump to your next screen they do control V alright you gotta pull us up here but if all of a sudden any of the logic needs to change then you know you're like oh ouch every screen right you know they they don't want another date anymore so you gotta go to every screen and change that it can just be a lot of work or your company logo changes oh so much work so what we're gonna do is look at how components make that better so the first step of components is right now because it's experimental so when you go to file and then we can go over here to app settings and so under advanced settings so remember preview features these are features that are coming to the app very soon right they are on the cusp of being primetime everyone's going to get them these are typically turned on by default even so you should be really comfortable with these right so preview features they're there they're right there but if you keep scrolling down here then you get into experimental features these are typically off by default and so these are ones that Microsoft is still working on you know they might be on the road to get released but there's some little features keeping them from actually moving into preview or production today and sometimes what you'll see is that things will change a little bit between the time it goes from experimental to preview to final and it might go straight from experimental to final right it my name's skip the preview step so I only point that out to you too you know you probably shouldn't be using an experimental features in production I'm guilty I've done it before and I got bitten the backside by it a couple times and it worked out just fine in a couple other time so try to tread with caution here but when it comes to components I am personally not rolling them into my Production apps quite yet but I'm using them a lot so I can start to understand them because they are so powerful and I think they're fundamentally gonna change the way that power apps works so down here at the bottom there are our friend components we're going to turn those on so stay on and so when you turn them on you're gonna see that there's now a new option over here on the right called components and then over here on the insert screen we have insert and components here as well so two different kind of ways to manage those but so now that we've turned those on let's go over here so you click on the components so I don't have any so we're gonna say I want a new component and so when it gets created over here you get this little blank square right the idea is that we're gonna go and build our controls our functionality inside of there now you'll notice it by default name is 640 by 640 I made the mistake the first time I play with this not really thinking about this but do you have complete control so for example right now my app is size 1366 so that's I'm gonna go ahead and change the width and we'll leave the height alone just for a second all right so there's a new blank canvas to build my component on so let's go here screens and what I'm gonna do is remember how we copied all this stuff a second ago let's copy all this again jus like so ctrl a ctrl C oh nope not everything right I don't want these pieces I just want the top stuff all right try it again ctrl C again so switch back to my component and so I'm gonna put these over here now I could just start putting pieces here myself right I just happen I'm doing the cut and paste because you guys don't wanna watch me do all that you know how bad I am at making things look nice and it might take a week but so now that that's over here I can see that the largest height of one of my objects is a hundred so now I'm gonna change my screen real estate to just be a hundred so my component should become boom 1366 by 100 so it's the right size now I could adjust this stuff one thing I'm probably definitely I do is rename this one call this my header like that and so just like that we have our own component cool so let's go back over here to screen one let's delete all this stuff off alright so that was all of the individual is twelve or so pieces and so then now what I can do is I go up here to insert right so I'm on the insert menu and then components and they're gonna say insert header look at that everything came over but notice here I can't click on the individual I can't move things around I can move the bar around but I can't move anything inside there because it's a package and it's just going to reflect what's in there so for example if we jump back over our components right oh you know what I don't really want to see Shane's face and all of them and really it's not Shane's face what I really did I know you people were worried about me is I did user damage that way the user was always seen their own face a lot of people like that but say that you don't want that say that you want to make your app really ugly so what you might do is just change everybody's page pace to look like let's see where is he how about clay so oh now the app is really ugly right but now we've changed our components so clays face is shown for everyone because clay likes to be like that and so we go to screens and then there you go now you've got this here and right if we go to another screen so let's just clear this one off control a delete and insert a component again alright so now we've got the same header on every single screen thanks to clay and his team's hard work that's why clays being featured here but so but we now have the ability to just take and consume this component in all the places right so that's step one components it's just visually make something add it in your app and then everywhere that you want to use it you can take advantage of it boom right so we do another new screen right just for giggles and then we just say hey components oh no I'm sorry screen and then now we'd say insert or header component boom we've got the same consistent thing well my boss yells at me for making clay the the focal point of this video which she's been known to do then we can just go back here and change our formula back to user dot image and in just a moment we see my beautiful face whoo probably shouldn't use Chuy's face but yeah Clay's a good sport alright so that's step one just reusing controls okay but with components you can also do in and out so let's look at how we would do in so for example when I was looking at this I was like you know what the thing I usually do in my header bars is I end up having some type of light tell them what screen they're on right and so I thought well okay so one way I could do that was insert a label here and just lay it over top of the component that would work but that doesn't seem cool we want to do cool so I'm going here to components and what I'm gonna do is I'm going to say I wanna insert a label here so I'm going to grab this and kind of put it right here and let's see we'll go to the home screen we'll say alright let's make that text like 24 let's make the color white okay so that gets us a text label there so then now what we want to do is we want to introduce you to how you input the input properties of component so click on your component over here some my case header and I'm gonna do a new custom property and I'm gonna call this header text like that I'm gonna make the name header text like so and I probably should put a description words and so then if you scroll down here it says alright what do you want to do I went to an input and then what is the data type and then here all the different data type options so I can pass texts and numbers and colors and screens and all types of fun things we're just going past text right now but sort of us say create okay so then now we have the header text custom property so if you go to this label and say alright label for your text way down here at the bottom what I want you to be and this is one thing I struggled with the first time but I want you to be header one or sorry header that's the name of oricon or component dot header text and so what happens is to make this a little easier for you to visualize they pass some default data in but now that we've got the header text there alright if we go over here we see text but if I click on my component and hit the drop-down there's head Tech's and so I can type you know Shane was here oh so that works but what happened well I didn't really think about the sizing no big deal the beauty of components all right so I'm gonna go over here what kind of resize this to be like this maybe like that and we'll set it to be centered so we just made one quick change and then now Shane was here is right there in my app and if I go to another screen it still says text because each instance of the component notice that this is header underscore one a header underscore two right there each unique so I can click on header underscore two and then I can set the header text here to be you know screen - and so then adjust like that we have gotten the the ability to have flexibility right so I could repeat the same thing here but so that's one way we can look at pulling values in right so we can pass properties and it can be that all those different types over to the header and then consume that and then each one's gonna be unique so we have a lot of control there man my wife's blowing up my phone mid recording how rude okay so what I want to do though real quick also just finish this idea of the input because the other thing that I quickly realize right something right now I'm using this back button up here and so one of the neat things I didn't realize until just this morning was it another one of the custom properties so if we go in here we're gonna call this destination screen and so we'll call this ring a pressure call it the destination screen but you know what do you do a destination screen and so for input and so then right down here right we've got the ability to use a screen and this is one of the things I always remind people especially in their first morning power apps is plant seeds right read this list of things that you can do five or seven times you might not need to pass an image right now or for the next year but it's good to have in the back of your mind and that's what happened was I read that a screen could be passed but I didn't catch it the first time it wasn't until a couple weeks later as like oh you know what I could use that to make this video better so so there's my screen will say create so then now we'd go here to this button we'd say alright on select you would navigate and we would navigate to what header dot destination screen and then right now we'd do a screen transition cover and so then once again we would go over here and so we go to like to another screen here and would say alright your destination screen is not the current active screen that seems silly we want to go to welcome screen we pass welcome screen and so then now if we click on that button boom cool alright so play with that right inputs and inputs are pretty straightforward so I don't want spend too much time on them but I think they're important understand because that's the first idea you have it lets push data in there but so then now let's get really fancy okay so let's make ourselves a new component so I'm gonna go over your components and new component and so we're gonna do is real work on getting data both in and out real quick though so we gonna make yourselves like a generic calculator will call it generic calculator all right so the first thing I'm gonna do here is I'm gonna insert a label and I'm not gonna mess with all the sizing and stuff right you got to see me do some pretty stuff get over yourselves this one's gonna be ugly so what I'm gonna do is I'm gonna say I well the generic calculator in this label I need input okay so we'll go back over here we'll say new custom property and we're going to call this number in all right very very cool names number in and so then that's gonna be an input and we're the data type is going to be a number easy boom so we'll go right here and then we're going to change this to be generic calculator dot number in okay so that way we can see right and so maybe I do something is and say you gave me something like that okay so that way we can see the number that came in cool cool make it a little bigger because easier if you guys read all right you gave me a hundred and so then what we're gonna do and right worth a hundred comfort remember that's just those sample pieces of data they give us to work with so though now we're gonna throw a button on here and we're gonna say I'm gonna do this one say x 2 or x 3 all right and so what I want to do here is if you click this button I want to take the number they gave me and so we know we get to the number they gave me by what like this so generic number right boom so take the number they gave me and then we're going to multiply that by 3 okay but that's just doing the math but not doing anything with it right so what do we need to do when you put that in a variable so set the bar new number okay so that is going to set a variable var new number to whatever number they give me multiply it by 3 so I'm going to throw a important understand though is that that variable variables that you create inside a components are trapped inside the component so the rest of my app does not save our new number only inside the component is var new number a valid value okay that was a little weird for me at first so I want to make sure I point that out to you this global variable as we've always called them is now global to the component not global to the whole app so go with me so then how do we get that number that value out how we get var new numbers value out of here glad you asked so we're we go to general calculator we're gonna say new custom property here and we're gonna say number out of course because you know why not continue my string of bad names so number out and you guys should put descriptions in here I'm just being lazy but so now we're going to choose output and we have the same options here right so we're going to choose an output of a number I'm gonna say create now how do you get that out of there this was like one that I kind of scratched my head on that's why we're showing you in this video so if you go over here to advanced number out so right now you can see this is where you see those default values we kept talking about what you can do is you can change that to be var new number ah see what happened there so number in right it's just the values getting passed from the app but the numbers we want to push back based on work that we do inside of here we're gonna use a variable or some other type of means right we need to specify that value we can't just say hey button go change that field we need to say button change a variable or change a label change something that we can specify or reference in now right here okay so what we're going to do now that looks like that should work bring the bike over here we'll go back to this screen we're going to insert our generic calculator so there you go you can see why you should sighs these things because that looks wonky but so then now what I'm gonna do I mean to do that whoa what am i doing I've been drinking guys I'm sorry pull that up here alright so then that looks good so then what we're going to do is we're going to insert an input I will use a slider so controls a slider pull it down here alright it's this slider can be anywhere from 0 to 100 and so we're going to click on our component and so the number in right notice number out is not specifiable so number in is going to be slider 1 dot value alright and so if we change our slider you can see that the component is getting something different in there and then what we want to do is we're gonna have a label right here and let's see we'll call this calculator says and then what we'll do is we'll say Amber San and then we need to know the name of this instance of the component so generic calculator underscore 1 so we'd say generic calculator underscore 1 dot not the number in but it's number out okay so if I did this correctly then if I click on this it should multiply 3 or 39 times 3 117 all right let's do a number that we're all more sure that we got right 11 times 3 should be 33 and so then now you can see we have built ourselves a very entry non-practical but but showing you the concepts calculator of getting data in and out of a component so I one make sure you guys understood getting in and out a couple of things watch out for remember this is experimental so don't put this in your apps quite yet today but start playing with is important to learn and test and figure out the things that you can do also there's a bunch of little nuances that you'll kind of have to start learning like talk about the variables alright how this set the global variables global inside the container not the whole app collections collections are still for the whole app so that becomes a little weird there's a bunch of little nuances that you're going to kind of learn so to that end I think to help you better learn there's two things I would recommend so if we go over here and we go to we want to search for power apps blog components and so here is a blog post it kind of did the introduction on the things it also has a video by Brian dang a couple different ones he talked about importing you an export import and export components as well so it's important to know so that's a great resource for you to kind of go because right here he's got some of the things like the data source is not being saved you got some of the nuances that they know about right now there are a few current limitations but they're gonna get all those sorted before we get there also over here on the blog is I think if we go back I should have just already had this open but I didn't if you go right down here my good friend Mehdi whereas he he already made ten reusable components so he's got things like a map control radial thing a geofence control geofencing you guys have asked about that before and some other different ones so he's got some really complicated ones they are great but you can go download those out of github bring them into an app and start to understand and see how he wired that up it's a great learning opportunity because reverse engineering work of smart people like him really helps you kind of get to better health foothold release so hopefully this helps you guys out this was a lot of fun i long-overdue i should have made this video we to go but I've been busy at the road I'm sorry also quick shout-out to the power addicts right so I fell about my power addicts mud so if you haven't checked out the power addicts they are just a group of crazy people on Twitter I'm one of them who we just love power apps flow power bi that whole ecosystem so a great group to check out last thing and I'll quit talking I promise our training classes right so power apps 9-1-1 we do four or five day training classes with this guy and right now we're doing a promo or if you sign up for training you get a free $50 gift card but if you sign up and you mention youtube i'll double that and give you $100 you gift card so let's your boss or whoever pay for the class you get the hundred dollar gift card to you know buy yourself snacks and things since you know it's a virtual class taught online that's what it's for so alright thanks and have a great day hey it's me again if you got a sec and 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: 44,275

Rating: 4.9562044 out of 5

Keywords: PowerApps Components, Power Apps components, PowerApps911, PowerApps, Components, powerapps components, microsoft powerapps, powerapps tutorial, shane young, powerapps reusable components, powerapps reusable code, powerapps reuse code, powerapps component input, powerapps component output, shane young powerapps

Id: AqZkUQ78e50

Length: 23min 31sec (1411 seconds)

Published: Sun Mar 31 2019