topic Re: Show legend in Layer List widget by default in ArcGIS Web AppBuilder Questions

Show legend in Layer List widget by default

AndrewL — Tue, 31 Jan 2017 19:52:35 GMT

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

Re: Show legend in Layer List widget by default

RobertScheitlin__GISP — Tue, 31 Jan 2017 21:38:16 GMT

Andrew,

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

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

Re: Show legend in Layer List widget by default

AndrewL — Tue, 31 Jan 2017 21:55:34 GMT

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.

if(layerInfo.newSubLayers.length > 0){

Re: Show legend in Layer List widget by default

RobertScheitlin__GISP — Tue, 31 Jan 2017 22:06:21 GMT

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.

Re: Show legend in Layer List widget by default

AndrewL — Sat, 11 Dec 2021 13:16:43 GMT

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);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Show legend in Layer List widget by default

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:16:46 GMT

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

Re: Show legend in Layer List widget by default

AnaHiraldo-Gomez — Mon, 27 Feb 2017 13:52:47 GMT

Thanks everyone, but if I am just using out of the box, not customized nor in our server, Web App Builder this is not possible. We do it this way because we don't want to create more work when upgrading our servers. ESRI can upgrade and may run into compatibility issues.

Re: Show legend in Layer List widget by default

RobertScheitlin__GISP — Mon, 27 Feb 2017 14:40:46 GMT

Ana,

Then you are out of luck, unless esri adds this ability.

Re: Show legend in Layer List widget by default

TimHayes — Thu, 12 Oct 2017 04:51:29 GMT

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

Re: Show legend in Layer List widget by default

Anonymous User — Mon, 16 Oct 2017 21:50:26 GMT

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

Re: Show legend in Layer List widget by default

ikbelkachbouri — Thu, 15 Feb 2018 12:03:30 GMT

Hi ,

Please i search Legend widget with Classification method . .

Re: Show legend in Layer List widget by default

JacksonTrappett — Thu, 28 Feb 2019 18:58:50 GMT

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?)

Re: Show legend in Layer List widget by default

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:16:49 GMT

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();
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Show legend in Layer List widget by default

JacksonTrappett — Thu, 28 Feb 2019 23:25:17 GMT

That worked great, thank you!

Re: Show legend in Layer List widget by default

RexRobichaux — Thu, 23 Jan 2020 16:12:57 GMT

Hey Robert- thanks for all of your help on this! We are using WABD 2.5 and I implemented the codeblock above into the \LayerList\LayerListView.js file, but am seeing no change in behavior whether or not a layer is turned on or off (no layer symbology is presented) .

I'm wondering if you've had a chance to test this at WABD versions above 2.4, or if app theme (we are using the launchpad theme) might have anything to do with it? Thanks again!

-Rex