{"kind":"AgentDefinition","metadata":{"namespace":"community","name":"pcf-code-components","version":"0.1.0"},"spec":{"agents_md":"---\ndescription: 'Understanding code components structure and implementation'\napplyTo: '**/*.{ts,tsx,js,json,xml,pcfproj,csproj}'\n---\n\n# Code Components\n\nCode components are a type of solution component that can be included in a solution file and imported into different environments. They can be added to both model-driven and canvas apps.\n\n## Three Core Elements\n\nCode components consist of three elements:\n\n1. **Manifest**\n2. **Component implementation**\n3. **Resources**\n\n\u003e **Note**: The definition and implementation of code components using Power Apps component framework is the same for both model-driven and canvas apps. The only difference is the configuration part.\n\n## Manifest\n\nThe manifest is the `ControlManifest.Input.xml` metadata file that defines a component. It is an XML document that describes:\n\n- The name of the component\n- The kind of data that can be configured, either a `field` or a `dataset`\n- Any properties that can be configured in the application when the component is added\n- A list of resource files that the component needs\n\n### Manifest Purpose\n\nWhen a user configures a code component, the data in the manifest file filters the available components so that only valid components for the context are available for configuration. The properties defined in the manifest file are rendered as configuration columns so that users can specify values. These property values are then available to the component at runtime.\n\nMore information: [Manifest schema reference](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/)\n\n## Component Implementation\n\nCode components are implemented using TypeScript. Each code component must include an object that implements the methods described in the code component interface. The [Power Platform CLI](https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction) auto-generates an `index.ts` file with stubbed implementations using the `pac pcf init` command.\n\n### Required Methods\n\nThe component object implements these lifecycle methods:\n\n- **init** (Required) - Called when the page loads\n- **updateView** (Required) - Called when app data changes\n- **getOutputs** (Optional) - Returns values when user changes data\n- **destroy** (Required) - Called when the page closes\n\n### Component Lifecycle\n\n#### Page Load\n\nWhen the page loads, the application creates an object using data from the manifest:\n\n```typescript\nvar obj = new \u003c\"namespace on manifest\"\u003e.\u003c\"constructor on manifest\"\u003e();\n```\n\nExample:\n```typescript\nvar controlObj = new SampleNameSpace.LinearInputComponent();\n```\n\nThe page then initializes the component:\n\n```typescript\ncontrolObj.init(context, notifyOutputChanged, state, container);\n```\n\n**Init Parameters:**\n\n| Parameter | Description |\n|-----------|-------------|\n| `context` | Contains all information about how the component is configured and all parameters. Access input properties via `context.parameters.\u003cproperty name from manifest\u003e`. Includes Power Apps component framework APIs. |\n| `notifyOutputChanged` | Alerts the framework whenever the component has new outputs ready to be retrieved asynchronously. |\n| `state` | Contains component data from the previous page load if explicitly stored using `setControlState` method. |\n| `container` | An HTML div element to which developers can append HTML elements for the UI. |\n\n#### User Changes Data\n\nWhen a user interacts with your component to change data, call the `notifyOutputChanged` method passed in the `init` method. The platform responds by calling the `getOutputs` method, which returns values with the changes made by the user. For a `field` component, this would typically be the new value.\n\n#### App Changes Data\n\nIf the platform changes the data, it calls the `updateView` method of the component and passes the new context object as a parameter. This method should be implemented to update the values displayed in the component.\n\n#### Page Close\n\nWhen a user navigates away from the page, the code component loses scope and all memory allocated for objects is cleared. However, some methods (like event handlers) may stay and consume memory based on browser implementation.\n\n**Best Practices:**\n- Implement the `setControlState` method to store information for the next time within the same session\n- Implement the `destroy` method to remove cleanup code such as event handlers when the page closes\n\n## Resources\n\nThe resource node in the manifest file refers to the resources that the component requires to implement its visualization. Each code component must have a resource file to construct its visualization. The `index.ts` file generated by the tooling is a `code` resource. There must be at least 1 code resource.\n\n### Additional Resources\n\nYou can define additional resource files in the manifest:\n\n- CSS files\n- Image web resources\n- Resx web resources for localization\n\nMore information: [resources element](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/resources)\n\n## Related Resources\n\n- [Create and build a code component](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/create-custom-controls-using-pcf)\n- [Learn how to package and distribute extensions using solutions](https://learn.microsoft.com/en-us/power-platform/alm/solution-concepts-alm)\n","description":"Understanding code components structure and implementation","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-code-components.instructions.md"},"manifest":{}},"content_hash":[201,129,2,194,158,85,75,129,131,159,172,236,242,117,158,255,71,134,122,74,252,81,240,168,120,76,173,90,255,117,93,123],"trust_level":"unsigned","yanked":false}