cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Resolver I
Resolver I

Re: Unable to load external JS files async, wrong path probably

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.

 

<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

Highlighted
Frequent Visitor

Re: Unable to load external JS files async, wrong path probably

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

Highlighted
Frequent Visitor

Re: Unable to load external JS files async, wrong path probably

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

Highlighted
Solution Sage
Solution Sage

Re: Unable to load external JS files async, wrong path probably

The version is in the control element of the ControlManifest.input.xml file

 

<control namespace="hdn" constructor="SelectEntity" version="1.0.1" ...

 

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".
Highlighted
Frequent Visitor

Re: Unable to load external JS files async, wrong path probably

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.

Highlighted
Super User
Super User

Re: Unable to load external JS files async, wrong path probably

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

 

Highlighted
Resolver I
Resolver I

Re: Unable to load external JS files async, wrong path probably

@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.

 

solutionxml.png

 

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.

 

xrmtoolbox-pcf.png

 

--Rick

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (6,768)