ListItemPanel | References | ArcGIS Maps SDK for JavaScript

import ListItemPanel from "@arcgis/core/widgets/LayerList/ListItemPanel.js";

Inheritance:: ListItemPanel→Widget→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.7

This class allows you to display custom content for each ListItem in the LayerList widget. ListItemPanel objects typically aren't constructed. Rather, they are modified using the LayerList.listItemCreatedFunction property.

A common scenario for using ListItemPanel is to display a Legend widget within each list item. This allows users to create a legend for each layer in the map simply by adding the string "legend" as the content.

See also

Example

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const { item } = event;
    // displays the legend for each layer list item
    item.panel = {
      content: "legend"
    };
  }
});

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`ListItemPanelProperties`

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`container` inherited	`HTMLElement \| null \| undefined`	Widget
`content`	`ListItemPanelContents \| null \| undefined`
`declaredClass` readonly inherited	`string`	Accessor
`destroyed` readonly inherited	`boolean`	Widget
`disabled`	`boolean`
`flowEnabled`	`boolean`
`icon`	`Icon["icon"] \| null \| undefined`
`id` inherited	`string`	Widget
`image`	`string \| null \| undefined`
`label` inherited	`string \| null \| undefined`	Widget
`listItem`	`ListItem \| null \| undefined`
`open`	`boolean`
`title`	`string`
`uid` readonly inherited	`string`	IdentifiableMixin
`visible`	`boolean`

container

autocast inherited Property

Type: HTMLElement | null | undefined

Inherited from: Widget

The ID or node representing the DOM element containing the widget. This property can only be set once. The following examples are all valid use case when working with widgets.

Examples

// Create the HTML div element programmatically at runtime and set to the widget's container
const basemapGallery = new BasemapGallery({
  view: view,
  container: document.createElement("div")
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

// Specify an already-defined HTML div element in the widget's container

const basemapGallery = new BasemapGallery({
  view: view,
  container: basemapGalleryDiv
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

// HTML markup
<body>
  <div id="viewDiv"></div>
  <div id="basemapGalleryDiv"></div>
</body>

// Specify the widget while adding to the view's UI
const basemapGallery = new BasemapGallery({
  view: view
});

// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
  position: "top-right"
});

content

Property

Type: ListItemPanelContents | null | undefined

The content displayed in the ListItem panel. This can be a String, a Widget instance, an HTMLElement, or an Array of any of those elements.

If the string legend is used, then an instance of the Legend widget is placed in the content.

Example

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: (event) => {
    const { item } = event;
    // displays the legend for each layer list item
    item.panel = {
      content: "legend"
    };
  }
});

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

destroyed

readonlyinherited Property

Type: boolean

Inherited from: Widget

When true, this property indicates whether the widget has been destroyed.

disabled

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.25

If true, disables the ListItem's panel so the user cannot open or interact with it. The panel will be disabled by default if it does not have content or if it contains a legend with no active content in it.

Example

const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: (event) => {
    const { item } = event;
    if (!item.layer.visible){
      item.panel.disabled = true;
    }
  }
});

flowEnabled

Property

Type: boolean

Since: ArcGIS Maps SDK for JavaScript 4.29

Indicates whether the panel's content should be rendered as a Calcite Flow Item. By default, the panel's content is rendered in the content-bottom slot. Flow is a calcite component that allows for drilling in and out of panels.

Default value: false

icon

Property

Type: Icon["icon"] | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.27

Icon which represents the panel.

See also

id

inherited Property

Type: string

Inherited from: Widget

The unique ID assigned to the widget when the widget is created. If not set by the developer, it will default to the container ID, or if that is not present then it will be automatically generated.

image

Property

Type: string | null | undefined

The URL or data URI of an image used to represent the panel. This property will be used as a background image for the node. If neither image nor icon are specified, a default icon will display.

label

inherited Property

Type: string | null | undefined

Inherited from: Widget

Since: ArcGIS Maps SDK for JavaScript 4.11

The widget's label.

This property is useful whenever the widget is controlled by another one (e.g. Expand)

listItem

Property

Type: ListItem | null | undefined

The panel's parent ListItem that represents a layer in the map.

open

Property

Type: boolean

Indicates if the panel's content is open and visible to the user.

Default value: false

Example

const layerList = new LayerList({
  listItemCreatedFunction: async (event) => {
    const { item } = event;
    const { layer } = item;

   // add a legend as the content and open the panel by default
    item.panel = {
      content: "legend",
      open: true
    };
  },
  view
});

title

Property

Type: string

The title of the panel. By default, this title matches the ListItem.title. Changing this value will not change the title of the ListItem in the LayerList.

uid

readonlyinherited Property

Type: string

Inherited from: IdentifiableMixin

Since: ArcGIS Maps SDK for JavaScript 4.33

An automatically generated unique identifier assigned to the instance. The unique id is generated each time the application is loaded.

visible

Property

Type: boolean

Indicates whether the ListItemPanel is visible.

If false, the list item panel will not be rendered in the HTML document.

Default value: true

Examples

const layerList = new LayerList({
  listItemCreatedFunction: async (event) => {
    const { item } = event;
    const { layer } = item;

    item.panel = {
      content: "legend",
      open: true
    };

    // hide the panel for a specific layer
    if (layer.title.includes("Confidential")) {
      item.panel.visible = false;
    }
  },
  view
});

// Hides the widget in the view
widget.visible = false;

Methods

Method	Signature	Class
`classes` inherited	`classes(...classNames: ((string \| null \| undefined) \| ((string[] \| Record<string, boolean>) \| null \| undefined) \| false \| null \| undefined)[]): string`	Widget
`destroy` inherited	`destroy(): void`	Widget
`emit` inherited	`emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean`	EventedMixin
`hasEventListener` inherited	`hasEventListener<Type extends EventNames<this>>(type: Type): boolean`	EventedMixin
`isFulfilled` inherited	`isFulfilled(): boolean`	EsriPromiseMixin
`isRejected` inherited	`isRejected(): boolean`	EsriPromiseMixin
`isResolved` inherited	`isResolved(): boolean`	EsriPromiseMixin
`on` inherited	`on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle`	EventedMixin
`postInitialize` inherited	`postInitialize(): void`	Widget
`render` inherited	`render(): any \| null`	Widget
`renderNow` inherited	`renderNow(): void`	Widget
`scheduleRender` inherited	`scheduleRender(): void`	Widget
`when` inherited	`when<TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> \| null \| undefined, onRejected?: OnRejectedCallback<TResult2> \| null \| undefined): Promise<TResult1 \| TResult2>`	EsriPromiseMixin

classes

inherited Method

Signature: classes (...classNames: ((string | null | undefined) | ((string[] | Record<string, boolean>) | null | undefined) | false | null | undefined)[]): string

Inherited from: Widget

A utility method used for building the value for a widget's class property. This aids in simplifying css class setup.

Parameters

Parameter	Type	Description	Required
classNames	`((string \| null \| undefined) \| ((string[] \| Record<string, boolean>) \| null \| undefined) \| false \| null \| undefined)[]`	The class names.

Returns: string
The computed class name.

Example

// .tsx syntax showing how to set css classes while rendering the widget

render() {
  const dynamicClasses = {
    [css.flip]: this.flip,
    [css.primary]: this.primary
  };

  return (
    <div class={classes(css.root, css.mixin, dynamicClasses)} />
  );
}

destroy

inherited Method

Signature: destroy (): void

Inherited from: Widget

Destroys the widget instance.

Returns: void

emit

inherited Method

Signature: emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.
event	`this["@eventTypes"][Type]`	The event payload.

Returns: boolean
true if a listener was notified

hasEventListener

inherited Method

Signature: hasEventListener <Type extends EventNames<this>>(type: Type): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Indicates whether there is an event listener on the instance that matches the provided event name.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.

Returns: boolean
Returns true if the class supports the input event.

isFulfilled

inherited Method

Signature: isFulfilled (): boolean

Inherited from: EsriPromiseMixin

isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected). If it is fulfilled, true will be returned.

Returns: boolean
Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).

isRejected

inherited Method

Signature: isRejected (): boolean

Inherited from: EsriPromiseMixin

isRejected() may be used to verify if creating an instance of the class is rejected. If it is rejected, true will be returned.

Returns: boolean
Indicates whether creating an instance of the class has been rejected.

isResolved

inherited Method

Signature: isResolved (): boolean

Inherited from: EsriPromiseMixin

isResolved() may be used to verify if creating an instance of the class is resolved. If it is resolved, true will be returned.

Returns: boolean
Indicates whether creating an instance of the class has been resolved.

on

inherited Method

Signature: on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Registers an event handler on the instance. Call this method to hook an event with a listener.

Parameters

Parameter	Type	Description	Required
type	`Type`	An event or an array of events to listen for.
listener	`EventedCallback<this["@eventTypes"][Type]>`	The function to call when the event fires.

Returns

ResourceHandle

Returns an event handler with a remove() method that should be called to stop listening for the event(s).

Property	Type	Description
remove	Function	When called, removes the listener from the event.

Example

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

postInitialize

inherited Method

Signature: postInitialize (): void

Inherited from: Widget

Executes after widget is ready for rendering.

Returns: void

render

inherited Method

Signature: render (): any | null

Inherited from: Widget

This method is implemented by subclasses for rendering.

Returns: any | null
The rendered virtual node.

renderNow

inherited Method

Signature: renderNow (): void

Inherited from: Widget

Renders widget to the DOM immediately.

Returns: void

scheduleRender

inherited Method

Signature: scheduleRender (): void

Inherited from: Widget

Schedules widget rendering. This method is useful for changes affecting the UI.

Returns: void

when

inherited Method

Signature: when <TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2>

Type parameters: <TResult1 = this, TResult2 = never>

Inherited from: EsriPromiseMixin

when() may be leveraged once an instance of the class is created. This method takes two input parameters: an onFulfilled function and an onRejected function. The onFulfilled executes when the instance of the class loads. The onRejected executes if the instance of the class fails to load.

Parameters

Parameter	Type	Description	Required
onFulfilled	`OnFulfilledCallback<this, TResult1> \| null \| undefined`	The function to call when the promise resolves.
onRejected	`OnRejectedCallback \| null \| undefined`	The function to execute when the promise fails.

Returns: Promise<TResult1 | TResult2>
Returns a new promise for the result of onFulfilled that may be used to chain additional functions.

Example

// Although this example uses MapView, any class instance that is a promise may use when() in the same way
let view = new MapView();
view.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
});

Type definitions

ListItemPanelContent

Type definition

The content displayed in the ListItem panel. This can be a String, a Widget instance, or an HTMLElement. If the string legend is used, then an instance of the Legend widget is placed in the content.

See also

content

Type: "legend" | Widget | HTMLElement | string

ListItemPanelContents

Type definition

Defines the content(s) that can be displayed in a ListItem panel. This can be a single content item or an array of content items, allowing for flexible panel layouts.

See also

content

Type: ListItemPanelContent | ListItemPanelContent[]