Where to put JavaScript into a custom widget?

607
11
09-11-2019 10:36 AM
Highlighted
New Contributor

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

Reply
0 Kudos
11 Replies
Highlighted
MVP Esteemed Contributor
Highlighted
New Contributor

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.

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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 Developer... 

Reply
0 Kudos
Highlighted
New Contributor

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-jav... 

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

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.

Highlighted
New Contributor

Thanks Robert, that was the bit I needed.

Reply
0 Kudos
Highlighted
New Contributor II

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?

Reply
0 Kudos
Highlighted
MVP Esteemed Contributor

Brad,

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

Reply
0 Kudos
Highlighted
New Contributor II

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. 

Reply
0 Kudos