topic Re: Using other JS libraries in ArcGIS Web AppBuilder Questions

Using other JS libraries

FlorianCADOZ — Wed, 22 Jul 2015 13:46:18 GMT

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 !

Re: Using other JS libraries

FlorianCADOZ — Wed, 22 Jul 2015 15:18:07 GMT

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

Re: Using other JS libraries

JunshanLiu — Thu, 23 Jul 2015 01:55:33 GMT

Does this help? Re: Uncaught Error: Bootstrap's JavaScript requires jQuery

Re: Using other JS libraries

FlorianCADOZ — Thu, 23 Jul 2015 08:45:11 GMT

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 ?

Re: Using other JS libraries

MatejVrtich — Fri, 24 Jul 2015 06:31:55 GMT

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) {

...

});

Re: Using other JS libraries

FlorianCADOZ — Fri, 24 Jul 2015 08:46:44 GMT

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 () {

});

Re: Using other JS libraries

MatejVrtich — Fri, 24 Jul 2015 12:12:53 GMT

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) {

...

});

Re: Using other JS libraries

FlorianCADOZ — Fri, 24 Jul 2015 14:36:44 GMT

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 ']
] ;

Re: Using other JS libraries

MatejVrtich — Mon, 27 Jul 2015 06:39:58 GMT

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

Re: Using other JS libraries

FlorianCADOZ — Mon, 27 Jul 2015 08:16:09 GMT

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 !

Re: Using other JS libraries

MatejVrtich — Mon, 27 Jul 2015 11:43:47 GMT

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);

}

});

Re: Using other JS libraries

FlorianCADOZ — Mon, 27 Jul 2015 12:17:14 GMT

Oh ?! I just created a new application to see if there wasn't a problem with the file's refreshing system and on this new application it works perfectly! (not a caching problem, I clean all my navigator's files after this discovery but didn't work with the first app)

--------------------------------------------------------------------------------------------------------------------------

[...] mean that there wasn't significant text and the canvasjs in the define it was a mistake by myself !

--------------------------------------------------------------------------------------------------------------------------

This behavior is strange but anyway thank you very much for your help!