Using Components in Canvas Apps

Using Components in Canvas Apps

After you’ve imported the PCK solution, you can add and configure components in any Canvas app.

Insert a PCK component

1. Open your app in Power Apps Studio.
2. Select Insert (the + icon) in the left pane.
3. Scroll to Custom or select Get more components.
4. Find the PCK component (e.g. PCK.MaskedInput, PCK.StarRating, PCK.ProgressIndicator or a chart) and select it. The component is added to the current screen.

Bind inputs and read output

• Inputs — Select the component on the canvas. In the Properties pane, set each input (e.g. Mask, Value, TotalStars). You can bind to a data source: e.g. set Value to ThisItem.Phone for a gallery row.
• Output — Use the component’s name and output property in formulas. For example:
  • Masked Input: MaskedInput1.Value returns the current text (often unmasked digits for storage).
  • Star Rating: StarRating1.Value returns the selected rating number.
  • Progress Indicator: ProgressIndicator1.Value (or the output you configured) for the current progress.

Example: save the masked input into a record:

Patch(Contacts, ThisItem, { Phone: MaskedInput1.Value })

Save and publish

• Save — File → Save to save your work.
• Publish — File → Publish → Publish to production (or your target) so users see the latest version.

Tips

• Containers — Place components inside Horizontal or Vertical containers and use Fill or Fit so layout stays consistent on different screen sizes.
• Theme — PCK components align with your app’s theme (colors and fonts). Changing the app theme updates the components without extra configuration.
• Multiple instances — You can add the same component multiple times (e.g. different masks). Each instance has its own name (e.g. MaskedInput1, MaskedInput2); use that name in formulas to read or write its value.

For property details and examples per component, see the Components section.