Get Started with Power Apps Component Framework (PCF)

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
>> Our next presenter, Cassie Breviu, has a really cool background because she comes from a data analyst citizen devs background. Today, she has moved on to becoming, I would say, traditional coder. She does a lot of work with C-Sharp and TypeScript. Today, she's going to walk the lines between the dev she used to be and the dev she is today and show you an end-to-end fusion dev project where she is going to build a TypeScript PowerApps component, build a PowerApp and then pull the component into it. I'm really excited to see that because that's exactly the thing that all of us devs should be doing in our companies, making the right components, making the right connectors, so that all of our business analyst teams can do their good work, understand the business, build the right front-end things they need to do their job while we build like the org charts, the expense tracker slider thing, all of these backend pieces that we're good at, that are highly reusable or non-reusable and that way all of the business owners don't ever need to worry about it. >> Do you want to hear a cool story of I met Cassie? >> Yeah. Tells us. >> I went to a conference called That Conference in Wisconsin Dells. I love going to the Midwest for conferences because they are so cool. It feels like you're with family and stuff. I gave an AI talk and sure all the dudes lined up and were like, "Hey, Seth, I have a really good idea about how to use Machine Learning for doing a stock trading, I'm like, "Tell me. No has ever said this to me." >> Did Cassie save you from this terror? >> It wasn't her. Then other people that are like, "Aren't you worried that the robots are going to kill us?" If you were here for the last segment, you'll realize that it's not robots. It's basically linear algebra and calculus. That's it. >> The robots though are here to kill you, just letting you know. >> Well, agree to this. There's some robots that I'm okay with. So anyway, she comes up and she's like, I don't remember what it was, but it was something similar to this. "So how do you adjust your learning rates when you're doing actual machine learning? How do you know which models to use, you know feature engineering?" It's like "This is cool. Finally real questions from a professional data scientist" and I'm like, "Awesome. This and that and I'm like, "How long have you been doing data science?" She's like "I had to pick it up over a couple of weeks because of this project I was doing" and I was like "You did in three weeks what I went to grad school for four years for?" She's like "Yeah" and I'm like "All right. I'll write this down because we need to hire you" and we did. >> Wow. That's cool. I did not know that. >> Yeah, it was pretty cool. People sometimes after a talk, they come up to ask questions because they want to like, I love people feeling important. I'm going to make you feel important if you talk to me because everyone's important in my opinion. But there's other people that come up and you're like "This is like a legit. They have actual questions." Then there's the dude bros that like statement ask a question to show they know a lot of stuff. She came up and she was like I have this and this. I'm like these aren't actually "Holy cow. You got great questions. So what's your background? Where do you go to school on?" "I picked it up over a couple of weeks" and I'm like amazing. So that's my story of Cassie, who's fantastic. >> That is fantastic. Speaking of Cassie. >> How am I supposed to live up to that introduction. >> I know, you've got to, and it is the truth. I remember still. Was it two years ago? >> Yeah, I think it was two years ago now. >> Look at that and Cassie has a guitar in her background too. This is like the theme of the conference that I didn't know about, where everyone has guitars hanging in their room. >> I was going to bring mine and do some song-ing, is that what it's called? Song-ing. But I feel like we want people to continue watching and also LaBrina pointed out, Taco bot would never hurt anyone, and I am a 1000 percent in agreement with you LaBrina, any Taco bot, I would be a fan of. >> All right. Now we're going to let Cassie have her moment and Seth and I will shut up for the next 30 minutes. Thanks, Cassie. >> So welcome. I don't need to introduce myself since I've gotten such a lovely introduction from some amazing people that I'm lucky to work with. So today, as we talked about, we're going to be looking at creating code components with the PowerApps Component Framework. So as I talked about, my background is in both.Net, so I started as a Fullstack on Software engineers start getting to an AI, and I play with TypeScript to node and pretty much like anything, I can get my hands on. Let me share my screen here. So first, let's go over the agenda of what we're going to be covering today. So first, we're going to talk about what are Power Apps, just to make sure everybody's seen them. I'm sure we've talked about it a little bit already, but want to make sure everyone's on the same page. I want to talk about the PCF on CLI, which is the PowerApps Component Framework, CLI. Then we are going to be building a code component from stuff to an end and then we're going to add it to a PowerApp. So let's talk about some of the tech that we're going to be using today. Some of you may be really familiar with this tech here and some of it may be new to you. So you type what we're going to be using PowerApps Component Framework and that has a CLI that we're going to be using. We're going to be using NodeJS. VS Code will be our IDE, we're going to be using TypeScript and Windows Terminal. So if you haven't used TypeScript and maybe you come from a C-sharp background. TypeScript is awesome because it gives you optional static typing to JavaScript and so it's really what made me start to love doing front-end development was when I could start using TypeScript versus JavaScript. So if you come from more of that C-sharp background, I think you'll like that. Then Windows Terminal, which is a command-line front-end. So what are PowerApps? So PowerApps is essentially they're low code or no code ways that allow you to build business solutions. So you've probably been hearing about these fusion developers and citizen developers versus traditional developers and were all developers were all building a solution coming together to make our business work better. So I love that these definitely empower people to build. Like they said, I came from a data analyst background and I started building stuff in Excel Macros, actually was how I wrote my first code. So I also think of them as like a development or too traditional development. I used to work at a company and a lot of times we have different requests from the different business lines and they'd stack up and the businesses would be waiting for maybe a change in a label or adding a field or maybe a full application and they have to wait till we had a development resource. So PowerApps are a really cool way to enable and empower PMs, VAs, to be able to solve their problems. But sometimes when you're using out of the box solution, you have custom needs and you need to build something custom in order to get it to work for you. That's where these code components come in. So you can build a custom code component and add that into your PowerApp to better suit and make sure you can customize the application that you're going to build. So let's take a quick look at PowerApps if you have not seen them before. Here's the Home page where you go to build a Power App. You have the different data connectors that you can use here. You can select an app to create it. Then if we click "Create" on the left-hand side here, we can see some different templates that are available. The cool thing about starting out is having a template and reverse engineering things. You could start with one of those templates, start seeing how it's built. But I'm just going to go ahead and create a basic app here or a blank app. We'll leave the template as a tablet. Then this is going to go and it's going to create my development environment, and we can see how we would start building out an application. Here's my blank environment. If I go to Insert at the top, you can see the different ways that I can insert a component. We're going to be using that custom. Then also on the left nav, we have ways to insert components as well. Let's talk a little bit more about the code component framework. Again, as you're saying, it allows you to create these reusable components customized to your needs. The cool thing about them is it's going to be using things that you're familiar with. If you're already a web developer, you can use JavaScript or TypeScript. If you're using React or Angular, you can use those as well. You can also share what you create. So we have this PCF gallery. When you're using React, is that a lot of times you have different components that you can go get from the community and add them in your application. Well, we have PCF gallery and you can do that with code components as well. That I think is a really awesome feature. If you do end up creating one, make sure you share it with the community as well. The code component has three main elements. We have our manifest, and this is where we're going to describe the metadata for our component. We have our implementation that's going to be in our indexts, that's where all of our logic is going to go. Then there's a lifecycle in order to be able to interact with the Power Apps component framework. We have some methods that need to be created. There'll be created for us in our project through the CLI. Then there's different resources. We have our CSS, if we want to add our business, our custom CSS. So it goes in line with our style guide or with your style guide. The code, the images, all that good stuff. Here are the methods that are created for you, pretty standard when you're thinking about building applications. I like to point them out even though like I said, it gets created for you. But just so you're aware of that and then how that interacts with the component lifecycle. Here we have a nice diagram where you can see how the init starts and how that's interacting with the host, and how that's going to be updating view, which allows you to build this component and then plug it right into your Power App. Let's build a code component. We're going to be building this slider component, which is a pretty simple component, but we really want to highlight the different ways or the process of creating the component. If we go back to our Power Apps option, and then we're going to open the Windows Terminal. I'm going to open up a terminal that I've already created with the directory that I want to be in, and I'm going to make this a little bit bigger. This is the Windows Terminal that I'm using here. I'm going to make the directory for the linear components. Then I'm going to go to that directory. The next thing I want to do is the PAC helps. So PAC is how we access the CLI or the CLI activation, and then we're going to do dash help. So one thing that when people are starting to use CLIs, sometimes it can be scary if you're not someone that uses CLI. For someone that is, you're like, "Yeah, I know." But if you're new to it, help will actually tell you what you can do next. We can see that we have the PCF Power Apps component framework, and we can see that we have solution. Those are two of the ones that we're going to want to be using. But it's one of those things that I think helps. You don't have to memorize every command. Obviously when you use them a lot, you do start remembering them. I'm going to do PAC, PCF, and then I'm going to do help again. It's going to do it with this one, so you can see how you can step through each step. Again, you can see I want to init. So I want to initialize the directory for my app. I'll do PAC, PCF init. Then I'm going to just paste in the namespace, the name and the template, which is field. When I hit "Enter," that's going to initialize my project for me, and then I'm going to do NPM install. If you're not familiar with node development, NPM is the package manager for node. When I do NPM install, it's going to look at my package.json, and it's going to go and it's going to grab all of the packages that I need to run my project and install them for me. So it's really cool. NPM is again the CLI for node. If you haven't used it much, it's one of those things that when you start using it, you start to like it more and more, I think. So we got our packages installed. Now we're going to go to code dot, and this is going to open up our VS code instance, and show us the project that we just created. Cool. If we look over to the left, I'll click through these quick and show you the different files that were created. We have RPC config, which is our directory, the package.json that I was telling you about, our project. Then if we go up to the folder, we can see our main logic for our application. If I go to the manifest here, this is where we are going to describe that metadata that we were talking about. We have our control, which has our namespace, our constructor, we can scroll over a little bit. [inaudible] ignore my update. That needs to be done. Then you have the display, and then we have the property here. If we scroll down, we can take a look at the resources. You can see we have the code resource, which is going to the index.ts, where we're going to write out all of our logic, our CSS. But what I'm going to do is actually just paste in what I want it to look like for our project. I will make this a little bit easier so you can see what changed here. So we have our display key that changed. We have our control type and our name. Then you'll also notice underneath that we have this type group. We want to define the different types for our property. In there, we have created a group. So we have multiple types available. You can have a single type. There's other types than just this. But then when we define our property metadata, you can see that we assign the type group to it. We can assign if it's required, and so all that information that our component is going to need. Then in resources, you see we have added this CSS, but that does not exist yet. So we need to go over here and add it. I will click "Add Folder," I'll create the CSS folder, and then I will create the CSS file here. Again, I'm just going to copy and paste the CSS in here for this component. It's super basic CSS. You could, again, make it whatever you need. Let's go back to index.ts and take a look at our main logic here. Actually, let me wrap the text here so it's a bit easier to see. There we go. We can see the functions, we have our init function here. We're taking in the context for the component framework. We have the update view, the get outputs, and the destroys. All those methods that we talked about, they're created for us along with some lovely comments for helping. But I'm just going to copy and paste in our logic, again, here to keep things moving. Ignore those red squigglies. I know as developers that stresses us out. But when we do an NPM run build, those will go away. Let's take a look at what we've created here. We have our value, we're adding our HTML elements, and I'm able to add the type since we're using type strips. Then call in and telling it's a div or an input or a label. Then if you keep going down here, you can see that we're going to then create that, add it to the documents. Then we're going to be adding the different attributes. So we have our input, which will be our slider, and then our label, which shows the number. You can see all the normal class ID attributes that we have, your normal HTML attributes. I'm just adding them here in our init. Then you also have a terminal in VS codes. If you haven't used VS code before, we have this integrated terminal that we can use and we can just do an NPM run build. That's going to create my output. If you remember that outfile, if you look on the right, we now have an out, and that's going to have my bundlejs with all my logic and everything that I need to run this. You can see now the main logic, we added this refresh data. That's a new one when we pasted it in, but you can see how simple it can be to create a component and add your custom logic. If we look over here in the out directory, like I said, we have our bundle.js. Yeah, not scary. Now we're going to do npm-start and we're going to start this project. We have a test environment that allows us to run it locally and test it out and see if it looks the way that we want. We can make sure that the value is being passed to the framework as we want to see. It gives us a really cool way to just do that without having to import it or anything, and test it there. So there's our slider. We can see the value for the data output over there. We can see the height. We can see the different types that we added. It all looks pretty good to me. So now that we have created our component, we're going to create a directory for our solution. We're going to go to that directory location, and then we are going to use the PAC component or CLI solution init. I'm not going to go through the help each step here. You could do that if you needed to, but I'm just going to go ahead and type out what we want. So we want publisher name, and that can be whatever you want to have your publisher name be. I'll just do MS Learn, and then we'll have our publisher prefix, and I need to add a dash there. Then I'll just do MSL, and then I'll hit "Enter." Now, this is going to create my solution project that I'll need to edit. So we can see our directory, we can see everything was created. Awesome. Now we want to add a reference to the component that we just created. We'll do add-reference --path, and then we will grab our path from here, copy that and paste it over here. Now we want to run an MSBuild, and so this is going to build our solution. I've configured my terminal in order to be able to use that command within it. You'd have to add it to your path variables in order to do this. But if you're using Visual Studio, you could use that terminal, I'm pretty sure that one is already pre-configured for you. We can take a look now. If we type explorer. , that will open up our current directory in our location. If I go to the "Bin" and "Debug", I can see that I have my solutions.zip, which is what we want. So I'm going to run another build here for the release configuration. You can have different configurations in that manifest. If I go back to "Bin" and click on "Release", you'll see nothing because it's still building. Now we can see that we have our zip created. If we go back to PowerApps, we got to do a couple of things. Actually, let me click on "Solutions" here quick, and then let's click on "Settings". Then I'm going to go to the "PowerApps Admin Center". Here I want to enable using the PowerApps component framework for my application. I can go to my environment, or from my environment, I should have said, click "Settings", and then in Settings, we'll go to "Products". We'll click on "Features", and then, in here we can turn on the PowerApp component framework and hit "Save". Now we can import our component. So if I go to "Import", then I can import that zip that we just created. I'm going to choose the file and search for that directory. So you can see how you can quickly go from a CLI, you're editing your project, you're updating your logic, you can test it directly in it, and then you are creating this zip solution, and then you're able to add that in to your solution. Now, anybody that goes and creates a PowerApp can use this component that you created. I think it's pretty neat and I love that it also can be maybe the first time that you start playing with TypeScript. Maybe you've been playing with PowerApps and you've been thinking about doing some work on traditional development and code. This would be a really cool way to start learning how to do that and learn more about the web development. Let me refresh here, and then I'm going to go to "Solutions", and we can see our custom control that we just created. If we go back to our PowerApp, we'll go to "Insert", and we'll go to "Custom", and then we want to import that component that we created. We'll go to the code components, we'll select it, and then we'll click "Import". Now, when we go over to the left here, we can click "Add". We'll see the built-in components, but we scroll down and now we see code components, and we can drag and drop that onto the canvas. Let's move this over a little bit, and I think we need to maybe zoom in, make that a little easier to see. So there we can see the slider that we created. A cool thing with PowerApps too if you want to try it without hitting Play, if you hold down Alt you can actually try your control. Normally, when you've go to test it, you hit the Play button in the upper right-hand corner. But if you just want to test the control quick, you can hold down Alt. Let's update our value in the slider value and see that that updates on our slider. Cool. So everything looks like it's working the way that we want. We can see the different properties over here as well. One of the things that I think about these tasks is that they really show you what's possible, get you excited, get you inspired to go learn and do more. I want to show you some of the different resources that are available to you after this to continue your journey. Let me flip over to the first resource. This is the GitHub repository. Here we have the full code for the linear component that we just built out if you want to go check it out. I also have some different resource links available to you here. You can see we have the PCF Gallery, the PowerApps home, all those kind of things. Then if we go over to Learn, so if you're not familiar with Learn, it's Microsoft's learning platform. We have these different modules, they're really cool. Thirty-five to, maybe, an hour-and-a-half time frame to go through one. This one in particular is a really good one to start out with. It's actually the one I started out with as well when I started building components. If you go here, it'll give you a nice overview. If you click into the "Build the PowerApps Component", the other thing that's cool is it talks about all the different prereqs that you need, and it shows you how to install those different things. If you haven't done development yet and you're going to start, you can go in here and see how you would configure your environment. Another cool thing for beginners is that it'll also show you how to test and debug your code, a very important part because we all know it doesn't work the first time you run it. But if you scroll down in here, it'll actually show you some basic JavaScript and TypeScript debugging tools that you'll have right within your browser. So definitely beginner friendly. Even if you're already a web developer and traditional developer, there's also some cool advanced ones in here as well. You can go to the advanced features, and in here it'll show you how to add and use React. So if you're a React shop and you want to see how you can use React in your PowerApps components, there's an intro to that as well. So this is a really good place to start and continue your journey. As they talked about, there's going to be an AMA after this. So come talk to me, come ask questions. I'm happy to answer any types of questions. I get a lot of questions about, how do I get started with [inaudible]? How did you start doing different things? I'm happy to answer those. As well as maybe you have done some PowerApps component framework stuff and you're having issues or questions, happy to answer those as well. Here is the PCF Gallery that I was talking about that shows some of the different components that have already been created. I love this one that has the reactions so you can add different reactions into your PowerApp. There's some really cool things in here that you can go and check, and there's lots of fun, cool stuff. Then another place that's good to look at is there's all these sample components as well. If you have an idea of something that you want and you're not really sure how to do it, check out these different sample custom components in our docs. Thank you so much for joining me today. I hope you're excited to start building with the PowerApps component framework. If you come from that traditional developer background, I hope you're excited to start learning and doing some of these things that empower the other types of developers to create that cool fusion development team. Thank you.
Info
Channel: Microsoft Developer
Views: 8,297
Rating: 4.6551723 out of 5
Keywords: Power Platform, POWERfulDevsConf, Azure Power Platform, Azure, Power Apps, Microsoft, Developer, PowerApps, Microsoft Power Apps, POWERfulDevs, Microsoft Power Apps Platform
Id: 5TI61xfMgtQ
Channel Id: undefined
Length: 26min 28sec (1588 seconds)
Published: Sun Jul 19 2020
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.