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:
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:
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.