Features

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

Features component allows users to view a feature's popupTemplate content such as attributes, actions, related records, etc., without having to be tied to the View.

Demo

Properties

Property	Attribute	Type
`actions`		`Collection<ActionButton \| ActionToggle>`
`active` readonly	`active`	`boolean`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`collapsed`	`collapsed`	`boolean`
`content`	`content`	`HTMLElement \| Widget \| string`
`featureNavigationTop`	`feature-navigation-top`	`boolean`
`features`		`Array<Graphic>`
`featuresPerPage`	`features-per-page`	`number`
`featuresTitle`	`features-title`	`string`
`featureViewModelAbilities`		`Abilities`
`goToOverride`		`(((view: MapView \| SceneView, goToParameters: GoToParameters) => void))`
`headerActions`		`Collection<ActionBase>`
`headingLevel`	`heading-level`	`number`
`hideActionBar`	`hide-action-bar`	`boolean`
`hideCloseButton`	`hide-close-button`	`boolean`
`hideFeatureMenuHeading`	`hide-feature-menu-heading`	`boolean`
`hideFeatureNavigation`	`hide-feature-navigation`	`boolean`
`hideFlow`	`hide-flow`	`boolean`
`hideHeading`	`hide-heading`	`boolean`
`hideSpinner`	`hide-spinner`	`boolean`
`icon`	`icon`	`string`
`includeDefaultActions`	`include-default-actions`	`boolean`
`initialDisplayMode`	`initial-display-mode`	`"feature" \| "list"`
`label`	`label`	`string`
`map`		`Map`
`position`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`promises`		`Array<Promise<any>>`
`referenceElement`	`reference-element`	`ArcgisLinkChart \| ArcgisMap \| ArcgisScene \| string`
`selectedFeature` readonly		`Graphic`
`selectedFeatureIndex`	`selected-feature-index`	`number`
`showCollapseButton`	`show-collapse-button`	`boolean`
`spatialReference`		`SpatialReference`
`state` readonly	`state`	`"disabled" \| "ready"`
`timeZone`	`time-zone`	`string`

actions

Property

actions: Collection<ActionButton | ActionToggle>

Collection of action or action toggle objects.

active

readonly

Property

active: boolean

Indicates if the widget is active when it is visible and is not waiting for results.

Attribute: active
Default value: false

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

collapsed

Property

collapsed: boolean

Indicates whether the popup displays its content.

Attribute: collapsed
Default value: false

content

Property

content: HTMLElement | Widget | string

The content of the Features widget.

Attribute: content

featureNavigationTop

Property

featureNavigationTop: boolean

Indicates whether the feature navigation arrows are displayed at the top of the widget.

Attribute: feature-navigation-top
Default value: false

features

Property

features: Array<Graphic>

An array of features associated with the Features widget.

featuresPerPage

Property

featuresPerPage: number

The number of features to fetch at one time.

Attribute: features-per-page
Default value: 20

featuresTitle

Property

featuresTitle: string

The title of the Features widget.

Attribute: features-title

featureViewModelAbilities

Property

featureViewModelAbilities: Abilities

Defines the specific abilities that can be used when querying and displaying content.

goToOverride

Property

goToOverride: (((view: MapView | SceneView, goToParameters: GoToParameters) => void))

This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.

headerActions

Property

headerActions: Collection<ActionBase>

The actions that are displayed in the header of the widget.

headingLevel

Property

headingLevel: number

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

Attribute: heading-level

hideActionBar

Property

hideActionBar: boolean

Attribute: hide-action-bar
Default value: false

hideCloseButton

Property

hideCloseButton: boolean

Attribute: hide-close-button
Default value: false

hideFeatureMenuHeading

Property

hideFeatureMenuHeading: boolean

Attribute: hide-feature-menu-heading
Default value: false

hideFeatureNavigation

Property

hideFeatureNavigation: boolean

Attribute: hide-feature-navigation
Default value: false

hideFlow

Property

hideFlow: boolean

Attribute: hide-flow
Default value: false

hideHeading

Property

hideHeading: boolean

Attribute: hide-heading
Default value: false

hideSpinner

Property

hideSpinner: boolean

Attribute: hide-spinner
Default value: false

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). Search Calcite Icons for possible values.

Attribute: icon
Default value: null

includeDefaultActions

Property

includeDefaultActions: boolean

Indicates whether or not to include defaultActions.

Attribute: include-default-actions
Default value: true

initialDisplayMode

Property

initialDisplayMode: "feature" | "list"

Indicates whether to initially display a list of features, or the content for one feature.

Attribute: initial-display-mode
Default value: "feature"

label

Property

label: string

The component's default label.

Attribute: label

map

Property

map: Map

A map is required when the input features have a popupTemplate that contains Arcade expressions in ExpressionInfo or ExpressionContent that may use the $map profile variable to access data from layers within a map.

Default value: null

position

Property

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

Attribute: position
Default value: "bottom-left"

promises

Property

promises: Array<Promise<any>>

An array of pending Promises that have not yet been fulfilled.

referenceElement

Property

referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string

Attribute: reference-element

selectedFeature

readonlyProperty

selectedFeature: Graphic

The selected feature accessed by the Features widget.

selectedFeatureIndex

Property

selectedFeatureIndex: number

Index of the feature that is selected.

Attribute: selected-feature-index

showCollapseButton

Property

showCollapseButton: boolean

Attribute: show-collapse-button
Default value: false

spatialReference

Property

spatialReference: SpatialReference

The spatial reference used for Arcade operations.

Default value: null

state

readonly

Property

state: "disabled" | "ready"

The view model's state.

Attribute: state
Default value: "disabled"

timeZone

Property

timeZone: string

Dates and times displayed in the widget will be displayed in this time zone.

Attribute: time-zone

Methods

Method	Signature
`clear`	`clear(): Promise<void>`
`close`	`close(): Promise<void>`
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`
`fetchFeatures`	`fetchFeatures(screenPoint: __esri.FeaturesFetchFeaturesScreenPoint, options?: __esri.FetchFeaturesOptions): Promise<__esri.FetchPopupFeaturesResult>`
`next`	`next(): Promise<__esri.FeaturesViewModel>`
`open`	`open(options?: __esri.FeaturesOpenOptions): Promise<void>`
`previous`	`previous(): Promise<__esri.FeaturesViewModel>`
`triggerAction`	`triggerAction(actionIndex: number): Promise<void>`

clear

Method

clear(): Promise<void>

Clears the component.

Returns: Promise<void>

close

Method

close(): Promise<void>

Returns: Promise<void>

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

fetchFeatures

Method

fetchFeatures(screenPoint: __esri.FeaturesFetchFeaturesScreenPoint, options?: __esri.FetchFeaturesOptions): Promise<__esri.FetchPopupFeaturesResult>

Parameters

Parameter	Type	Optional?
screenPoint	`FeaturesFetchFeaturesScreenPoint`
options	`FetchFeaturesOptions \| undefined`

Returns: Promise<FetchPopupFeaturesResult>

Method

next(): Promise<__esri.FeaturesViewModel>

Moves to the next item.

Returns: Promise<FeaturesViewModel>

open

Method

open(options?: __esri.FeaturesOpenOptions): Promise<void>

Parameters

Parameter	Type	Optional?
options	`FeaturesOpenOptions \| undefined`

Returns: Promise<void>

Method

previous(): Promise<__esri.FeaturesViewModel>

Moves to the previous item.

Returns: Promise<FeaturesViewModel>

triggerAction

Method

triggerAction(actionIndex: number): Promise<void>

Triggers an action on the component.

Parameters

Parameter	Type	Optional?
actionIndex	`number`

Returns: Promise<void>

Events

Event	Type
`arcgisPropertyChange`	`{ name: "state" \| "selectedFeature" \| "selectedFeatureIndex"; }`
`arcgisReady`	`undefined`
`arcgisTriggerAction`	`FeaturesTriggerActionEvent`

arcgisPropertyChange

Event

arcgisPropertyChange: { name: "state" | "selectedFeature" | "selectedFeatureIndex"; }

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

arcgisReady

Event

arcgisReady: undefined

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

arcgisTriggerAction

Event

arcgisTriggerAction: FeaturesTriggerActionEvent

Emitted when an action is triggered on the component.