Using other JS libraries

5938
11
Jump to solution
07-22-2015 06:46 AM
FlorianCADOZ
Occasional Contributor

Hello everybody !


I would like to make available an external JS library for all widgets so I followed this documentation here but I did not manage to implement ... My library is not recovered !
It is functional forall because I managed to use it for a single widget but my problem is to make it available for all I am afraid that the doc is not updated or I forget something!

Someone could refer me about the procedure?
thank you in advance !

0 Kudos
1 Solution

Accepted Solutions
MatejVrtich
Esri Contributor

Florian,

By putting window.path + 'libs/canvasjs/canvasjs.js' into the resources array in init.js file, the WAB should load the canvasjs.js file from the libs/canvasjs folder relative to the init.js file.

So, the init.js file configuration should be fine.

I am not sure with the custom widget sample code snippet you send.

What does the [...] and 'CanvasJS' in define mean?

Your custom widget doesn't need to load CanvasJS dependency, because the CanvasJS should be already available at global scope.

Your custom widget:

define([

    'dojo/_base/declare',

    'jimu/BaseWidget'

], function (declare, BaseWidget) {

     return declare([BaseWidget], {

          startup: function() {

               console.log('CanvasJS=', CanvasJS);

          }

     });

});

View solution in original post

11 Replies
FlorianCADOZ
Occasional Contributor

My real question is : what and how can I do this with a cdn link ?

0 Kudos
JunshanLiu
Occasional Contributor III
FlorianCADOZ
Occasional Contributor

Not really...

I do not understand ... My goal is to add the library canvasjs to insert statistical graphs in widgets so I tried to follow the doc ESRI :

- I placed my canvasjs.js file in a directory canvasjs , all in the libs directory ( ../libs/canvasjs/canvasjs.js ) ;

- I changed the main.js file ( ../libs/main.js ) by adding my library :

define ( [" ./ usng / usng ", " ./storejs/json ", " ./storejs/store " " ./canvasjs/canvasjs "] , function () {
});

- I changed the Init.js file ( ../stemapp/init.js ) by adding my library :

resources resources.concat = ( [
      window.apiUrl + ' dojo / resources / dojo.css '
      window.apiUrl + ' dijit / themes / Claro / claro.css '
      window.apiUrl + ' esri / css / esri.css '
      window.apiUrl + ' dojox / layout / resources / ResizeHandle.css '
      window.path + ' jimu.js / css / jimu.css '
        window.path + ' libs / canvasjs / canvasjs.js '
    ] ) ;

- And finally I tried to make it work in a widget but it doesn't... (but if I put my library in only one widget it works, but my goal is to make it shared for all the widget...)

Thank you by advance for your help !

--EDIT--

Oh maybe there's something I didn't understood with the delaration in the widget !

In my widget.js I have :

define([

  'dojo/_base/declare',

  'dijit/_WidgetsInTemplateMixin',

[...]

    'canvasjs'

],

function(

  declare,

  _WidgetsInTemplateMixin,

[...]

    canvasjs

){

...

Is the mistake is here ?

0 Kudos
MatejVrtich
Esri Contributor

Assuming you have copied the canvasjs.js file into the libs/canvasjs folder, just delete config you made in init.js and create an alias for canvasjs inside the init.js file as following:

// init.js

dojoConfig.aliases = [

            ['canvasjs', 'libs/canvasjs/canvasjs']

        ];

Then, in your custom widget, just require the canvasjs as dependency.

// YourWidget.js

define([

    'dojo/_base/declare',

    'jimu/BaseWidget',

    'canvasjs'

], function (declare, BaseWidget, canvasjs) {

     ...

});

FlorianCADOZ
Occasional Contributor

Matej,

First thank you for your answer, unfortunately it's not working ... I just look different dojo's doc and aliases but the syntax changes in each documentation!

- I do have my canvasjs.js file libs / canvasjs

- In my Init.js file ( ../stemapp/init.js ) I go back to the originaly code and just add the alias  :

resources = resources.concat ( [

      window.apiUrl + ' dojo / resources / dojo.css '

      window.apiUrl + ' dijit / themes / Claro / claro.css '

      window.apiUrl + ' esri / css / esri.css '

      window.apiUrl + ' dojox / layout / resources / ResizeHandle.css '

      window.path + ' jimu.js / css / jimu.css '

    ] ) ;

     

    dojoConfig.aliases = [

      ['canvasjs', 'libs/canvasjs/canvasjs']

    ];

- For my custom widget, it's done (thank you for having me reassured about the syntax elsewhere)

- Also, should I remove the configuration made ​​in the main.js (in libs / main.js ) ?

define ( [" ./ usng / usng ", " ./storejs/json ", " ./storejs/store " " ./canvasjs/canvasjs "] , function () {

});

0 Kudos
MatejVrtich
Esri Contributor

Florian,

I guess there is no need to require canvasjs dependency in libs/main.js so revert the changes in this file.

Just include the canvasjs dependency in your custom widget. I use external libs like react and d3 this way and it works just fine.

In your custom widget, require the canvasjs dependency by its alias:

// YourWidget.js

define([

    'dojo/_base/declare',

    'jimu/BaseWidget',

    'canvasjs'

], function (declare, BaseWidget, canvasjs) {

     ...

});

0 Kudos
FlorianCADOZ
Occasional Contributor

I really do not understand ... I did everything you said above and it still does not work ...
At witch line in the init.js file did you put the :

dojoConfig.aliases = [
      [' canvasjs ', ' libs / canvasjs / canvasjs ']
] ;

?

0 Kudos
MatejVrtich
Esri Contributor

Florian,

As I found, the CanvasJS library is not AMD compatible. The workflow I suggested (using aliases) is supported only for AMD/UMD packages.

However, you should be able to load the CanvasJS library following your previous workflow (add CanvasJS lib to resources array in init.js file).

After that, the CanvasJS is accessible as global variable window.CanvasJS (or just CanvasJS) in your custom widget.

FYI, there is nice ArcGIS GeoServices charting lib created by Esri: Esri/cedar · GitHub

FlorianCADOZ
Occasional Contributor

Matej,

Thank you for your explanations , it already makes me feel a little more about the non-functioning of canvasjs in my widget !
However , the statement in the file Init.js still does not work and I do not understand why ...

In my ressources array there is :

    resources = resources.concat([

      window.apiUrl + 'dojo/resources/dojo.css',

      window.apiUrl + 'dijit/themes/claro/claro.css',

      window.apiUrl + 'esri/css/esri.css',

      window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',

      window.path + 'jimu.js/css/jimu.css',

      window.path + 'libs/canvasjs/canvasjs.js'

    ]);

And in my custom widget there is :

define([

  'dojo/_base/declare',

  'dijit/_WidgetsInTemplateMixin',

[...]

    'CanvasJS'

],

function(

  declare,

  _WidgetsInTemplateMixin,

[...]

    CanvasJS

){...

When I run my custom widget, in the console I see it seems to search canvasjs in http://js.arcgis.com/3.14/dojo/CanvasJS.js , whatever I do in the Init.js'code ...

Otherwise, I thank you for the track is cedar unfortunately I need pie and stacked percentage column chart and cedar doesn't seem to provide this kind of functionality ....

I'm a little stuck right now !