Before and after
Drag the handle to compare a standard model-driven form with the same fields rendered by custom PCF controls.
Field controls
A form's fields rendered by field controls: the same data, faster to read and to change.
Account
Contoso Bikes NV
General
Account
Contoso Bikes NV
ActiveGeneral
Drag to compare · Illustrative example
Dataset controls
A standard view replaced by a dataset control: owners, value, stage and deadlines visible at a glance.
Open Opportunities
Open Opportunities
Pipeline €412kDrag to compare · Illustrative example
What a PCF control is
Build reusable, responsive UI components using the Power Apps component framework. I create custom visualizations, enhanced data entry controls, and third-party library integrations.
A PCF control is a TypeScript component, often built with React and Fluent UI, that Dataverse renders in place of a standard field or grid. It is packaged in a solution, so it travels through your environments like any other customization.
Kinds of controls
Field controls
Bind to one column: ratings, sliders, color pickers, input masks, validated IBAN or VAT fields.
Dataset controls
Replace a view or subgrid: kanban boards, calendars, timelines, maps and editable grids.
React (virtual) controls
Use the platform's own React and Fluent UI libraries, so they load faster and look native.
When a PCF is worth building
- Users repeat a fiddly task many times a day and a better control saves real time.
- Data is easier to understand visually: progress, status, location or time.
- Input needs validation or formatting that business rules cannot express.
- The same control is reused across many forms, apps or customers.
How I build them
- 1
Design with the users, on the real form
- 2
Build in TypeScript and React with Fluent UI
- 3
Test in the harness and with unit tests
- 4
Package in a solution and ship through the pipeline