Loading...

How to Enable PCF Components for Older Canvas Apps

How to Enable PCF Components for Older Canvas Apps

The Backstory

I wanted to try and embed a browser into one of my existing canvas apps but ran into a snag.  I followed the instructions in the docs on enabling PCF components (https://docs.microsoft.com/en-us/powerapps/developer/component-framework/component-framework-for-canvas-apps) but I could only input Canvas based components, not PCF components because the "Import Components" "Code (experimental)" tab wasn't showing up even after I turned on the components preview option for the app:

I was able to eventually get the PCF Components to show up, but that required me to turn on every single preview/experimental feature of the app.  I was concerned that maybe this was because my app was running on an old version of Canvas Apps, so I upgraded by App to the latest version of the app, and PCF components were still not showing up (Again, never had any problem with Canvas components showing up).  I then proceeded to add every single experimental feature in the app settings, and again, the PCF components tab showed up, but when I imported the app into a new environment, the "Explicit Column Selection" feature broke the app.  Turning off this feature removed my PCF control from the app, so I was in a no-win situation.

To test my theory that the issue was because my app had some legacy bloat which was causing it to fail, I created a brand new app, and the PCF components showed up exactly as expected.  I then extracted my app using the CanvasApp Packager (https://github.com/daryllabar/CanvasAppPackager) and compared the differences in the extract json and found the fix!


Actual How To

To get get the PCF Controls experimental feature to show up in your older canvas app follow these steps:

  1. Export your app from the make.powerapps.com site to your machine.
  2. Unpack the app using the CanvasApp Packager (https://github.com/daryllabar/CanvasAppPackager).
  3. Open the Extract\Apps\<App Name>\Properties.json file.
  4. Search for the AppPReviewFlagsKey array.
  5. Add "nativecdsexperimental" to the end of the array e.g. "AppPreviewFlagsKey":["delayloadscreens","componentauthoring", "nativecdsexperimental"]
  6. Pack the app using the CanvasApp Packager.
  7. Import back into your make.powerapps.com environment.
  8. Enjoy being able to select your PCF components in your older Canvas App!

Published on:

Learn more
.Net Dust
.Net Dust

NULL

Share post:

Related posts

Power Apps – Enable online mode to access Dataverse for Canvas apps

We are announcing the ability to enable online mode to access Dataverse for Canvas apps in Power Apps. This feature will reach general availab...

4 days ago

Offline Capabilities in the Canvas App within Dynamics 365 – Part 3

Creating Offline Profiles Directly from Maker Studio In our previous blog, we explored how to enable offline capabilities in Canvas apps and h...

1 month ago

Power Apps – Public preview for Microsoft 365 Copilot chat in canvas apps

We are announcing Microsoft 365 Copilot chat for canvas apps in Power Apps. This feature is now available for public preview. How does this af...

1 month ago

How to add smart offline capabilities in embedded canvas apps

Learn how to smartly add offline capabilities in embedded canvas apps! You can store multiple records related to multiple different records! T...

1 month ago

How to add offline capabilities in embedded canvas apps

Have you ever wanted to add offline or caching capabilities to embedded canvas apps? Learn a very simple way to make that happen! The post How...

1 month ago

Power Apps – Enable online mode to access Dataverse for Canvas apps

We are announcing the ability to enable online mode to access Dataverse for Canvas apps in Power Apps. This feature will reach public preview ...

1 month ago

New quality updates to modern controls in canvas apps

This release delivers quality and reliability improvements across nine modern controls in canvas apps, including Combo Box, Text Input, and Da...

1 month ago

How to change the attachment on a note in canvas apps

Changing the attachment of a note is super easy in a model-driven app, not so much in a canvas app. Learn how to do it! The post How to change...

2 months ago

How to add a title and description when uploading an attachment in canvas apps

Uploading attachments through model-driven apps allows you to specify title & description but canvas app doesn't. Learn how you can! The...

2 months ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy