Skip to content

Commit cf0f01d

Browse files
troystaylorCopilot
andauthored
Add Power Apps Component Framework (PCF) Development Collection (#428)
* Add PCF Development collection with 17 instruction files * Update instructions/pcf-overview.instructions.md Co-authored-by: Copilot <[email protected]> * Fix description field formatting - wrap values in single quotes --------- Co-authored-by: Copilot <[email protected]>
1 parent 13dc6a4 commit cf0f01d

21 files changed

+2326
-0
lines changed
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
id: pcf-development
2+
name: Power Apps Component Framework (PCF) Development
3+
description: Complete toolkit for developing custom code components using Power Apps Component Framework for model-driven and canvas apps
4+
tags:
5+
- power-apps
6+
- pcf
7+
- component-framework
8+
- typescript
9+
- power-platform
10+
items:
11+
- path: instructions/pcf-overview.instructions.md
12+
kind: instruction
13+
- path: instructions/pcf-code-components.instructions.md
14+
kind: instruction
15+
- path: instructions/pcf-model-driven-apps.instructions.md
16+
kind: instruction
17+
- path: instructions/pcf-canvas-apps.instructions.md
18+
kind: instruction
19+
- path: instructions/pcf-power-pages.instructions.md
20+
kind: instruction
21+
- path: instructions/pcf-react-platform-libraries.instructions.md
22+
kind: instruction
23+
- path: instructions/pcf-fluent-modern-theming.instructions.md
24+
kind: instruction
25+
- path: instructions/pcf-dependent-libraries.instructions.md
26+
kind: instruction
27+
- path: instructions/pcf-events.instructions.md
28+
kind: instruction
29+
- path: instructions/pcf-tooling.instructions.md
30+
kind: instruction
31+
- path: instructions/pcf-limitations.instructions.md
32+
kind: instruction
33+
- path: instructions/pcf-alm.instructions.md
34+
kind: instruction
35+
- path: instructions/pcf-best-practices.instructions.md
36+
kind: instruction
37+
- path: instructions/pcf-sample-components.instructions.md
38+
kind: instruction
39+
- path: instructions/pcf-api-reference.instructions.md
40+
kind: instruction
41+
- path: instructions/pcf-manifest-schema.instructions.md
42+
kind: instruction
43+
- path: instructions/pcf-community-resources.instructions.md
44+
kind: instruction
45+
display:
46+
ordering: manual
47+
show_badge: true

collections/pcf-development.md

Lines changed: 30 additions & 0 deletions
Large diffs are not rendered by default.

docs/README.collections.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ Curated collections of related prompts, instructions, and chat modes organized a
3131
| [Kotlin MCP Server Development](../collections/kotlin-mcp-development.md) | Complete toolkit for building Model Context Protocol (MCP) servers in Kotlin using the official io.modelcontextprotocol:kotlin-sdk library. Includes instructions for best practices, a prompt for generating servers, and an expert chat mode for guidance. | 3 items | kotlin, mcp, model-context-protocol, kotlin-multiplatform, server-development, ktor |
3232
| [PHP MCP Server Development](../collections/php-mcp-development.md) | Comprehensive resources for building Model Context Protocol servers using the official PHP SDK with attribute-based discovery, including best practices, project generation, and expert assistance | 3 items | php, mcp, model-context-protocol, server-development, sdk, attributes, composer |
3333
| [Power Apps Code Apps Development](../collections/power-apps-code-apps.md) | Complete toolkit for Power Apps Code Apps development including project scaffolding, development standards, and expert guidance for building code-first applications with Power Platform integration. | 3 items | power-apps, power-platform, typescript, react, code-apps, dataverse, connectors |
34+
| [Power Apps Component Framework (PCF) Development](../collections/pcf-development.md) | Complete toolkit for developing custom code components using Power Apps Component Framework for model-driven and canvas apps | 17 items | power-apps, pcf, component-framework, typescript, power-platform |
3435
| [Power BI Development](../collections/power-bi-development.md) | Comprehensive Power BI development resources including data modeling, DAX optimization, performance tuning, visualization design, security best practices, and DevOps/ALM guidance for building enterprise-grade Power BI solutions. | 14 items | power-bi, dax, data-modeling, performance, visualization, security, devops, business-intelligence |
3536
| [Power Platform MCP Connector Development](../collections/power-platform-mcp-connector-development.md) | Complete toolkit for developing Power Platform custom connectors with Model Context Protocol integration for Microsoft Copilot Studio | 4 items | power-platform, mcp, copilot-studio, custom-connector, json-rpc |
3637
| [Project Planning & Management](../collections/project-planning.md) | Tools and guidance for software project planning, feature breakdown, epic management, implementation planning, and task organization for development teams. | 17 items | planning, project-management, epic, feature, implementation, task, architecture, technical-spike |

docs/README.instructions.md

Lines changed: 17 additions & 0 deletions
Large diffs are not rendered by default.

instructions/pcf-alm.instructions.md

Lines changed: 246 additions & 0 deletions
Large diffs are not rendered by default.
Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
description: 'Complete PCF API reference with all interfaces and their availability in model-driven and canvas apps'
3+
applyTo: '**/*.{ts,tsx,js}'
4+
---
5+
6+
# Power Apps Component Framework API Reference
7+
8+
The Power Apps component framework provides a rich set of APIs that enable you to create powerful code components. This reference lists all available interfaces and their availability across different app types.
9+
10+
## API Availability
11+
12+
The following table shows all API interfaces available in the Power Apps component framework, along with their availability in model-driven apps and canvas apps.
13+
14+
| API | Model-driven apps | Canvas apps |
15+
|-----|------------------|-------------|
16+
| AttributeMetadata | Yes | No |
17+
| Client | Yes | Yes |
18+
| Column | Yes | Yes |
19+
| ConditionExpression | Yes | Yes |
20+
| Context | Yes | Yes |
21+
| DataSet | Yes | Yes |
22+
| Device | Yes | Yes |
23+
| Entity | Yes | Yes |
24+
| Events | Yes | Yes |
25+
| Factory | Yes | Yes |
26+
| Filtering | Yes | Yes |
27+
| Formatting | Yes | Yes |
28+
| ImageObject | Yes | Yes |
29+
| Linking | Yes | Yes |
30+
| Mode | Yes | Yes |
31+
| Navigation | Yes | Yes |
32+
| NumberFormattingInfo | Yes | Yes |
33+
| Paging | Yes | Yes |
34+
| Popup | Yes | Yes |
35+
| PopupService | Yes | Yes |
36+
| PropertyHelper | Yes | Yes |
37+
| Resources | Yes | Yes |
38+
| SortStatus | Yes | Yes |
39+
| StandardControl | Yes | Yes |
40+
| UserSettings | Yes | Yes |
41+
| Utility | Yes | Yes |
42+
| WebApi | Yes | Yes |
43+
44+
## Key API Namespaces
45+
46+
### Context APIs
47+
48+
The `Context` object provides access to all framework capabilities and is passed to your component's lifecycle methods. It contains:
49+
50+
- **Client**: Information about the client (form factor, network status)
51+
- **Device**: Device capabilities (camera, location, microphone)
52+
- **Factory**: Factory methods for creating framework objects
53+
- **Formatting**: Number and date formatting
54+
- **Mode**: Component mode and tracking
55+
- **Navigation**: Navigation methods
56+
- **Resources**: Access to resources (images, strings)
57+
- **UserSettings**: User settings (locale, number format, security roles)
58+
- **Utils**: Utility methods (getEntityMetadata, hasEntityPrivilege, lookupObjects)
59+
- **WebApi**: Dataverse Web API methods
60+
61+
### Data APIs
62+
63+
- **DataSet**: Work with tabular data
64+
- **Column**: Access column metadata and data
65+
- **Entity**: Access record data
66+
- **Filtering**: Define data filtering
67+
- **Linking**: Define relationships
68+
- **Paging**: Handle data pagination
69+
- **SortStatus**: Manage sorting
70+
71+
### UI APIs
72+
73+
- **Popup**: Create popup dialogs
74+
- **PopupService**: Manage popup lifecycle
75+
- **Mode**: Get component rendering mode
76+
77+
### Metadata APIs
78+
79+
- **AttributeMetadata**: Column metadata (model-driven only)
80+
- **PropertyHelper**: Property metadata helpers
81+
82+
### Standard Control
83+
84+
- **StandardControl**: Base interface for all code components with lifecycle methods:
85+
- `init()`: Initialize component
86+
- `updateView()`: Update component UI
87+
- `destroy()`: Cleanup resources
88+
- `getOutputs()`: Return output values
89+
90+
## Usage Guidelines
91+
92+
### Model-Driven vs Canvas Apps
93+
94+
Some APIs are only available in model-driven apps due to platform differences:
95+
96+
- **AttributeMetadata**: Model-driven only - provides detailed column metadata
97+
- Most other APIs are available in both platforms
98+
99+
### API Version Compatibility
100+
101+
- Always check the API availability for your target platform (model-driven or canvas)
102+
- Some APIs may have different behaviors across platforms
103+
- Test components in the target environment to ensure compatibility
104+
105+
### Common Patterns
106+
107+
1. **Accessing Context APIs**
108+
```typescript
109+
// In init or updateView
110+
const userLocale = context.userSettings.locale;
111+
const isOffline = context.client.isOffline();
112+
```
113+
114+
2. **Working with DataSet**
115+
```typescript
116+
// Access dataset records
117+
const records = context.parameters.dataset.records;
118+
119+
// Get sorted columns
120+
const sortedColumns = context.parameters.dataset.sorting;
121+
```
122+
123+
3. **Using WebApi**
124+
```typescript
125+
// Retrieve records
126+
context.webAPI.retrieveMultipleRecords("account", "?$select=name");
127+
128+
// Create record
129+
context.webAPI.createRecord("contact", data);
130+
```
131+
132+
4. **Device Capabilities**
133+
```typescript
134+
// Capture image
135+
context.device.captureImage();
136+
137+
// Get current position
138+
context.device.getCurrentPosition();
139+
```
140+
141+
5. **Formatting**
142+
```typescript
143+
// Format date
144+
context.formatting.formatDateLong(date);
145+
146+
// Format number
147+
context.formatting.formatDecimal(value);
148+
```
149+
150+
## Best Practices
151+
152+
1. **Type Safety**: Use TypeScript for type checking and IntelliSense
153+
2. **Null Checks**: Always check for null/undefined before accessing API objects
154+
3. **Error Handling**: Wrap API calls in try-catch blocks
155+
4. **Platform Detection**: Check `context.client.getFormFactor()` to adapt behavior
156+
5. **API Availability**: Verify API availability for your target platform before use
157+
6. **Performance**: Cache API results when appropriate to avoid repeated calls
158+
159+
## Additional Resources
160+
161+
- For detailed documentation on each API, refer to the [Power Apps component framework API reference](https://learn.microsoft.com/power-apps/developer/component-framework/reference/)
162+
- Sample code for each API is available in the [PowerApps-Samples repository](https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework)

0 commit comments

Comments
 (0)