Creating Your First Component
Start course

Microsoft Power Apps is a low-code/no-code solution that allows professional developers and non-IT professionals to create powerful applications much faster than with regularly developed applications. In this course, we will look at the core capabilities of Power Apps and how they help businesses automate and enhance repetitive, mundane, and time-consuming tasks.

We will cover canvas apps, model-driven apps, and portals, as well as their use cases and the differences between them. We'll also walk you through how to build each one. Finally, we'll take a look at the Power Apps Component Framework and how this allows developers to add even more functionality to standard Power Apps.

Learning Objectives

  • Get a foundational understanding of canvas apps, model-driven apps, and portals, including their use cases and features
  • Use data sources, controls, and formulas to build, share, and publish your own canvas apps
  • Plan, build, share, and publish model-driven apps
  • Create and customize your own portal and monitor user behavior on your portal
  • Learn about the Power Apps Framework and how it can enhance the user experience of your apps

Intended Audience

This course is intended for both IT professionals and non-technical professionals looking to automate and enhance business processes for mobile and desktop users.


There are no prerequisites for this course but any computer coding knowledge and even basic Excel knowledge would be beneficial when learning about Power Apps.


Back inside of our first Canvas application let's build our first component. We'll start by selecting Components and then New Component. Let's rename it to First Component. To keep this simple let's just create a simple header component. We'll first set the height to 65 pixels so that it's not too giant. Then for the width, we'll actually set it to App.Width. This will set the width of this component to the width of whatever application it is in. This way we can easily use the same header component inside of any other app we build, and it will automatically stretch out to the width to match the app it's on, Let's add a label and have it say Home. We'll make the text a little bit bigger and stretching out a little bit.

Let's now add an icon to our component. We'll give it the Home icon since this can be the component for all of our Home Screens of our app. We'll also add a Cancel icon so that the app user can easily close the application. To make this icon close the application when it's selected, we'll go to it's on select property and say Exit Let's now go back to our screen of our application and add our component. In the insert tab, I'll go to the Custom dropdown and select our component. Notice it automatically fits the width of the screen just like we wanted it to, going back to our component let's actually center our Home label. Now if we come back we'll see that this change was automatically applied to our component. And that's it, in the next lecture we'll go over utilizing the Power Apps Component Library.

About the Author

Ben is a Power Apps and Power Automate Specialist for Sovereign SP and has been using Power Apps, Power Automate, and SharePoint since 2017. Since then, he has built 100+ solutions using these amazing Microsoft tools. He loves helping others realize what technology can do and how it helps automate and enhance business processes. Most of all, though, he loves how these tools help make people’s jobs easier. The phrase, “This will make things so much easier!” is why he's in the IT business.

Ben Fetters lives in South Ogden, Utah, with his amazing wife and brand-new baby girl. A Weber State University Business Administration graduate, he loves to create businesses and help current businesses improve.