How to Create a Header Component in Power Apps?

Whenever I used Power Apps, I encountered difficulties creating the same banner repeatedly or copying and pasting it onto every screen. I researched and resolved the issue by creating a simple Power Apps Component.

In this Power Apps tutorial, we will discuss how to create a header component in Power Apps.

I will also explain how to reuse the header/banner in various Power Apps screens or forms and how to edit and delete a Power Apps header component.

How to Create a Header Component in Power Apps

A Header Component in Power Apps is a reusable element you can add to your application to provide a consistent header across multiple screens or forms.

We will create the banner once and reuse it multiple times on various Power Apps screens. This will save time compared to repeatedly creating or copy-pasting the banner in the app.

It includes elements like the app title, navigation buttons, user profile information, and any other relevant information or controls that should be consistently visible at the top of the app.

how to create and reuse power apps banner

Follow the instructions below:

1. In Power Apps, go to the Tree view -> Components -> + New component.

How to Create a Header Component For Power Apps

2. Rename the new component [AppBanner].

Create a Header Component For Power Apps

3. Go to the Component Properties pane -> Select Display -> Size -> Make the Height property 80.

Create Header Component For Power Apps

4. Go to the Advanced property -> Width -> Set App.Width as shown below.

How to create a reusable header in Power Apps

5. Next, we need to add some input controls, like whatever you want to put in the banner (Text label, Image, Icon, etc.)

how to create and reuse power apps banner


As I wanted to put the current user photo, I took an image control and set its Image property as:

Image = User().Image
create and reuse power apps banner

Text Label:

To display a Title/header, set the Text property of the Label control as:

How to reuse power apps header

Back icon:

The back button will help the user to navigate to the back screen. You can put any icon you need. Set its OnSelect property as:

OnSelect = Back();
Reuse power apps header

6. The Power Apps header component is ready to use on any screen or form within the app. Come to the screen or form wherever you want to add the banner.

Create banner in Power Apps

Go to + Insert -> Expand Custom -> AppBanner (Component name).

Power Apps Reusable Header

Once the header component is added to the screen, it will look like below. You can resize your banner based on your screen size.

PowerApps Reusable Header

This way we can create the Power Apps reusable banner.

How to Edit Power Apps Banner/Header Component

Suppose you want to edit or change something in the banner, like adding or removing any control; you do not need to change it on each screen.

Instead, you can go to the header component and change whatever you need. The change will be reflected throughout the app, wherever you use it.

Go to the Components tab -> Add a Text label (you can add any control as per your need) -> Set its Text property as:

Text = User().FullName                       // It will display the current user full name
Power Apps Header Component

Now, return to the screens; the changes are reflected throughout the app wherever you use the banner.

Power Apps Banner

Delete a Power Apps Header Component

To delete the Power Apps header component, go to Components -> click More () -> Delete. The specific header will then be removed entirely from the app.

Power Apps Reusable Banner

I hope this article will help you create a header component in Power Apps. We also discussed how to edit and delete the Power Apps banner.

Moreover, you may like some more articles below: