Forum Discussion

smithme's avatar
smithme
Brass Contributor
Feb 26, 2019

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 download...
  • smithme's avatar
    smithme
    Brass Contributor
    Feb 26, 2019

    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?
     
     

     

     

    • FedericoPorceddu82's avatar
      FedericoPorceddu82
      MVP
      Feb 26, 2019

      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

      • mc1052's avatar
        mc1052
        Copper Contributor
        Sep 25, 2019

        FedericoPorceddu82  - 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": {
              "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

         

         

         

Resources