Forum Discussion
How To: Include a script in my web part
I want to include the following JavaScript in my web part:
https://www.gstatic.com/charts/loader.js
I am okay with adding it as a link in the head (using script tags). I am also open to downloading the JavaScript and adding it to my project source so that it is bundled with the web part when I install it.
Which is the best practice? How do I do each?
Hi smithme ,
you can find best practics to add external libraries to spfx webpart here https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library
Talking about gstatic, if you are using plain Javascript, and not React, as per documentation, you need to reference external non-AMD module.
Here you can find a sample https://github.com/AJIXuMuK/issues/tree/master/google-charts
Cheers,
Federico
Hi smithme ,
you can find best practics to add external libraries to spfx webpart here https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library
Talking about gstatic, if you are using plain Javascript, and not React, as per documentation, you need to reference external non-AMD module.
Here you can find a sample https://github.com/AJIXuMuK/issues/tree/master/google-charts
Cheers,
Federico
I hope I did this right. I added the following to my config/config.json:
"externals": {"charts": {"globalName": "charts"}},then I added to my PieChartWebpart.ts:import * as charts from 'charts';I am currently getting and error on the 'charts' portion of that line.Am I doing this right?hi smithme
if you see the GitHub link that I posted, you can find this configuration:
config/config.json
"externals": { "google": { "path": "https://www.gstatic.com/charts/loader.js", "globalName": "google" } },google.d.ts under src/typing/
declare module "google" { interface IGoogle { charts: any; visualization: any; } var google: IGoogle; export = google; }and in your ts webpart
import * as google from 'google';
and then you can use in this way i.e. https://github.com/AJIXuMuK/issues/blob/master/google-charts/src/webparts/helloWorld/HelloWorldWebPart.ts
Cheers,
Federico
