Power Apps Component Framework (PCF): componentes React customizados

O Power Apps Component Framework (PCF) permite criar controlos completamente customizados com React e TypeScript que integram nativamente em Canvas Apps e Model-driven Apps. Ideal para visualizações complexas, integrações com bibliotecas JS e UX avançada.

Pré-requisitos

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

Criar projecto PCF

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

Estrutura do 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 propriedades

Build e deploy

npm run build
pac pcf push --publisher-prefix bcpt  # deploy directo para ambiente de dev

# Para produção: incluir em solução
pac solution add-reference --path ../StatusTimeline
pac solution build
pac solution publish

Conclusão

O PCF elimina o principal argumento contra Power Apps em contextos de UX avançada. Com React e TypeScript, qualquer componente de uma aplicação web normal pode ser encapsulado como controlo PCF e reutilizado em toda a Power Platform.