Power Apps Component Framework

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/
Admin
The Power Apps Component Framework provides tools and resources for developers to create custom code...
Tokens:175,330
Snippets:1,675
Trust Score:10
Update:1 day ago
Show doc for...
Tokens:
Raw
### Device pickFile example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/device

Example of using the device.pickFile() method to open a dialog box for selecting files, with callbacks for processing the file and handling errors.

```typescript
 private onUploadButtonClick(event: Event): void {
    this._context.device.pickFile().then(this.processFile.bind(this), this.showError.bind(this));
  }
```

--------------------------------

### NuGet.Config example with package source credentials

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/issues-and-workarounds

Example NuGet.Config file showing how to add package source credentials using a PAT token to resolve authorization errors when building. The feed URL and credentials are placeholders.

```xml
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="YourFeedName" value="https://contoso.com/_packaging/YourFeedName/nuget/v3/index.json" />
  </packageSources>
  <packageSourceCredentials>
    <YourFeedName>
      <add key="Username" value="anything" />
      <add key="Password" value="User PAT" />
    </YourFeedName>
  </packageSourceCredentials>
</configuration>
```

--------------------------------

### Install Microsoft Fluent UI and React dependencies

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/tutorial-create-model-driven-field-component

Run this npm command to install React, React DOM, and Fluent UI for building the component UI. The modules are added to package.json and node_modules.

```bash
npm install react react-dom @fluentui/react
```

--------------------------------

### StandardControl.init implementation example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/control/init

Example implementation of the init method for a Power Apps component framework control. It creates a label element, sets its class, and appends it to the container.

```TypeScript
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
{
    this._labelElement = document.createElement("label");
    this._labelElement.setAttribute("class", "HelloWorldColor");
    container.appendChild(this._labelElement);
}
```

--------------------------------

### Start debugging with npm start watch

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript

Run this command in the terminal to start the debugging process for the code component. It initializes, validates, compiles, and starts the control harness, then opens a browser to the PCF Control Sandbox.

```bash
npm start watch
```

--------------------------------

### Install required modules with npm install

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/tutorial-create-canvas-dataset-component

Run npm install to install the modules defined in the packages.json file that was created by pac pcf init. If you receive the error 'The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program.', ensure node.js (LTS version recommended) is installed.

```powershell
npm install
```

--------------------------------

### Example local file path for DataSetGrid component

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/debugging-custom-controls

Example path when the component root folder is C:\src\PowerApps-Samples\component-framework\DataSetGrid and the component name is DataSetGrid.

```text
C:\src\PowerApps-Samples\component-framework\DataSetGrid\out\controls\DataSetGrid\${folder}\${fname}
```

--------------------------------

### platform-action element example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/platform-action

Example of the platform-action element with action-type set to afterPageLoad.

```xml
<platform-action action-type="afterPageLoad" />
```

--------------------------------

### npm install output

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript

This is the output message displayed when the pac pcf init command runs npm install.

```text
Running 'npm install' for you...
```

--------------------------------

### Example of img element in resources

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/img

Shows how to include an image file in the component manifest using the img element with a relative path. The example is placed within the resources element alongside a code element.

```xml
<resources>
   <code path="index.ts" order="1" />
     <img path="img/default.png" />
 </resources>
```

--------------------------------

### ReactControl.init Example Implementation

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/react-control/init

Example implementation of the ReactControl.init method. It assigns the notifyOutputChanged callback and calls trackContainerResize(true) to enable container resize tracking. Note that trackContainerResize should be called before using allocatedHeight and allocatedWidth.

```TypeScript
public init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary
): void {
    this.notifyOutputChanged = notifyOutputChanged;
    this.context.mode.trackContainerResize(true);
}
```

--------------------------------

### Initialize a new code component project with pac pcf init (long form)

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/tutorial-create-model-driven-field-component

Use this command in a PowerShell terminal to create a new field template code component project named ChoicesPicker with the namespace SampleNamespace. It runs npm install automatically. The output 'Running 'npm install' for you...' is displayed.

```powershell
pac pcf init `
   --namespace SampleNamespace `
   --name ChoicesPicker `
   --template field `
   --run-npm-install
```

--------------------------------

### Instantiate component with SampleNameSpace.LinearInputComponent

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/custom-controls-overview

Concrete example of instantiating the component when the manifest namespace is SampleNameSpace and the constructor is LinearInputComponent.

```TypeScript
var controlObj = new SampleNameSpace.LinearInputComponent();
```

--------------------------------

### Create and navigate to Solutions folder

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/import-custom-controls

Commands to create a new folder named Solutions inside the sample component folder and navigate into it.

```bash
mkdir Solutions
```

```bash
cd Solutions
```

--------------------------------

### Output of pac solution init

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript

Example output from the pac solution init command, showing successful creation of the solution project and files.

```text
Dataverse solution project with name 'solutions' created successfully in: 'C:\repos\LinearInput\linearinputcontrol\solutions'
Dataverse solution files were successfully created for this project in the sub-directory Other, using solution name solutions, publisher name Samples, and customization prefix samples.
Please verify the publisher information and solution name found in the Solution.xml file.
PS C:\repos\LinearInput\linearinputcontrol\solutions>
```

--------------------------------

### Initialize solution project with pac solution init

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/import-custom-controls

Creates a new solutions project using the pac solution init command. The publisher-name and publisher-prefix values must be unique to your environment.

```bash
pac solution init --publisher-name developer --publisher-prefix dev
```

--------------------------------

### data-set element example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/data-set

Example of a data-set element in a component manifest, showing the name, display-name-key, and cds-data-set-options attributes.

```xml
<data-set name="dataSetGrid"
   display-name-key="DataSetGridProperty"
   cds-data-set-options="displayCommandBar:true;displayViewSelector:true;displayQuickFind:true">
</data-set>
```

--------------------------------

### destroy() method example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/control/destroy

Example implementation of the destroy() method that removes an event listener from a button to clean up resources when the component is removed from the DOM.

```typescript
public destroy(): void
{
    this.button.removeEventListener("click", this.onButtonClick);
}
```

--------------------------------

### type-group numbers example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/type-group

This type-group named 'numbers' includes Whole.None, Currency, FP, and Decimal. It is shown as a general example of defining a type-group.

```xml
<type-group name="numbers">
      <type>Whole.None</type>
      <type>Currency</type>
      <type>FP</type>
      <type>Decimal</type>
    </type-group>
```

--------------------------------

### Expected output from npm start watch

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript

The output shows the sequence of build steps and the Browsersync access URLs, including the local URL http://localhost:8181 and the serving directory.

```text
> pcf-project@1.0.0 start
> pcf-scripts start "watch"

[2:09:10 PM] [start] [watch] Initializing...
[2:09:10 PM] [start] [watch] Validating manifest...
[2:09:10 PM] [start] [watch] Validating control...
[2:09:11 PM] [start] [watch] Generating manifest types...
[2:09:11 PM] [start] [watch] Generating design types...
[2:09:11 PM] [start] [watch] Compiling and bundling control...
[Webpack stats]:
asset bundle.js 6.56 KiB [emitted] (name: main)
./LinearInputControl/index.ts 4.9 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 2060 ms
[2:09:13 PM] [start] [watch] Generating build outputs...
[2:09:13 PM] [start] [watch] Starting control harness...

Starting control harness...

[Browsersync] Access URLs:

 ----------------------------
 Local: http://localhost:8181
 ----------------------------

[Browsersync] Serving files from: C:\repos\LinearInput\out\controls\LinearInputControl

[Browsersync] Watching files...
```

--------------------------------

### ESLint validation error example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript

Example error output when ESLint validation fails during build. The error indicates that 'EventListenerOrEventListenerObject' is not defined (no-undef).

```text
[12:58:30 PM] [build]  Failed:
[pcf-1065] [Error] ESLint validation error:
C:\project\LinearInput\LinearInputControl\index.ts
  10:26  error  'EventListenerOrEventListenerObject' is not defined  no-undef
```

--------------------------------

### Initialize a new code component project with pac pcf init

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/create-custom-controls-using-pcf

Use this command to create a new code component project. It also runs npm install to retrieve all required project dependencies. Replace the placeholders for namespace, name, and template with your own values.

```bash
pac pcf init --namespace <specify your namespace here> --name <Name of the code component> --template <component type> --run-npm-install
```

--------------------------------

### Initialize React component with pac pcf init

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries

Use this PowerShell command to create a React component project and run npm install. It uses parameter shortcuts: -n for name, -ns for namespace, -t for template, -fw for framework, and -npm for run-npm-install.

```powershell
pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm
```

--------------------------------

### Build solution with dotnet build

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript

Alternative command to build the solution project if the .NET 6 SDK is installed.

```bash
dotnet build
```

--------------------------------

### formatUserInput Example with ControlAttributes

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/formatting/formatuserinput

Example showing how to call formatUserInput with a ControlAttributes object specifying type 'double' and precision 2. The input '22' is passed to the formatter.

```typescript
const controlAttributes = {
  Type: "double",
  Precision: 2,
  PrecisionSource: 0,
  Behavior: null,
  OptionSet: null,
  Format: null,
} as ControlAttributes;

context.formatter.formatUserInput("22", controlAttributes);
```

--------------------------------

### Initialize a new code component project with pac pcf init (short form)

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/tutorial-create-model-driven-field-component

Use this short form of the pac pcf init command to create the same ChoicesPicker project. It is equivalent to the long form and also runs npm install.

```powershell
pac pcf init -ns SampleNamespace -n ChoicesPicker -t field -npm
```

--------------------------------

### feature-usage manifest example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/feature-usage

Example of a feature-usage element in a component manifest, declaring multiple uses-feature elements for device capabilities, utility, and WebAPI. This is used in model-driven apps.

```xml
<feature-usage>
    <uses-feature name="Device.captureAudio" required="true" />
    <uses-feature name="Device.captureImage" required="true" />
    <uses-feature name="Device.captureVideo" required="true" />
    <uses-feature name="Device.getBarcodeValue" required="true" />
    <uses-feature name="Device.getCurrentPosition" required="true" />
    <uses-feature name="Device.pickFile" required="true" />
    <uses-feature name="Utility" required="true" />
    <uses-feature name="WebAPI" required="true" />
 </feature-usage>
```

--------------------------------

### Before: init method

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/tutorial-create-model-driven-field-component

The original init method with placeholder comment.

```typescript
public init(
    context: ComponentFramework.Context<IInputs>, 
    notifyOutputChanged: () => void, 
    state: ComponentFramework.Dictionary, 
    container: HTMLDivElement): 
    void {
    // Add control initialization code
}
```

--------------------------------

### Build solution project with msbuild and dotnet build

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/import-custom-controls

Commands to build the solution project. Use msbuild /t:restore only the first time, then msbuild for subsequent builds. If .NET SDK 6 or later is installed, use dotnet build instead.

```bash
msbuild /t:restore
```

```bash
msbuild
```

```bash
dotnet build
```

--------------------------------

### Manifest example for uses-feature

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/uses-feature

Example manifest XML declaring a feature usage with the uses-feature element. The name attribute specifies the feature (WebAPI) and required indicates whether the component requires it.

```xml
<feature-usage>
    <uses-feature name="WebAPI" required="true" />
</feature-usage>
```

--------------------------------

### Create a new component with pac pcf init

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/tutorial-use-dependent-libraries

Initializes a new Power Apps component framework control project with React and npm support.

```bash
pac pcf init -n DependencyControl -ns SampleNamespace -t field -fw react -npm
```

--------------------------------

### Expected build output

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript

Example output from running npm run build. It shows the build process steps and successful compilation, producing bundle.js and ControlManifest.xml.

```text
> pcf-project@1.0.0 build
> pcf-scripts build

[2:05:41 PM] [build]  Initializing...
[2:05:41 PM] [build]  Validating manifest...
[2:05:41 PM] [build]  Validating control...
[2:05:42 PM] [build]  Running ESLint...
[2:05:43 PM] [build]  Generating manifest types...
[2:05:43 PM] [build]  Generating design types...
[2:05:43 PM] [build]  Compiling and bundling control...
[Webpack stats]:
asset bundle.js 6.56 KiB [emitted] (name: main)
./LinearInputControl/index.ts 4.9 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 2049 ms
[2:05:45 PM] [build]  Generating build outputs...
[2:05:45 PM] [build]  Succeeded
PS C:\repos\LinearInput\LinearInputcontrol> 
```

--------------------------------

### Build PCF with release configuration using msbuild

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/issues-and-workarounds

Command to build the .pcfproj as release configuration, which sets the web pack to production mode.

```bash
msbuild /property:configuration=Release
```

--------------------------------

### Example: Using client methods in a component

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/client

This example shows how to use the client methods getFormFactor() and getClient() within a component. It creates an HTML table element and appends rows with the results of these method calls.

```TypeScript
private createHTMLTableElement(): HTMLTableElement {
    let tableElement: HTMLTableElement = document.createElement("table");
    tableElement.setAttribute("class", "SampleControlHtmlTable_HtmlTable");
    let key: string = "Example Method";
    let value: string = "Result";
    tableElement.appendChild(this.createHTMLTableRowElement(key, value, true));
    key = "getFormFactor()";
    value = String(this._context.client.getFormFactor());
    tableElement.appendChild(this.createHTMLTableRowElement(key, value, false));
    key = "getClient()";
    value = String(this._context.client.getClient());
    tableElement.appendChild(this.createHTMLTableRowElement(key, value, false));
}
```

--------------------------------

### Example manifest XML for a component

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/manifest

Shows a complete manifest XML file defining a component with namespace, constructor, version, display and description keys, control type, a bound property, and resource files (JS and CSS). Use as a template for creating a component manifest.

```xml
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
   <control namespace="MyNameSpace"
      constructor="JSHelloWorldControl"
      version="1.0.0"
      display-name-key="JS_HelloWorldControl_Display_Key"
      description-key="JS_HelloWorldControl_Desc_Key"
      control-type="standard">
      <property name="myFirstProperty"
         display-name-key="myFirstProperty_Display_Key"
         description-key="myFirstProperty_Desc_Key"
         of-type="SingleLine.Text"
         usage="bound"
         required="true" />
      <resources>
         <code path="JS_HelloWorldControl.js"
            order="1" />
         <css path="css/JS_HelloWorldControl.css"
            order="1" />
      </resources>
   </control>
</manifest>
```

--------------------------------

### Build solution with msbuild

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/implementing-controls-using-typescript

Command to build the solution project after restore. If the error 'Missing required tool: MSBuild.exe/dotnet.exe' occurs, add MSBuild.exe/dotnet.exe to the Path or use Developer Command Prompt.

```bash
msbuild
```

--------------------------------

### getResource usage example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/resources/getresource

Example of using context.resources.getResource to load a default image resource. The success callback binds the image data, and the failure callback shows an error. It also updates the output if the value already exists.

```typescript
 private setDefaultImage(): void {
    this._context.resources.getResource(
      DefaultImageFileName,
      this.setImage.bind(this, false, "png"),
      this.showError.bind(this)
    );
    this.controlContainer.classList.add(NoImageClassName);
    // If it already has value, we need to update the output
    if (this._context.parameters.value.raw) {
      this._value = null;
      this._notifyOutputChanged();
    }
  }
```

--------------------------------

### Create authentication profile with pac auth create

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/import-custom-controls

Creates an authentication profile for the specified Dataverse environment URL. Use the --url parameter to specify the environment URL.

```bash
pac auth create --url https://xyz.crm.dynamics.com 
```

--------------------------------

### Control element XML example

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/control

Example of a control element in the manifest schema. It defines a control with namespace MyNameSpace, constructor JSHelloWorldControl, version 1.0.0, display-name-key JS_HelloWorldControl_Display_Key, description-key JS_HelloWorldControl_Desc_Key, control-type standard, and preview-image img/preview.png.

```xml
<control namespace="MyNameSpace"
   constructor="JSHelloWorldControl"
   version="1.0.0"
   display-name-key="JS_HelloWorldControl_Display_Key"
   description-key="JS_HelloWorldControl_Desc_Key"
   control-type="standard"
   preview-image="img/preview.png">
</control>
```

--------------------------------

### event element example with pfx-default-value

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/event

Example of an event element in the manifest schema, using pfx-default-value to define a Power Fx expression that submits a form and navigates back. The expression references a control and an enum using the required syntax.

```XML
<event name="OnSelectCustomButton"
   pfx-default-value='SubmitForm(%MyFormName.ID%); Back(%ScreenTransition.RESERVED%.Cover)'
   display-name-key="OnSelectCustomButton_Display_Key"
   description-key="OnSelectCustomButton_Desc_Key" />
```

--------------------------------

### Example manifest with css element

Source: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/manifest-schema-reference/css

Shows a resources node containing a code element and a css element with path and order attributes.

```XML
<resources>
  <code path="TS_LocalizationAPI.js" order="1" />
   <css path="css/TS_LocalizationAPI.css" order="1" />
 </resources>
```
Tokens:
Raw