What is PCF?

PowerApps Component Framework (PCF) lets you build custom UI components for model-driven apps, canvas apps, and portals in Power Platform.
Examples:

• Custom sliders
• Date pickers
• Graphs/visualizations
• File uploaders

Step 1: Prerequisites

Before starting, ensure the following are installed and configured:

• Node.js (version 14.x or later recommended)
• Power Platform CLI (pac CLI), which can be installed using: npm install -g pac
• Visual Studio Code (or another preferred code editor)
• Power Apps environment with Dataverse or Dynamics 365
• A solution in Power Platform where the control will be added

Step 2: Create a New PCF Project

Open a terminal and create a project folder:

mkdir MyFirstPCF
cd MyFirstPCF
pac pcf init --namespace TechMasalaControls --name MyFirstControl --template field

This creates a project with the following structure:

• ControlManifest.Input.xml – defines metadata and configuration
• index.ts – contains control logic
• package.json – dependency configuration

Step 3: Define Metadata (ControlManifest.Input.xml)

Example configuration for a simple text input control:

<manifest xmlns="http://schemas.microsoft.com/PowerApps/2019/ControlManifest">
  <control namespace="TechMasalaControls" constructor="MyFirstControl" version="1.0.0">
    <display-name>My First PCF Control</display-name>
    <description>Simple input control</description>
    <control-type>standard</control-type>

    <property name="sampleProperty" display-name="Sample Value" type="SingleLine.Text" usage="bound" required="true" />

    <resources>
      <code path="index.ts" order="1"/>
    </resources>
  </control>
</manifest>

Step 4: Add Control Logic (index.ts)

The following code implements a simple text input bound to a Dataverse field:

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

export class MyFirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    
    private container: HTMLDivElement;
    private inputElement: HTMLInputElement;
    private notifyOutputChanged: () => void;
    private currentValue: string | null;

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

        this.inputElement = document.createElement("input");
        this.inputElement.type = "text";
        this.inputElement.value = context.parameters.sampleProperty.raw || "";

        this.inputElement.addEventListener("input", () => {
            this.currentValue = this.inputElement.value;
            this.notifyOutputChanged();
        });

        this.container.appendChild(this.inputElement);
    }

    public updateView(context: ComponentFramework.Context<IInputs>): void {
        this.inputElement.value = context.parameters.sampleProperty.raw || "";
    }

    public getOutputs(): IOutputs {
        return { sampleProperty: this.currentValue || "" };
    }

    public destroy(): void { }
}

Step 5: Build the Control

Install dependencies and build the control:

npm install
npm run build

This generates compiled output inside the out folder.

Step 6: Deployment Methods

There are two primary ways to deploy a PCF control.

Method 1: Push Control Directly to Environment

This method is suitable for testing during development.

1. Authenticate with your environment: pac auth create --url https://yourorg.crm.dynamics.com pac auth list pac auth select --index 1
2. Push the control: pac pcf push --publisher-prefix tm This uploads the control directly to your environment as an unmanaged solution. The control can then be used immediately.
   Note: This method is recommended only for development, not production.

Method 2: Solution-based Deployment (Import/Export)

This method is recommended for production or when sharing controls.

1. Create a solution: pac solution init --publisher-name TechMasala --publisher-prefix tm
2. Add control reference to the solution: pac solution add-reference --path ../MyFirstControl
3. Build the solution: msbuild /t:rebuild This generates a .zip solution package under bin\Debug or bin\Release.
4. Import into Power Apps environment:
   • Navigate to the Power Apps Maker Portal.
   • Go to Solutions > Import Solution.
   • Upload the .zip file and publish changes.
5. Export solution (if required):
   • From Maker Portal, open your solution and select Export.
   • Choose Managed (for production) or Unmanaged (for development).

Step 7: Use the Control

1. Open a model-driven form or canvas app.
2. Select a field and choose Change Control.
3. Pick your PCF control (for example, My First PCF Control).
4. Save, publish, and test the app.

Note

• Use pac pcf push for quick deployment to an environment during development.
• Use solution-based deployment (import/export) for production, team collaboration, and distribution.

Troubleshooting Tips

• Errors during init: Check Node.js version (LTS recommended).
• Build failures: Ensure MSBuild path is correct; run in Developer Command Prompt.
• Deployment issues: Verify auth profile and publisher prefix match.
• For advanced features: Add inputs/outputs in the manifest, handle updates in updateView, or integrate libraries (e.g., via npm, but ensure compatibility).