nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Using other JS libraries

FlorianCADOZ

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 !

Find more posts tagged with

Accepted answers

MatejVrtich

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

}

});

All comments

FlorianCADOZ

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

});

MatejVrtich

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

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 ?

JunshanLiu

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

FlorianCADOZ

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.