Power Apps Components Framework (PCF)

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.

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

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.

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