Managing standard elements across a lot of screens in a PowerApps can be time-consuming and difficult to get everything to be consistent. Components create a single editable instance of these elements that can be used on multiple screens. This creates one source of truth that you can drop on your screens and count on them all being the same.
If you’ve worked with Power Apps at all you’ve probably created applications having multiple screens and figured out pretty quickly that you can speed up development by using the good ol’ copy and paste method. Insert a control, style it how you like, then when you need it again you can copy and paste it to a new screen. Maybe you’ve even gone so far as to create a “starter” application with a screen having a “library” of controls all formatted and styled to meet your standards. This method works fairly well. And if you’re applying brand colors and formatting through the `App.OnStart` method then you know that you can adjust the primary fill color and it will be applied everywhere that is referenced. But, if you’re using this technique to propagate the application header or footer to all screens in the application, there is an even better way… enter the `Component`.
Let’s go ahead and build a quick header component and use it to demonstrate the benefits. First you need to ensure that you have components enabled for your application. To do this go to the application settings by clicking on `File -> Settings` and then choose `Advanced settings`. Scroll down until you find `Components` and ensure it is turned on.
Once components are enabled, you will see a `Components tab` in the Tree view of your application.
Next click on `New Component` to create our Header component and name the component `ApplicationHeader`.
So the very first thing we want to do in our new component is set the size. Our header should have a height and width that meets the needs of our application. For our height, we’re going to start with `82` as that should give us enough vertical space for our logo and other things that we want.
But for the width, it would be really nice if we could automatically adjust to whatever the application width is. To do this, we can set the width to a formula `App.Width`. This way, if we ever need to adjust the width of the application… the header will adjust along with it.
Now let’s add some things to our header. First we’ll add an image on the left side for our logo. You can add an image directly through the `Image control` if you’d like. You can also add images to the `Application Images` collection itself and these become available for use in any `Image control`. In this case I’ve set my Bulb Logo and also added padding to give it some space.
Now let’s add some text elements to the header. First we’ll add a `Text Label` for the `Application Name`. Set the text for the control, then choose font size `18` and weight `bold`.
Finally, let’s add a `Cancel icon` to the header to be used to close the application. Add the icon, select the `Cancel icon` and then in the `OnSelect event` enter `Exit()`.