Edit features with the Editor widget

Explore in the sandboxView live

This sample demonstrates how to add the Editor widget to a web application. Once the widget loads, click on the template to add and draw a 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, 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.

Select a feature using the Editor's select tool to update an existing feature. The corresponding form will display for any editable fields.

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 editable layers and instantiates each.

Use dark colors for code blocksCopy
view.map.editableLayers.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 blocksCopy
// 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 enabled, updateEnabled, deleteEnabled, attributeUpdatesEnabled, attachmentsOnUpdateEnabled, geometryUpdatesEnabled, and attachmentsOnCreateEnabled can be specified to further constrain edits per layer and specific workflow.

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

Use dark colors for code blocksCopy
// 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 blocksCopy
// 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

updatefeaturesworkflow

batch

4.23

ArcGIS Maps SDK for JavaScriptSample Code

Edit features with the Editor widget

Was this page helpful?