Pro-codeBeginner
Your first PCF control with React
Scaffold a virtual PCF control, render a React component, and push it to your Dataverse environment in under 30 minutes.
What you'll learn
- Scaffold a virtual React PCF control with pac
- Return React elements from updateView
- Test locally and push to an environment
The Power Apps Component Framework (PCF) lets you replace a plain field with any UI you can build in TypeScript. Virtual controls use the platform's own React, which keeps bundles small.
Set up the tools
You need Node.js and the Power Platform CLI (pac). Then scaffold a project:
pac pcf init --namespace Unplugged --name RatingControl --template field --framework react
npm installRender a component
The generated index.ts returns a React element from updateView:
import * as React from "react";
import { Rating } from "./Rating";
export class RatingControl implements ComponentFramework.ReactControl<IInputs, IOutputs> {
private notifyOutputChanged: () => void;
private value = 0;
init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void) {
this.notifyOutputChanged = notifyOutputChanged;
}
updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
this.value = context.parameters.value.raw ?? 0;
return React.createElement(Rating, {
value: this.value,
onChange: (v: number) => {
this.value = v;
this.notifyOutputChanged();
},
});
}
getOutputs(): IOutputs {
return { value: this.value };
}
destroy() {}
}Test locally, then deploy
npm start watch
pac auth create --url https://yourorg.crm.dynamics.com
pac pcf push --publisher-prefix unpOpen a form, add the control to a whole-number column, and publish. You now have a custom rating widget inside Dynamics 365.
J / K next or previous article