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. It 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.

The widget has different workflows based on the functionality needed and are discussed below.

  • CreateWorkflow (deprecated as of 4.23) - This workflow is primarily designed for existing custom workflows that target single feature creation. This workflow will eventually be removed in favor of,
  • CreateFeaturesWorkflow (new at 4.23) - This workflow allows both individual and continuous feature creation at once.
  • UpdateWorkflow - This workflow allows you to update and/or delete existing features within an editable feature layer.

Beginning with version 4.23, the Editor widget has undergone some significant updates including both its UI and the underlying API. These updates are just a few of the improvements on the Editor roadmap. Expect to see more updates as future versions are released. Some of these updates include:

  • The initial Editor dialog has been removed and updated to include one initial panel that consolidates the creates and update workflows.
  • An additional create features workflow was added to include continuous editing. It is now possible to continuously create multiple features of the same type at once. After the initial sketch is created, the attribute form will display with the specified field elements. These fields can be updated as the user creates new features. The existing create workflow will still work but has been marked as deprecated in favor of using create features workflow. This new workflow is designed for both individual and multiple feature creation.
  • Snapping is automatically included in the widget's UI. There is no longer a need to specifically set it by passing in the Editor's snappingOptions to an instance of SnappingControls. By default, snapping is disabled. Toggle "Enable snapping" to enable it. By default, both geometry constraints and feature to feature snapping is enabled. Geometry constraints allows the editor to specify how they want their geometries to draw. For example, if lines are needed to be at exact right angles, the snapping indicators display as such and vertices can be created appropriately. Feature to feature snapping allows the new or existing geometries to be snapped to geometries in other layers, as shown within the Snapping layer list, or with geometries within the layer that is currently being edited. By default, all layers that can be configured for snapping are automatically added to this list. If needing to update this, update the Editor's snappingOptions by setting the FeatureSnappingLayerSource directly.

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. Also, it is not recommended to set a very low refreshInterval on an editable layer as this can potentially degrade performance within the application.

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 if no specific layers are set.
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|CreateFeaturesWorkflow|UpdateWorkflowmore details

A property indicating the current active workflow.

more detailsEditor
Stringmore 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
SketchLabelOptionsmore details

Options to configure the labels shown next to each segment of the geometry being created or updated.

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
SketchTooltipOptionsmore details

Options to configure the tooltip shown next to the cursor when creating or updating graphics.

more detailsEditor
Booleanmore details

Indicates whether the Editor should default to use the deprecated CreateWorkflow.

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

A property indicating the current active workflow. This is either CreateFeaturesWorkflow 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
create This allows the end user to create a new individual feature in the feature service. (deprecated as of 4.23, use create-features as noted below.)
create-features This allows the end user to create either individual or continuous features in the feature service. (Since 4.23)
update This allows the end user to update and/or delete features in the feature service.

These workflows are only enabled if the feature service allows these operations.

Possible Values:"create-features"|"create"|"update"

See also:
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.

Since: ArcGIS API for JavaScript 4.24

Options to configure the labels shown next to each segment of the geometry being created or updated.

Known Limitation

Sketch labels are currently only supported when working with a SceneView.

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,
    formTemplate:  { // autocastable to FormTemplate
      elements: [
        { // autocastable to FieldElement
          type: "field",
          fieldName: "fulladdr",
          label: "Full Address"
        }
      ]
    },
    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 SnappingOptionsautocast
Since: ArcGIS API for JavaScript 4.19

The SnappingOptions for editing. Supports self snapping and feature snapping. Starting with version 4.23, the SnappingControls UI is automatically integrated into the Editor widget. Modify the snappingOptions if modifications are needed from what is provided in the default UI.

See also:
Examples:
// Creates the Editor with SnappingOptions with no snapping UI
const editor = new Editor({
  view: view,
  snappingOptions: { // autocasts to SnappingOptions()
    enabled: true,
    featureSources: [{layer: streetsLayer}] // autocasts to FeatureSnappingLayerSource()
  }
});
// Creates the Editor with SnappingControls widget
const editor = new Editor({
  view: view
});

const snappingControls = new SnappingControls({
  view: view,
  snappingOptions: editor.snappingOptions
});

// Add the widgets to the view
view.ui.add(editor, "top-right");
view.ui.add(snappingControls, "top-left");
supportingWidgetDefaults SupportingWidgetDefaults

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

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 disable the multipleSelectionEnabled property in Sketch.defaultUpdateOptions no matter what is set within this property.

See also:
Since: ArcGIS API for JavaScript 4.24

Options to configure the tooltip shown next to the cursor when creating or updating graphics.

Known Limitation

Tooltips are currently only supported when working with a SceneView.

useDeprecatedCreateWorkflow Boolean
Since: ArcGIS API for JavaScript 4.23
Deprecated since version 4.23. Although new at 4.23, this property was introduced to help migrate from the legacy CreateWorkflow to the updated CreateFeaturesWorkflow. Once CreateWorkflow is fully removed, this property will no longer be necessary.

Indicates whether the Editor should default to use the deprecated CreateWorkflow. By default, the Editor allows creating multiple features in one workflow using CreateFeaturesWorkflow. Set this to true if needing to revert to the deprecated single feature creation workflow.

Default Value:false
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

Adds one or more handles which are to be tied to the lifecycle of the object.

more detailsAccessor
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 CreateFeaturesWorkflow by displaying the panel where feature(s) creation begins.

more detailsEditor
Promise<void>more details

Initiates the CreateFeaturesWorkflow by displaying the FeatureTemplates panel.

more detailsEditor
Promise<void>more details

Initiates the CreateFeaturesWorkflow 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 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.

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(handleOrHandles)inherited
Since: ArcGIS API for JavaScript 4.24

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.whenOnce(() => !view.updating)
  .then(() => {
    wkidSelect.disabled = false;
});

handle.remove();

// Assign a handle using own()
this.own(reactiveUtils.whenOnce(() => !view.updating)
  .then(() => {
    wkidSelect.disabled = false;
  }));
Parameter:
handleOrHandles WatchHandle|WatchHandle[]

Handles marked for removal once the object 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.

startCreateFeaturesWorkflowAtFeatureCreation(creationInfo){Promise<void>}
Since: ArcGIS API for JavaScript 4.23

Initiates the CreateFeaturesWorkflow by displaying the panel where feature(s) 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 or features.

Returns:
Type Description
Promise<void> Resolves when the CreateFeaturesWorkflow initiates and displays the panel where feature(s) creation begins.
See also:
startCreateFeaturesWorkflowAtFeatureTypeSelection(){Promise<void>}
Since: ArcGIS API for JavaScript 4.23

Initiates the CreateFeaturesWorkflow by displaying the FeatureTemplates panel.

Returns:
Type Description
Promise<void> Resolves when the CreateFeaturesWorkflow is initiated and displays the FeatureTemplates panel.
startCreateWorkflowAtFeatureCreation(creationInfo){Promise<void>}
Deprecated since version 4.23. Instead use startCreateFeaturesWorkflowAtFeatureCreation

Initiates the CreateFeaturesWorkflow 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 CreateFeaturesWorkflow initiates and displays the panel where feature creation begins.
See also:
startCreateWorkflowAtFeatureEdit(feature){Promise<void>}
Deprecated since 4.23

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>}
Deprecated since version 4.23. Instead use startCreateFeaturesWorkflowAtFeatureTypeSelection instead.

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 attribute editing panel.

Parameter:
feature Graphic

The feature to be updated.

Returns:
Type Description
Promise<void> Resolves once the UpdateWorkflow initiates the 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 or features.

Properties:
layer FeatureLayer

The associated feature layer for newly-created feature(s).

template FeatureTemplate

The associated feature template used to create new feature(s).

LayerInfo

Configurations used for setting the layer's editable preferences within the Editor.

Properties:
layer FeatureLayer

The associated feature layer containing the editable fields.

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 the service supports it.

addEnabled Boolean
optional

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

updateEnabled Boolean
optional

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

deleteEnabled Boolean
optional

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

formTemplate FormTemplate
optional

A template that defines the feature's form content. Use this when setting the fields for editing.

SupportingWidgetDefaults

Set this to customize any supporting Editor widget's default behavior. These widgets include FeatureForm, FeatureTemplates, and SketchViewModel.

Properties:
featureForm Object
optional

An object containing properties specific for customizing the FeatureForm widget.

Specification:
groupDisplay String
optional

String indicating the groupDisplay and how they will be displayed to the end user. This only applies if using grouped field elements configured in the Editor's layer infos.

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.

visibleElements.filter Boolean
optional

Indicates whether the templates filter displays.

sketch Object
optional

An object containing properties specific for customizing 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.