Enable Custom Code Components (PCF Controls) to be imported in a Canvas Power App | Quick Tip

In case you want to enable PCF Controls to be allowed to be embedded in a Canvas Power App, here’s what you do.

Default Behavior

By default, if you see as below i.e. you are not able to Import Code Components (PCF Components) into your Power App and see the below –

  1. In order to Import a Code Components in a Canvas App, you navigate to Insert tab and then expand Custom and click on Import Components.

  2. But, only Components published from other Canvas Apps are available to import.

    So here’s how you can first enable the ability to import Custom Code Components in Canvas Power Apps.

Power Platform Admin Settings

It is possible that this setting is turned off by default. Here’s what you need to do to turn it back on –

  1. Navigate to Environments’ section in Power Platform Admin Center (https://admin.powerplatform.microsoft.com/environments). Make sure you are into the environment where you are building this App in.
    Alternatively, you can also select the environment and click on Settings from the top ribbon.

  2. Once in the environment, click on Settings. (As I mentioned above, you can also access this from the Environments section itself without entering the Environment altogether)

  3. Once in Settings, expand Settings tab and go in Features.

  4. Once you open Features, you’ll find the Power App Component Framework settings on the right which might be turned off.

  5. Now, turn this ON and Save changes.

  6. Also, as an additional check also make sure the App too has enabled Components to be included in the App. This is available in the Advanced Settings of the Canvas App itself.

    Assuming you have turned that ON. Now, you can go in your Canvas Power App and Import Code Components.

Import Code Components in Canvas Power Apps

Now, let’s say you have already turned on Power Apps component framework settings for canvas apps as shown above.

  1. In you Canvas App, click on Import Components as shown below.

  2. And now, you should be able to also see a section called as Code where custom code components will appear.

  3. Let’s say you have imported this component, it will be available to use in the + menu in the Canvas App Studio.

Hope this was useful. Here are some more Power Apps / Power Platform posts you might want to check out –

  1. Rich Text Control for Canvas and Model-Driven App | Quick Tip
  2. Setting Correct Default Mode for Forms in a Canvas App | [Quick Tip]
  3. Rating Control to represent data from Dataverse in a Canvas Power App | Power Platform
  4. Clear a field value & Reset Form in a Canvas Power App [Quick Tip]
  5. Implement real-time search in Gallery of CDS records in a Canvas Power App | Power Platform
  6. Implement character length validation in a Canvas Power App | Power Platform
  7. Implementing Exit app, Logout and Confirm Exit features in a Canvas Power App
  8. Debug Published Canvas Power App with other users using Monitor | Power Platform
  9. AddColumns() function to dynamically add columns to a Data table in Canvas Power App | SharePoint List
  10. Log Canvas Power App telemetry data in Azure Application Insights | Power Apps

Thank you!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.