You’re offline. This is a read only version of the page.
38
Hi,
I'm using the Scandit library and I've ran into a problem. The Scandit library requires in the config to establish the path to the js and wasm files that will load asynchronously to work.
I put the files in the out/controls/ScanditComponent
And the configuration simply "/"
That works on local in the harness, no problem there.
When I package the solution and import it and try it on a Canvas App, I get a 404 error for those 2 files.
I guess there should be a way to manage the path to the files dynamically, maybe with Webpack or something.
I've tried to import the files so that they're incorporated on the solution but the 'wasm' file gives an error that WebAssembly modules are not allowed and it must happen must happen asynchronous.
Using a CDN is no option either because the requirement is that this PCF component should be able to work offline.
Any help would be much appreciated 😄
Daniel
@DanielZZ There should be a solution.xml file somewhere in your solution. Once you find it update the version there too before you do your build and deploy.
To keep from having to do the versioning manually i really like using the PCF Custom Control Builder in the Xrm Toolbox for my projects. Danish Naglekar did a great job building it and it auto increments your version for your.
--Rick
Hi @DanielZZ Have you tried to delete the solution and try again, just to see if you get the right content if it's fresh installed?
Maybe the problem is somewhere else...
Best regards,
Diana
Hi Ben @ben-thompson
Yes, that one I'm updating to no effect. Just found the "Solution Settings" and the version there, but still no update.
I feel a bit like there would a limited number of updates.
In the image I where I found the Solution version.
The version is in the control element of the ControlManifest.input.xml file
Hi Rick @RAWilson
Thank you for that detailed answer. I think that's the best way, load myself the files and catch them for later use with some service workers.
About the updating problem, I've been doing exactly as you said except for this step:
>> Increment the version property for the solution which imports the control.
Where is that version property? I didn't know about it, perhaps that is why I'm having this problem because since yesterday I can't get it to update.
Thank you again
Hi @DianaBirkelbach,
I agree, it goes beyond the purpose of PFC design.
I think I will try better with the CDN as @ben-thompson suggested, but try to and some service workers to ensure the request and caching of the files for offline use.
I'm guessing I can use service workers in the PCF and the CanvasApp, right?
Thanks to both so much
Dianas @DianaBirkelbach suggestion of adding the files as if they were css files in your ControlManifest is probably the best idea. I also do the same thing for Font Awesome.
Share
Report
All responses (
Answers (
<resources>
<css path="fonts/fa_solid_900.woff" order="2" />
<css path="fonts/fa_solid_900.woff2" order="2" />
<css path="fonts/fa_solid_900.ttf" order="2" />
</resources>
To make sure your component gets updated in the canvas app do the following.
Inside the Canvas App Editor.
* File -> Save -> Publish to make sure you have published your app
* File -> Close to complete close out your app in the editor. (* This is really important because the editor will never reload any changes unless you close and re-open the app.)
For your PCF Solution
* Increment the version attribute in the ControlManifest.Input.xml
* Increment the version property for the solution which imports the control.
* Import your solution with the component
Inside the Canvas App Editor.
*Open your app up again in the editor and you should be asked if you would like to upgrade the component. You can now test in the editor with your updated component.
*To make sure the app gets updated with your component updates make an arbitrary update to the app then do a File -> Save -> Publish to make sure you have published your app. (Note: Sometimes I don't see my changes reflected right away after publishing the app, i usually give it a minute or two and hit ctrl F5 a few times to do a full refresh.
Also just on a side note the best way i have found to then load your async javascript is by adding the script tag in your init and then doing an onload function to determine if it was loaded completely in the function that will utilize the script.
Add script during the init()
let headerScript: HTMLScriptElement = document.createElement("script");
headerScript.type = 'text/javascript';
headerScript.id = "BingMapsHeaderScript";
headerScript.async = true;
headerScript.defer = true;
headerScript.src=`https://www.bing.com/api/maps/mapcontrol?key=${apiKey}`;
headerScript.onload = () => {
this._bMapScriptIsLoaded = true;
}
this._container.appendChild(headerScript);
In the function which fire that utilizes the script you can use code like that below to ensure that the script was loaded.
public initMap(){
var self = this;
if (!this._bMapScriptIsLoaded) {
setTimeout(() => {self.initMap()}, 1000);
return;
}
...
}
--Rick
Hi @DanielZZ
In order to update your PCF Control, you need to increase the version in the manifest.
Alternatively, you could use pac pcf push -pp <prefix> to upload it directly in a debug solution in your system; then you don't need to use msbuild and import the solution manually.
The js files cannot be declared in the manifest, you need to use "import" in your index.ts file. But not every "js" works this way.
The files like css, resx, html are not bundled, so that might be your chance with the "wasm" file, but I think it's going beyond the purpose of PCF design.
Best regards,
Diana
In webpack there is the chuking of the bundle, so you don't have one big file.
Do you think it could be possible to do it here and make this extra 2 files 2 chunks?
Thanks!
Yes, I don't want the files in the bundle, because I do not control the script calling them.
The idea to include the wasm in the manifest as a file different than code sounds good, but that would include it in the bundle right?
I'm trying to give it a try, but now it just seems that I just can update the component in the CanvasApp. Do you know any tricks for that?
I'm building, msbuild -t:restore, then msbuild. Upload, publish all customization on the upload window, I do it again directly in the solution package of the PCF.
When I go to the CanvasApp it asks me, not always, if I wan to update. I click yes, but it's still the same. I'm putting a version number in the PCF so I can visually know immediately.
Thnaks for all your help
#1
WarrenBelz
87
Most Valuable Professional
#2
mmbr1606
71
Super User 2025 Season 1
#3
Michael E. Gernaey
65
Super User 2025 Season 1
