Features

1
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

PropertyAttributeType
active
readonly
active
boolean
auto-destroy-disabled
boolean
collapsed
boolean
content
HTMLElement | Widget | string
feature-navigation-top
boolean
Array<Graphic>
features-per-page
number
features-title
string
(((view: MapView | SceneView, goToParameters: GoToParameters) => void))
heading-level
number
hide-action-bar
boolean
hide-close-button
boolean
hide-feature-menu-heading
boolean
hide-feature-navigation
boolean
hide-flow
boolean
hide-heading
boolean
hide-spinner
boolean
icon
string
include-default-actions
boolean
initial-display-mode
"feature" | "list"
label
string
position
"bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
Array<Promise<any>>
reference-element
ArcgisLinkChart | ArcgisMap | ArcgisScene | string
selected-feature-index
number
show-collapse-button
boolean
state
readonly
state
"disabled" | "ready"
time-zone
string

active

readonly
Property
active: boolean

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

Read more...

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.

Read more...

Attribute
collapsed
Default value
false

content

Property
content: HTMLElement | Widget | string

The content of the Features widget.

Read more...

Attribute
content

featureNavigationTop

Property
featureNavigationTop: boolean

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

Read more...

Attribute
feature-navigation-top
Default value
false

features

Property
features: Array<Graphic>

An array of features associated with the Features widget.

Read more...

featuresPerPage

Property
featuresPerPage: number

The number of features to fetch at one time.

Read more...

Attribute
features-per-page
Default value
20

featuresTitle

Property
featuresTitle: string

The title of the Features widget.

Read more...

Attribute
features-title

featureViewModelAbilities

Property
featureViewModelAbilities: Abilities

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

Read more...

goToOverride

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

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

Read more...

headerActions

Property
headerActions: Collection<ActionBase>

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

Read more...

headingLevel

Property
headingLevel: number

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

Read more...

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.

Read more...

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.

Read more...

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.

Read more...

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.

Read more...

referenceElement

Property
referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
Attribute
reference-element

selectedFeature

readonlyProperty
selectedFeature: Graphic

The selected feature accessed by the Features widget.

Read more...

selectedFeatureIndex

Property
selectedFeatureIndex: number

Index of the feature that is selected.

Read more...

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.

Read more...

Default value
null

state

readonly
Property
state: "disabled" | "ready"

The view model's state.

Read more...

Attribute
state
Default value
"disabled"

timeZone

Property
timeZone: string

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

Read more...

Attribute
time-zone

Methods

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

clear

Method
clear(): Promise<void>
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
ParameterTypeOptional?
screenPoint
FeaturesFetchFeaturesScreenPoint
options
Returns
Promise<FetchPopupFeaturesResult>

next

Method
next(): Promise<__esri.FeaturesViewModel>
Returns
Promise<FeaturesViewModel>

open

Method
open(options?: __esri.FeaturesOpenOptions): Promise<void>
Parameters
ParameterTypeOptional?
options
FeaturesOpenOptions | undefined
Returns
Promise<void>

previous

Method
previous(): Promise<__esri.FeaturesViewModel>
Returns
Promise<FeaturesViewModel>

triggerAction

Method
triggerAction(actionIndex: number): Promise<void>
Parameters
ParameterTypeOptional?
actionIndex
number
Returns
Promise<void>

Events

EventType
{ name: "state" | "selectedFeature" | "selectedFeatureIndex"; }
undefined
FeaturesTriggerActionEvent

arcgisPropertyChange

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

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

arcgisReady

Event
arcgisReady: undefined

arcgisTriggerAction

Event
arcgisTriggerAction: FeaturesTriggerActionEvent

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close