How To: Include a script in my web part

[smithme]

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?

[#2 · Accepted solution]

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

[#3]

I hope I did this right. I added the following to my config/config.json:

"externals": {

"charts": {

"path": https://www.gstatic.com/charts/loader.js,

"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?

[#4]

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/HelloWorldWebPa...

Cheers,

Federico

[#5]

Thank you Federico. Very help and good find with the GitHub project that uses the Google charts. Thanks.

[#6]

you're welcome :)

[#7]

@Federico Porceddu  - Hi Fererico - sorrry to bother but i'v been searching for a solution for this problem all over the net and your assistance above means hopefully you know what could be my problem.

I have tried to get gsap animation library working in my webpart via cdn https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js

I get it loaded via the config.json:

"externals": {

    "TweenMax": {

      "path": "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js",

      "globalName": "TweenMax"

    }

  }

... and importing in the .ts file:

import * as TweenMax from 'TweenMax';

but when i try to reference it in the render function as i should e.g:

TweenMax.to($('.domclassname'),2,{opacity: 0});

the build fails with code error 2 - as says that TweenMax is not defined.

Is there some declaration i am missing here?

regards

Mark

[#8]

Hi@mc1052 did you install type definitions for GSAP?

npm install --save @types/gsap

 

Cheers,

Federico

[#9]

@Federico Porceddu - hi yes - i used: npm install --save @types/gsap

[#10]

@Federico Porceddu - i also tried using 

var TweenMax:any = require('TweenMax');

in the .ts file - when i do that i get no errors on the build but i still cant use it in the render function it gives me :

Uncaught (in promise) TypeError: TweenMax.to is not a function
at LeanLikeAStartupLandingPageWebPart../lib/webparts/leanLikeAStartupLandingPage/LeanLikeAStartupLandingPageWebPart.js.LeanLikeAStartupLandingPageWebPart.render (LeanLikeAStartupLandingPageWebPart.ts:607)
at LeanLikeAStartupLandingPageWebPart../sp-webpart-base.js.__WEBPACK_AMD_DEFINE_RESULT__../lib/core/BaseClientSideWebPart.js.BaseClientSideWebPart._renderWithAccessibleTitle (sp-webpart-base_en-us.js:1772)

[#11]

Hi @mc1052 

could you please try the following in config.json ?

"externals": {
  "TweenMax": "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
}

Following the docs https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library  I think you are trying to merge non-AMD Module procedure with cdn procedure.

Cheers,

Federico

[#12]

@Federico Porceddu - Hi thanks for the response.

I tried running it as cdn:

1. npm install gsap

(https://www.npmjs.com/package/gsap )

2. config.json add external library:

"externals": {

    "jquery": "https://code.jquery.com/jquery-3.4.1.min.js",

    "gsap": "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"

  }

3. .ts import:

import * as TweenMax from "gsap/TweenMax";

* getting this far using the above it builds without error

4. add some test code to the render function:

public render(): void {

   TweenMax.to($('.distinctclassnamehere'),1,{autoAlpha: 0,onComplete: function(){ alert()}});

}

When i run this after step 4 it give an error message in the browser console indicating that it cant find the .to function in tweenmax.

Error message: Uncaught (in promise) TypeError: gsap_TweenMax__WEBPACK_IMPORTED_MODULE_5__.to is not a function

this should be fairly simple but i cant get it working .

regards

mark