arcgis-feature-next | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/map-components/components/arcgis-feature-next";

Inheritance: ArcgisFeatureNext→HTMLElement

Since: ArcGIS Maps SDK for JavaScript 5.1

beta

The Feature (next) component is the successor to the Feature component, provided to you early for testing and feedback. In version 6.0, the implementation of arcgis-feature will be updated under the hood to that of arcgis-feature-next, and this component will be removed. To update at version 6.0, simply remove -next from the component name.

The Feature (next) component displays a graphic according to its PopupTemplate. This component is useful in instances where you want to display information about a graphic but without the use of an arcgis-popup.

To show a graphic's content with actions, related records, aggregate feature browser (clustering or binning), etc., then use the arcgis-features-next component.

When Arcade expressions that use $map or geometry functions are defined in any popup template content or as expression elements, the map and spatialReference properties need to be defined in the Feature (next) component.

See also

Demo

Properties

Property	Attribute	Type
autoDestroyDisabled	auto-destroy-disabled	boolean
chartAnimationDisabled	chart-animation-disabled	boolean
defaultPopupTemplateEnabled	default-popup-template-enabled	boolean
graphic		Graphic \| null \| undefined
heading readonly		string
headingLevel	heading-level	HeadingLevel
hideAttachmentsContent	hide-attachments-content	boolean
hideContent	hide-content	boolean
hideCustomContent	hide-custom-content	boolean
hideExpressionContent	hide-expression-content	boolean
hideFieldsContent	hide-fields-content	boolean
hideHeading	hide-heading	boolean
hideLastEditedInfo	hide-last-edited-info	boolean
hideMediaContent	hide-media-content	boolean
hideTextContent	hide-text-content	boolean
icon	icon	string \| undefined
isFeatureFromTable readonly		boolean
label	label	string \| undefined
location		Point \| null \| undefined
map		Map \| null \| undefined
messageOverrides		Record<string, unknown> \| undefined
referenceElement	reference-element	ArcgisReferenceElement \| string \| undefined
showRelationshipContent	show-relationship-content	boolean
showUtilityNetworkContent	show-utility-network-content	boolean
spatialReference		SpatialReference \| null \| undefined
state readonly		State
timeZone	time-zone	string
view		MapViewOrSceneView \| null \| undefined

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

chartAnimationDisabled

Property

Type: boolean

Indicates whether to disable chart animation in the component.

Attribute: chart-animation-disabled
Default value: false

defaultPopupTemplateEnabled

Property

Type: boolean

Enables automatic creation of a popup template for layers that have popups enabled but no popupTemplate defined. Automatic popup templates are supported for layers that support the createPopupTemplate method.

Note: Starting with version 4.28, date fields are formatted using the short-date-short-time preset dateFormat rather than long-month-day-year in default popup created by setting the defaultPopupTemplateEnabled property to true. For example, previously a date that may have appeared as "December 30, 1997" will now appear as "12/30/1997 6:00 PM".

Attribute: default-popup-template-enabled
Default value: false

graphic

Property

Type: Graphic | null | undefined

The Graphic used to represent the feature.

See also

PopupTemplate.content

Default value: null

Example

let graphic = new Graphic({
  geometry: view.center,
  attributes: {
    name: "Spruce",
    family: "Pinaceae",
    count: 126
  },
  symbol: new SimpleMarkerSymbol({
    style: "square",
    color: "blue",
    size: "8px"
  }),
  popupTemplate: {
    content: [
      {
        // Set popup template content
      }
    ]
  }
});

heading

readonly Property

Type: string

The title for the feature. This can be disabled by setting the hideHeading property to true.

See also

Default value: null

headingLevel

Property

Type: HeadingLevel

Indicates the heading level to use for the headings in the component.

Attribute: heading-level
Default value: 2

hideAttachmentsContent

Property

Type: boolean

Indicates whether to hide attachments content within the component.

Attribute: hide-attachments-content
Default value: false

hideContent

Property

Type: boolean

Indicates whether to hide the component's content.

Attribute: hide-content
Default value: false

hideCustomContent

Property

Type: boolean

Indicates whether to hide custom content within the component.

Attribute: hide-custom-content
Default value: false

hideExpressionContent

Property

Type: boolean

Indicates whether to hide expression content within the component.

Attribute: hide-expression-content
Default value: false

hideFieldsContent

Property

Type: boolean

Indicates whether to hide fields content within the component.

Attribute: hide-fields-content
Default value: false

hideHeading

Property

Type: boolean

Indicates whether to hide the component's heading.

Attribute: hide-heading
Default value: false

hideLastEditedInfo

Property

Type: boolean

Indicates whether to hide the last edited info in the component.

Attribute: hide-last-edited-info
Default value: false

hideMediaContent

Property

Type: boolean

Indicates whether to hide media content within the component.

Attribute: hide-media-content
Default value: false

hideTextContent

Property

Type: boolean

Indicates whether to hide text content within the component.

Attribute: hide-text-content
Default value: false

icon

Property

Type: string | undefined

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: "icon"

isFeatureFromTable

readonly Property

Type: boolean

Indicates whether the current graphic resides in a non-spatial table.

Default value: false

label

Property

Type: string | undefined

The component's default label.

Attribute: label

location

Property

Type: Point | null | undefined

The Point representing the location of the map interaction used to trigger the opening of the component.

See also

Example

view.on("click", (event) => {
  const { mapPoint } = event;
  feature.viewModel.location = mapPoint;
});

map

Property

Type: Map | null | undefined

A map is required when the input graphic has 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. Without a map, expressions that use $map will throw an error.

See also

Default value: null

Example

// The building footprints represent the buildings that intersect a clicked parcel
let buildingFootprints = Intersects($feature, FeatureSetByName($map, "Building Footprints"));

messageOverrides

Property

Type: Record<string, unknown> | undefined

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

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

showRelationshipContent

Property

Type: boolean

This property provides the ability to hide or show relationship content within the component.

Attribute: show-relationship-content
Default value: false

showUtilityNetworkContent

Property

Type: boolean

This property provides the ability to hide or show utility network content within the component.

Attribute: show-utility-network-content
Default value: false

spatialReference

Property

Type: SpatialReference | null | undefined

The spatial reference used for Arcade operations. This property should be set if the component executes Arcade expressions that contain geometry functions.

See also

Default value: null

state

readonly Property

Type: State

The current state of the component.

Default value: "disabled"

timeZone

Property

Type: string

Dates and times displayed in the component will be displayed in this time zone. By default this time zone is inherited from MapView.timeZone. When a MapView is not associated with the component, then the property will fallback to the system time zone.

Possible Values

system: Dates and times will be displayed in the timezone of the device or browser.
unknown: Dates and time are not adjusted for any timezone.
Specified IANA timezone: Dates and times will be displayed in the specified IANA time zone. See wikipedia - List of tz database time zones.

Attribute: time-zone

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-feature-next component will be associated with a map or scene component rather than using the view property.

Methods

Method	Signature
componentOnReady inherited	componentOnReady(): Promise<this>
destroy	destroy(): Promise<void>
nextMedia	nextMedia(contentElementIndex: number): void
previousMedia	previousMedia(contentElementIndex: number): void
setActiveMedia	setActiveMedia(contentElementIndex: number, mediaInfoIndex: number): void
updateGeometry	updateGeometry(): Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Inherited from: this

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

Returns: Promise<this>

Example

const arcgisFeatureNext = document.createElement("arcgis-feature-next");
document.body.append(arcgisFeatureNext);
await arcgisFeatureNext.componentOnReady();
console.log("arcgis-feature-next is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroy the component.

Returns: Promise<void>

nextMedia

Method

Signature: nextMedia (contentElementIndex: number): void

Paginates to the next media info.

Parameters

Parameter	Type	Description	Required
contentElementIndex	number

Returns: void

previousMedia

Method

Signature: previousMedia (contentElementIndex: number): void

Paginates to the previous media info.

Parameters

Parameter	Type	Description	Required
contentElementIndex	number

Returns: void

setActiveMedia

Method

Signature: setActiveMedia (contentElementIndex: number, mediaInfoIndex: number): void

Paginates to a specified media info object. For example, you may have media content which contains multiple mediaInfos. This method allows you to specify the index of the mediaInfos you wish to display.

Parameters

Parameter	Type	Description	Required
contentElementIndex	number
mediaInfoIndex	number

Returns: void

updateGeometry

Method

Signature: updateGeometry (): Promise<void>

Updates the geometry of the graphic.

Returns: Promise<void>

Events

Name	Type
arcgisPropertyChange	CustomEvent<{ name: "flowItems" \| "state"; }>
arcgisReady	CustomEvent<void>

arcgisPropertyChange

Event

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