How to add additional js library in WAB widget?

[SumitZ]

I would like to add other js library in widget without changing in core WAB, I don't want to make changes in init.js or index.html, or main.js.

Is their a way we could directly add any library in widget ans use in it.

I see an option add other libraries to WAB widget but where to set the dependency? Use other  libraries—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

[RobertScheitlin__GISP]

Sumit,

That link specifies what you need to do:

• Put the library in the widget or theme folder and add it to your widget or theme dependency array. Use this approach to load an AMD module that only applies for one widget or theme.

So this means you just add the library files to the widgets folder structure and then add the require/define to your widgets require/define list.

[SumitZ]

Thanks Robert Scheitlin, GISP​ !

[JuanOropeza]

Is there an example on how do that? That instructions doesn't help if you don't know how to do it.

[RobertScheitlin__GISP]

Juan,

   I am not sure I make the instructions any simpler. What is it you don't understand.

[JuanOropeza]

I don't know what how put the library on the dependency array.  I want add P5.js to add some graphics on my widget. I have it on the libs folder

[RobertScheitlin__GISP]

Juan,

  If you only have one widget that will use the library then you should just add the P5.js to you widgets folder and then in your widgets 

define([

....

   './P5',

...

], function (

...

  P5,

...

) {

[JuanOropeza]

I don't get any error, but doesn't looks like is doing the right thing.

I create a simple 'test.js' file with only 

    let d_year = 2017;

Widget.js:

define(['dojo/_base/declare', 'jimu/BaseWidget', './P5', './test'], function (declare, BaseWidget, P5, test) {
   return declare([BaseWidget], {

         // Custom widget code goes here

         baseClass: 'my-widget',

         postCreate: function postCreate() {
                  this.inherited(arguments);
                  console.log('MyWidget::postCreate');
                  console.log(test.d_year);
         }

Console show 'MyWidget::postCreate' but say test.d_year is undefined.

Also even when I add P5 not sure if that will work inside this widget. 

Usually on html I just add the script  P5 and then can use function setup () to configure the canvas and function draw() to define the animation for each frame. But here don't know where to put my setup and draw function. Because looks like I can access function of the library `test.something` but how p5 will call his own draw function for each frame?

This is an example of a star field. Like the one when the millennial falcon do a space jump. Setup a 600 pixels canvas , then depending of the mouse change (also handle by P5) the direction of the star field.

Star[] stars = new Star[800]; float speed;  void setup() {   size(600, 600);   for (int i = 0; i < stars.length; i++) {     stars = new Star();   } }  void draw() {   speed = map(mouseX, 0, width, 0, 50);   background(0);   translate(width/2, height/2);   for (int i = 0; i < stars.length; i++) {     stars.update();     stars.show();   } }

[JuanOropeza]

Don't know why cant edit my comment  the code wasn't format properly.

After adding the P5.js I want do some code like this. P5 call detup() once and the draw() each frame to redraw the canvas.