Debugging Canvas App PCF components with fiddler
Those of you who know me will also know that I am a massive Fiddler fan for removing the need to deploy each time you change your JavaScript source.
Here are some of my previous blog posts on Fiddler - http://develop1.net/public/search?q=fiddler
The PowerApps docs now even include instructions on it https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/streamline-javascript-development-fiddler-autoresponder
Developing PCF Canvas Controls
When developing PCF controls for Canvas Apps, the process is slightly different and includes an extra step.
1. Add an autoresponder in the format:
Resources0Controls0<NamesSpace>.<ControlName>.bundle.js?sv=
E.g. Resources0Controls0Develop1.PCFTester.bundle.js?sv=
It should look something like:
2. Since the scripts are served from a different domain to PowerApps, configure Fiddler to add the Access-Control-Allow-Origin header.
In fiddler, Press Ctrl-R to open the rules editor.
Locate the OnBeforeResponse function and add:
if (oSession.oRequest.headers.Exists("Host") && oSession.oRequest.headers["Host"].EndsWith("windows.net")) {
if (oSession.oResponse.headers.Exists("Access-Control-Allow-Origin")){
oSession.oResponse.headers["Access-Control-Allow-Origin"] ="*";
}
else{
oSession.oResponse.headers.Add("Access-Control-Allow-Origin","*");
}
}
It should look something like:
When you add in your PCF Component to the Canva App, it should now be loaded from your local file system just like it does with Model Driven Apps. To refresh the component, you will need to exit the app and re-open (rather than just refresh the window in Model Driven Apps).
Hope this helps,
Published on:
Learn moreRelated posts
Power Platform Fundamentals #5: Building Your First Canvas App in Power Apps: Step-by-Step Guide from Setup to Deployment: Quick Read Series
Introduction Organizations today need quick, user-friendly business applications that can be built rapidly without heavy development effort. T...
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...
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...
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...
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...
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...
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 ...
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...
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...