Where to put JavaScript into a custom widget?

[deleted-user-mgLAe3moQJvA]

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

[RobertScheitlin__GISP]

Mike,

   WAB already has a widget that does this. 

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

[deleted-user-mgLAe3moQJvA]

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.

[RobertScheitlin__GISP]

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

[deleted-user-mgLAe3moQJvA]

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

[RobertScheitlin__GISP]

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.

[deleted-user-mgLAe3moQJvA]

Thanks Robert, that was the bit I needed.

[BradMcKinney]

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?

[RobertScheitlin__GISP]

Brad,

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

[BradMcKinney]

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.