Select to view content in your preferred language

Where to put JavaScript into a custom widget?

3463
11
09-11-2019 10:36 AM
deleted-user-mgLAe3moQJvA
Deactivated User

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

0 Kudos
11 Replies
RobertScheitlin__GISP
MVP Emeritus
deleted-user-mgLAe3moQJvA
Deactivated User

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
deleted-user-mgLAe3moQJvA
Deactivated User

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
Deactivated User

Thanks Robert, that was the bit I needed.

0 Kudos
BradMcKinney
Emerging Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Brad,

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

0 Kudos
BradMcKinney
Emerging Contributor

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. 

0 Kudos