Crafting Reusable Power Apps Components: 5 Practical Examples

Component reuse is one of the quickest ways to reduce repetitive work and keep your apps consistent. By encapsulating a piece of UI together with its logic inside a canvas component, you build a building block that can be placed on any screen and even shared across app projects. In this guide we’ll walk through creating five components for a company called Contoso Corp that wants to standardise its customer portal. Each component introduces a new concept: input and output properties, behavioural properties, component‑level context variables, and component libraries.

Scenario: Standardising a Customer Portal

Contoso runs a feedback and order‑tracking app. The core data looks like this:

We’ll build components that can be reused across screens and future apps without rewriting any logic.

1. Star Rating Component

This lets users pick a rating from one to five and surfaces the chosen value so the host app can save it.

Custom Properties

Implementation Steps

1. Create a component and name it StarRating.
2. Open the Properties pane and add the three custom properties above. Make sure Enhanced component properties is enabled in Settings → Upcoming features.
3. Inside the component, add a vertical gallery bound to [1,2,3,4,5]. Each item contains an icon or shape representing a star.
4. Set the gallery’s OnSelect to:

Set(compRating, ThisItem.Value);
If( !IsBlank(compRating), /* trigger OutPut property and behaviour */
  SetProperty(StarRating.SelectedRating, compRating);
  SetProperty(StarRating.OnRate, compRating);
)

1. The host app reads StarRating1.SelectedRating and can react to StarRating1.OnRate (e.g. write to a data source).

Usage in a Screen

Patch(CustomerFeedback, Defaults(CustomerFeedback), {
  Rating: StarRating1.SelectedRating,
  CustomerName: txtName.Text,
  Comments: txtComments.Text,
  CreatedDate: Now()
})

2. Searchable Dropdown Component

A dropdown that filters itself as the user types – much friendlier than a long static picker.

Custom Properties

Implementation Steps

1. Add a control to a component called SearchableDropdown.
2. Inside, place a Text input (the search box) and a List box (or gallery) that shows filtered results.
3. Set the list’s Items property to:

Filter(SearchableDropdown.Items,
  SearchableDropdown.DisplayField = "ProductName",
  Text(SearchableDropdown.Items) & "" in SearchableDropdown.SearchText
)

1. When the user taps an item, store the record in a component‑level variable and fire an output behaviour property.

3. Status Badge Component

Displays a coloured label based on an order status. The colour mapping is defined once inside the component.

Custom Properties

Implementation Steps

1. Add a Label control inside the component.
2. Set the label’s Text property to StatusBadge.StatusValue.
3. Set the label’s Fill to a Switch statement:

Switch(StatusBadge.StatusValue,
  "Pending", Color.Orange,
  "Shipped", Color.Green,
  "Delivered", Color.Blue,
  "Cancelled", Color.Red,
  Color.Gray
)

1. Optionally expose the colour as an output property so the host can use it elsewhere.

4. Confirmation Dialog Component

A pop‑up overlay that asks the user to confirm or cancel an action. The host app can show it conditionally and act on the result.

Custom Properties

Implementation Steps

1. Create a component with a Group container. Inside, place two buttons and a label.
2. Wire the Confirm button’s OnSelect:

SetProperty(ConfirmationDialog.OnConfirm, true);
SetProperty(ConfirmationDialog.Visible, false)

1. Wire the Cancel button similarly.
2. The host can show the dialog by toggling a variable and handling the behaviour properties.

5. Paginated Table Component

Display a large collection one page at a time with previous/next buttons.

Custom Properties

Implementation Steps

1. Inside the component, add a Data table or gallery.
2. Add two Button controls (Previous, Next) and a Label for page info.
3. Maintain a component‑level variable _pageIndex.
4. Set the gallery’s Items to:

FirstN(
  LastN(PaginatedTable.AllItems, (PaginatedTable.TotalPages - PaginatedTable.CurrentPage + 1) * PaginatedTable.PageSize),
  PaginatedTable.PageSize
)

1. Disable the Previous button when _pageIndex = 1, and the Next button when _pageIndex = TotalPages.

2. Expose CurrentPage, TotalPages, and CurrentPageItems as outputs so calling apps can synchronize scroll position or run custom logic.

Performance & Delegation

When you use a component, the data source is usually filtered before it reaches the component. For large datasets, push the filtering logic to the host app (e.g. use a delegated Filter on the source) and pass only the relevant subset into the component. This avoids bringing thousands of records into the component’s memory.

Common Pitfalls and Troubleshooting

Wrapping Up

Building components is an investment that pays off every time you drop one onto a new screen or app. Start with small, focused components like the ones above, and soon you’ll have a personal toolbox that drastically cuts down development time. After perfecting them, export the components to a component library so you can share them across teams and maintain a single source of truth.

References

• Matthew Devaney – Learn Power Apps Canvas Components By Making 5 Components (original source for this article’s topic)
• Microsoft Learn – Work with canvas components
• Power Apps component library documentation