Using Components in Model-Driven Apps

Using Components in Model-Driven Apps

In Model-Driven Apps, you add Power Components Kit (PCK) components as controls on form columns. The control then appears when users view or edit a record.

Add a control to a column

1. In Power Apps, open the Solutions area and open the solution that contains your app and table.
2. Under Tables, select the table you want to edit (e.g. Contact, Account, or a custom table).
3. Open the Forms area and open the form where the component should appear (e.g. the main Information form).
4. In the form designer, select the column that should show the PCK component (e.g. a Whole number column for Star Rating, or Single line of text for Masked Input).
5. In the Properties pane for that column, open the Controls tab.
6. Select Add Control, then choose the PCK component (e.g. PCK.StarRating, PCK.MaskedInput).
7. Under Client, choose where the control appears: Web, Phone, Tablet (check the ones you want).
8. Configure the component’s properties in the control configuration (e.g. TotalStars, Mask). Map the column’s value to the component’s Value (or equivalent) so the control reads and writes the correct field.

Save and publish

• Save the form.
• Publish the form (or Publish all customizations for the solution) so the change is visible in the Model-Driven App.

Tips

• Column type — Use a column type that matches the component (e.g. Whole number for Star Rating, Single line of text for Masked Input). This ensures the control can bind to the column correctly.
• Multiple clients — You can enable the same control for Web, Phone, and Tablet so the experience is consistent. Or use different controls per client if you need different behavior.
• Required fields — If the column is required, the component must allow the user to enter or select a value; otherwise the form may not submit.

For property reference per component, see the Components section.