Layer List: Expand Layers by Default

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

All comments

Enhancement Request: allow customizing which layers are expanded by default from the WAB graphical user interface in the Layer List widget configuration, on a per layer basis. Along with other interface enhancements (i.e. Allow sublayer to turn on parent(s), when turned on? true/false; partial checkboxes, and others) Also a 'turn on this layer only' button like Flights on Google Flights, Skip Lagged, Kayak.com etc where you can select one airline, exclusively, by clicking the word 'Only' next to an airline, and the others turn off.

Hmoore

Yes. Works in 2.15 as well.

KateřinaUhlířová

Hi,

is it same in 2.14?

Thanks

Katka

Sebastian,

I am not running 2.0 anymore so I can't help with a version that is 6 versions behind.

SebastianDrexel1

Hi everyone,

is there also some way to automatically expand the second level of the tree (the symbols) but not the first one?

When starting my app and the layer list widget I would like to have all map services collapsed (as it is on default). When expanding a map service the symbology should automatically be displayed without having to expand the layer. For your explanation I've added a screenshot how it should look like in the end when "Mobilität" is expanded.

I'm using Web AppBuilder Developer Edition version 2.0.1.

Thanks for your suggestions in advance!

Hi Robert, indeed you are correct! I migrated my widgets but not the WAB base. I recalled your mod was to LayerInfoForDefaultService and LayerInfoForDefault in jimu.js. Thanks! It still works perfect.

This is AWESOME! Exactly what was needed.

Is there a way to have it only expand the first level? In other words, expand the primary Map Service, and then just show the nested groups, but not those groups contents? I've attached a photo to explain.

I.e. just expand to show 'Public Art' 'Fire Stations' etc and 'Neighborhood ...' but not show the nested layers beneath 'Neighborhood ...' (i.e. Code Enforcement Service Areas, Neighborhood Action Plan, etc.)

Does that make sense?

Kevin,

That is not the same topic that is being covered by this thread. You may want to start a new thread.

No it works

Test Site - All Popups Enabled with Mod - WAB 25

Did WAB 2.5 break this?

I can't get it to work. Anyone else? I tested it here with a completely fresh WAB 2.5. All I did was add in this code block to enable all popups.They do not work. This was very useful. Esri should add as a config option behavior Kelly Gerrow

I cannot get it to work, and no error in console?

var handle = on(popupMenuNode,
'click',
lang.hitch(this, function() {
var popupMenu = new PopupMenu({
//items: layerInfo.popupMenuInfo.menuItems,
_layerInfo: layerInfo,
box: this.layerListWidget.domNode.parentNode,
popupMenuNode: popupMenuNode,
layerListWidget: this.layerListWidget,
_config: this.config
}).placeAt(popupMenuNode);
this.own(on(popupMenu,
'onMenuClick',
lang.hitch(this, this._onPopupMenuItemClick, layerInfo, popupMenu)));

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

Yes it does. Same place as before.

Will this work in WAB 2.5? Where does it need to be inserted in the layerlistview.js?

George,

You are replying to the correct thread but I am not sure why you made the generic statement

I cannot see where to add the code mentioned above.

Can you be more specific? What version of WAB are you using?

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

sorry i thought i was replying to the main thread, what I want is the mapservices which are grouped to expand once the map is opened without clicking each drop down arrow.

In the thread there was a code block to add to the layerlistview.js

George,

What do you mean

I cannot see where to add the code mentioned above.

What version of WAB are you using?

i am trying to get my mapservices to expand automatically when my WAB map is opened, i thought the enhanced layer list widget did this but cant seem to find it now. in my layerListView.js I cannot see where to add the code mentioned above. layer list not expanded

alextang

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":'\x3ctable class\x3d"layer-list-table"\x3e \x3ctbody class\x3d"layers-list-body" data-dojo-attach-point\x3d"layerListTable"\x3e\x3c/tbody\x3e \x3ctbody class\x3d"layers-list-body" data-dojo-attach-point\x3d"tableListTable"\x3e\x3c/tbody\x3e \x3c/table\x3e'}});
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)}})});

Alex,

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

alextang

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.

DanielChantlos1

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?

MichaelPotter1

Works like a charm, thanks for you help Robert.

It is greatly appreciated.

Regards

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

MichaelPotter1

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.

AdamAraza1

Yes it was. Thanks!

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"

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