Power Apps Component Framework (PCF): componentes React personalizados

El Power Apps Component Framework (PCF) permite crear controles completamente personalizados con React y TypeScript que se integran de forma nativa en Canvas Apps y Model-driven Apps. Ideal para visualizaciones complejas, integraciones con bibliotecas JS y UX avanzada.

Prerrequisitos

npm install -g microsoft-powerapps-cli
pac auth create --url https://org.crm.dynamics.com  # autenticar en el entorno

Crear proyecto PCF

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

Estructura del componente (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 — definir propiedades

Build y deploy

npm run build
pac pcf push --publisher-prefix bcpt  # deploy directo al entorno de dev

# Para producción: incluir en una solución
pac solution add-reference --path ../StatusTimeline
pac solution build
pac solution publish

Conclusión

PCF elimina el principal argumento en contra de Power Apps en contextos de UX avanzada. Con React y TypeScript, cualquier componente de una aplicación web normal puede encapsularse como control PCF y reutilizarse en toda la Power Platform.