Component In PowerApps

Loading

Component In PowerApps

In this article, we will learn about the concept of Component in PowerApps and how we can reuse it in other App. 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 Components can be used.

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

Let's see an example for how the component works,

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 added above

Step 5 - Now create 2 custom properties from the Right panel

Step 6 - Add New property with Data Type Text to set Header Title

Step 7 - Same way Add other property with Data Type Image to set logo

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

Step 9 - Same needs to be done for the Title label

Step 10 - Set Height of Component to the required height

Step 11 - Go to Screen > Add Component to your screen

Step 12 - After Adding Component to Screen, Add logo as per need to media section in the left panel

Step 13 - Now set added a logo to Component Property,

Step 14 - Like logo, Set Title property of Component

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

Step 17 - Now add this component on Screen,

Step 18 - Set Y property of Footer Component as dynamic

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

So in this way, we can create a reusable component that can be used in all screens in the current App and also can be used in Other Apps as well.

Hope this helps...Happy Low Coding..!!!