Building a PCF control with React and Fluent UI

The Power Apps Component Framework (PCF) lets developers build custom, reusable controls for Power Apps and Dynamics 365. PCF controls integrate seamlessly into the host application and extend its native capabilities with custom functionality, visual elements and business logic — built with familiar web technologies like HTML, CSS, TypeScript and React. When an out-of-the-box control can’t express what users need, a PCF control is the right way to close the gap without leaving the platform.

This guide walks through the whole lifecycle: setting up your environment, scaffolding a project, why Fluent UI is worth using, implementing the control, and finally packaging and deploying it the same disciplined way as the rest of your solution.

Why build a PCF control at all

Model-driven and canvas apps are highly configurable, but every so often a requirement falls outside what the standard controls offer: a drag-and-drop scheduling board, a rich inline editor, a specialised visualisation, a control that talks to an external service. Rebuilding the app outside the platform to get that one experience is a poor trade. A PCF control lets you deliver exactly the interaction you need while keeping everything else — security, data, ALM — inside Power Platform.

Because controls are reusable, the effort pays off more than once: a well-built control can be bound to different columns and datasets across multiple apps.

Setting up the environment

You’ll need three things installed: Node.js, Visual Studio Code, and the Power Apps CLI. The CLI is the tool you’ll use to scaffold, test and package controls. Install it as a dotnet global tool:

dotnet tool install --global Microsoft.PowerApps.CLI.Tool

and move to the latest version any time with:

pac install latest

There’s also an MSI installer if you prefer, but the dotnet tool keeps updates simple.

Scaffolding the project

Create a new control project with the CLI, choosing a template and framework. For a control bound to a single column you’d use the field template; for one bound to a whole dataset, the dataset template. Pick the React framework so you can pair it with Fluent UI:

pac pcf init --namespace YourOrg.Controls --name YourControl --template field --framework react

This scaffolds the project structure and the files you’ll spend most of your time in — chiefly index.ts, the control’s entry point, and the manifest that declares its properties.

Why Fluent UI

You can style a control with plain CSS, but Fluent UI makes it simpler and far more consistent. It’s Microsoft’s component library — the same design language used across Power Apps, SharePoint, Teams and Office — so your control looks and behaves like a native part of the platform rather than a bolt-on.

Fluent UI ships a rich set of customizable components — buttons, inputs, dropdowns, calendars, detail lists and more — that are accessible and responsive out of the box. That last point matters: accessibility and responsive behaviour are hard to get right by hand, and Fluent gives them to you for free. Its theming support also lets you match brand or context easily, so a control can feel bespoke without you rebuilding interaction patterns from scratch.

Implementing the control

A PCF control has a clear lifecycle, and understanding it is most of the job:

• init — the framework hands your control its container and context.
• updateView — called whenever the data or context changes; this is where a React control renders (or re-renders) with the latest values.
• getOutputs — where you return values back to the host when the user changes something.
• destroy — where you clean up.

In a React control you keep your component pure and driven by the properties the framework provides, calling back into the framework when the user makes a change so the platform stays in sync. Treat the framework as the source of truth for data and let React handle the rendering.

This is also where custom business logic lives — validating input, formatting data, or calling an external service — all within the sandbox the host provides. Keep that logic testable and separate from the rendering so it’s easy to reason about.

Testing and debugging

The CLI provides a local test harness so you can validate behaviour quickly without deploying:

npm start

This runs the control in a browser with mock data, and you can use browser dev tools to inspect and debug exactly as you would any web app. Iterating locally is dramatically faster than deploying to an environment for every change, so lean on the harness while you build.

Packaging and deploying

When you’re happy with the control, package it into a solution. The CLI builds a deployable solution file that installs into your Power Apps or Dynamics 365 environment. Crucially, deploy it through your ALM pipeline, exactly like the rest of your customizations — so the control is versioned, reviewed and promoted through environments the same controlled way, rather than hand-imported into production.

Once installed, you bind the control to a column or dataset on a form or view, and users get the richer experience while everything underneath stays governed by the platform.

Wrapping up

PCF controls are the escape hatch that means you almost never have to leave the platform to deliver a great user experience. Set up the environment once, lean on React and Fluent UI for a native feel, respect the control lifecycle, test locally, and ship through your pipeline. The result is a reusable component that makes the platform feel purpose-built for your users — which, with a good control, it effectively is.