ListItemPanel

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

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

content Widget|HTMLElement|String|Array

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 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
    };
  }
});