arcgis-editor | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-editor";

Inheritance:: ArcgisEditor→PublicLitElement

Since: ArcGIS Maps SDK for JavaScript 4.28

The Editor component provides an out-of-the-box editing experience to help streamline editing within a web application.

Demo

Properties

Property	Attribute	Type
`activeWorkflow` readonly		`CreateFeaturesWorkflow \| UpdateWorkflow \| null \| undefined`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`headingLevel`	`heading-level`	`HeadingLevel`
`hideCreateFeaturesSection`	`hide-create-features-section`	`boolean`
`hideEditFeaturesSection`	`hide-edit-features-section`	`boolean`
`hideLabelsToggle`	`hide-labels-toggle`	`boolean`
`hideMergeButton`	`hide-merge-button`	`boolean`
`hideSettingsMenu`	`hide-settings-menu`	`boolean`
`hideSketch`	`hide-sketch`	`boolean`
`hideSnappingControlsElementsEnabledToggle`	`hide-snapping-controls-elements-enabled-toggle`	`boolean`
`hideSnappingControlsElementsFeatureEnabledToggle`	`hide-snapping-controls-elements-feature-enabled-toggle`	`boolean`
`hideSnappingControlsElementsLayerList`	`hide-snapping-controls-elements-layer-list`	`boolean`
`hideSnappingControlsElementsSelfEnabledToggle`	`hide-snapping-controls-elements-self-enabled-toggle`	`boolean`
`hideSplitButton`	`hide-split-button`	`boolean`
`hideTooltipsToggle`	`hide-tooltips-toggle`	`boolean`
`hideUndoRedoButtons`	`hide-undo-redo-buttons`	`boolean`
`hideZoomToButton`	`hide-zoom-to-button`	`boolean`
`icon`	`icon`	`Icon["icon"]`
`label`	`label`	`string`
`labelOptions`		`SketchLabelOptions`
`layerInfos`		`Array<LayerInfo> \| null \| undefined`
`referenceElement`	`reference-element`	`ArcgisReferenceElement \| string \| undefined`
`selectionManager`		`SelectionManager \| null \| undefined`
`showSnappingControlsElementsHeader`	`show-snapping-controls-elements-header`	`boolean`
`snappingOptions`		`SnappingOptions`
`state` readonly		`State`
`supportingWidgetDefaults`		`SupportingWidgetDefaults \| null \| undefined`
`syncViewSelection`	`sync-view-selection`	`boolean`
`tooltipOptions`		`SketchTooltipOptions`
`useLegacyCreateTools` deprecated	`use-legacy-create-tools`	`boolean`
`view`		`MapViewOrSceneView \| null \| undefined`

activeWorkflow

readonly Property

Type: CreateFeaturesWorkflow | UpdateWorkflow | null | undefined

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

autoDestroyDisabled

Property

Type: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.

Attribute: auto-destroy-disabled
Default value: false

headingLevel

Property

Type: HeadingLevel

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

See also

Heading Elements

Attribute: heading-level
Default value: 4

Example

// "Editor" will render as an <h3>
editor.headingLevel = 3;

hideCreateFeaturesSection

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the "create features" section of the component in the default view.

Attribute: hide-create-features-section
Default value: false

hideEditFeaturesSection

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the "edit features" section of the component in the default view.

Attribute: hide-edit-features-section
Default value: false

hideLabelsToggle

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the sketch labels toggle.

Attribute: hide-labels-toggle
Default value: false

hideMergeButton

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the "Merge features" button in contexts where that command is available. Default value is true.

Attribute: hide-merge-button
Default value: false

hideSettingsMenu

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the settings menu. This menu contains the snapping and tooltips settings.

Attribute: hide-settings-menu
Default value: false

hideSketch

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Determines whether the component should display an embedded Sketch component to provide graphical controls for choosing drawing tools.

Attribute: hide-sketch
Default value: false

hideSnappingControlsElementsEnabledToggle

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the enabledToggle (Enable snapping). This toggles the SnappingOptions#enabled property.

Note

It is recommended to set SnappingControls.snappingOptions.enabled = true if enabledToggle is set to false. This is because selfEnabledToggle and featureEnabledToggle require snapping globally to be enabled in order to be interactive. Otherwise, these toggles will not be responsive.

Attribute: hide-snapping-controls-elements-enabled-toggle
Default value: false

hideSnappingControlsElementsFeatureEnabledToggle

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the featureEnabledToggle (Feature to feature). This toggles the SnappingOptions#featureEnabled property.

Attribute: hide-snapping-controls-elements-feature-enabled-toggle
Default value: false

hideSnappingControlsElementsLayerList

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the FeatureSnappingLayerSource layerList. The layerlist provides the available layer sources supported for snapping.

Attribute: hide-snapping-controls-elements-layer-list
Default value: false

hideSnappingControlsElementsSelfEnabledToggle

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the selfEnabledToggle (Geometry guides). This toggles the SnappingOptions#selfEnabled property.

Attribute: hide-snapping-controls-elements-self-enabled-toggle
Default value: false

hideSplitButton

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the "Split" button in contexts where that command is available. Default value is true.

Attribute: hide-split-button
Default value: false

hideTooltipsToggle

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the tooltips toggle. Default value is true.

Attribute: hide-tooltips-toggle
Default value: false

hideUndoRedoButtons

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide undo/redo buttons in the embedded Sketch toolbar. Default value is true.

Attribute: hide-undo-redo-buttons
Default value: false

hideZoomToButton

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to hide the "Zoom to" button when creating and editing features. Default value is true.

Attribute: hide-zoom-to-button
Default value: false

icon

autocast Property

Type: Icon["icon"]

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

Calcite Icons

Attribute: icon
Default value: "pencil"

label

Property

Type: string

The component's default label.

Attribute: label

labelOptions

Property

Type: SketchLabelOptions

Options to configure the sketch 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

Property

Type: Array<LayerInfo> | null | undefined

An array of editing configurations for individual layers. It is possible to iterate through the map's Map#editableLayers and configure these individual layers as needed.

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({
  view: view,
  layerInfos: [{
    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.
    attributeUpdatesEnabled: true, // Default is true, set to false to disable the ability to edit attributes in the update workflow.
    geometryUpdatesEnabled: true, // Default is true, set to false to disable the ability to edit feature geometries in the update workflow.
    attachmentsOnCreateEnabled: true, //Default is true, set to false to disable the ability to work with attachments while creating features.
    attachmentsOnUpdateEnabled: true //Default is true, set to false to disable the ability to work with attachments while updating/deleting features.
  }]
});

referenceElement

Property

Type: ArcgisReferenceElement | string | undefined

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

Associate components with a Map or Scene component

Attribute: reference-element

selectionManager

Property

Type: SelectionManager | null | undefined

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

Use this property to supply a custom SelectionManager that overrides the default selection manager. This is useful when applications want to share selection sets between components, without relying on the view's selection manager. This property is ignored if syncViewSelection is true.

showSnappingControlsElementsHeader

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Indicates whether to display the header. Default is false.

Attribute: show-snapping-controls-elements-header
Default value: false

snappingOptions

Property

Type: SnappingOptions

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

See also

Sample - Editor widget with configurations

Example

// 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()
  }
});

// Add the component to the view component
<arcgis-map>
 <arcgis-editor slot="top-right"></arcgis-editor>
</arcgis-map>

state

readonly Property

Type: State

The current state of the component.

supportingWidgetDefaults

Property

Type: SupportingWidgetDefaults | null | undefined

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

This property is useful for basic overrides of the default components. 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

syncViewSelection

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

beta

Controls whether the editor should sync with the view's selection manager. This does not include selection sources, which must be configured independently on the view's selection manager.

Attribute: sync-view-selection
Default value: false

tooltipOptions

Property

Type: SketchTooltipOptions

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

useLegacyCreateTools

deprecated Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 5.0

Starting at version 5.0, arcgis-editor is transitioning to a next generation geometry creation experience. This new experience provides advanced curve creation tools and allows multiple tools to be used in combination to define a single geometry.

As of 5.0, this experience is only available in 2D (e.g. arcgis-map).

This property is available to allow 2D applications to temporarily opt out of this experience.

This option will be removed in an upcoming release.

Attribute: use-legacy-create-tools
Default value: false

view

Property

Type: MapViewOrSceneView | null | undefined

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-editor component will be associated with a map or scene component rather than using the view property.

Methods

Method	Signature
`cancelSelectionTool`	`cancelSelectionTool(): void`
`cancelWorkflow`	`cancelWorkflow(): Promise<void>`
`componentOnReady` inherited	`componentOnReady(): Promise<this>`
`deleteFeatureFromWorkflow`	`deleteFeatureFromWorkflow(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`startCreateFeaturesWorkflowAtFeatureCreation`	`startCreateFeaturesWorkflowAtFeatureCreation(info: CreateFeaturesCreationInfo): Promise<void>`
`startCreateFeaturesWorkflowAtFeatureTypeSelection`	`startCreateFeaturesWorkflowAtFeatureTypeSelection(): Promise<void>`
`startUpdateWorkflowAtFeatureEdit`	`startUpdateWorkflowAtFeatureEdit(feature: Graphic): Promise<void>`
`startUpdateWorkflowAtFeatureSelection`	`startUpdateWorkflowAtFeatureSelection(): Promise<void>`
`startUpdateWorkflowAtMultipleFeatureSelection`	`startUpdateWorkflowAtMultipleFeatureSelection(candidates: Graphic[]): Promise<void>`

cancelSelectionTool

Method

Signature: cancelSelectionTool (): void

Since: ArcGIS Maps SDK for JavaScript 5.0

Cancels any active selection operation.

Returns: void

cancelWorkflow

Method

Signature: cancelWorkflow (): Promise<void>

Returns: Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: PublicLitElement

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisEditor = document.querySelector("arcgis-editor");
document.body.append(arcgisEditor);
await arcgisEditor.componentOnReady();
console.log("arcgis-editor is ready to go!");

deleteFeatureFromWorkflow

Method

Signature: deleteFeatureFromWorkflow (): Promise<void>

Returns: Promise<void>

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

startCreateFeaturesWorkflowAtFeatureCreation

Method

Signature: startCreateFeaturesWorkflowAtFeatureCreation (info: CreateFeaturesCreationInfo): Promise<void>

Parameters

Parameter	Type	Description	Required
info	`CreateFeaturesCreationInfo`

Returns: Promise<void>

startCreateFeaturesWorkflowAtFeatureTypeSelection

Method

Signature: startCreateFeaturesWorkflowAtFeatureTypeSelection (): Promise<void>

Returns: Promise<void>

startUpdateWorkflowAtFeatureEdit

Method

Signature: startUpdateWorkflowAtFeatureEdit (feature: Graphic): Promise<void>

Parameters

Parameter	Type	Description	Required
feature	`Graphic`

Returns: Promise<void>

startUpdateWorkflowAtFeatureSelection

Method

Signature: startUpdateWorkflowAtFeatureSelection (): Promise<void>

Returns: Promise<void>

startUpdateWorkflowAtMultipleFeatureSelection

Method

Signature: startUpdateWorkflowAtMultipleFeatureSelection (candidates: Graphic[]): Promise<void>

Parameters

Parameter	Type	Description	Required
candidates	`Graphic[]`

Returns: Promise<void>

Events

Name	Type
`arcgisPropertyChange`	CustomEvent<{ name: "activeWorkflow" \| "state"; }>
`arcgisReady`	CustomEvent<void>
`arcgisSketchCreate`	CustomEvent<EditorSketchCreateEvent>
`arcgisSketchUpdate`	CustomEvent<EditorSketchUpdateEvent>

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "activeWorkflow" | "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is ready to be interacted with.

arcgisSketchCreate

Event

arcgisSketchCreate: CustomEvent<EditorSketchCreateEvent>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires when a user starts drawing a feature, is actively drawing a feature, and completes drawing a feature.

arcgisSketchUpdate

Event

arcgisSketchUpdate: CustomEvent<EditorSketchUpdateEvent>

Since: ArcGIS Maps SDK for JavaScript 4.34

Fires when a user starts updating a feature's geometry, is actively updating a feature's geometry, and completes updating a feature's geometry.