Pcf Expert

PCF Expert

Expert assistant for PowerApps Component Framework (PCF) — field controls, React virtual controls, and dataset controls for model-driven apps, canvas apps, and Power Pages.

CRITICAL RULES

1. Scaffold with pac pcf init — never create from scratch. The CLI generates tsconfig, manifest, build pipeline, and typed interfaces (IInputs, IOutputs). Hand-creating these causes subtle build errors and missing type definitions.

1. TypeScript required. Never plain JavaScript. StandardControl and ReactControl provide compile-time safety for context, parameters, and outputs.

1. React virtual controls — the platform provides React. Do NOT bundle your own. Declare `` in the manifest. Bundling React causes version conflicts and a doubled bundle. Runtime platform loads React 17.0.2 for model-driven, 16.14.0 for canvas — code relying on React 17 event delegation will behave differently in canvas. React virtual controls are not supported in Power Pages.

1. Fluent UI v8 and v9 cannot coexist in one manifest. Pick one: ` (v8, @fluentui/react) or (v9, @fluentui/react-components`). Never declare both.

1. ReactControl.init() has exactly 3 parameters — no container. Signature: (context, notifyOutputChanged, state). Standard controls receive a 4th container: HTMLDivElement. React virtual controls must never call ReactDOM.render() — the platform manages the React tree. updateView() must return React.ReactElement, not void.

1. context.webAPI and context.navigation are unavailable in canvas apps. Check the API Availability matrix before using context members. Never use the Xrm global, window.formContext, or access DOM outside the control's container — none are supported in PCF.

1. Never modify files under generated/. ManifestTypes.d.ts and sibling files are regenerated on every build from the manifest XML. Edit ControlManifest.Input.xml and rebuild to change types.

1. Debug builds fail Power Apps Checker and environment import. Debug mode emits eval(), which is rejected. Always build for deployment with npm run build -- --buildMode production or add production to .pcfproj. Test harness (npm start watch) works fine in debug.

1. Solution packaging for production — not pac pcf push. pac pcf push creates unmanaged web resources outside any solution. For any non-personal-dev deployment: pac solution init → pac solution add-reference → msbuild /t:build /restore → pac solution import.

1. Increment version in ControlManifest.Input.xml before every deployment. The platform caches the previous version. pac pcf version --strategy manifest auto-bumps the patch segment.

NEVER

• NEVER call notifyOutputChanged() inside updateView() — creates an infinite render loop (updateView → notifyOutputChanged → getOutputs → updateView ...).
• NEVER call dataset.refresh() unconditionally inside updateView() — "control can't finish loading" infinite loop; records beyond page 1 will never load. Guard with a changed-data condition.
• NEVER use if (!context.parameters.X.raw) as a null check — fires on 0, false, and "". Use param.raw === null || param.raw === undefined.
• NEVER use window.localStorage or window.sessionStorage — not secure, not guaranteed offline. Use context.mode.setControlState() for per-session state persistence.
• NEVER load third-party libraries via injected `` tags — all dependencies must be webpack-bundled. Unbundled scripts fail in sandbox mode and break offline.
• NEVER access formContext, parent DOM elements, or sibling field elements — unsupported and subject to silent breaking changes. The supported inter-control path is custom events (`` manifest element, currently preview) or column binding.
• NEVER use Whole.Duration, Whole.Language, or Whole.TimeZone as of-type — officially listed as unsupported in the PCF manifest schema despite appearing in some older documentation.

Decision Guide — PCF vs OOB vs Web Resources

| Need | Use | Reason | |---|---|---| | Slider, toggle, rating, color picker on a form field | PCF field control | Bound to column, participates in form save, type-safe | | Custom grid / calendar / kanban for a view or subgrid | PCF dataset control | Full dataset API: sort, filter, paging, openDatasetItem | | Dashboard with charts and custom HTML | Web resource | Not column-bound, standalone HTML page | | Change field visibility / requirement on form events | Form script (web resource JS) | PCF controls cannot modify other form fields | | Command bar button | Command bar / Ribbon customization | PCF lives inside a field or subgrid area only | | Complex interactive UI (drag-drop, modals, tree) | PCF React virtual control | Full React model, Fluent UI, platform-managed React | | Simple formatting change (bold, color, icon) | OOB column formatting (Power FX) | No code deployment needed | | Full-page custom experience | Custom page / Code App | PCF is per-field or per-subgrid, not full-page | | Offline support in mobile field service | PCF field control (no webAPI calls) | PCF supports offline if the control avoids webAPI |

API Availability Matrix

| Context Member | Model-Driven | Canvas | Power Pages | |---|---|---|---| | context.webAPI | Yes | NO | Yes | | context.navigation | Yes | NO | No | | context.resources.getResource | Yes | NO | No | | context.resources.getString | Yes | Yes | Yes | | context.formatting | Yes | Yes | Yes | | context.userSettings.userId | Yes | NO | No | | context.utils (Utility) | Yes | No | No | | context.copilot (preview 2025) | Yes | No | No | | dataset.delete / dataset.newRecord | NO | Yes | No | | React virtual controls (control-type="virtual") | Yes | Yes | NO |

Quick Reference — PAC PCF Commands

| Command | Purpose | |---|---| | pac pcf init -ns NS -n Name -t field | Scaffold standard field control | | pac pcf init -ns NS -n Name -t field --framework react | Scaffold React virtual field control | | pac pcf init -ns NS -n Name -t dataset | Scaffold dataset control | | npm run build | Compile TypeScript and bundle | | npm start watch | Test harness with hot reload | | pac pcf push --publisher-prefix pic | Push to dev environment (dev only) | | pac pcf push --publisher-prefix pic --incremental | Push only changed files (faster) | | pac pcf push --publisher-prefix pic --solution-unique-name Sol | Push into a specific solution | | pac pcf version --strategy manifest | Auto-bump patch version | | pac solution init --publisher-name P --publisher-prefix p | Init solution project | | pac solution add-reference --path ../MyControl | Add PCF control to solution | | msbuild /t:build /restore | Build solution .zip | | pac solution import --path bin/Debug/Sol.zip --publish-changes | Deploy to environment |

Loading Resources

Control lifecycle, init/updateView/destroy, StandardControl vs ReactControl interfaces, dataset API, context object deep dive, debugging: → MANDATORY: Load [references/pcf-lifecycle.md](references/pcf-lifecycle.md) completely before writing control code. Do NOT load for CLI-only questions.

Implementing a specific control type (slider, toggle, kanban, calendar, chart, file upload, rich text, map, etc.): → MANDATORY: Load [references/component-patterns.md](references/component-patterns.md) for that pattern's manifest config, implementation notes, and OOB alternative. Do NOT load for general API questions.

**Writing or reviewing ControlManifest.Input.xml — property types, `, , , or solution packaging workflow:** → **MANDATORY**: Load [references/manifest-reference.md`](references/manifest-reference.md) completely. Do NOT load for runtime API questions.

Needs complete production-ready TypeScript examples (standard control, React virtual, dataset, responsive, field-level security): → Load [references/pcf-examples.md](references/pcf-examples.md) when the user needs starter implementations.

Do NOT load all four files simultaneously unless implementing a full new control from scratch.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: RyanMakesAndBreaksStuff
• Source: RyanMakesAndBreaksStuff/Custom-Codex-Claude-Plugins-and-Skills
• License: MIT

Install and usage instructions live in the source repository linked above.