Edit features with the Editor widget

Explore in the sandboxView live

This sample demonstrates how to add the Editor widget to a web application. Support for batch feature creation was added at version 4.23. Once the widget loads, click on the template to add and draw the feature's geometry. Once the feature sketch is complete, update any necessary attribute information. If wanting to create more than one feature at a time, just continue adding new geometries while updating their associated attributes. Once all feature creates are added, click Create and any feature creates will be applied back to the feature service.

In addition to continuous feature creation, the widget's UI was also updated to automatically include snapping as it is no longer necessary to manually add the SnappingControls widget to the Editor via the API.

For additional information on these Editor updates and any limitations, please refer to the Editor API reference documentation.

How it works

Instantiate the layers and specify their LayerInfos

The application loads a webmap and iterates through all of its layers and instantiates each.

Use dark colors for code blocks
view.map.allLayers.forEach((layer) => {
  if (layer.type === 'feature') {
    switch (layer.geometryType) {
      case "polygon":
        polygonLayer = layer;
        break;
      case "polyline":
        lineLayer = layer;
        break;
      case "point":
        pointLayer = layer;
        break;
    }
  }
});

After layers are set, each layer's layerInfo is set. This takes the layer and a form template with an array of field elements. These field elements specify what values should be updated by the Editor.

Use dark colors for code blocks

// Create layerInfos for layers in Editor

// Set the point layer's LayerInfo
const pointInfos = {
  layer: pointLayer,
  formTemplate: { // autocasts to FormTemplate
    elements: [{ // autocasts to Field Elements
      type: "field",
      fieldName: "HazardType",
      label: "Hazard type"
    }, {
      type: "field",
      fieldName: "Description",
      label: "Description"
    }, {
      type: "field",
      fieldName: "SpecialInstructions",
      label: "Special Instructions"
    }, {
      type: "field",
      fieldName: "Status",
      label: "Status"
    }, {
      type: "field",
      fieldName: "Priority",
      label: "Priority"
    }]
  }
};

// Set the line layer's LayerInfo
const lineInfos = {
  layer: lineLayer,
  formTemplate: { // autocasts to FormTemplate
    elements: [{ // autocasts to FieldElement
      type: "field",
      fieldName: "Severity",
      label: "Severity"
    }, {
      type: "field",
      fieldName: "blocktype",
      label: "Type of blockage"
    }, {
      type: "field",
      fieldName: "fullclose",
      label: "Full closure"
    }, {
      type: "field",
      fieldName: "active",
      label: "Active"
    }, {
      type: "field",
      fieldName: "locdesc",
      label: "Location Description"
    }]
  }
};

// Set the polygon layer's LayerInfo
const polyInfos = {
  layer: polygonLayer,
  formTemplate: { // autocasts to FormTemplate
    elements: [{ // autocasts to FieldElement
      type: "field",
      fieldName: "incidenttype",
      label: "Incident Type"
    }, {
      type: "field",
      fieldName: "activeincid",
      label: "Active"
    }, {
      type: "field",
      fieldName: "descrip",
      label: "Description"
    }]
  }
};

Instantiate the Editor

Based on the editing functionality set on a feature layer, you can select an existing feature to update or create new feature(s). The widget will take whatever editing capabilities are set on the service.

It is possible to override some of these capabilities by setting specific properties within the widget's layerInfos. Properties such as allowAttachments, enabled, updateEnabled, and/or deleteEnabled can be specified to further constrain how much editing can be done per layer.

It is not possible to override read-only permissions set on the server. For example, if a feature service is set up to restrict edits on a layer, it is not possible to override these restrictions via the API.

Use dark colors for code blocks

// Begin Editor constructor
const editor = new Editor({
  view: view,
  layerInfos: [pointInfos, lineInfos, polyInfos]
}); // End Editor constructor

The Editor uses the same coding pattern as other widgets, i.e. you must specify the view to be used by the widget.

Lastly, we add the widget to the application using the View's UI.

Use dark colors for code blocks

// Add the widget to the view
view.ui.add(editor, "top-right");

For a more advanced sample, see Editor widget with configurations and for editing in 3D see the sample Edit features in 3D with the Editor widget.

MapView

Editor

Widget

ArcGIS API for JavaScriptSample Code

Edit features with the Editor widget

Was this page helpful?