topic Re: How to add additional js library in WAB widget? in ArcGIS Web AppBuilder Questions

How to add additional js library in WAB widget?

SumitZ — Thu, 07 Jul 2016 13:24:08 GMT

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

Re: How to add additional js library in WAB widget?

RobertScheitlin__GISP — Thu, 07 Jul 2016 13:35:39 GMT

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.

Re: How to add additional js library in WAB widget?

SumitZ — Thu, 07 Jul 2016 19:27:25 GMT

Thanks Robert Scheitlin, GISP !

Re: How to add additional js library in WAB widget?

JuanOropeza — Mon, 23 Oct 2017 19:25:14 GMT

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

Re: How to add additional js library in WAB widget?

RobertScheitlin__GISP — Mon, 23 Oct 2017 19:28:29 GMT

Juan,

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

Re: How to add additional js library in WAB widget?

JuanOropeza — Mon, 23 Oct 2017 19:42:20 GMT

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

Re: How to add additional js library in WAB widget?

RobertScheitlin__GISP — Mon, 23 Oct 2017 19:51:49 GMT

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,

...

) {

Re: How to add additional js library in WAB widget?

JuanOropeza — Mon, 23 Oct 2017 20:28:41 GMT

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

Re: How to add additional js library in WAB widget?

JuanOropeza — Mon, 23 Oct 2017 20:34:45 GMT

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.