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:
- Export your app from the make.powerapps.com site to your machine.
- Unpack the app using the CanvasApp Packager (https://github.com/daryllabar/CanvasAppPackager).
- Open the Extract\Apps\<App Name>\Properties.json file.
- Search for the AppPReviewFlagsKey array.
- Add "nativecdsexperimental" to the end of the array e.g. "AppPreviewFlagsKey":["delayloadscreens","componentauthoring", "nativecdsexperimental"]
- Pack the app using the CanvasApp Packager.
- Import back into your make.powerapps.com environment.
- Enjoy being able to select your PCF components in your older Canvas App!
Published on:
Learn moreRelated posts
How to Detect that a PCF is Running Inside a Canvas App / Custom Page
Usually my target is to develop a PCF working inside all types of apps: Canvas App (or Custom Pages), Model-Driven Apps and hopefully also ins...
Power Up Your Canvas Apps with No Code Interactive Maps: A Game-Changer for Sales and Field Teams!
If you’re a Sales Manager juggling territories, appointments, and customer data across multiple tools, it’s time to simplify things—with maps ...
Debug PCFs using a Browser Autoresponder Extension (MDA & Canvas Apps)
I’m sure the Autoresponder idea for Debugging PCFs (or WebResources) is not new to you. Debugging with an autoresponder solution is a li...
Summer 2025 Dynamics 365 Maps Release: Smarter Routing, Azure Maps, Canvas Apps & More!
Technology never stands still, and neither does Team Maplytics! With our latest March 2025 updates, your geo-mapping experience within Dynamic...
Building Streamlined, Traceable and Error Handled Canvas App Functions
Building processes in Canvas App is fast and you can get a lot done very quickly. Actions that, for example, a button control does, can become...
PowerPlatformTip 134 – ‘Optimize Canvas Apps with YAML’
Optimize your Power Apps with YAML! Copy Canvas App code and let AI suggest improvements for performance and structure. Boost app efficiency t...
[Power Apps] Creating a Full Outer Join Between Collections in Canvas App
Level of Difficulty: Intermediate – Senior. To join or not to join! Let’s delve deep into the realm of data manipulation by introd...