topic Pass DrawBox polygon into a query in Web AppBuilder Custom Widgets Questions

Pass DrawBox polygon into a query

Helenpeng — Tue, 30 Jan 2018 16:39:31 GMT

I am developing a Validation Widget that can tell if the free-drawn-polygon is inside the state boundary or not. I have the ArcGIS JavaScript code which run well in the Sandbox. The code is to use button-click to draw a polygon, and pass the polygon geometry into a query, then check the length of result. See the sandbox code (works) attached.

In the widget.js, I have added the jimu/dijit/DrawBox in the widget. I cannot figure out passing the drawn-polygon created by the DrawBox into my query. I tried the code attached and the error message showed “geometry null” and “queryTask.execute is not a function”. I am new to WAB and would appreciate some suggestions. The widget.js (not working) is attached.

Additionally, I know the WAB has a Query Widget. I look at the widget.js, which uses dojo/query, instead of esri/tasks/query. I wonder if I need to replace with dojo/query to make my widget run.

Thanks,

Helen

Re: Pass DrawBox polygon into a query

RobertScheitlin__GISP — Tue, 30 Jan 2018 17:00:25 GMT

Helen,

Can you provide your Widget.html?

Re: Pass DrawBox polygon into a query

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:18:18 GMT

Helen,

Here is how your code should look like in a WAB widget.

//Create a widget to validate if a polygon is inside the state boundary
define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    'dijit/_WidgetsInTemplateMixin',
    'esri/graphic',
    'esri/layers/GraphicsLayer',
    'esri/Color',
    'esri/symbols/SimpleLineSymbol',
    'esri/symbols/SimpleFillSymbol',
    'esri/tasks/query',
    'esri/tasks/QueryTask',
    'dojo/on',
    'jimu/dijit/DrawBox'
  ], function(
    declare,
    BaseWidget,
    _WidgetsInTemplateMixin,
    Graphic,
    GraphicsLayer,
    Color,
    SimpleLineSymbol,
    SimpleFillSymbol,
    Query,
    QueryTask,
    on,
    DrawBox
  ){
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
      baseClass: 'jimu-widget-myvalidate',
      name: 'MyValidate',

      _graphicsLayer: null,
      _polygonLayer: null,
      drawBox: null,

      postCreate: function() {
        this.inherited(arguments);
        this._initLayers();
        this.drawBox.setMap(this.map);
        this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawComplete)));
      },

      startup: function() {
        this.inherited(arguments);
      },

      _initLayers: function() {
        this._graphicsLayer = new GraphicsLayer();
        this.map.addLayer(this._graphicsLayer);
      },

      _onDrawComplete: function(graphic) {
        var geometry = graphic.geometry;
        queryTask = new QueryTask("https://mapsdev02.os.uga.edu:6443/arcgis/rest/services/test_internal/test2/MapServer/1");
        query = new Query();
        query.returnGeometry = true;
        query.outFields = ["*"];
        query.outSpatialReference = map.SPATIAL_REL_INTERSECTS;
        query.geometry = geometry;
        console.log("geometry " + JSON.stringify(geometry));
        console.log("query " + JSON.stringify(query));

        queryTask.execute(query);

        queryTask.on("complete", lang.hitch(this, function(evt) {
          var fset = evt.featureSet;
          var resultFeatures = fset.features;
          if(resultFeatures.length == 0) {
            alert("Polygon is outside of Georgia boundary. ");
            return;
          }

          var newSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([0, 38, 115, 1]), 2), new Color([0, 112, 255, 0.37]));
          this._graphicsLayer.add(new Graphic(geometry, newSymbol));
        }));
      }

    });
  });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Pass DrawBox polygon into a query

KenBuja — Tue, 30 Jan 2018 18:13:05 GMT

Robert,

Should line 41 be

this.own(on(this.drawBox, 'draw-end', lang.hitch(this, this._onDrawComplete)));‍‍‍‍

Re: Pass DrawBox polygon into a query

RobertScheitlin__GISP — Tue, 30 Jan 2018 18:18:24 GMT

Ken,

They both work, but you are right 'draw-end' is the more standardized event name.

Re: Pass DrawBox polygon into a query

KenBuja — Tue, 30 Jan 2018 18:20:55 GMT

Wouldn't your example use "onDrawEnd"? That's the name of the function in the DrawBox.js, which emits "draw-end"

Re: Pass DrawBox polygon into a query

KenBuja — Tue, 30 Jan 2018 18:29:36 GMT

For your question about "dojo/query" versus "esri/tasks/query", these are two very different things.

dojo/query is for querying the DOM to get at its nodes.

Re: Pass DrawBox polygon into a query

RobertScheitlin__GISP — Tue, 30 Jan 2018 18:30:52 GMT

Ken,

Actually that would be the event handler not the event itself. It is like the fact that DrawEnd is a constant for draw-end or vice versa.

Re: Pass DrawBox polygon into a query

RobertScheitlin__GISP — Tue, 30 Jan 2018 20:43:53 GMT

Interesting thing is esri Draw widget still uses the DrawEnd too:

this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawEnd)));‍

Re: Pass DrawBox polygon into a query

KenBuja — Tue, 30 Jan 2018 21:03:25 GMT

I noticed that as I researched this question. I was wondering where that constant comes from (and how do we know to use it). It doesn't appear in the DrawBox.js at all

Re: Pass DrawBox polygon into a query

RobertScheitlin__GISP — Tue, 30 Jan 2018 21:16:24 GMT

I know right. I think it is left over from 1.x of WAB. I took that line from my eSearch which I began development on back in WAB Beta.

Re: Pass DrawBox polygon into a query

Helenpeng — Wed, 31 Jan 2018 16:45:17 GMT

Thanks for the helpful code. After I add the dependency 'dojo/_base/lang', the widget works very well! Very appreciated!

this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawComplete)));

is very powerful! It makes the connection between the Draw-box with my query.

I think lang.hitch is kindly like function/event. What does “own” means and why puts “own” inside postCreate?

I found some information below for “own” but do not fully understand.

--most of the things that you define inside .own() are getting correctly removed once the widget itself is destroyed. Using .own() prevents memory leaks in your app.

Re: Pass DrawBox polygon into a query

Helenpeng — Wed, 31 Jan 2018 16:46:08 GMT

Thank you! I see the difference now.

Re: Pass DrawBox polygon into a query

RobertScheitlin__GISP — Wed, 31 Jan 2018 16:52:29 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Pass DrawBox polygon into a query

Helenpeng — Wed, 31 Jan 2018 20:55:08 GMT

Robert,

I’d appreciate your great help. I did click “Mark Correct”.

I wonder if you have a chance to explain “.own()” in your code. I see .own() can use inside both postCreate and startup in other code samples.

Thanks,

Helen

Re: Pass DrawBox polygon into a query

RobertScheitlin__GISP — Wed, 31 Jan 2018 21:01:11 GMT

Helen,

.own can be used anywhere in a widgets code as it is something that comes from the _widgetBase. What it does is wraps an event handler so that when the widget is destroyed then the event handler is assured to be remove as well.

The advantage of using own() in the widget infrastructure is that internally, the widget can keep track of all of its handles, and make sure everything is disconnected and/or unsubscribed when the widget is destroyed—preventing any kind of memory leaks.

Re: Pass DrawBox polygon into a query

Helenpeng — Thu, 01 Feb 2018 14:52:29 GMT

Robert,

Thank you for providing the useful information. Your answer also helps me to understand the structure of other sample widgets. Very appreciated!

Helen

P.S. I would like to attach my widget.html so the future user can have all the files for draw box and query.