topic Re: Layer List: Expand Layers by Default in ArcGIS Web AppBuilder Questions

Layer List: Expand Layers by Default

AdamAraza1 — Thu, 18 Jun 2015 23:26:47 GMT

I thought I had posted this on here already, but I can't seem to find it....

I'm using the tab theme and I have the layer list opening by default in the side panel. Is there a way to have it open with all the layers already expanded showing the symbology without having to click on each individual layer?

Re: Layer List: Expand Layers by Default

JunshanLiu — Fri, 19 Jun 2015 08:33:04 GMT

Expand all layers when opening the layer list widget will have performance issue, because open layer may cause a HTTP request.

Re: Layer List: Expand Layers by Default

PatKeegan — Wed, 24 Jun 2015 20:09:23 GMT

I acknowledge the performance issue, but I am also looking to have layer list expanded by default. In my usability testing people have not understood they must expand the tree to control layers. Most of our maps have just one closed node in layer list at startup.

Any advice on how to override the default behavior appreciated....even if there is a performance hit.

Re: Layer List: Expand Layers by Default

ChadTinsley — Wed, 24 Jun 2015 22:10:07 GMT

The layer list will open by default if each layer is added on it's own rather than adding the entire mapserver or featureserver service as a group layer. That's the work around I've always used for this problem.

For example rather than adding blabla/arcgis/rest/services/folder/servicename/MapServer to add all of my layers I add them one at a time

blabla/arcgis/rest/services/folder/servicename/MapServer/0

blabla/arcgis/rest/services/folder/servicename/MapServer/1

blabla/arcgis/rest/services/folder/servicename/MapServer/2

etc.

Re: Layer List: Expand Layers by Default

RobertScheitlin__GISP — Wed, 24 Jun 2015 23:21:09 GMT

All,

I should have a workaround for you tomorrow.

Re: Layer List: Expand Layers by Default

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:13:11 GMT

All,

If you don't mind the possible performance impact then the workaround is to open the LayerListView.js and find the layerTitleNode click event (@ line 205) and add these lines after it @ line 213

If you want to change this for all apps you produce in the future then change this file: client\stemapp\widgets\LayerList\LayerListView.js

If you want to change on specific app then change this file:server\apps\APP##\widgets\LayerList\LayerListView.js

      setTimeout(lang.hitch(this,
                           this._onRowTrClick,
                           layerInfo,
                           imageShowLegendNode,
                           layerTrNode,
                           tableNode), 300);

Re: Layer List: Expand Layers by Default

RobertScheitlin__GISP — Tue, 30 Jun 2015 14:08:07 GMT

Adam Araza

Did the code I provided answer your question? If it did then please help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"

Re: Layer List: Expand Layers by Default

AdamAraza1 — Tue, 30 Jun 2015 14:47:45 GMT

Yes it was. Thanks!

Re: Layer List: Expand Layers by Default

MichaelPotter1 — Thu, 01 Oct 2015 19:39:53 GMT

Is there any way to modify this solutions to only expand the Map Service, not the legend part?

I would like my users to see what layers are in the Map Services without them needing to expand the layer but I do not want the legend for each layer to be expanded.

I am aware of the possibility to add each individual layer from my Map Services but this is not preferred as I would still like to keep things grouped by each Map Service.

Re: Layer List: Expand Layers by Default

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:13:15 GMT

Michael,

Sure just use this block of code instead:

      if(layerInfo.newSubLayers.length > 0){
        setTimeout(lang.hitch(this,
                   this._onRowTrClick,
                   layerInfo,
                   imageShowLegendNode,
                   layerTrNode,
                   tableNode), 300);
      }

Re: Layer List: Expand Layers by Default

MichaelPotter1 — Fri, 02 Oct 2015 18:35:53 GMT

Works like a charm, thanks for you help Robert.

It is greatly appreciated.

Regards

Re: Layer List: Expand Layers by Default

DanielChantlos1 — Wed, 10 Aug 2016 20:56:27 GMT

Robert,

I'm trying this right now in LaunchPad theme. When I enter in the codeblock, everything on my Layer List widget disappears. I've attached a screenshot showing the code I'm using. Does this look correct?

Re: Layer List: Expand Layers by Default

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:13:17 GMT

Daniel,

If you are trying to do this in WAB 2.1 then the code is now this (line 5 changed):

if(layerInfo.newSubLayers.length > 0){
        setTimeout(lang.hitch(this,
                  this._onRowTrClick,
                  layerInfo,
                  imageShowLegendDiv,
                  layerTrNode,
                  tableNode), 300);
      }

Re: Layer List: Expand Layers by Default

DanielChantlos1 — Thu, 11 Aug 2016 14:55:51 GMT

Robert,

Just tried this codeblock, perhaps something else is missing? The layers no longer disappear from the widget, but the MS is still not expanding.

Re: Layer List: Expand Layers by Default

RobertScheitlin__GISP — Thu, 11 Aug 2016 15:19:04 GMT

Daniel,

I tested this in WAB 2.1 using the Launchpad theme before posting and it worked fine for me.

Re: Layer List: Expand Layers by Default

DanielChantlos1 — Thu, 11 Aug 2016 16:46:20 GMT

Interesting...this worked after I deleted/re-extracted the WebApp and pasted in the codeblock again.

Thanks as always Robert!

Re: Layer List: Expand Layers by Default

alextang — Wed, 28 Sep 2016 16:29:05 GMT

Hello Robert,

I'm trying to do the same thing as asked above but within an ArcGIS Portal app. I'm trying to find the file and spot to use your code to implement this change. In particular, I'm currently using the public information app in ArcGIS Portal. Thanks.

Re: Layer List: Expand Layers by Default

RobertScheitlin__GISP — Wed, 28 Sep 2016 16:50:42 GMT

Alex,

Sorry I do not have experience with that so I can lend no insight.

Re: Layer List: Expand Layers by Default

alextang — Wed, 28 Sep 2016 17:12:13 GMT

For the sakes of the web appbuilder, this is the layerlistview.js that I think that I should be editing. Sorry for the lack of code formatting as I'm just using notepad to edit it. Where should I insert your code block?

// All material copyright ESRI, All Rights Reserved, unless otherwise specified.
// See http://gis.esquimalt.ca/arcgis/jsapi/jsapi/esri/copyright.txt and http://www.arcgis.com/apps/webappbuilder/copyright.txt for details.
//>>built
require({cache:{"url:widgets/LayerList/LayerListView.html":'\r\n\r\n\x3ctable class\x3d"layer-list-table"\x3e\r\n \x3ctbody class\x3d"layers-list-body" data-dojo-attach-point\x3d"layerListTable"\x3e\x3c/tbody\x3e\r\n \x3ctbody class\x3d"layers-list-body" data-dojo-attach-point\x3d"tableListTable"\x3e\x3c/tbody\x3e \r\n\x3c/table\x3e\r\n'}});
define("dijit/_WidgetBase dojo/_base/declare dojo/_base/lang dojo/_base/array dojo/dom-construct dojo/on dojo/query jimu/dijit/CheckBox ./PopupMenu dijit/_TemplatedMixin dojo/text!./LayerListView.html dojo/dom-attr dojo/dom-class dojo/dom-style ./NlsStrings".split(" "),function(t,u,m,r,e,n,g,v,w,x,y,s,h,k,z){return u([t,x],{templateString:y,_currentSelectedLayerRowNode:null,postMixInProperties:function(){this.inherited(arguments);this.nls=z.value},postCreate:function(){r.forEach(this.operLayerInfos.getLayerInfoArray(),
function(a){this.drawListNode(a,0,this.layerListTable,!0)},this);r.forEach(this.operLayerInfos.getTableInfoArray(),function(a){this.drawListNode(a,0,this.tableListTable,!0)},this)},drawListNode:function(a,b,d){var c;0===a.newSubLayers.length?(c=this.addLayerNode(a,b,d),this.config.showLegend?this.addLegendNode(a,b,c.subNode):k.set(g(".showLegend-image",c.currentNode)[0],"display","none")):(c=this.addLayerNode(a,b,d),r.forEach(a.newSubLayers,m.hitch(this,function(a,b){this.drawListNode(b,a+1,c.subNode)},
b)))},addLayerNode:function(a,b,d){var c=e.create("tr",{"class":"jimu-widget-row layer-row ",layerTrNodeId:a.id},d),f,l,p,g,h,q;f=e.create("td",{"class":"col col1"},c);for(p=0;p<b;p++)e.create("div",{"class":"begin-blank-div jimu-float-leading",innerHTML:""},f);q=e.create("div",{"class":"showLegend-div jimu-float-leading"},f);g=e.create("img",{"class":"showLegend-image",src:isRTL?this.layerListWidget.folderUrl+"images/v_left.png":this.layerListWidget.folderUrl+"images/v_right.png",alt:"l"},q);l=e.create("div",
{"class":"div-select jimu-float-leading"},f);p=new v({checked:a.isVisible(),"class":"visible-checkbox-"+a.id});e.place(p.domNode,l);h=e.create("div",{"class":"noLegend-div jimu-float-leading"},f);e.create("img",{"class":"noLegend-image",src:this.layerListWidget.folderUrl+(a.isTable?"images/table.png":"images/noLegend.png"),alt:"l"},h);if(a.noLegend||a.isTable)k.set(q,"display","none"),k.set(l,"display","none"),k.set(h,"display","block");k.set(f,"width",12*b+35+"px");b=e.create("td",{"class":"col col2"},
c);e.create("div",{innerHTML:a.title,"class":"div-content jimu-float-leading"},b);f=e.create("td",{"class":"col col3"},c);f=e.create("div",{"class":"layers-list-popupMenu-div"},f);l=(new w({_layerInfo:a,box:this.layerListWidget.domNode.parentNode,popupMenuNode:f,layerListWidget:this.layerListWidget,_config:this.config})).placeAt(f);this.own(n(l,"onMenuClick",m.hitch(this,this._onPopupMenuItemClick,a,l)));d=e.create("tr",{"class":"",layerContentTrNodeId:a.id},d);d=e.create("td",{"class":"",colspan:"3"},
d);d=e.create("table",{"class":"layer-sub-node"},d);this.own(n(b,"click",m.hitch(this,this._onRowTrClick,a,g,c,d)));this.own(n(q,"click",m.hitch(this,this._onRowTrClick,a,g,c,d)));this.own(n(c,"mouseover",m.hitch(this,this._onLayerNodeMouseover,c,l)));this.own(n(c,"mouseout",m.hitch(this,this._onLayerNodeMouseout,c,l)));this.own(n(p.domNode,"click",m.hitch(this,this._onCkSelectNodeClick,a,p)));this.own(n(f,"click",m.hitch(this,this._onPopupMenuClick,a,l,c)));return{currentNode:c,subNode:d}},addLegendNode:function(a,
b,d){d=e.create("tr",{"class":"legend-node-tr"},d);d=e.create("td",{"class":"legend-node-td"},d);try{var c=a.createLegendsNode();k.set(c,"font-size",12*(b+1)+"px");e.place(c,d)}catch(f){console.error(f)}},_fold:function(a,b,d){"none"===k.get(d,"display")?(k.set(d,"display","table"),s.set(b,"src",this.layerListWidget.folderUrl+"images/v.png"),a=!1):(k.set(d,"display","none"),s.set(b,"src",isRTL?this.layerListWidget.folderUrl+"images/v_left.png":this.layerListWidget.folderUrl+"images/v_right.png"),
a=!0);return a},_onCkSelectNodeClick:function(a,b,d){b.checked?a.setTopLayerVisible(!0):a.setTopLayerVisible(!1);d.stopPropagation()},_onPopupMenuClick:function(a,b,d,c){this._changeSelectedLayerRow(d);b&&"opened"===b.state?b.closeDropMenu():(this._hideCurrentPopupMenu(),b&&(this.currentPopupMenu=b,b.openDropMenu()));c.stopPropagation()},_hideCurrentPopupMenu:function(){this.currentPopupMenu&&"opened"===this.currentPopupMenu.state&&this.currentPopupMenu.closeDropMenu()},_onLayerNodeMouseover:function(a,
b){h.add(a,"layer-row-mouseover");b&&h.add(b.btnNode,"jimu-icon-btn-selected")},_onLayerNodeMouseout:function(a,b){h.remove(a,"layer-row-mouseover");b&&h.remove(b.btnNode,"jimu-icon-btn-selected")},_onLayerListWidgetPaneClick:function(a){a&&a.closeDropMenu()},_onRowTrClick:function(a,b,d,c){this._changeSelectedLayerRow(d);b=this._fold(a,b,c);a.isLeaf()&&!b&&(c=g(".legends-div",c)[0],b=g(".legends-loading-img",c)[0],c&&b&&a.drawLegends(c,this.layerListWidget.appConfig.portalUrl))},_changeSelectedLayerRow:function(a){this._currentSelectedLayerRowNode&&
this._currentSelectedLayerRowNode===a||(this._currentSelectedLayerRowNode&&h.remove(this._currentSelectedLayerRowNode,"jimu-widget-row-selected"),h.add(a,"jimu-widget-row-selected"),this._currentSelectedLayerRowNode=a)},_onPopupMenuItemClick:function(a,b,d,c){c={itemKey:d.key,extraData:c,layerListWidget:this.layerListWidget,layerListView:this};"transparency"===d.key?"none"===k.get(b.transparencyDiv,"display")?b.showTransNode(a.getOpacity()):b.hideTransNode():(a=b.popupMenuInfo.onPopupMenuClick(c),
a.closeMenu&&b.closeDropMenu())},_exchangeLayerTrNode:function(a,b){var d=g("tr[layerTrNodeId\x3d'"+a+"']",this.layerListTable)[0],c=g("tr[layerTrNodeId\x3d'"+b+"']",this.layerListTable)[0],e=g("tr[layerContentTrNodeId\x3d'"+b+"']",this.layerListTable)[0];this.layerListTable.removeChild(c);this.layerListTable.insertBefore(c,d);this.layerListTable.removeChild(e);this.layerListTable.insertBefore(e,d)},moveUpLayer:function(a){var b=this.operLayerInfos.moveUpLayer(a);b&&this._exchangeLayerTrNode(b,a)},
moveDownLayer:function(a){var b=this.operLayerInfos.moveDownLayer(a);b&&this._exchangeLayerTrNode(a,b)}})});

Re: Layer List: Expand Layers by Default

RobertScheitlin__GISP — Wed, 28 Sep 2016 17:16:38 GMT

Alex,

That is minified code that uses the JS API LayerList widget and has nothing to do with WAB layer list widget.