Options (3 dots) do not appear for the layers

Jump to solution
08-31-2021 06:05 AM
Occasional Contributor II

I wrote this code: 


    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>TEST ArcGIS JS </title>

      body {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;

      #viewDiv {
        position: absolute;
        right: 0;
        left: 40%;
        top: 0;
        bottom: 0;

      #sideDiv {
        position: absolute;
        width: 35%;

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

      require(["esri/config","esri/views/MapView", "esri/WebMap", "esri/widgets/LayerList"], 
      function(esriConfig, MapView, WebMap, LayerList) {
        esriConfig.apiKey = "APIKey"
        esriConfig.portalUrl = "portalURL" 
        var webmapids = ["12345"];
        var webmaps = webmapids.map(function(webmapid) {
          return new WebMap({
            portalItem: {
              // autocasts as new PortalItem()
              id: webmapid

        var view = new MapView({
          map: webmaps[0],
          container: "viewDiv"

        let layerlist = new LayerList({
          view: view,

    <div id="viewDiv" class="esri-widget"></div>
    <div id="sideDiv" class="esri-widget"></div>



I would like to display layers on a side bar but layer options do not appear. The eye sign is visible and working fine but options not. 




Do you have any idea what I am doing wrong?

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
MVP Honored Contributor
6 Replies
MVP Honored Contributor

You'll have to add the actions using the listItemCreatedFunction property. Take a look at this sample: https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist-actions/

Occasional Contributor II

Thank you! I was able to add actions. Now, I am trying to customize them. I would like to come something like this 


Is there a source showing all available action ids/classes. 

I checked here https://developers.arcgis.com/javascript/latest/api-reference/esri-support-actions-ActionToggle.html

and some other places but no luck 😞


0 Kudos
MVP Honored Contributor

I don't see any listing of them either. This would be an important addition to the documentation. @UndralBatsukh 

0 Kudos
Esri Regular Contributor

Hi there, 


Hope I understand the question right. The JS API does not offer pre-set actions out of the box. Developers are responsible for creating their own custom actions. The sample @KenBuja provided shows how to create custom actions.


0 Kudos
Occasional Contributor II

It would be nice to have pre-set actions for frequently used options such as displaying table, zoom to, renaming a layer etc. Maybe, I find it difficult because I am new to ArcGIS JS API. 

I found this list which helps me to call icons even though I need to create my own behavior. 


0 Kudos
MVP Honored Contributor

This is the most current list of icons you can use: https://developers.arcgis.com/javascript/latest/esri-icon-font/