![Power App component]()
What is Power Apps Component Framework (PCF)?
Power Apps Component Framework is to create (code) components that can be used across apps. This framework empowers developers and app makers to develop components for model-driven apps, canvas apps, and portals.
Benefits
- Leverages developers to develop user-friendly, interactive, and reusable components.
- Modern web techniques and client-side frameworks are supported.
- Allows seamless access to resources through APIs.
Prerequisites
Creating the component with Power Apps CLI
Initialize and create a project
You can open your preferred CLI and navigate to the folder.
pac pcf init -n "name" -ns "namespace" -t [dataset or field]
- "name" (-n) is a project name.
- "namespace" (-ns) is the namespace for the project.
- "type" (-t) can either be a dataset or a field.
![Dataset]()
Overview
Manifest file
![Manifest file]()
Configuration Files
- eslintrc: manage linting rules.
- gitignore: defines which files should be kept out of git source control.
- package.json: defines the created dependencies and npm scripts.
- package-lock.json: created automatically based on package.json
- pcfconfig: configuration of pcf projects
- tsconfig: typescript configuration
![Configuration Files]()
Project File
![Project File]()
Index.ts
- init: this function gets invoked when a component is loaded.
- updateView: invoked when there have been external changes, and the component needs to refresh to reflect those changes.
- getOutputs: If a component changes data, this function can be used to return those data.
- destroy: this function is invoked when a component is removed from the DOM tree.
![Index]()
Update the index.ts file before we run our code.
![Update the index]()
Save the changes made in the index.ts file and run the command.
npm start watch
Output
![Output]()