Creating A Custom Component In Power Apps

Introduction

Many times as a developer we face a situation where we have to repeat functionality across a form multiple times. For a simple example let us assume that a combination of Textbox, Label, and button is required in multiple places inside the form. Most of the time, we keep inserting 3 controls every time we require the combination. Although Power Apps provides us the option to select the controls and paste them in multiple places in the form, that is not the best practice. The best way to go forward would be to create a custom component and use it every time the combination (Textbox, Label, and button) is required. Below is the step-by-step way for creating a custom component in Power Apps and how to use that component in multiple places inside the Power Apps form.

Open Power Apps and create a new Form

Note: In case you already have a Power Apps form created, you can ignore this step.

1. Browse here and provide your Office 365 account details to log in
2. Below page will open and you can select either a template to start your form or you can select a blank app. (Make sure you select the right layout as well based on the target you want to build this app for). For my example, I am selecting a Blank app with a Tablet layout highlighted with yellow color in the below image.
   
3. Empty form will open.
   

Creating a new Custom Component in Power Apps Form

1. Now select the “Insert” from the ribbon - under “Custom” - select “New Component”.
    
2. A new screen will open highlighting that the component with the name “Component1” is created with no controls. For our example, we will be inserting a Label, Textbox and a button in this component.
   
3. Insert the 3 controls (Label, Textbox and Button) inside the Components and adjust the height and width of the control to fit the component screen. In the below screen, you can observe that I have reduced the size of the component screen as well along with the size of the control. Let me rename the controls to something appropriate and also provide a proper name for the Component.
   
4. Now for my example, I want to get the values for the label and Textbox as input from a form, so for this, we create a custom input property. For my example: I am providing the names for the custom input property as “LabelName” and TextboxName”.
5. After the custom input properties are created, we bind them with the controls. Click the Label control and change the “Text” to “customPropertyName”. NOTE that you would have to replace the above names as per your component and property name.
6. Repeat the same for your TextBox “Default” as well.
7. Now on click of save in my example, I want to add 5 to the value of Textbox and send it as an output to the form. To achieve this we would create a custom output property with the name “CalculatedSum”
8. Now to make the component send the output property with value, we would have to set the formula at the component level.
   
9. Now the component is ready, so let us switch back to the screen and insert the newly created component from the menu.
   
10. We need to configure the properties now for the component from the form. In my example, I am giving the label as “FirstValue” and textbox as “6”.
     
11. The output value of the component can be seen by putting a temporary label on the form.
12. We can insert the component as many times and provide the property values differently each time to test the same.
    

That is it. I hope you have learned something new from this article and will utilize this in your work.