How to input attribute for the polygon using ArcGIS API for Javascript?

Question

I'm new at ArcGIS programming, I'm trying to input attribute for the polygon with draw script using ArcGIS API for JavaScript based on this: https://developers.arcgis.com/javascript/3/jssamples/toolbar_draw.html.

I try to input the attribute via windows pop up(the windows pop up was for base form input) using event draw complete,based on this: https://developers.arcgis.com/javascript/3/jsapi/draw-amd.html#event-draw-complete, but i fail because i don't know how to using it. My code was like this :

function initToolbar() {
  tb = new Draw(map);
  tb.on("draw-complete", addToMap);

  // event delegation so a click handler is not
  // needed for each individual button
  on(dom.byId("tool"), "click", function(evt) {
    if (evt.target.id == "tool") {
      return;
    }
    var tool = evt.target.id.toLowerCase();
    //map.hideZoomSlider();
    tb.activate(tool);
  });
}

function addToMap(evt) {
  tb.deactivate();
  //map.showZoomSlider();
  switch (evt.geometry.type){
    case "point":
    case "multipoint":
      symbol = new SimpleMarkerSymbol();
      break;
    case "polyline":
      symbol = new SimpleLineSymbol();
      break;
    default:
      symbol = new SimpleFillSymbol();
      break;
  }
  var graphic = new Graphic(evt.geometry, symbol);
  map.graphics.add(graphic);
}

Anyone can tell me, how to input attribute with another method ?

LMokrane LMokrane · Accepted Answer · 2017-09-27T13:42:42

You could make a form with dojo framework, as ArcGis Javascript API is based on this framework.

Let's take this example from Dojo website : https://dojotoolkit.org/reference-guide/1.10/dijit/form/Form.html

This form asks for 2 values, a name and a date of birth. Let's assume that corresponds to the attributes of your polygon. Now, let's adapt it to your needs.

First, we take the html we need to build our form

<div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm" encType="multipart/form-data" action="" method="">
<table style="border: 1px solid #9f9f9f;" cellspacing="10">
  <tr>
    <td><label for="name">Name:</label></td><td><input type="text" id="name" name="name" required="true" data-dojo-type="dijit/form/ValidationTextBox"/></td>
  </tr>
  <tr>
    <td><label for="dob">Date of birth:</label></td><td><input type="text" id="dob" name="dob" data-dojo-type="dijit/form/DateTextBox"/></td>
  </tr>
</table>

<button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
<button data-dojo-type="dijit/form/Button" type="reset">Reset</button>

Now, the javascript code to handle the form. Make sure to merge it with your code, do not replace it.

require(["dojo/parser", "dojo/on", "dijit/registry", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox", "dojo/domReady!"],
function(parser, on, registry) {
  var attributes = {};
  parser.parse();
  var myForm = registry.byId("myForm");
  on(myForm, "submit", function(){
    if(this.validate()){
      attributes = myForm.getValues();
      delete attributes['submitButton'];
      return true;
    }else{
      alert('Form contains invalid data. Please correct first');
      return false;
    }
  });

  on(myForm, "reset", function(){
    return confirm('Press OK to reset widget values');
  });
});

Finally, modify the last lines of your code, so it attaches the attributes from the form to the polygon, as described on the API doc :

var graphic = new Graphic(evt.geometry, symbol, attributes);
map.graphics.add(graphic);

How to input attribute for the polygon using ArcGIS API for Javascript?

1 Answers