Power Apps component framework

Introduction

Power Apps Component Framework (PCF) controls are custom, reusable UI components that extend the capabilities of model-driven and canvas apps in Microsoft Power Platform. They enable developers to deliver richer, modern, and interactive user experiences by replacing standard form fields or views with advanced visuals like sliders, maps, or calendars, while seamlessly integrating with Dataverse data and app context.

What Are PCF Controls?

Definition: PCF controls are code components built using TypeScript, HTML, and CSS, packaged as solutions, and deployed across environments.
Purpose: Enhance UI/UX by replacing default form fields, grids, or dashboards with interactive visuals.
Scope: Supported in model-driven apps and canvas apps, but not in on-premises environments.

How Is It Different from Web Resources?

Unlike HTML web resources, code components render as part of the same context and load at the same time as other components. This approach provides a seamless experience for the user.

Create code components that you can use across the full breadth of Power Apps capabilities. Reuse these components many times across different tables and forms.

Developers can bundle all the HTML, CSS, and TypeScript files into a single solution package file to move across environments. They can also make them available via Marketplace.

Advantages

Access to a rich set of framework APIs that expose capabilities like component lifecycle management, contextual data, and metadata.
Seamless server access via Web API.
Utility and data formatting methods.
Access to device features like camera, location, and microphone.
Easy-to-invoke user experience elements such as dialogs, lookups, and full-page rendering.
Support for modern web practices.
Optimized for performance.
Reusability across multiple apps and environments.
Ability to bundle all files into a single solution file.
Ability to handle being destroyed and reloaded for performance reasons while preserving state.

PCF Control Architecture

PCF controls consist of three main elements:

Element	Description
Manifest	XML file (ControlManifest.Input.xml) defining metadata, properties, datasets, and resources.
Component Implementation	TypeScript code implementing lifecycle methods (init, updateView, getOutputs, destroy).
Resources	Supporting files (CSS, images, libraries) bundled into the solution.

Lifecycle Methods

init() – Initializes the control with context and parameters.
updateView() – Refreshes the UI when data changes.
getOutputs() – Returns updated values to the app.
destroy() – Cleans up resources when the control is unloaded.

Development Workflow

1. Set Up Prerequisites

Install the required tools:

Node.js
Power Platform CLI
Visual Studio Code
.NET build tools

2. Initialize the Project

Use the following command to scaffold a new component:

pac pcf init

3. Implement the Manifest

Define the component metadata and configuration options.

4. Write the Logic

Implement the lifecycle methods in TypeScript.

5. Style the Component

Add CSS to customize the user interface.

6. Build and Package

Compile the component and bundle it into a solution file.

7. Deploy and Configure

Import the solution into Dataverse and assign the component to forms or views.

Licensing

Power Apps Component Framework licensing requirements align with existing connectors and components. They are based on the type of data and connections used in your app. For more information, see the Power Apps pricing documentation.

To align with licensing requirements, classify code components into two types.

Premium Code Components

Code components that connect directly to external services or data through the user's browser (without using connectors) are considered premium.

When these components are used:

The app becomes a premium app.
End users require Power Apps licenses.

Standard Code Components

Code components that do not connect to external services or data remain standard.

When these components are used in apps that rely only on standard features:

The app remains standard.
End users require at least an Office 365 license.

Declaring a Premium Component

Code components can be declared as premium by adding an <external-service-usage> node to the component's manifest file.

<external-service-usage enabled="true">
    <domain>www.microsoft.com</domain>
</external-service-usage>

Example Use Cases

Numeric Input

Replace a standard text field with a slider or dial.

Data Visualization

Transform a list into a calendar or map view.

Custom Dashboards

Embed charts or interactive grids.

Challenges and Best Practices

Performance

Ensure efficient rendering and proper cleanup to avoid memory leaks.

Governance

Classify components correctly (standard vs. premium) to comply with licensing requirements.

Maintainability

Use clean architecture and modular design for better scalability.

Testing

Debug thoroughly using Power Platform CLI and test across multiple environments.

Summary

Power Apps Component Framework (PCF) enables developers to build reusable, interactive, and high-performance UI components for model-driven and canvas apps. By leveraging TypeScript, HTML, and CSS, developers can replace standard controls with rich user experiences while integrating seamlessly with Dataverse and Power Platform services. Understanding the component architecture, lifecycle methods, development workflow, licensing requirements, and best practices helps ensure that PCF controls remain scalable, maintainable, and optimized for enterprise applications.