Build PCF for Canvas Application

Power Apps Component Framework (PCF) allows developers to create rich, reusable UI components that go beyond the default controls offered in Power Apps. But not as easy as in the Model-Driven Applications.

Security Considerations

When we are using a custom PCF control in our app, Power Apps warns that this component contains JavaScript/TypeScript code that runs inside the app, the code is not verified or certified by Microsoft, and the control was likely added from a developer environment, not from AppSource.

This warning is only for security awareness — Microsoft just wants you to confirm that the source is trusted.

Enable the PCF for the Canvas application

You must enable the Power Apps component framework feature in each environment where you wish to use code components before you can add them to an application. For model-driven applications, the Power Programs component feature is enabled by default.

To do that, navigate to your admin center > Environment > Click the particular environment that you want to add PCF > Settings and finally features.

In the list of features, find “Power Apps component framework for canvas apps” and turn it on.

Add PCF to Canvas Application

Create a solution with code components in a (.zip) file, and import that into PowerApps. After that, inside the Canvas Application, which we want to add the code component, do the following steps.

Step 1: On the left panel click get more components

Step 2: Click on code components and select a specific custom control to add to the Canvas application.

Step 3: After that, you will find a new option called “Code components” on the left panel.

By using that, we can easily add PCF to our Canvas Application.

Here I attached a sample PCF emoji rating application for movies.

By building this Emoji Rating PCF, I’ve transformed a dull numeric input into a fun, expressive control that enhances user experience. From creating the control to embedding it inside a Canvas App, you now understand how PCF can bridge the UI gap in Power Apps.