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 = event.action.id;

  if (id === "full-extent") {
    // If the full-extent action is triggered then navigate
    // to the full extent of the visible layer.
    view.goTo(visibleLayer.fullExtent);
  } else if (id === "information") {
    // If the information action is triggered, then
    // open the item details page of the service layer.
    window.open(visibleLayer.url);
  } 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;
    }
  }
});