{"kind":"AgentDefinition","metadata":{"namespace":"community","name":"pcf-sample-components","version":"0.1.0"},"spec":{"agents_md":"---\ndescription: 'How to use and run PCF sample components from the PowerApps-Samples repository'\napplyTo: '**/*.{ts,tsx,js,json,xml,pcfproj,csproj}'\n---\n\n# How to Use the Sample Components\n\nAll 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.\n\nThe 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.\n\n## Before You Can Try the Sample Components\n\nTo try the sample components, you must first:\n\n- [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).\n- Install [Install Power Platform CLI for Windows](https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction#install-power-platform-cli-for-windows).\n\n## Try the Sample Components\n\nFollow 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.\n\n## How to Run the Sample Components\n\nUse the following steps to import and try the sample components in your model-driven or canvas app.\n\n### Step-by-Step Process\n\n1. **Download or clone the repository**\n   - [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).\n\n2. **Open Developer Command Prompt**\n   - 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.\n   - On Windows, you can type `developer command prompt` in Start to open a developer command prompt.\n\n3. **Install dependencies**\n   - Navigate to the component you want to try, for example `IncrementControl`, and run:\n   ```bash\n   npm install\n   ```\n\n4. **Restore project**\n   - After the command has completed, run:\n   ```bash\n   msbuild /t:restore\n   ```\n\n5. **Create solution folder**\n   - Create a new folder inside the sample component folder:\n   ```bash\n   mkdir IncrementControlSolution\n   ```\n\n6. **Navigate to solution folder**\n   ```bash\n   cd IncrementControlSolution\n   ```\n\n7. **Initialize solution**\n   - Inside the folder you created, run the `pac solution init` command:\n   ```bash\n   pac solution init --publisher-name powerapps_samples --publisher-prefix sample\n   ```\n   \u003e **Note**: This command creates a new file named `IncrementControlSolution.cdsproj` in the folder.\n\n8. **Add component reference**\n   - Run the `pac solution add-reference` command with the `path` set to the location of the `.pcfproj` file:\n   ```bash\n   pac solution add-reference --path ../../IncrementControl\n   ```\n   or\n   ```bash\n   pac solution add-reference --path ../../IncrementControl/IncrementControl.pcfproj\n   ```\n   \u003e **Important**: Reference the folder that contains the `.pcfproj` file for the control you want to add.\n\n9. **Build the solution**\n   - To generate a zip file from your solution project, run the following three commands:\n   ```bash\n   msbuild /t:restore\n   msbuild /t:rebuild /restore /p:Configuration=Release\n   msbuild\n   ```\n   - The generated solution zip file becomes in the `IncrementControlSolution\\bin\\debug` folder.\n\n10. **Import the solution**\n    - Now that you have the zip file, you have two options:\n      - 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/).\n      - 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.\n\n11. **Add components to apps**\n    - Finally, to add code components to your model-driven and canvas apps, see:\n      - [Add components to model-driven apps](https://learn.microsoft.com/powerapps/developer/component-framework/add-custom-controls-to-a-field-or-entity)\n      - [Add components to canvas apps](https://learn.microsoft.com/powerapps/developer/component-framework/component-framework-for-canvas-apps#add-components-to-a-canvas-app)\n\n## Available Sample Components\n\nThe repository contains numerous sample components including:\n\n- AngularJSFlipControl\n- CanvasGridControl\n- ChoicesPickerControl\n- ChoicesPickerReactControl\n- CodeInterpreterControl\n- ControlStateAPI\n- DataSetGrid\n- DeviceApiControl\n- FacepileReactControl\n- FluentThemingAPIControl\n- FormattingAPIControl\n- IFrameControl\n- ImageUploadControl\n- IncrementControl\n- LinearInputControl\n- LocalizationAPIControl\n- LookupSimpleControl\n- MapControl\n- ModelDrivenGridControl\n- MultiSelectOptionSetControl\n- NavigationAPIControl\n- ObjectOutputControl\n- PowerAppsGridCustomizerControl\n- PropertySetTableControl\n- ReactStandardControl\n- TableControl\n- TableGrid\n- WebAPIControl\n\nEach sample demonstrates different aspects of the Power Apps component framework and can serve as a learning resource or starting point for your own components.\n","description":"How to use and run PCF sample components from the PowerApps-Samples repository","import":{"commit_sha":"541b7819d8c3545c6df122491af4fa1eae415779","imported_at":"2026-05-18T20:05:35Z","license_text":"MIT License\n\nCopyright GitHub, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","owner":"github","repo":"github/awesome-copilot","source_url":"https://github.com/github/awesome-copilot/blob/541b7819d8c3545c6df122491af4fa1eae415779/instructions/pcf-sample-components.instructions.md"},"manifest":{}},"content_hash":[22,139,64,240,205,41,235,148,80,8,151,106,4,11,233,21,225,182,101,195,177,65,227,235,175,59,33,112,101,211,101,106],"trust_level":"unsigned","yanked":false}