import "@arcgis/map-components/components/arcgis-features";The 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 |
|---|---|---|
| ||
activereadonly | active | boolean |
auto-destroy-disabled | boolean | |
closed | 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 | ||
selectedFeaturereadonly | | |
selected-feature-index | number | |
show-collapse-button | boolean | |
| ||
statereadonly | state | "disabled" | "ready" |
time-zone | string |
actions
actions: Collection<ActionButton | ActionToggle>Collection of action or action toggle objects.
active
active: booleanIndicates if the widget is active when it is visible and is not waiting for results.
- Attribute
- active
- Default value
- false
autoDestroyDisabled
autoDestroyDisabled: booleanIf 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
closed
closed: booleanIndicates whether a component is closed. When true, the component will be hidden.
- Attribute
- closed
- Default value
- false
collapsed
collapsed: booleanIndicates whether the popup displays its content.
- Attribute
- collapsed
- Default value
- false
content
content: HTMLElement | Widget | stringThe content of the Features widget.
- Attribute
- content
featureNavigationTop
featureNavigationTop: booleanIndicates whether the feature navigation arrows are displayed at the top of the widget.
- Attribute
- feature-navigation-top
- Default value
- false
featuresPerPage
featuresPerPage: numberThe number of features to fetch at one time.
- Attribute
- features-per-page
- Default value
- 20
featureViewModelAbilities
featureViewModelAbilities: AbilitiesDefines the specific abilities that can be used when querying and displaying content.
goToOverride
goToOverride: (((view: MapView | SceneView, goToParameters: GoToParameters) => void))This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.
headerActions
headerActions: Collection<ActionBase>The actions that are displayed in the header of the widget.
headingLevel
headingLevel: numberIndicates the heading level to use for the title of the widget.
- Attribute
- heading-level
hideActionBar
hideActionBar: booleanIndicates whether to hide the action bar that holds the feature's action.
- Attribute
- hide-action-bar
- Default value
- false
hideCloseButton
hideCloseButton: booleanIndicates whether to hide the close button.
- Attribute
- hide-close-button
- Default value
- false
hideFeatureMenuHeading
hideFeatureMenuHeading: booleanIndicates whether to hide a heading and description on the widget feature menu list.
- Attribute
- hide-feature-menu-heading
- Default value
- false
hideFeatureNavigation
hideFeatureNavigation: booleanIndicates whether to hide pagination for feature navigation. This allows the user to scroll through various selected features using pagination arrows.
- Attribute
- hide-feature-navigation
- Default value
- false
hideFlow
hideFlow: booleanDetermines whether the component should be shown within its built-in flow component or if the flow component should be excluded.
The component will be displayed within its original flow component if false.
The flow component will be omitted if set to true.
To place the component into an existing Calcite flow component, set this property to false.
- Attribute
- hide-flow
- Default value
- false
hideHeading
hideHeading: booleanIndicates whether is hide the heading.
- Attribute
- hide-heading
- Default value
- false
hideSpinner
hideSpinner: booleanIndicates whether to hide the loading spinner.
- Attribute
- hide-spinner
- Default value
- false
icon
icon: stringIcon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).
- See also
- Attribute
- icon
- Default value
- null
includeDefaultActions
includeDefaultActions: booleanIndicates whether or not to include defaultActions.
- Attribute
- include-default-actions
- Default value
- true
initialDisplayMode
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"
map
map: MapA 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
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
promises: Array<Promise<any>>An array of pending Promises that have not yet been fulfilled.
referenceElement
referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | stringBy 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.
- Attribute
- reference-element
selectedFeature
selectedFeature: GraphicThe selected feature accessed by the Features widget.
selectedFeatureIndex
selectedFeatureIndex: numberIndex of the feature that is selected.
- Attribute
- selected-feature-index
showCollapseButton
showCollapseButton: boolean- Attribute
- show-collapse-button
- Default value
- false
spatialReference
spatialReference: SpatialReferenceThe spatial reference used for Arcade operations.
- Default value
- null
state
state: "disabled" | "ready"The current state of the component.
- Attribute
- state
- Default value
- "disabled"
timeZone
timeZone: stringDates and times displayed in the widget will be displayed in this time zone.
- Attribute
- time-zone
Slots
Events
| Event | Type |
|---|---|
CustomEvent<void> | |
CustomEvent<{ name: "state" | "selectedFeature" | "selectedFeatureIndex"; }> | |
CustomEvent<void> | |
FeaturesTriggerActionEvent |
arcgisClose
arcgisClose: CustomEvent<void>Emitted when the component's close button is clicked.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisPropertyChange
arcgisPropertyChange: CustomEvent<{ name: "state" | "selectedFeature" | "selectedFeatureIndex"; }>Emitted when the value of a property is changed. Use this to listen to changes to properties.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisReady
arcgisReady: CustomEvent<void>Emitted when the component associated with a map or scene view is is ready to be interacted with.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
arcgisTriggerAction
arcgisTriggerAction: FeaturesTriggerActionEventEmitted when an action is triggered on the component.
Events triggered on this element will be propagated to their outermost elements.
The event is composable and will propagate across the shadow DOM into the standard DOM.
The event's default behavior can be canceled, allowing for custom behavior to be implemented instead.
Methods
| Method | Signature |
|---|---|
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> |
componentOnReady
componentOnReady(): Promise<void>Create a promise that resolves once component is fully loaded.
Example
const arcgisFeatures = document.querySelector("arcgis-features");
document.body.append(arcgisFeatures);
await arcgisFeatures.componentOnReady();
console.log("arcgis-features is ready to go!");- Returns
- Promise<void>
fetchFeatures
fetchFeatures(screenPoint: __esri.FeaturesFetchFeaturesScreenPoint, options?: __esri.FetchFeaturesOptions): Promise<__esri.FetchPopupFeaturesResult>Use this method to return feature(s) at a given screen location. These features are fetched from all of the layer views. In order to use this, a layer must already have an associated PopupTemplate. This method allows a developer to control how the input location is handled.
Parameters
| Parameter | Type | Optional? |
|---|---|---|
screenPoint | FeaturesFetchFeaturesScreenPoint | |
options | FetchFeaturesOptions | undefined |
- Returns
- Promise<FetchPopupFeaturesResult>
open
open(options?: __esri.FeaturesOpenOptions): Promise<void>Opens Features with content defined either explicitly or driven from the PopupTemplate of input features.
Parameters
| Parameter | Type | Optional? |
|---|---|---|
options | FeaturesOpenOptions | undefined |
- Returns
- Promise<void>