Skip To ContentArcGIS for DevelopersSign In Dashboard

ListItemPanel

Class: esri/widgets/LayerList/ListItemPanel
Since: ArcGIS API 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

NameTypeSummaryClass
String

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

more details
more detailsListItemPanel
Widget|HTMLElement|String|Array

The content displayed in the ListItem panel.

more details
more detailsListItemPanel
String

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

more details
more detailsListItemPanel
ListItem

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

more details
more detailsListItemPanel
Boolean

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

more details
more detailsListItemPanel
String

The title of the panel.

more details
more detailsListItemPanel
Boolean

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

more details
more detailsListItemPanel

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

API Reference search results

NameTypeModule
Loading...