PCF component not working in canvas app

Like (0) Share

Report

Posted on 2 Dec 2021 19:16:08 by Slakk

Hi,

I just developed a simple pcf map component for Power apps, based on the hello-pcf sample.

The component works great in a model-driven app but for some reason it does not work in canvas apps. I do not get any errors in the console, but if I setup the chrome debugger to pause on all thrown errors I do get an error deep within the mapping library complaining that "Promise.finally is not a function". This error does not occur when using the component within a model-driven app.

Are there any limitations to use of custom pcf components in canvas apps vs model-driven apps?

Categories:

Power Apps component framework

All responses (9)

Answers (1)

anwesh 2 on 26 Jan 2024 at 17:49:01

Like (0)

Report

Re: PCF component not working in canvas app

Aventham,
were you able to achieve this I am getting empty map object in to the component, but it is working fine in localhost.
aventham77 24 on 22 Feb 2022 at 15:47:45

Like (0)

Report

Re: PCF component not working in canvas app

Hi @Slakk - that's great to hear that you managed to get an ArcGIS JSAPI (3.x) map to appear in a Canvas app. Would you be willing to post a working "hello" map for reference?
Slakk 13 on 10 Dec 2021 at 10:29:07

Like (1)

Report

Re: PCF component not working in canvas app

Thank you so much for this information Diana! I did not manage to resolve the conflict but I did manage to get it to work in a canvas app by rolling back to using version 3.x of the ArcGIS API for Javascript (instead of version 4.x which I was using). Without your advice I would not have managed to figure this out! Again, thank you so much!
Verified answer

Diana Birkelbach 3,072 Most Valuable Professional on 08 Dec 2021 at 18:00:17

Like (1)

Report

Re: PCF component not working in canvas app

Hi @Slakk ,

When you said, you are working with ArcGIS, I remembered there was a thead in this forum.

There were a lot of answers, and some of them said, that is working in harness, but not in CanvasApp. Have a look: https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/Power-App-Component-Framework-with-ArcGis-Embed/td-p/400343

In the thread there is a hint about a conflict with the jQuery version used in Power Apps, and I think the missing "finally" is because of this conflict. Primise.prototype.finally was introduced later (ES2018 , https://2ality.com/2017/07/promise-prototype-finally.html), and jQuery didn't had it.

It doesn't solve your problem (except if you can use another map control), but at least you know you are not alone.
Slakk 13 on 08 Dec 2021 at 11:58:40

Like (0)

Report
Re: PCF component not working in canvas app

Btw. I tested just adding a simple use of "finally" in the constructor of the control, just for testing purposes, and the same error occurs (i.e. finally is not a function). It works fine in the testharness, and in model-driven apps, but not in canvas apps. You can test it by adding the following to the constructor of any component:

function testFinally() { return new Promise((resolve, reject) => { resolve("test") }); } testFinally().then((result) => { console.log("Then works"); }) .catch((err) => { console.error(err); }) .finally(() => { console.log('Finally works'); });
Slakk 13 on 08 Dec 2021 at 10:56:59

Like (0)

Report

Re: PCF component not working in canvas app

Sorry for the late response and many thanks for your kind advice. I tried adding a polyfill for finally without any luck. I'm not using the IE browser. Only chrome and edge.

Anyway, I've now created a minimal sample component. All is does is that is load a map into a div. Is uses the ArcGIS API for javascript mapping library. This component works in a model-driven app, but not in a canvas app. I would be really grateful if you have the time to take a look. The code is attached to this post as a zip.

HelloMap.zip
Diana Birkelbach 3,072 Most Valuable Professional on 03 Dec 2021 at 13:11:51

Like (0)

Report

Re: PCF component not working in canvas app

Hi @Slakk ,

You can fetch requests, but not using the PCF-Features. So you cannot use these ones: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/webapi?WT.mc_id=BA-MVP-5004107

Do you have it included in the manifest: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/feature-usage?WT.mc_id=BA-MVP-5004107 ?

Since you have an external service, you've implemented the requests on your own already.
I've mentioned IE since it doesn't support "finally". In the Model-Driven Apps there might be a babel polyfill already there, which is maybe not available in Canvas Apps.
Slakk 13 on 03 Dec 2021 at 11:55:38

Like (0)

Report

Re: PCF component not working in canvas app

Thanks for your reply Diana! I will try to create a minimal sample component for you. In the meantime I see you mention that webapi is not supported in canvas apps. Does this mean that the pcf component is not allowed to fetch data from REST APIs? The component I'm building is fetching maptiles (images) from a REST-based mapservice.
Diana Birkelbach 3,072 Most Valuable Professional on 03 Dec 2021 at 11:14:10

Like (0)

Report

Re: PCF component not working in canvas app

Hi @Slakk ,

Can you please post the link for the hello-pcf example.

Possible reasons could be if you are using IE as a browser. Or mabye it is using pcf features that are not designed for Canvas Apps (like webAPI).