Components in Microsoft Power Apps
Components are reusable building blocks for canvas apps that can also be exported and used in other applications.
Components allow Power Apps developers to develop repetitive (e.g., Headers, Footers, Navigation, and Filter Menus) or complex controls(e.g., Data grids, Custom Data forms, Dialogue Box, Pop-Ups) in Power Apps.
This article is a brief introduction to how you can create and use control.
Creating a component and Adding control in a component.
Create a Canvas app. You can choose an orientation of your choice.
Switch to the Components tab. Click on the new component. It will create a blank component with the name ‘Component1’, rename your component with a relevant name.
Next, add an HTML Text control to your component. And set the properties to the following:
HtmlText: <div style = 'border-radius: 7px;
background-image: linear-gradient(70deg, rgba(1,166,240,1) , rgba(1,166,240,0.5));
height:" & Self.Height - Self.PaddingLeft - Self.PaddingRight - 1 & "px;
width: "& Self.Width - Self.PaddingBottom - Self.PaddingTop &"px;'></div>
Height: Parent.Height
Width: Parent.WidthAfter that add a label and set its dimensions to match the HTML Text’s dimensions.
Input and Output properties
Components allow you to create custom properties for your controls. If we want our component to access data from the application then we Input property type. If we want to emit the result of our calculation or actions or behavior in components to the application then we use the Output property type
Creating Input properties for a component
Select the Component from Tree View. Click on New custom property. Give the property a relevant name and Description. Select Property Type and its data type. Click on Create and you can see that property listed under custom properties of Component.
Switch to that Advanced Tab. Here you can find your property under the data section. You can set a default value for your property. In this example, it is set as “Header Text”
Add an Image control in the component and set the properties as displayed in the image below. Again, select the Component and create another Custom property with Data type Image. Once you have created the property with a proper name. Set the Image property of Image control to Parent.[name_of_image_custom_property] (For this example, Parent.UserImage)
Now you can use this component as Header and Footer on your screens.
Creating Output properties for the component
To demonstrate output properties in components in this article we will make a filter component.
Create a new component and rename it to FilterBar. Add three drop-downs and a Reload icon (to reset drop-downs) to the component. And arrange them as shown in the image below:
Now create an input property to get data that can populate these drop-downs. We will use the datatype table. To define the structure of your table go to the Advanced tab and under the data section you fill find your input property, and add a sample table there.
Set the Items property of the dropdown using the Distinct function. Ex. Distinct (Parent.FilterData, Department)
Now create and output property with Datatype record. And set it in the Advanced tab as shown in the below image.
Using the components in your app
You will find your component listed under Custom. Insert a HeaderFooter Component on your screen and set its Custom properties according to your app and screen.
In this example properties of components are set as follows:
HeaderText: Employee List
UserImage: User().Image
Width: Parent.Width
Add a data gallery to display your data.
Now add the FilterBar component and set its height and width according to its parent control (i.e., Screen in this example). And set the custom property FilterData with your data table
Set Filter on the Items
Conclusion
Using components in your app not only allows you to develop complex controls but also makes it easier for you to manage your app. It reduces the number of repetitive controls which improves performance. It helps you standardize and maintain the look and feel of your app in a much simpler way. You can also access the app scope inside your components but it is not advisable to do so if you want to export your components to other applications, it can cause unnecessary errors.
Please like and follow for more. Feel free to add how you are using components in your low-code applications.
References & Credits
- Canvas component overview https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-component
- Canvas components can now access app scope directly by Greg Lindhorst https://powerapps.microsoft.com/en-us/blog/canvas-components-can-now-access-app-scope-directly/
- Intro PowerApps Components including Input and Output properties by Shane Young https://www.youtube.com/watch?v=AqZkUQ78e50&t=3s
Digital Transformation using Low-Code
Low-code helps business
- Rapidly Build Enterprise Apps & Workflows.
- 10x Accelerated Application Development.
- 30–50% Reduction in Software Development Costs.
About Intelliconnect
We at Intelliconnect Technologies partner with leaders who have ambitious plans to grow their businesses.
Business leaders need reliable data and systems that can provide them and their teams with insights to make informed decisions and take action.
We have expertise in developing and implementing Business Intelligence Decision Support Systems to
- Provide Signals & Insights that can help the business reach its goal by enabling informed decision-making and taking action.
- Enable autonomous decision-making through automation and speed, reducing the need for human intervention and streamlining the decision-making process.
- Foster a data-driven culture by empowering your teams with real-time information for strategic and operational decision-making
Follow Us for more information on
