Building with Power Platform at CMS - PCF Controls

These are my own PCF findings, grouped into the practical rules I kept coming back to while building and debugging controls.

---

#General PCF Notes

• A PCF control is a custom element developed in TypeScript, often with React or Angular, that creates rich interactive components.
• PCF integrates with Power Apps Canvas, Model-driven, and Power Pages scenarios.
• Use PCF for complex logic, custom UI, and styling that out-of-the-box controls do not cover.
• Treat performance as a design goal. The point is to ship optimized JavaScript for responsive UI.

---

#Setup And Build

• Use the right setup up front: Visual Studio or VS Code, Node.js and NPM, PAC, .NET SDK 4.6.2, and Git are the baseline tools.
• Use webpack to create a bundle.js and keep inline source maps available for debugging.

---

#Data And Manifest

• When creating controls that read data, such as grid-based controls, observe delegation.
• If you are using data binding with a dataset, solidify the manifest early and deploy a working version with stub code first.
• Changing columns in the manifest later requires a complete redeploy.

---

#Debugging

• When debugging in browser devtools, check the box to disable cache so you are not chasing stale assets.
• Always debug from the app play page, not the designer page.
• Use Requestly or Fiddler to capture live requests in the browser and redirect them to your local version of bundle.js so you can debug without reuploading.
• Use the local host server pattern in Local Host Server when you want to serve the current bundle from your machine instead of reuploading it.

#Local Host Server

• Use a small HTTPS Express server like serve.js to host the current bundle.js from the local out/controls/<controlName>/ folder.
• In the version I used, the server listened on https://localhost:7777.
• It read local cert files such as localhost-key.pem and localhost.pem.
• It served bundle.js directly from the current build output and also exposed the rest of the built control as static files.
• It set no-cache headers and the X-Requestly-Redirect header so the browser would always fetch the latest local bundle.
• It allowed CORS from the Power Apps runtime, which made it easier to debug in the live app without uploading every change.

---

#App Scope

• XRM API is not supported in Canvas apps, only model-driven.
• Do not waste time with XRM API calls in Canvas apps or Power Pages; they are only supported in Model-driven apps.

---

#Release Workflow

• pac pcf push creates a temporary solution package in the Power Apps environment.
• Remove that temp build before packaging a full release solution.