Creating a Component Walkthrough

Creating a custom Power Apps component is one of the most effective ways to bring consistency, reusability, and polish to your apps—especially as they grow in complexity. Instead of repeatedly rebuilding the same UI patterns or logic across screens, components let you encapsulate functionality once and use it everywhere. In this article, we’ll walk through the process of building a component from scratch, explore the key concepts behind properties and behaviors, and show how a well-designed component can dramatically streamline your development workflow

Create a new app

 

Our example uses the 'Phone size'

Create a new Component

Rename the component like this

 

Add a Text Label, Button, and Text Input, like this:

 

I've changed the background color and made the form smaller

 

Changed these properties on the text input

Rename the label to lblTotal

Set the label Text property to 

"Total: " & RunningTotal

Add this formula to the button OnSelect

Set(RunningTotal,RunningTotal + txtNumberToAdd.Text); lblTotal.Text = "Total " & RunningTotal;

RunningTotal is a global variable, txtNumberToAdd is our text box, lblTotal is our label

Last, set the form OnReset to

Reset(txtNumberToAdd);

This will clear the txtNumberToAdd text box

Add a new Screen

 

Insert our component on the new screen. The easiest way to find it is to use the search functionality

Add a second screen, name it 'Menu', add this button

Set the button's OnSelect like this

Navigate(CalcForm)

Add a 'back' button to the Calculator form, set its OnSelect 

Back()

Test the screen

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


RealWorldCode gives developers practical, real‑world solutions with clean, working code — no fluff, no theory, just answers.
Links
Home
Knowledge Areas
Sitemap
Contact
Et cetera
Privacy Policy
Terms and Conditions
Cookie Preferences