topic Re: Where to put JavaScript into a custom widget? in ArcGIS Web AppBuilder Questions

Where to put JavaScript into a custom widget?

deleted-user-mgLAe3moQJvA — Wed, 11 Sep 2019 17:36:41 GMT

I am trying to turn this JS API sample into a Web AppBuilder custom widget with the WAB Developed Edition.

But not sure where to put the pieces from the sample script in the WAB widget files.

Show x,y coordinates | ArcGIS API for JavaScript 3.29

Thanks

Re: Where to put JavaScript into a custom widget?

RobertScheitlin__GISP — Wed, 11 Sep 2019 19:15:52 GMT

Mike,

WAB already has a widget that does this.

Coordinate widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Re: Where to put JavaScript into a custom widget?

deleted-user-mgLAe3moQJvA — Wed, 11 Sep 2019 19:44:58 GMT

Yes, but I am looking more for the process of turning this simple JS into a widget.

I've changed the event trigger from mouse-move to click and want that to be the entire functionality of the widget.

The existing coordinate widget is way more than I need.

Re: Where to put JavaScript into a custom widget?

RobertScheitlin__GISP — Wed, 11 Sep 2019 20:03:52 GMT

Mike,

OK, it is not as simple as copy and paste the code into the correct file though. The logic of the widget (i.e. the javaScript code portion) goes in the Widget.js and the html portion of the sample goes in the Widget.html. WAB already has a map object so be sure not to try and use that portion of the code. The best starting place for creating widgets is the how to guide here:

Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Re: Where to put JavaScript into a custom widget?

deleted-user-mgLAe3moQJvA — Wed, 11 Sep 2019 20:18:18 GMT

Thanks. I've been through that example. It runs through setting up a widget that writes some text to a panel.

Now I'm looking for an example of how and where to add a map click event function.

I found this kind of helpful to navigate the widget files:

https://community.esri.com/people/andrescastillo08/blog/2019/07/24/how-to-customize-an-app-using-javascript-the-dom-chrome-devtools-and-chromes-debugger

Re: Where to put JavaScript into a custom widget?

RobertScheitlin__GISP — Wed, 11 Sep 2019 20:46:40 GMT

Mike,

Inside the Widget.js code you have access to the map using this.map, as shown in the Create custom in-panel widget code. So you just add your map click handler using this.map.on.

Re: Where to put JavaScript into a custom widget?

deleted-user-mgLAe3moQJvA — Wed, 11 Sep 2019 21:22:25 GMT

Thanks Robert, that was the bit I needed.

Re: Where to put JavaScript into a custom widget?

BradMcKinney — Tue, 14 Apr 2020 19:42:06 GMT

Robert Scheitlin, GISP,

This may be dumb question, but i've been searching google for a while now trying to figure out how to access the Widget.js code. Do I need to pull my web app down into ArcGIS Pro or something similar to get access to the source files of my web app?

Re: Where to put JavaScript into a custom widget?

RobertScheitlin__GISP — Tue, 14 Apr 2020 20:16:34 GMT

Brad,

Are you working with an AGOL WAB app, Enterprise ArcGIS Portal, or WAB Dev?

Re: Where to put JavaScript into a custom widget?

BradMcKinney — Tue, 14 Apr 2020 20:21:06 GMT

Robert,

I'm currently working in AGOL WAB. I'm very new to ArcGIS, so I'm still trying to get a handle on all of the different products. I'm assuming I need to take my web app out of AGOL and into a more dev friendly environment.

Re: Where to put JavaScript into a custom widget?

RobertScheitlin__GISP — Tue, 14 Apr 2020 20:30:51 GMT

Correct. You need to import your app into WAB Dev.

Re: Where to put JavaScript into a custom widget?

BradMcKinney — Tue, 14 Apr 2020 20:35:43 GMT

Got it, thank you! Appreciate it