Component In Power Apps

In this article, we will learn about the concept of Components in PowerApps and how we can reuse it in other apps/screens.

Scenario

Let's consider a requirement where we need to display a header and footer in our App, and suppose we will be having more than 10 screens. So in this case, if we are not using Components then it will be difficult to keep that header and footer on every screen and if there is any change let's say for font size or Title or logo, we need to navigate all 10 screens and make those changes there. To avoid these repetitive changes we can create this as a component and then it can be used on various screens.

Components are reusable building blocks available in PowerApps. Using components, the App maker can reuse it in the same App or across App using the component library. The component library is simply a container that will contain all components in it.

Let's see an example of how to create components and use them on screen.

Here we will create a header with Screen Title and Logo.

Step 1

Open PowerApps > Create Canvas App.

Step 2

Select Component > Create New Component.

Step 3

After the component is added, Click on Insert in menu > select icon and add Rectangle after scrolling in the icon menu.

Step 4

Now add an image and label control above rectangle which we just added above.

Step 5

Now create 2 custom properties from the right panel.

Step 6

Add a new property with data type text to set Header Title.

Step 7

In the same way add other properties with Data Type Image to set logo (this is just to demonstrate that we can pass different types of properties. Ideally, it would be good to not make the logo dynamic but set it in the component itself).

Step 8