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.

Component in Power Apps

Step 2

Select Component > Create New Component.

Component in Power Apps

Step 3

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

Component in Power Apps

Step 4

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

Component in Power Apps

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.

Component in Power Apps

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

Now select image control, from property select Image property and set it to <component name>.<property name>.

Component in Power Apps

Step 9

Let us do the same for the label Title.

Component in Power Apps

Step 10

 Set Height of Component to the required height.

Component in Power Apps

Now we have the component ready, so we will go ahead in use it on screen. 

Step 11

Go to Screen > Add Component to your screen.

Component in Power Apps

Step 12

After Adding Component to Screen, add logo as per your need to media section in the left panel.

Component in Power Apps

Step 13

Now we will set logo property.

Component in Power Apps

Step 14

Like logo, Set Title property of Component.

Component in Power Apps

In this way you can design header components. We can add any styles, font size, color, or anything else that we want to make our component look better.

In the same way, we can also create a footer component 

Step 15

Create another component named FooterComponent > You can rename it from three dots menu after component name as shown below,

Step 16

Add Html Text control from Text Menu.

Component in Power Apps

Step 17

Now add this component on screen,

Component in Power Apps

Step 18

Set Y property of Footer Component as dynamic.

Component in Power Apps

If you look now we have created a screen that has a header and footer components. 

We can add as many custom properties as we want that need to be set from our screen to make content dynamic in components.

Conclusion

In this article, we have explored below concepts,

  • Overview of components in Power Apps
  • Create new components with dynamic properties
  • Using components in Screens
  • Creating reusable header and footer in Power Apps (just like master page concept in SharePoint or ASP.net )