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 on 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 option to select the controls and paste it in multiple places in the form, but 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 to here and provide your Office 365 account details to login
  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 Blank app with Tablet layout highlighted with yellow color in below image.

    Creating A Custom Component In Power Apps
  1. Empty form will open. 

    Creating A Custom Component In Power Apps

Creating a new Custom Component in Power Apps Form

  1. Now select the “Insert” from the ribbon - under “Custom” - select “New Component”

    Creating A Custom Component In Power Apps
  1. New screen will open  highlighting that the component with name “Component1” is created with no controls. For our example we will be inserting a Label, Textbox and a button in this component.

    Creating A Custom Component In Power Apps
  1. Insert the 3 controls (Label, Textbox and Button) inside the Components and adjust the height and width of the control to fit to 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 controls size. Let me rename the controls to something appropriate and also provide a proper name to the Component.

    Creating A Custom Component In Power Apps
  1. Now for my example, I want to get the values for label and Textbox as an input from 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”.

    Creating A Custom Component In Power Apps
  1. After the custom input properties are created, we bind them with the controls. Click the Label control and change the “Text” as “customPropertyName”. NOTE that you would have to replace the above names as per your component and property name.

    Creating A Custom Component In Power Apps
  1. Repeat the same for your TextBox “Default” as well.
  2. 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”

    Creating A Custom Component In Power Apps
  1. Now to actually make the component send the output property with value, we would have to set the formula at component level.

    Creating A Custom Component In Power Apps
  1. Now the component is ready, so let us switch back to the screen and insert the newly created component from the menu.

    Creating A Custom Component In Power Apps
  1. We need to configure the properties now for the component from the form. In my example I am giving label as “FirstValue” and textbox as “6”

    Creating A Custom Component In Power Apps
  1. Output value of the component can be seen by putting a temporary label on the form.
  2. We can insert the component as many times and provide the property values differently each time to test the same.

    Creating A Custom Component In Power Apps
That is it. I hope you have learned something new from this article and will utilize this in your work.