You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to add a LayerList widget with custom actions to your application. The actions are created via a function passed to the listItemCreatedFunction property. This function takes an event object that references the ListItem.

var layerList = new LayerList({
  view: view,
  // executes for each ListItem in the LayerList
  listItemCreatedFunction: defineActions

function defineActions(event) {
  // The event object contains an item property.
  // is is a ListItem referencing the associated layer
  // and other properties. You can control the visibility of the
  // item, its title, and actions using this object.

  var item = event.item;

  if (item.title === "US Demographics") {
    // An array of objects defining actions to place in the LayerList.
    // By making this array two-dimensional, you can separate similar
    // actions into separate groups with a breaking line.

    item.actionsSections = [
          title: "Go to full extent",
          className: "esri-icon-zoom-out-fixed",
          id: "full-extent"
          title: "Layer information",
          className: "esri-icon-description",
          id: "information"
          title: "Increase opacity",
          className: "esri-icon-up",
          id: "increase-opacity"
          title: "Decrease opacity",
          className: "esri-icon-down",
          id: "decrease-opacity"

Use the trigger-action event to define the behavior of each action returned by the function.

layerList.on("trigger-action", function(event) {
  // The layer visible in the view at the time of the trigger.
  var visibleLayer = USALayer.visible ? USALayer : censusLayer;

  // Capture the action id.
  var id =;

  if (id === "full-extent") {
    // If the full-extent action is triggered then navigate
    // to the full extent of the visible layer.
  } else if (id === "information") {
    // If the information action is triggered, then
    // open the item details page of the service layer.;
  } else if (id === "increase-opacity") {
    // If the increase-opacity action is triggered, then
    // increase the opacity of the GroupLayer by 0.25.

    if (demographicGroupLayer.opacity < 1) {
      demographicGroupLayer.opacity += 0.25;
  } else if (id === "decrease-opacity") {
    // If the decrease-opacity action is triggered, then
    // decrease the opacity of the GroupLayer by 0.25.

    if (demographicGroupLayer.opacity > 0) {
      demographicGroupLayer.opacity -= 0.25;

Sample search results