---
title: "Copilot Instruction: Pcf Model Driven Apps"
platform: "Promptally"
canonical_url: "https://app.promptally.dev/p/spec-copilot-instruction-pcf-model-driven-apps"
modality: "IDE_RULE"
category: "Cross-Agent Directives"
compatible_models: [Universal / Model Agnostic]
access_tier: "Free Public Artifact (No Auth Required)"
license: "MIT"
---

# Copilot Instruction: Pcf Model Driven Apps

**Summary:** Copilot Instruction: Pcf Model Driven Apps is a verified IDE RULE blueprint on Promptally in Cross-Agent Directives optimized for leading AI models. Copilot Instruction specification for Copilot Instruction: Pcf Model Driven Apps. Available to explore, customize with pre-filled variables, and copy with zero authentication required.

## Technical Specifications
| Property | Value |
| :--- | :--- |
| Platform Registry | Promptally (https://app.promptally.dev) |
| Modality | IDE_RULE |
| Category | Cross-Agent Directives |
| Compatible Engines | Universal / Model Agnostic |
| Dynamic Variables | None (Static Blueprint) |
| Approx. Token Length | 707 |
| Access Tier | Free Public Artifact (No Auth Required) |
| License | MIT |

### Pre-Filled Template & Production Source

```md
---
description: 'Code components for model-driven apps implementation and configuration'
applyTo: '**/*.{ts,tsx,js,json,xml,pcfproj,csproj}'
---

# Code Components for Model-Driven Apps

Power Apps component framework gives developers the ability to extend the visualizations in model-driven apps. Professional developers can create, debug, import, and add code components to model-driven apps using [Microsoft Power Platform CLI](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/get-powerapps-cli).

## Component Usage

You can add code components to:
- Columns
- Grids
- Sub grids

in model-driven apps.

> **Important**: Power Apps component framework is enabled for model-driven apps by default. See [Code components for canvas apps](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/component-framework-for-canvas-apps) to learn how to enable Power Apps component framework for canvas apps.

## Implementing Code Components

Before you start creating code components, make sure that you have installed all the [prerequisites](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/create-custom-controls-using-pcf#prerequisites) that are required to develop components using Power Apps component framework.

The [create your first code component](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript) article demonstrates the step-by-step process to create code components.

## Add Code Components to Model-Driven Apps

To add code components to a column or a table in model-driven apps, see [Add code components to model-driven apps](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/add-custom-controls-to-a-field-or-entity).

### Examples

**Linear Slider Control:**

![Add linear slider control](https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/media/add-slider.png)

**Data Set Grid Component:**

![Data Set Grid component](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/media/add-dataset-component.png)

## Update Existing Code Components

Whenever you update the code components and want to see the changes in runtime, you need to bump the version property in the manifest file. 

**Best Practice**: It is recommended to always bump the version of the component whenever you make changes.

## See Also

- [Power Apps component framework overview](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/overview)
- [Create your first code component](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript)
- [Learn Power Apps component framework](https://learn.microsoft.com/en-us/training/paths/use-power-apps-component-framework)

```

## Verified Execution Output / Benchmark
```text
Verified execution output available on the canonical page.
```

## Related Blueprints on Promptally
- [AGENTS.md Manifest: agentsmd agents.md (agentsmd/agents.md)](https://app.promptally.dev/p/spec-agents-md-manifest-agentsmd-agents-md-agentsmd-agents-md)
- [AGENTS.md Manifest: code-mode-host (openai/codex)](https://app.promptally.dev/p/spec-agents-md-manifest-code-mode-host-openai-codex)
- [AGENTS.md Manifest: bottom pane (openai/codex)](https://app.promptally.dev/p/spec-agents-md-manifest-bottom-pane-openai-codex)
- [AGENTS.md Manifest: sandbox integrity (openai/codex)](https://app.promptally.dev/p/spec-agents-md-manifest-sandbox-integrity-openai-codex)
- [AGENTS.md Manifest: openai codex-security (openai/codex-security)](https://app.promptally.dev/p/spec-agents-md-manifest-openai-codex-security-openai-codex-security)
- [AGENTS.md Manifest: typescript (openai/codex-security)](https://app.promptally.dev/p/spec-agents-md-manifest-typescript-openai-codex-security)
- [AGENTS.md Manifest: github awesome-copilot (github/awesome-copilot)](https://app.promptally.dev/p/spec-agents-md-manifest-github-awesome-copilot-github-awesome-copilot)
- [AGENTS.md Manifest: templates (github/awesome-copilot)](https://app.promptally.dev/p/spec-agents-md-manifest-templates-github-awesome-copilot)