Feature

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

Disables chart animation within the component.

Attribute

chart-animation-disabled

Default value

false

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. (Supported for FeatureLayer, GeoJSONLayer, SceneLayer, CSVLayer, OGCFeatureLayer PointCloudLayer, StreamLayer, and ImageryLayer).

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 the 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

The Graphic used to represent the feature.

See also

• PopupTemplate.content

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
      }
    ]
  }
});

Default value

null

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

See also

• headingLevel
• hideHeading

Default value

null

Indicates the heading level to use for the heading of the component. By default, the title is rendered as a level 2 heading (e.g. <h2>Title of content</h2>). Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

• Heading Elements

Example

1

// feature title will render as an <h3> feature.headingLevel = 3;

1

Attribute

heading-level

Default value

2

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

Attribute

hide-attachments-content

Default value

false

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

Attribute

hide-content

Default value

false

Indicates whether to hide all AttachmentsContent.

Attribute

hide-content-attachments

Default value

false

Indicates whether to hide all ExpressionContent.

Attribute

hide-content-expression

Default value

false

Indicates whether to hide all FieldsContent.

Attribute

hide-content-fields

Default value

false

Indicates whether to hide all MediaContent.

Attribute

hide-content-media

Default value

false

Indicates whether to hide all TextContent.

Attribute

hide-content-text

Default value

false

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

Attribute

hide-custom-content

Default value

false

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

Attribute

hide-expression-content

Default value

false

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

Attribute

hide-fields-content

Default value

false

This property provides the ability to hide or show the component's heading.

Attribute

hide-heading

Default value

false

This property provides the ability to hide or show the last edited info within the component.

Attribute

hide-last-edited-info

Default value

false

Indicates whether to hide the title associated with the feature.

Attribute

hide-last-edit-info

Default value

false

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

Attribute

hide-media-content

Default value

false

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

Attribute

hide-text-content

Default value

false

Indicates whether to hide the title associated with the feature.

Attribute

hide-title

Default value

false

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"

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

Default value

false

The component's default label.

Attribute

label

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

Default value

null

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

• Type system
• Arcade Profiles: Popup

Example

1

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

1

Default value

null

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

Attribute

position

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

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

Attribute

show-relationship-content

Default value

false

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

Attribute

show-utility-network-content

Default value

false

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

See also

• Type system
• Arcade Profiles: Popup

Default value

null

The current state of the component.

Attribute

state

Default value

"disabled"

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

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

Create a promise that resolves once component is fully loaded.

Example

1
2
3
4
const arcgisFeature = document.querySelector("arcgis-feature");
document.body.append(arcgisFeature);
await arcgisFeature.componentOnReady();
console.log("arcgis-feature is ready to go!");

Returns

Promise<void>

Permanently destroy the component.

Returns

Promise<void>

Paginates to the next media info.

Parameters

Returns

Promise<void>

Paginates to the previous media info.

Parameters

Returns

Promise<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

Returns

Promise<void>

Updates the geometry of the graphic.

Returns

Promise<void>

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

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