pcf-controls

PCF Code Components

Purpose: emit a TypeScript PCF control that builds with pac pcf + npm and packs into a solution -- the pro-code escape hatch when canvas/model-driven controls are not enough.

When to Use

• A required UX (custom chart, map, rich editor, signature pad) is not expressible with stock controls
• Reusing a JS/TS library inside a Power Apps form or canvas app
• Replacing a single field or a whole dataset (grid) with custom rendering

First decide low-code vs pro-code (see architecture/low-code-vs-pro-code). PCF is pro-code: it carries a build pipeline and maintenance cost.

Project Layout

<control-root>/
  <ControlName>/
    ControlManifest.Input.xml   # manifest: type-group, properties, resources
    index.ts                    # the control class (lifecycle)
    generated/                  # ManifestTypes.d.ts (pac generates)
  package.json                  # pcf-scripts, pcf-start, build
  pcfproj / .pcfproj            # MSBuild project
  tsconfig.json

Scaffold: pac pcf init --namespace Frontier --name IssueRating --template field (or --template dataset).

ControlManifest.Input.xml

<manifest>
  <control namespace="Frontier" constructor="IssueRating" version="1.0.0"
           display-name-key="Issue Rating" control-type="standard">
    <property name="value" display-name-key="Value" of-type="Whole.None"
              usage="bound" required="true" />
    <resources>
      <code path="index.ts" order="1" />
      <css path="css/style.css" order="1" />
    </resources>
  </control>
</manifest>

• usage="bound" ties the property to a column; usage="input" is a config value.
• of-type must be a valid PCF type (SingleLine.Text, Whole.None, TwoOptions, OptionSet, DateAndTime.DateOnly, ...).
• control-type="standard" (field) vs a data-set element for dataset/grid controls.

index.ts Lifecycle

import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class IssueRating implements ComponentFramework.StandardControl<IInputs, IOutputs> {
  private container: HTMLDivElement;
  private notifyOutputChanged: () => void;
  private value: number;

  public init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
  ): void {
    this.container = container;
    this.notifyOutputChanged = notifyOutputChanged;
  }

  public updateView(context: ComponentFramework.Context<IInputs>): void {
    this.value = context.parameters.value.raw ?? 0;
    // render into this.container from context.parameters (re-runs on every change)
  }

  public getOutputs(): IOutputs {
    return { value: this.value };  // pushed back to the bound column
  }

  public destroy(): void {
    // remove listeners / unmount
  }
}