Power Apps Component Framework (PCF): custom React components

The Power Apps Component Framework (PCF) lets you create fully custom controls with React and TypeScript that integrate natively into Canvas Apps and Model-driven Apps. Ideal for complex visualizations, integrations with JS libraries and advanced UX.

Prerequisites

npm install -g microsoft-powerapps-cli
pac auth create --url https://org.crm.dynamics.com  # authenticate to the environment

Create a PCF project

mkdir StatusTimeline && cd StatusTimeline
pac pcf init --namespace BConcepts --name StatusTimeline --template field --framework react
npm install

Component structure (index.tsx)

import * as React from "react";
import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class StatusTimeline implements ComponentFramework.ReactControl {
    public init(context: ComponentFramework.Context): void {}

    public updateView(context: ComponentFramework.Context): React.ReactElement {
        const status = context.parameters.statusValue.raw || "Unknown";
        const history = JSON.parse(context.parameters.historyJson.raw || "[]");

        return React.createElement("div", { className: "timeline" },
            history.map((item: any, i: number) =>
                React.createElement("div", { key: i, className: `step ${item.state}` },
                    React.createElement("span", null, item.label)
                )
            )
        );
    }

    public getOutputs(): IOutputs { return {}; }
    public destroy(): void {}
}

Manifest — define properties

Build and deploy

npm run build
pac pcf push --publisher-prefix bcpt  # direct deploy to the dev environment

# For production: include in a solution
pac solution add-reference --path ../StatusTimeline
pac solution build
pac solution publish

Conclusion

PCF eliminates the main argument against Power Apps in advanced UX contexts. With React and TypeScript, any component from a normal web application can be wrapped as a PCF control and reused across the entire Power Platform.