Tuesday, October 8, 2019

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!

9 comments:

DevOps said...

Thank you for sharing your thoughts and knowledge on this topic.
Pivotal Cloud Foundry Online Training

svrtechnologies said...

This is so elegant and logical and clearly explained. Brilliantly goes through what could be a complex process and makes it obvious.

pivotal cloud foundry tutorial
Pivotal cloud foundry training

Jack sparrow said...

Hey Nice Blog!! Thanks For Sharing!!! Wonderful blog & good post. It is really very helpful to me . I want to share about pivotal training. waiting for a more new post.

Ruhi Sukhla said...

I have read so many articles concerning blogger lovers but this article is genuinely a pleasant piece of writing, keep it up. ba final ka result

Ranjith said...

Very nice post here thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.

python Training in chennai

python Course in chennai

Laila Thakur said...

Hi, I do think this is a great website. I stumble D upon it ?? I am going to return once again since i have book-marked it. Money and freedom is the greatest way to change, may you be rich and continue to help other people.mgsu ba 3rd year result 2021-22 name wise

Unknown said...



I'm attaching a digital copy of this to an email.
https://crackguru.net/ace-utilities-crack-download/

Erica Rule said...
This comment has been removed by the author.
Erica Rule said...

thank you for sharing with us. this information.if anyone learns about microsoft power platform visit here Power Apps development company