Create a Reusable Percentage Calculator Component in Power Apps

When you find yourself copying the same formula or control arrangement from one screen to another, you know it’s time to think about reusable components. Power Apps Canvas Components let you bundle user interface elements together with their logic into a single, portable unit that you can drop into any app. In this walkthrough, you’ll build a custom component that calculates a percentage from two numbers — a pattern that can appear in quiz results, survey completion rates, budget tracking, and more. The goal is not just to build one calculator, but to learn the workflow for creating and using your own components.

The Scenario: Instant Percentage from Any Two Values

Imagine you’re assembling a dashboard that shows team members their current scores. Instead of rewriting the percentage formula on every screen, you’ll create a component called PercentageCalculator. It accepts a Part Value (for example, correct answers) and a Total Value (total questions) as input properties, computes the percentage, displays the result on its surface, and also exposes the computed value through an output property.

Your naming convention will be consistent and easy to follow when you reuse the component in different contexts.

Step‑by‑Step Implementation

1. Create the Component

Open a blank app in Power Apps Studio. In the Tree View, switch from Screens to Components. Click New component.

Name it PercentageCalculator. Set the Width to 400 and the Height to 150. Inside this component canvas, you’ll add two text‑input controls (one for each input number) and a label to show the result.

For clarity, use the following control names:

• Text Input for the part (score): scoreInput
• Text Input for the total: totalInput
• Label for the result: resultLabel

Add a static title above each input – for example, a label with “Score” above scoreInput and “Total” above totalInput. These are purely cosmetic and don’t need custom properties.

2. Define Input Properties

Components don’t inherit properties from the parent app; you must create your own.

With PercentageCalculator selected in the tree view, open the Properties panel and click New custom property.

First input property

• Display name: Part Value
• Name: InputPart (this becomes PercentageCalculator.InputPart in code)
• Property type: Input
• Data type: Number
• ✓ Raise OnReset when value changes (this ensures the component resets when the property is updated at runtime)

Click Create.

Second input property

• Display name: Total Value
• Name: InputTotal
• Property type: Input
• Data type: Number
• ✓ Raise OnReset when value changes

Now wire the text inputs to these properties. Select scoreInput and set its Default property:

PercentageCalculator.InputPart

For totalInput, set its Default property:

PercentageCalculator.InputTotal

3. Display the Computed Percentage

Select resultLabel and enter the following in its Text property:

If(
  PercentageCalculator.InputTotal > 0,
  Round(PercentageCalculator.InputPart / PercentageCalculator.InputTotal * 100, 1) & "%",
  "0%"
)

This formula prevents division by zero and rounds the result to one decimal place.

4. Add an Output Property

Your component now shows the percentage, but you’ll often need to reference that value outside the component – for example, to store it in a data source or pass it to another function.

Create another custom property:

• Display name: Percentage
• Name: OutputPercentage
• Property type: Output
• Data type: Number

Select the component again in the tree view and set the OutputPercentage property:

Value(
  Substitute(resultLabel.Text, "%", "")
)

This extracts the numeric portion of the displayed string. You can also use a pure arithmetic formula instead of parsing the label, but this approach ties the output directly to what the user sees.

5. Handle Reset Behaviour

When the app changes the component’s input properties (or when you call Reset(PercentageCalculator)), the internal text inputs should also reset to reflect those new values.

While the component is selected, find the OnReset property in the property panel and enter:

Reset(scoreInput);
Reset(totalInput)

If you enabled Raise OnReset when value changes on both input properties, the OnReset formula runs automatically whenever InputPart or InputTotal is modified at runtime.

6. Insert the Component in a Screen

Switch back to Screens in the tree view. From the Insert pane, open Custom and choose PercentageCalculator.

Position the component on the canvas. In the property panel, you’ll see the two input properties you defined. Set them to test values:

PercentageCalculator.InputPart = 85
PercentageCalculator.InputTotal = 100

The component automatically displays “85%” on its label. If you later need to read the numeric value (e.g., 85.0), reference PercentageCalculator.OutputPercentage.

Security, Performance, and Delegation Notes

• No delegation concerns: The percentage calculation is entirely client‑side – it runs in the browser without touching a data source. No delegation issues arise.
• Input validation: Text inputs accept any alphanumeric content by default. For strict numeric inputs, consider setting the Format property of scoreInput and totalInput to Number.
• Injection: Since the output is derived only from numeric inputs and is never executed as a formula, injection risks are minimal. Treat input values as plain numbers, not as formulas.

Common Mistakes and Troubleshooting

• Forgetting to rename internal controls: If you name a text input TextInput1, the formula Reset(TextInput1) will still work, but it becomes hard to read. Always give controls meaningful names.
• Missing “Raise OnReset”: Without this checkbox, changing InputPart or InputTotal at runtime won’t trigger the component’s reset logic, and the displayed value may become stale.
• Division by zero: Always guard against a zero total value – the If statement in the label’s Text property handles this.
• Output property not updating: Only output properties that reference dynamic values will update. If you use a static formula, the output may not refresh. Ensure the output property depends on a control or input property that changes.
• Component not appearing in custom controls: After creating the component, you may need to save and reload the app before it shows up in the Insert pane.

Final Recommendation

Start with small, focused components like this percentage calculator. As you identify repeated logic in your apps – conversions, formatting, calculations – convert them into components. This practice reduces bugs, makes updates easier, and forces you to write cleaner Power Fx formulas. Once you master the fundamentals, you can move on to components that expose events (like OnSelect) and even package them into component libraries for sharing across entire teams.

References

• Matthew Devaney, “Make Your First Power Apps Canvas Component” (2022) – the original inspiration for this pattern. https://www.matthewdevaney.com/make-your-first-power-apps-canvas-component/
• Microsoft Learn: “Create a canvas component in Power Apps” – [placeholder for official documentation URL]
• Microsoft Learn: “Component library in Power Apps” – [placeholder for official documentation URL]