Is it possible to collapse multiple Layer Lists by default?

812
4
Jump to solution
07-25-2019 01:05 PM
MichaelRock1
New Contributor III

I have created an aggregate Layer List widget by dragging multiple Layer Lists into one.  This creates a Layer List panel in which each list is expanded by default and given the same amount of space.  I would like to collapse all but one of the lists by default so the user is presented with a simple interface.  Is this possible?

Here is how it opens:

And this is what I want:

Thanks for any suggestions!

Mike

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Mike, sure here is how to do that in WAB 2.12.

In the themes\[chosen theme]\panels\FoldablePanel\Panel.js (line 8 added):

      createFrame: function(widgetConfig) {
var frame;
if (this.config.widgets && this.config.widgets.length === 1 || !this.config.widgets) {
frame = new BaseWidgetFrame();
} else {
frame = new FoldableWidgetFrame({
label: widgetConfig.label,
openfolded: widgetConfig.folded,
widgetManager: this.widgetManager
});

In the themes\[chosen theme]\panels\FoldablePanel\FoldableDijit.js (added line 23-27):

      createFoldableBtn: function() {
this.foldableNode = html.create('div', {
'class': 'foldable-btn',
'role': 'button',
'aria-label': this.headerNls.foldWindow,
'tabindex': 0
}, this.btnsContainer);

this.own(on(this.foldableNode, 'click', lang.hitch(this, function(evt){
evt.stopPropagation();
this.onFoldableNodeClick();
})));

this.own(on(this.foldableNode, 'keydown', lang.hitch(this, function(evt) {
if(evt.keyCode === keys.ENTER || evt.keyCode === keys.SPACE){
evt.stopPropagation();
this.onFoldableNodeClick();
}else if(evt.keyCode === keys.TAB && evt.shiftKey){
evt.preventDefault();
}
})));

if(this.openfolded){
setTimeout(lang.hitch(this, function(){
this.onFoldableNodeClick();
}), 500);
}
},

In the apps main config.json (added line 11 & 19):

"groups": [
{
"label": "New group",
"widgets": [
{
"uri": "widgets/LayerList/Widget",
"version": "2.5",
"id": "widgets_LayerList_Widget_18",
"name": "LayerList",
"index": 1,
"folded": false
},
{
"uri": "widgets/Legend/Widget",
"version": "2.5",
"id": "widgets_Legend_Widget_17",
"name": "Legend",
"index": 0,
"folded": true
}
],‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Mike, sure here is how to do that in WAB 2.12.

In the themes\[chosen theme]\panels\FoldablePanel\Panel.js (line 8 added):

      createFrame: function(widgetConfig) {
var frame;
if (this.config.widgets && this.config.widgets.length === 1 || !this.config.widgets) {
frame = new BaseWidgetFrame();
} else {
frame = new FoldableWidgetFrame({
label: widgetConfig.label,
openfolded: widgetConfig.folded,
widgetManager: this.widgetManager
});

In the themes\[chosen theme]\panels\FoldablePanel\FoldableDijit.js (added line 23-27):

      createFoldableBtn: function() {
this.foldableNode = html.create('div', {
'class': 'foldable-btn',
'role': 'button',
'aria-label': this.headerNls.foldWindow,
'tabindex': 0
}, this.btnsContainer);

this.own(on(this.foldableNode, 'click', lang.hitch(this, function(evt){
evt.stopPropagation();
this.onFoldableNodeClick();
})));

this.own(on(this.foldableNode, 'keydown', lang.hitch(this, function(evt) {
if(evt.keyCode === keys.ENTER || evt.keyCode === keys.SPACE){
evt.stopPropagation();
this.onFoldableNodeClick();
}else if(evt.keyCode === keys.TAB && evt.shiftKey){
evt.preventDefault();
}
})));

if(this.openfolded){
setTimeout(lang.hitch(this, function(){
this.onFoldableNodeClick();
}), 500);
}
},

In the apps main config.json (added line 11 & 19):

"groups": [
{
"label": "New group",
"widgets": [
{
"uri": "widgets/LayerList/Widget",
"version": "2.5",
"id": "widgets_LayerList_Widget_18",
"name": "LayerList",
"index": 1,
"folded": false
},
{
"uri": "widgets/Legend/Widget",
"version": "2.5",
"id": "widgets_Legend_Widget_17",
"name": "Legend",
"index": 0,
"folded": true
}
],‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

MichaelRock1
New Contributor III

Thanks Robert, that is awesome! But of course I did not explain my full environment.  I am not using Portal, but ArcGIS Online. So my only avenue to editing JSON is the AGOL Assistant site.  I did try and add the "folded": true to the configuration, but it did not have an effect.

Does that make sense? I created the app in ArcGIS Online by using the Create-> App-> Using the Web AppBuilder option.

Thanks for your help!

Mike

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Michael,


  Sorry to say it will not be possible for you then. You have to be using WAB dev or portal at a minimum to accomplish this.

MichaelRock1
New Contributor III

OK, thanks.  That's what I feared.

Mike

0 Kudos