--- title: "Copilot Instruction: Pcf Sample Components" platform: "Promptally" canonical_url: "https://app.promptally.dev/p/spec-copilot-instruction-pcf-sample-components" 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 Sample Components **Summary:** Copilot Instruction: Pcf Sample Components is a verified IDE RULE blueprint on Promptally in Cross-Agent Directives optimized for leading AI models. Copilot Instruction specification for Copilot Instruction: Pcf Sample Components. 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 | 1,511 | | Access Tier | Free Public Artifact (No Auth Required) | | License | MIT | ### Pre-Filled Template & Production Source ````md --- description: 'How to use and run PCF sample components from the PowerApps-Samples repository' applyTo: '**/*.{ts,tsx,js,json,xml,pcfproj,csproj}' --- # How to Use the Sample Components All the sample components listed under this section are available to download from [github.com/microsoft/PowerApps-Samples/tree/master/component-framework](https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework) so that you can try them out in your model-driven or canvas apps. The individual sample component topics under this section provide you an overview of the sample component, its visual appearance, and a link to the complete sample component. ## Before You Can Try the Sample Components To try the sample components, you must first: - [Download](https://docs.github.com/repositories/working-with-files/using-files/downloading-source-code-archives#downloading-source-code-archives-from-the-repository-view) or [clone](https://docs.github.com/repositories/creating-and-managing-repositories/cloning-a-repository) this repository [github.com/microsoft/PowerApps-Samples](https://github.com/microsoft/PowerApps-Samples). - Install [Install Power Platform CLI for Windows](https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction#install-power-platform-cli-for-windows). ## Try the Sample Components Follow the steps in the [README.md](https://github.com/microsoft/PowerApps-Samples/blob/master/component-framework/README.md) to generate solutions containing the controls so you can import and try the sample components in your model-driven or canvas app. ## How to Run the Sample Components Use the following steps to import and try the sample components in your model-driven or canvas app. ### Step-by-Step Process 1. **Download or clone the repository** - [Download](https://docs.github.com/repositories/working-with-files/using-files/downloading-source-code-archives#downloading-source-code-archives-from-the-repository-view) or [clone](https://docs.github.com/repositories/creating-and-managing-repositories/cloning-a-repository) [github.com/microsoft/PowerApps-Samples](https://github.com/microsoft/PowerApps-Samples). 2. **Open Developer Command Prompt** - Open a [Developer Command Prompt for Visual Studio](https://learn.microsoft.com/visualstudio/ide/reference/command-prompt-powershell) and navigate to the `component-framework` folder. - On Windows, you can type `developer command prompt` in Start to open a developer command prompt. 3. **Install dependencies** - Navigate to the component you want to try, for example `IncrementControl`, and run: ```bash npm install ``` 4. **Restore project** - After the command has completed, run: ```bash msbuild /t:restore ``` 5. **Create solution folder** - Create a new folder inside the sample component folder: ```bash mkdir IncrementControlSolution ``` 6. **Navigate to solution folder** ```bash cd IncrementControlSolution ``` 7. **Initialize solution** - Inside the folder you created, run the `pac solution init` command: ```bash pac solution init --publisher-name powerapps_samples --publisher-prefix sample ``` > **Note**: This command creates a new file named `IncrementControlSolution.cdsproj` in the folder. 8. **Add component reference** - Run the `pac solution add-reference` command with the `path` set to the location of the `.pcfproj` file: ```bash pac solution add-reference --path ../../IncrementControl ``` or ```bash pac solution add-reference --path ../../IncrementControl/IncrementControl.pcfproj ``` > **Important**: Reference the folder that contains the `.pcfproj` file for the control you want to add. 9. **Build the solution** - To generate a zip file from your solution project, run the following three commands: ```bash msbuild /t:restore msbuild /t:rebuild /restore /p:Configuration=Release msbuild ``` - The generated solution zip file becomes in the `IncrementControlSolution\bin\debug` folder. 10. **Import the solution** - Now that you have the zip file, you have two options: - Manually [import the solution](https://learn.microsoft.com/powerapps/maker/data-platform/import-update-export-solutions) into your environment using [make.powerapps.com](https://make.powerapps.com/). - Alternatively, to import the solution using Power Apps CLI commands, see the [Connecting to your environment](https://learn.microsoft.com/powerapps/developer/component-framework/import-custom-controls#connecting-to-your-environment) and [Deployment](https://learn.microsoft.com/powerapps/developer/component-framework/import-custom-controls#deploying-code-components) sections. 11. **Add components to apps** - Finally, to add code components to your model-driven and canvas apps, see: - [Add components to model-driven apps](https://learn.microsoft.com/powerapps/developer/component-framework/add-custom-controls-to-a-field-or-entity) - [Add components to canvas apps](https://learn.microsoft.com/powerapps/developer/component-framework/component-framework-for-canvas-apps#add-components-to-a-canvas-app) ## Available Sample Components The repository contains numerous sample components including: - AngularJSFlipControl - CanvasGridControl - ChoicesPickerControl - ChoicesPickerReactControl - CodeInterpreterControl - ControlStateAPI - DataSetGrid - DeviceApiControl - FacepileReactControl - FluentThemingAPIControl - FormattingAPIControl - IFrameControl - ImageUploadControl - IncrementControl - LinearInputControl - LocalizationAPIControl - LookupSimpleControl - MapControl - ModelDrivenGridControl - MultiSelectOptionSetControl - NavigationAPIControl - ObjectOutputControl - PowerAppsGridCustomizerControl - PropertySetTableControl - ReactStandardControl - TableControl - TableGrid - WebAPIControl Each sample demonstrates different aspects of the Power Apps component framework and can serve as a learning resource or starting point for your own components. ```` ## 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)