pcf-code-components

Explain Power Apps code component structure using TypeScript and XML manifests.

Updated Jan 23, 2026
One-click install
npx skills add https://github.com/pingqLIN/skill-0 --skill pcf-code-components
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pcf-code-components
Source: https://github.com/pingqLIN/skill-0/tree/main/converted-skills/pcf-code-components
Command: npx skills add https://github.com/pingqLIN/skill-0 --skill pcf-code-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a clear understanding of the structure, implementation, and resource requirements for Power Apps code components, enabling developers to build and integrate custom UI elements.

Core Features & Use Cases

  • Component Structure: Explains the three core elements: Manifest, Component Implementation, and Resources.
  • Manifest Definition: Details the ControlManifest.Input.xml file and its role in defining component properties and resources.
  • Implementation Lifecycle: Outlines the required methods (init, updateView, getOutputs, destroy) and their roles in the component's lifecycle.
  • Resource Management: Describes how to include and manage necessary resource files like TypeScript, CSS, and images.
  • Use Case: A developer needs to create a custom date picker for a Power App. This Skill guides them through defining the manifest, implementing the TypeScript logic, and including necessary resources.

Quick Start

Explain the purpose of the init method in a Power Apps code component.

Frequently Asked Questions about pcf-code-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the required lifecycle methods for a Power Apps code component?

Power Apps code components require four lifecycle methods: init, updateView, getOutputs, and destroy. These methods manage the component's state, render UI updates, retrieve user input, and clean up resources.

How do I define properties for a custom control in Power Apps?

You define custom control properties using the ControlManifest.Input.xml file. This manifest specifies the component's configuration, data inputs, and resource files required for integration into model-driven or canvas apps.

What is the purpose of the init method in a Power Apps code component?

The init method initializes a Power Apps code component when it loads. It receives input parameters and context objects to set up the initial state and assign resources for the custom control's implementation.

Can I use TypeScript to build custom controls for both model-driven and canvas apps?

Yes, you can use TypeScript to implement custom controls for both model-driven and canvas apps. The component logic is written in TypeScript and bundled with resources defined in the XML manifest.

How do I manage resource files like CSS and images in Power Apps code components?

Resource files like CSS, images, and TypeScript are managed through the ControlManifest.Input.xml. This manifest registers all necessary resources so the Power Platform can properly bundle and render the custom control.

What is the structure of a Power Apps code component?

A Power Apps code component consists of three core elements: a manifest, the TypeScript implementation, and resources. The manifest defines properties, the implementation handles lifecycle logic, and resources contain supporting files.