Editor

AMD: require(["esri/widgets/Editor"], (Editor) => { /* code goes here */ });
ESM: import Editor from "@arcgis/core/widgets/Editor";
Class: esri/widgets/Editor
Inheritance: Editor Widget Accessor
Since: ArcGIS API for JavaScript 4.11

This widget provides an out-of-the-box editing experience to help streamline the editing experience within a web application. The widget has two different Workflows: CreateWorkflow and UpdateWorkflow. These workflows allow you to either add features or edit and/or delete existing features within an editable feature layer. The widget automatically recognizes if there are editable feature layers within the map. If it recognizes that they are editable, the layers can be used by the widget. In addition, it is also possible to configure how the Editor behaves by setting its layerInfos property. This property takes an array of configuration objects which allow you to configure the editing experience for these layers.

Known Limitations

The Editor widget is not yet at full parity with the functionality provided in the 3.x Editor widget. For example, there is currently no support editing related feature attributes.

editor

For information about gaining full control of widget styles, see the Styling topic.
See also:
Example:
// At the very minimum, set the Editor's view
const editor = new Editor({
  view: view
});

view.ui.add(editor, "top-right");

Constructors

new Editor(properties)
Parameter:
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Example:
// Typical usage for Editor widget. Be default, this will recognize all editable layers in the map.
const editor = new Editor({
  view: view
});

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class
CreateWorkflow|UpdateWorkflowmore details

A property indicating the current active workflow.

more detailsEditor
String[]more details

An array of string values which specifies what end users are allowed to edit.

more detailsEditor
String|HTMLElementmore details

The ID or node representing the DOM element containing the widget.

more detailsWidget
Stringmore details

The name of the class.

more detailsAccessor
Numbermore details

Indicates the heading level to use for title of the widget.

more detailsEditor
Stringmore details

The widget's default CSS icon class.

more detailsEditor
Stringmore details

The unique ID assigned to the widget when the widget is created.

more detailsWidget
Stringmore details

The widget's default label.

more detailsEditor
LayerInfo[]more details

An array of editing configurations for individual layers.

more detailsEditor
SnappingOptionsmore details

The SnappingOptions for editing.

more detailsEditor
SupportingWidgetDefaultsmore details

This property allows customization of supporting Editor widgets and their default behavior.

more detailsEditor
MapView|SceneViewmore details

A reference to the MapView or SceneView.

more detailsEditor
EditorViewModelmore details

The view model for this widget.

more detailsEditor
Booleanmore details

Indicates whether the widget is visible.

more detailsWidget

Property Details

activeWorkflow CreateWorkflow|UpdateWorkflowreadonly

A property indicating the current active workflow. This is either CreateWorkflow or UpdateWorkflow.

allowedWorkflows String[]

An array of string values which specifies what end users are allowed to edit. For example, a feature layer with full editing privileges may be available. But you may only want the end user to have the ability to update existing features. Set the allowedWorkflows to only update.

Possible Value Description Example
create Indicated in the widget via the Add feature option. This allows the end user to create new features in the feature service. combinedcreate
update Indicated in the widget via the Edit feature option. This allows the end user to update and/or delete features in the feature service. combinedupdate

These workflows are only enabled if the feature service allows these operations. For example, if a feature service is only enabled to allow updates, Add features is not enabled.

Example:
const editor = new Editor({
  view: view,
  allowedWorkflows: ["update"] // allows only updates and no adds
});

The ID or node representing the DOM element containing the widget. This property can only be set once. The following examples are all valid use cases when working with widgets.

Examples:
// Create the HTML div element programmatically at runtime and set to the widget's container
const basemapGallery = new BasemapGallery({
  view: view,
  container: document.createElement("div")
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});
// Specify an already-defined HTML div element in the widget's container

const basemapGallery = new BasemapGallery({
  view: view,
  container: basemapGalleryDiv
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

// HTML markup
<body>
  <div id="viewDiv"></div>
  <div id="basemapGalleryDiv"></div>
</body>
// Specify the widget while adding to the view's UI
const basemapGallery = new BasemapGallery({
  view: view
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});
declaredClass Stringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

headingLevel Number
Since: ArcGIS API for JavaScript 4.20

Indicates the heading level to use for title of the widget. By default, the title (i.e. "Editor") is rendered as a level 4 heading (e.g. <h4>Editor</h4>). Depending on the widget's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

Default Value:4
See also:
Example:
// "Editor" will render as an <h3>
editor.headingLevel = 3;
iconClass Stringreadonly

The widget's default CSS icon class.

The unique ID assigned to the widget when the widget is created. If not set by the developer, it will default to the container ID, or if that is not present then it will be automatically generated.

label String

The widget's default label.

layerInfos LayerInfo[]

An array of editing configurations for individual layers.

If you have an editable feature layer but do not want the end user to do any type of editing, you can limit this by setting the enabled property to false.

See also:
Example:
const editor = new Editor({
  layerInfos: [{
    view: view,
    layer: featureLayer, // pass in the feature layer
    fieldConfig: [ // Specify which fields to configure
      {
        name: "fulladdr",
        label: "Full Address"
      },
      {
        name: "neighborhood",
        label: "Neighborhood"
      }],
    enabled: true, // default is true, set to false to disable editing functionality
    addEnabled: true, // default is true, set to false to disable the ability to add a new feature
    updateEnabled: false // default is true, set to false to disable the ability to edit an existing feature
    deleteEnabled: false // default is true, set to false to disable the ability to delete features
  }]
});
snappingOptions SnappingOptions
Since: ArcGIS API for JavaScript 4.19

The SnappingOptions for editing. Supports self snapping and feature snapping.

Currently, the snapping functionality offered in the Editor widget does not provide a UI similar to that of the Sketch widget. This is because the Editor currently works with the Sketch widget's viewModel. This behavior will change in upcoming releases with an updated UI to help with configuring snapping options. Once snappingOptions is set, the ability to dynamically disable/enable snapping should be handled via the CRTL key. In addition, please refer to the SnappingOptions documentation for any additional considerations when setting up the Editor's snapping configurations.

See also:
Example:
const editor = new Editor({
  view: view,
  snappingOptions: { // autocasts to SnappingOptions()
    enabled: true,
    featureSources: [{layer: streetsLayer}] // autocasts to FeatureSnappingLayerSource()
  }
});
supportingWidgetDefaults SupportingWidgetDefaults

This property allows customization of supporting Editor widgets and their default behavior. These widgets include FeatureForm, FeatureTemplates, and Sketch.

This property is useful for basic overrides of the default widgets. There may be some limitations to what the Editor can do with these overridden properties. For example, the Editor will always disable the multipleSelectionEnabled property in Sketch.defaultUpdateOptions no matter what is set within this property.

See also:

A reference to the MapView or SceneView. This view provides the editable layers for the Editor widget.

The view model for this widget. This is a class that contains all the logic (properties and methods) that controls this widget's behavior. See the EditorViewModel class to access all properties and methods on the widget.

visible Boolean inherited

Indicates whether the widget is visible.

If false, the widget will no longer be rendered in the web document. This may affect the layout of other elements or widgets in the document. For example, if this widget is the first of three widgets associated to the upper right hand corner of the view UI, then the other widgets will reposition when this widget is made invisible. For more information, refer to the CSS display value of "none".

Default Value:true
Example:
// Hides the widget in the view
widget.visible = false;

Method Overview

Show inherited methods Hide inherited methods
Name Return Type Summary Class
Promise<void>more details

Cancels any active workflow.

more detailsEditor
Stringmore details

A utility method used for building the value for a widget's class property.

more detailsWidget
Promise<void>more details

This is applicable if there is an active UpdateWorkflow.

more detailsEditor
more details

Destroys the widget instance.

more detailsWidget
Booleanmore details

Emits an event on the instance.

more detailsWidget
Booleanmore details

Indicates whether there is an event listener on the instance that matches the provided event name.

more detailsWidget
Booleanmore details

isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected).

more detailsWidget
Booleanmore details

isRejected() may be used to verify if creating an instance of the class is rejected.

more detailsWidget
Booleanmore details

isResolved() may be used to verify if creating an instance of the class is resolved.

more detailsWidget
Objectmore details

Registers an event handler on the instance.

more detailsWidget
more details

Widget teardown helper.

more detailsWidget
more details

This method is primarily used by developers when implementing custom widgets.

more detailsWidget
Objectmore details

This method is primarily used by developers when implementing custom widgets.

more detailsWidget
more details

Renders widget to the DOM immediately.

more detailsWidget
more details

This method is primarily used by developers when implementing custom widgets.

more detailsWidget
Promise<void>more details

Initiates the CreateWorkflow by displaying the panel where feature creation begins.

more detailsEditor
Promise<void>more details

This method starts the CreateWorkflow where it waits for the feature to be selected.

more detailsEditor
Promise<void>more details

Initiates the CreateWorkflow by displaying the FeatureTemplates panel.

more detailsEditor
Promise<void>more details

Starts the UpdateWorkflow at the feature geometry and attribute editing panel.

more detailsEditor
Promise<void>more details

Starts the UpdateWorkflow using the current selected feature.

more detailsEditor
Promise<void>more details

This method starts the UpdateWorkflow where it waits for multiple features to be selected.

more detailsEditor
Promisemore details

when() may be leveraged once an instance of the class is created.

more detailsWidget

Method Details

cancelWorkflow(){Promise<void>}

Cancels any active workflow.

Returns:
Type Description
Promise<void> Resolves once the workflow is canceled.
classes(classNames){String}inherited

A utility method used for building the value for a widget's class property. This aids in simplifying CSS class setup.

Parameter:
classNames String|String[]|Object
repeatable

The class names.

Returns:
Type Description
String The computed class name.
See also:
Example:
// .tsx syntax showing how to set CSS classes while rendering the widget

render() {
  const dynamicIconClasses = {
    [CSS.myIcon]: this.showIcon,
    [CSS.greyIcon]: !this.showIcon
  };

  return (
    <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} />
  );
}
deleteFeatureFromWorkflow(){Promise<void>}

This is applicable if there is an active UpdateWorkflow. If so, this method deletes the workflow feature.

Returns:
Type Description
Promise<void> Resolves once the active UpdateWorkflow is deleted.
See also:
destroy()inherited

Destroys the widget instance.

emit(type, event){Boolean}inherited

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters:
type String

The name of the event.

event Object
optional

The event payload.

Returns:
Type Description
Boolean true if a listener was notified
hasEventListener(type){Boolean}inherited

Indicates whether there is an event listener on the instance that matches the provided event name.

Parameter:
type String

The name of the event.

Returns:
Type Description
Boolean Returns true if the class supports the input event.
isFulfilled(){Boolean}inherited
Since: ArcGIS API for JavaScript 4.19

isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected). If it is fulfilled, true will be returned.

Returns:
Type Description
Boolean Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).
isRejected(){Boolean}inherited
Since: ArcGIS API for JavaScript 4.19

isRejected() may be used to verify if creating an instance of the class is rejected. If it is rejected, true will be returned.

Returns:
Type Description
Boolean Indicates whether creating an instance of the class has been rejected.
isResolved(){Boolean}inherited
Since: ArcGIS API for JavaScript 4.19

isResolved() may be used to verify if creating an instance of the class is resolved. If it is resolved, true will be returned.

Returns:
Type Description
Boolean Indicates whether creating an instance of the class has been resolved.
on(type, listener){Object}inherited

Registers an event handler on the instance. Call this method to hook an event with a listener. See the Events summary table for a list of supported events.

Parameters:

An event or an array of events to listen for.

listener Function

The function to call when the event fires.

Returns:
Type Description
Object Returns an event handler with a remove() method that should be called to stop listening for the event(s).
Property Type Description
remove Function When called, removes the listener from the event.
Example:
view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});
own(handles)inherited

Widget teardown helper. Any handles added to it will be automatically removed when the widget is destroyed.

Parameter:

Handles marked for removal once the widget is destroyed.

postInitialize()inherited

This method is primarily used by developers when implementing custom widgets. Executes after widget is ready for rendering.

render(){Object}inherited

This method is primarily used by developers when implementing custom widgets. It must be implemented by subclasses for rendering.

Returns:
Type Description
Object The rendered virtual node.
renderNow()inherited

Renders widget to the DOM immediately.

scheduleRender()inherited

This method is primarily used by developers when implementing custom widgets. Schedules widget rendering. This method is useful for changes affecting the UI.

startCreateWorkflowAtFeatureCreation(creationInfo){Promise<void>}

Initiates the CreateWorkflow by displaying the panel where feature creation begins. This method takes a CreationInfo object containing the layer(s) and template(s) to use.

Parameter:
creationInfo CreationInfo

An object containing information needed to create a new feature using the Editor widget. This object provides the feature template and layer for creating a new feature.

Returns:
Type Description
Promise<void> Resolves when the CreateWorkflow initiates and displays the panel where feature creation begins.
See also:
startCreateWorkflowAtFeatureEdit(feature){Promise<void>}

This method starts the CreateWorkflow where it waits for the feature to be selected.

Parameter:
feature Graphic

The feature to be edited.

Returns:
Type Description
Promise<void> Resolves once the CreateWorkflow initiates, displays the panel where feature creation begins, and waits for the feature to be selected.
See also:
startCreateWorkflowAtFeatureTypeSelection(){Promise<void>}

Initiates the CreateWorkflow by displaying the FeatureTemplates panel.

Returns:
Type Description
Promise<void> Resolves when the CreateWorkflow is initiated and displays the FeatureTemplates panel.
See also:
startUpdateWorkflowAtFeatureEdit(feature){Promise<void>}

Starts the UpdateWorkflow at the feature geometry and attribute editing panel.

Parameter:
feature Graphic

The feature to be updated.

Returns:
Type Description
Promise<void> Resolves once the UpdateWorkflow initiates the feature geometry and attribute editing panel.
See also:
startUpdateWorkflowAtFeatureSelection(){Promise<void>}

Starts the UpdateWorkflow using the current selected feature.

Returns:
Type Description
Promise<void> Resolves once the UpdateWorkflow is initiated using the current selected feature.
See also:
startUpdateWorkflowAtMultipleFeatureSelection(candidates){Promise<void>}

This method starts the UpdateWorkflow where it waits for multiple features to be selected.

Parameter:
candidates Graphic[]

An array of features to be updated. This is only relevant when there are multiple candidates to update.

Returns:
Type Description
Promise<void> Resolves once the UpdateWorkflow is initiated as it waits for multiple features to be selected.
See also:
when(callback, errback){Promise}inherited
Since: ArcGIS API for JavaScript 4.19

when() may be leveraged once an instance of the class is created. This method takes two input parameters: a callback function and an errback function. The callback executes when the instance of the class loads. The errback executes if the instance of the class fails to load.

Parameters:
callback Function
optional

The function to call when the promise resolves.

errback Function
optional

The function to execute when the promise fails.

Returns:
Type Description
Promise Returns a new promise for the result of callback that may be used to chain additional functions.
Example:
// Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way
let bmGallery = new BasemapGallery();
bmGallery.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
});

Type Definitions

CreationInfo

This object provides the feature template and layer for creating a new feature.

Properties:
layer FeatureLayer

The associated feature layer where the new feature is created.

template FeatureTemplate

The associated feature template used to create the new feature.

LayerInfo

Editor configurations used for an array of fields.

Properties:
layer FeatureLayer

The associated feature layer containing the editable fields.

fieldConfig FieldConfig[]
optional

The configuration options for displaying an array of fields within the widget. Take note that all fields except for editor, globalID, objectID, and system maintained area and length fields will be included. Otherwise, it is up to the developer to set the right field(s) to override and display.

If this is set, in addition to overrides in the supportingWidgetDefaults, the overrides specified in the supportingWidgetDefaults property take precedence.

allowAttachments Boolean
optional
Default Value:true

Indicates whether to display the attachments widget in the Editor's UI. By default, this is true, if the service supportsAttachment.

enabled Boolean
optional
Default Value:true

Indicates whether to enable editing on the layer. Defaults to true if service supports it.

addEnabled Boolean
optional

Indicates whether to enable Add feature functionality. Defaults to true if service supports it.

updateEnabled Boolean
optional

Indicates whether to enable Update feature functionality. Defaults to true if service supports it.

deleteEnabled Boolean
optional

Indicates whether to enable the ability to delete features. Defaults to true if service supports it.

SupportingWidgetDefaults

Set this to customize any supporting Editor widgets default behavior. These widgets include FeatureForm, FeatureTemplates, and Sketch.

Properties:
featureForm Object
optional

An object containing properties specific for customizing the FeatureForm widget.

Specification:
fieldConfig FieldConfig[]
optional

An array of FieldConfig objects to use within the FeatureForm.

Any field configurations set within the layerInfos property will be overridden if it is set here in the supportingWidgetDefaults property.

groupDisplay String
optional

String indicating the groupDisplay and how they will be displayed to the end user.

featureTemplates Object
optional

An object containing properties specific for customizing the FeatureTemplates widget.

Specification:
optional

Aids in managing various template items and how they display within the widget. Please refer to groupBy API reference for additional information.

filterEnabled Boolean
optional

Indicates whether the templates filter displays.

sketch Object
optional

An object containing properties specific for customizng the Sketch widget.

Specification:
defaultUpdateOptions Object
optional

An object containing the defaultUpdateOptions for the Sketch widget.

markerSymbol SimpleMarkerSymbol
optional

The marker symbol used to symbolize any point feature updates.

polygonSymbol SimpleFillSymbol
optional

The polygon symbol used to symbolize any polygon feature updates.

polylineSymbol SimpleLineSymbol
optional

The line symbol used to symbolize any line feature updates.

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