Edit features with the Editor widget

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

The application loads a webmap and iterates through all of its editable layers. Any editable layer is added to the Editor. Based on the underlying service's editing permissions, the Editor widget automatically recognizes the permissions set on these layers and restricts the editing capabilities based on the service's permissions. In addition, the webmap contains formInfo that contains the corresponding form template information set on the layers. The template takes an array of field elements that specify what values should be updated by 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 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

const webmap = new WebMap({
  portalItem: {
    id: "459a495fc16d4d4caa35e92e895694c8"

const view = new MapView({
  container: "viewDiv",
  map: webmap

// Begin Editor constructor
const editor = new Editor({
  view: view
}); // End Editor constructor

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

The Editor uses the same coding pattern as other widgets, i.e. you must specify the view to be used by the widget, then add the widget to the application using the View's UI.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.