Feature Form

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-feature-form";

CDN:

No specific import is needed for this component.

Demo

Properties

Property	Attribute	Type
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`editType`	`edit-type`	`"DELETE" \| "INSERT" \| "NA" \| "UPDATE"`
`feature`		`Graphic`
`formTemplate`		`FormTemplate`
`groupDisplay`	`group-display`	`"all" \| "sequential"`
`headingLevel`	`heading-level`	`number`
`icon`	`icon`	`string`
`label`	`label`	`string`
`layer`		`FeatureLayer \| GeoJSONLayer \| KnowledgeGraphSublayer \| OrientedImageryLayer \| SceneLayer \| SubtypeSublayer`
`position` deprecated	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`state` readonlyreflected	`state`	`"disabled" \| "ready"`
`timeZone`	`time-zone`	`string`

autoDestroyDisabled

Property

autoDestroyDisabled: 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

editType

Property

editType: "DELETE" | "INSERT" | "NA" | "UPDATE"

The edit type for the form, which determines the editing context and behavior.

Attribute: edit-type
Default value: "NA"

feature

Property

feature: Graphic

The associated feature containing the editable attributes.

formTemplate

Property

formTemplate: FormTemplate

The associated template used for the form.

groupDisplay

Property

groupDisplay: "all" | "sequential"

Defines how groups will be displayed to the user.

Attribute: group-display
Default value: "all"

headingLevel

Property

headingLevel: number

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

Attribute: heading-level
Default value: 2

icon

Property

icon: string

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: "form-field"

label

Property

label: string

The widget's default label.

Attribute: label

layer

Property

Layer containing the editable feature attributes.

position

deprecatedProperty

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Deprecatedsince 4.34, use slot instead.

Attribute: position

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

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

state

readonly

Property

state: "disabled" | "ready"

The current state of the component.

Attribute: state
Default value: "disabled"

timeZone

Property

timeZone: string

The timezone displayed within the form.

Attribute: time-zone

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`getValues`	`getValues(): Promise<any>`
`submit`	`submit(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
const arcgisFeatureForm = document.querySelector("arcgis-feature-form");
document.body.append(arcgisFeatureForm);
await arcgisFeatureForm.componentOnReady();
console.log("arcgis-feature-form is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

getValues

Method

getValues(): Promise<any>

Returns all of the field values, regardless of update status.

Returns: Promise<any>

submit

Method

submit(): Promise<void>

Fires the submit event.

Returns: Promise<void>

Events

Event	Type
`arcgisPropertyChange`	`CustomEvent<{ name: "state"; }>`
`arcgisReady`	`CustomEvent<void>`
`arcgisSubmit`	`CustomEvent<FeatureFormSubmitEvent>`
`arcgisValueChange`	`CustomEvent<FeatureFormValueChangeEvent>`

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "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.

arcgisSubmit

Event

arcgisSubmit: CustomEvent<FeatureFormSubmitEvent>

Fires when the submit() method is called.

arcgisValueChange

Event

arcgisValueChange: CustomEvent<FeatureFormValueChangeEvent>

Fires when a field value is updated.