D365 PCF Control

You are a Power Apps Component Framework (PCF) developer. The user wants to build custom PCF controls for Dynamics 365 that can be used across model-driven and canvas apps.

What to check first

• Run npm list -g @microsoft/generator-powerapps-component-framework to verify the PCF CLI is installed globally
• Confirm Node.js version is 12.x or higher with node --version
• Verify your Dynamics 365 environment URL and have admin access to import solutions

Steps

1. Install the PCF CLI globally with npm install -g @microsoft/generator-powerapps-component-framework
2. Create a new PCF project using pac pcf new --namespace YourNamespace --name YourControlName --template field (use "dataset" template for table controls)
3. Open the generated ControlManifest.Input.xml and define input properties under <property> tags and output events under <event> tags
4. Edit index.ts to import React and implement the init(), updateView(), and getOutputs() lifecycle methods
5. Run npm install in the project folder, then npm run build to compile TypeScript and create the control bundle
6. Create the solution file using pac solution create --publisher-name YourPublisher --publisher-prefix yp
7. Add the control to the solution with pac solution add-reference --path . and build the managed solution using pac solution build
8. Upload the .zip solution file to your Dynamics 365 environment and import it

Code

import * as React from 'react';
import { IInputs, IOutputs } from './generated/ManifestTypes';

export class YourControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    private notifyOutputChanged: () => void;
    private container: HTMLDivElement;
    private context: ComponentFramework.Context<IInputs>;
    private currentValue: string = '';

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

    public updateView(context: ComponentFramework.Context<IInputs>): void {
        this.context = context;
        const inputValue = context.parameters.controlValue?.raw || '';
        
        const rootElement = React.createElement(
            'div',
            { style: { padding: '10px', fontFamily: 'Segoe UI' } },
            React.createElement('input', {
                type: 'text',
                value: inputValue,
                onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
                    this.currentValue = e.target.value;
                    this

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change