Show legend in Layer List widget by default

[AndrewL]

I would like the Layer List to display the legend by default (instead of clicking on the layer for the dropdown legend to appear).

I tried editing the following code in LayerListView.js where I added the "unfold" text, but all that does is update the triangle orientation like the screenshot below. Thank you.

imageShowLegendDiv = domConstruct.create('div', {
'class': 'showLegend-div jimu-float-leading unfold',
'imageShowLegendDivId': layerInfo.id
}, layerTdNode);

[RobertScheitlin__GISP]

Andrew,

  This thread answers that and it still works for 2.0 through 2.3:

https://community.esri.com/thread/178526 

[AndrewL]

Thanks Robert. If I included the if-line-of-code I got an error. There is no ending brace. However, I removed this line and it works now.

1. if(layerInfo.newSubLayers.length > 0){  

[RobertScheitlin__GISP]

Sorry I forgot that requester was looking to expand only the first level.

Don't forget to mark the question as answered by clicking on the correct answer link.

[AndrewL]

I forgot to mention I had to update imageShowLegendNode to imageShowLegendDiv.

Also, while this does work, I do get 2 console errors.

Uncaught TypeError: Cannot read property 'ctrlKey' of undefined
at Object._onRowTrClick (LayerListView.js?wab_dv=2.3:406)
at init.js:62

Sorry I am confused as to how to paste source code. This does not look good below. Also there is no preview option.

//bind event
this.own(on(layerTitleTdNode,
 'click',
 lang.hitch(this,
 this._onRowTrClick,
 layerInfo,
 imageShowLegendDiv,
 layerTrNode,
 tableNode))); 
setTimeout(lang.hitch(this,
 this._onRowTrClick,
 layerInfo,
 imageShowLegendDiv,
 layerTrNode,
 tableNode), 100);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

Andrew,

   OK, so there are some changes for 2.3 then. Here is the code that works for 2.3

      //bind event
      this.own(on(layerTitleTdNode,
        'click',
        lang.hitch(this,
          this._onRowTrClick,
          layerInfo,
          imageShowLegendDiv,
          layerTrNode,
          tableNode)));
      setTimeout(lang.hitch(this,
         this._onRowTrClick,
         layerInfo,
         imageShowLegendDiv,
         layerTrNode,
         tableNode,
         {}), 300);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Here is a link to a blog on how to format code in GeoNet:

/blogs/dan_patterson/2016/08/14/script-formatting 

[TimHayes]

The code for 2.3 works in 2.4 as well. I just tried it. Great work, Robert!

[Anonymous User]

Great work Robert indeed! Confirmed working perfectly also on WAB 2.5! 

[JacksonTrappett]

Robert, is there an interactive way to do this - ie. when a user checks a box for a certain layer or sublayer to turn it on, it'll expand to show the symbology, and then when they turn it off, it'll collapse? (as opposed to having the legend pre-load with them all expanded?)

[RobertScheitlin__GISP]

Jackson,

   This is what that would look like:

    _onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {
      if(evt.ctrlKey || evt.metaKey) {
        if(layerInfo.isRootLayer()) {
          this.turnAllRootLayers(ckSelect.checked);
        } else {
          this.turnAllSameLevelLayers(layerInfo, ckSelect.checked);
        }
      } else {
        this.layerListWidget._denyLayerInfosIsVisibleChangedResponseOneTime = true;
        layerInfo.setTopLayerVisible(ckSelect.checked);
      }
      if(ckSelect.checked){
        var imageShowLegendDiv = query("[imageShowLegendDivId = " + layerInfo.id + "]")[0];
        var layerTrNode = query("[layerTrNodeId = " + layerInfo.id + "]")[0];
        var tableNode = query("[subNodeId = " + layerInfo.id + "]")[0];
        if (domStyle.get(tableNode, 'display') === 'none') {
          this._onRowTrClick(layerInfo, imageShowLegendDiv, layerTrNode, tableNode, {});
        }
       }
      evt.stopPropagation();
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍