Power Apps Code App Scaffold

A scaffolding skill for generating Power Apps PCF projects with TypeScript custom controls, manifest definitions, and build configurations.

What Is This?

Overview

This skill generates PCF project scaffolding including manifests, TypeScript control classes, CSS, and build config for model-driven and canvas Power Apps.

Who Should Use This

Perfect for Power Platform developers building custom controls, enterprise teams extending Power Apps with specialized UI components, and pro developers bridging custom code into the low-code Power Platform ecosystem.

Why Use It?

Problems It Solves

Creating PCF components from scratch requires understanding manifests, TypeScript interfaces, and the pac CLI. This skill generates valid, buildable scaffolding with proper configuration.

Core Highlights

• Complete Project Structure - Manifest, control class, CSS, and build config
• TypeScript Controls - Type-safe component implementation with PCF interfaces
• Property Binding - Input and output property definitions with proper types
• Build Ready - npm scripts for build, debug, and deployment
• Dual Target - Supports both model-driven and canvas app hosting

How to Use It?

Basic Usage

Ask Claude to scaffold a Power Apps component, and this skill generates the complete project.

Scenario 1: Custom Input Control

Ask Claude: "Create a PCF component for a star rating input"

Claude will scaffold:

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

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

    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement
    ): void {
        this.container = container;
        this.notifyOutputChanged = notifyOutputChanged;
        this.currentValue = context.parameters.rating.raw || 0;
        this.renderStars();
    }

    private renderStars(): void {
        this.container.innerHTML = "";
        for (let i = 1; i <= 5; i++) {
            const star = document.createElement("span");
            star.className = i <= this.currentValue ? "star filled" : "star";
            star.textContent = i <= this.currentValue ? "*" : "o";
            star.onclick = () => {
                this.currentValue = i;
                this.renderStars();
                this.notifyOutputChanged();
            };
            this.container.appendChild(star);
        }
    }

    public updateView(context: ComponentFramework.Context<IInputs>): void {
        this.currentValue = context.parameters.rating.raw || 0;
        this.renderStars();
    }

    public getOutputs(): IOutputs {
        return { rating: this.currentValue };
    }

    public destroy(): void {}
}

Scenario 2: Component Manifest

Tell Claude: "Generate the manifest for this rating component"

Claude will create:

<?xml version="1.0" encoding="utf-8"?>
<manifest>
  <control namespace="Contoso" constructor="StarRatingControl"
           version="1.0.0" display-name-key="Star Rating"
           description-key="A clickable star rating control"
           control-type="standard">
    <property name="rating" display-name-key="Rating"
              of-type="Whole.None" usage="bound" required="true" />
    <resources>
      <code path="index.ts" order="1" />
      <css path="css/styles.css" order="1" />
    </resources>
  </control>
</manifest>

Real-World Examples

Custom Data Visualization

An energy company built a PCF gauge component displaying real-time sensor readings in their Power Apps dashboard. The component fetched data from Dataverse and rendered interactive SVG gauges.

Signature Capture

A field services company created a signature capture PCF control for their mobile Power App. Technicians signed directly on tablets, with the component saving signatures as base64 images in Dataverse.

Advanced Tips

React Integration

Use React inside PCF controls for complex UI. The PCF framework supports React rendering within the component container, enabling reuse of existing React component libraries.

Debugging Locally

Use npm start watch to launch the PCF test harness. This provides a browser-based debug environment with property controls for testing component behavior without deploying.

When to Use It?

Use Cases

• Custom Controls - Build specialized input controls for Power Apps forms
• Data Visualization - Create charts, gauges, and dashboards as PCF components
• Rich Editors - Build code editors, rich text, or drawing controls
• Integration Widgets - Embed third-party service UIs into Power Apps
• Mobile Components - Create touch-optimized controls for mobile Power Apps

Related Topics

When you ask Claude these questions, this skill will activate:

• "Create a Power Apps PCF component"
• "Scaffold Power Apps code component"
• "Build custom control for Power Apps"
• "PCF TypeScript component template"

Important Notes

Requirements

• Node.js 18+ and npm for build toolchain
• Power Platform CLI (pac) for project initialization
• TypeScript 4.5+ for control implementation
• Power Apps environment for deployment and testing

Usage Recommendations

Do:

• Follow PCF interfaces - Implement init, updateView, getOutputs, and destroy
• Handle null values - Properties from Dataverse may be null or undefined
• Test in harness first - Debug locally before deploying to environment
• Use bundling - Minimize control size with webpack optimization

Don't:

• Don't use DOM globals - Access DOM only through the provided container
• Don't make direct API calls - Use the PCF WebAPI for Dataverse access
• Don't skip destroy - Clean up event listeners and timers in destroy method

Limitations

• PCF controls run in a sandboxed iframe in canvas apps
• Canvas app support requires additional manifest configuration
• Component size limits apply in managed solutions
• Some browser APIs are restricted in the PCF sandbox