{"kind":"AgentDefinition","metadata":{"namespace":"community","name":"pcf-power-pages","version":"0.1.0"},"spec":{"agents_md":"---\ndescription: 'Using code components in Power Pages sites'\napplyTo: '**/*.{ts,tsx,js,json,xml,pcfproj,csproj}'\n---\n\n# Use Code Components in Power Pages\n\nPower Pages now support controls built for model-driven apps created using Power Apps component framework. To use code components in Power Pages site webpages:\n\n![Create code component using component framework, then add the code component to a model-driven app form, and configure the code component field inside the basic form for portals](https://learn.microsoft.com/en-us/power-pages/configure/media/component-framework/steps.png)\n\nAfter completing these steps, users can interact with the code component using the webpage that has the respective [form](https://learn.microsoft.com/en-us/power-pages/getting-started/add-form) component.\n\n## Prerequisites\n\n- You need system administrator privileges to enable the code component feature in the environment\n- Your Power Pages site version needs to be [9.3.3.x](https://learn.microsoft.com/en-us/power-apps/maker/portals/versions/version-9.3.3.x) or higher\n- Your starter site package needs to be [9.2.2103.x](https://learn.microsoft.com/en-us/power-apps/maker/portals/versions/package-version-9.2.2103) or higher\n\n## Create and Package Code Component\n\nTo learn about creating and packaging code components in Power Apps component framework, go to [Create your first component](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript).\n\n### Supported Field Types and Formats\n\nPower Pages supports restricted field types and formats for using code components. The following table lists all supported field data types and formats:\n\n**Supported Types:**\n- Currency\n- DateAndTime.DateAndTime\n- DateAndTime.DateOnly\n- Decimal\n- Enum\n- Floating Point Number\n- Multiple\n- OptionSet\n- SingleLine.Email\n- SingleLine.Phone\n- SingleLine.Text\n- SingleLine.TextArea\n- SingleLine.Ticker\n- SingleLine.URL\n- TwoOptions\n- Whole\n\nFor more information, see [Attributes list and descriptions](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/property#remarks).\n\n### Unsupported Code Components in Power Pages\n\nThe following code component APIs aren't supported:\n- [Device.captureAudio](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/device/captureaudio)\n- [Device.captureImage](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/device/captureimage)\n- [Device.captureVideo](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/device/capturevideo)\n- [Device.getBarcodeValue](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/device/getbarcodevalue)\n- [Device.getCurrentPosition](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/device/getcurrentposition)\n- [Device.pickFile](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/device/pickfile)\n- [Utility](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/utility)\n\n**Additional Restrictions:**\n- The [uses-feature](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/uses-feature) element must not be set to true\n- [Value elements not supported](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/property#value-elements-that-are-not-supported) by Power Apps component framework\n- Power Apps Component Framework (PCF) controls bound to multiple fields in a form isn't supported\n\n## Add a Code Component to a Field in a Model-Driven App\n\nTo learn how to add a code component to a field in a model-driven app, go to [Add a code component to a field](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/add-custom-controls-to-a-field-or-entity#add-a-code-component-to-a-column).\n\n\u003e **Important**: Code components for Power Pages are available for web browsers using the client option of **Web**.\n\n### Add Using Data Workspace\n\nYou can also add a code component to a form using [Data workspace](https://learn.microsoft.com/en-us/power-pages/configure/data-workspace-forms).\n\n1. When editing a Dataverse form in the Data workspace form designer, select a field\n2. Choose **+ Component** and select an appropriate component for the field\n\n   ![Add component to form](https://learn.microsoft.com/en-us/power-pages/configure/media/component-framework/add-component-to-form.png)\n\n3. Select **Save** and **Publish form**\n\n## Configure Power Pages Site for Code Component\n\nAfter the code component is added to a field in a model-driven app, you can configure Power Pages to use the code component on a form.\n\nThere are two methods to enable the code component:\n\n### Enable Code Component in Design Studio\n\nTo enable a code component on a form using the design studio:\n\n1. After you [add the form to a page](https://learn.microsoft.com/en-us/power-pages/getting-started/add-form), select the field where you added the code component and select **Edit field**\n2. Select the **Enable custom component** field\n\n   ![Enable custom component in design studio](https://learn.microsoft.com/en-us/power-pages/configure/media/component-framework/enable-code-component.png)\n\n3. When you preview the site, you should see the custom component enabled\n\n### Enable Code Component in Portals Management App\n\nTo add a code component to a basic form by using the Portals Management app:\n\n1. Open the [Portals Management](https://learn.microsoft.com/en-us/power-pages/configure/portal-management-app) app\n2. On the left pane, select **Basic Forms**\n3. Select the form to which you want to add the code component\n4. Select **Related**\n5. Select **Basic Form Metadata**\n6. Select **New Basic Form Metadata**\n7. Select **Type** as **Attribute**\n8. Select **Attribute Logical Name**\n9. Enter **Label**\n10. For **Control Style**, select **Code Component**\n11. Save and close the form\n\n## Code Components Using the Portal Web API\n\nA code component can be built and added to a webpage that can use the [portal Web API](https://learn.microsoft.com/en-us/power-pages/configure/web-api-overview) to perform create, retrieve, update, and delete actions. This feature allows greater customization options when developing portal solutions. For more information, see [Implement a sample portal Web API component](https://learn.microsoft.com/en-us/power-pages/configure/implement-webapi-component).\n\n## Next Steps\n\n[Tutorial: Use code components in portals](https://learn.microsoft.com/en-us/power-pages/configure/component-framework-tutorial)\n\n## See Also\n\n- [Power Apps component framework overview](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/overview)\n- [Create your first component](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript)\n- [Add code components to a column or table in model-driven apps](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/add-custom-controls-to-a-field-or-entity)\n","description":"Using code components in Power Pages sites","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-power-pages.instructions.md"},"manifest":{}},"content_hash":[202,167,62,68,247,145,83,183,124,151,161,18,250,137,104,45,163,167,169,82,213,115,209,213,23,251,148,185,194,41,25,31],"trust_level":"unsigned","yanked":false}