ListItemPanel

AMD: require(["esri/widgets/LayerList/ListItemPanel"], (ListItemPanel) => { /* code goes here */ });
ESM: import ListItemPanel from "@arcgis/core/widgets/LayerList/ListItemPanel.js";
Class: esri/widgets/LayerList/ListItemPanel
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 listItemCreatedFunction property in the LayerList widget.

A common scenario for using ListItemPanel is to display a Legend widget within each list item.

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

Property Overview

Name Type Summary Class
String

Adds a CSS class used to style a node that represents the panel.

more details
ListItemPanel
Widget|HTMLElement|String|Array

The content displayed in the ListItem panel.

more details
ListItemPanel
Boolean

If true, disables the ListItem's panel so the user cannot open or interact with it.

more details
ListItemPanel
String

The URL or data URI of an image used to represent the panel.

more details
ListItemPanel
ListItem

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

more details
ListItemPanel
Boolean

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

more details
ListItemPanel
String

The title of the panel.

more details
ListItemPanel
Boolean

Indicates if the node containing the image or icon font is visible to the user.

more details
ListItemPanel

Property Details

className String

Adds a CSS class used to style a node that represents the panel. Clicking the node will open and close the panel. Typically, an icon font is used for this property. Esri Icon Fonts are automatically made available and can be used to represent this content. To use one of these provided icon fonts, you must prefix the class name with esri-. For example, the default icon font is esri-icon-layer-list.

Default Value:esri-icon-layer-list

The content displayed in the ListItem panel. This can be raw text, a Widget instance, an HTML Element, or an array of any of those elements.

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

Example
const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    item.panel = {
      content: "legend"
    };
  }
});
disabled 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: function(event){
    const item = event.item;
    if (!item.layer.visible){
      item.panel.disabled = true;
    }
  }
});
image String

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 className are specified, a default icon default icon will display.

listItem ListItem

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

open Boolean

Indicates if the panel's content is open and visible to the user. This is different from the visible property, which is used for toggling the visibility of the icon used to control whether the content is expanded or collapsed.

Default Value:false
Example
const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    // The legend is open by default, but the user
    // is prevented from collapsing that content
    item.panel = {
      content: "legend",
      open: true,
      visible: false
    };
  }
});
title String

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

visible Boolean

Indicates if the node containing the image or icon font is visible to the user. Setting this value to false will prevent the user from toggling the visibility of the panel's content. Use open to programmatically set the visibility of the panel's content.

Default Value:true
Example
const layerList = new LayerList({
  view: view,
  listItemCreatedFunction: function(event){
    const item = event.item;
    // displays the legend for each layer list item
    // The legend is open by default, but the user
    // is prevented from collapsing that content
    item.panel = {
      content: "legend",
      open: true,
      visible: false
    };
  }
});

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