Is it possible to collapse multiple Layer Lists by default?

MichaelRock1

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

RobertScheitlin__GISP

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<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>widgetConfig<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">var</SPAN> frame<SPAN class="punctuation token">;</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>widgets <SPAN class="operator token">&&</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>widgets<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">===</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="operator token">||</SPAN> <SPAN class="operator token">!</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>widgets<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          frame <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">BaseWidgetFrame</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
          frame <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FoldableWidgetFrame</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
            label<SPAN class="punctuation token">:</SPAN> widgetConfig<SPAN class="punctuation token">.</SPAN>label<SPAN class="punctuation token">,</SPAN>
            openfolded<SPAN class="punctuation token">:</SPAN> widgetConfig<SPAN class="punctuation token">.</SPAN>folded<SPAN class="punctuation token">,</SPAN>
            widgetManager<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>widgetManager
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

      createFoldableBtn<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>foldableNode <SPAN class="operator token">=</SPAN> html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'div'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="string token">'class'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'foldable-btn'</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="string token">'role'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'button'</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="string token">'aria-label'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>headerNls<SPAN class="punctuation token">.</SPAN>foldWindow<SPAN class="punctuation token">,</SPAN>
          <SPAN class="string token">'tabindex'</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>btnsContainer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>foldableNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          evt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">onFoldableNodeClick</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>foldableNode<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'keydown'</SPAN><SPAN class="punctuation token">,</SPAN> lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>keyCode <SPAN class="operator token">===</SPAN> keys<SPAN class="punctuation token">.</SPAN>ENTER <SPAN class="operator token">||</SPAN> evt<SPAN class="punctuation token">.</SPAN>keyCode <SPAN class="operator token">===</SPAN> keys<SPAN class="punctuation token">.</SPAN>SPACE<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            evt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">onFoldableNodeClick</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>keyCode <SPAN class="operator token">===</SPAN> keys<SPAN class="punctuation token">.</SPAN>TAB <SPAN class="operator token">&&</SPAN> evt<SPAN class="punctuation token">.</SPAN>shiftKey<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            evt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">preventDefault</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>openfolded<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
          <SPAN class="token function">setTimeout</SPAN><SPAN class="punctuation token">(</SPAN>lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">onFoldableNodeClick</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">500</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

<SPAN class="string token">"groups"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
      <SPAN class="punctuation token">{</SPAN>
        <SPAN class="string token">"label"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"New group"</SPAN><SPAN class="punctuation token">,</SPAN>
        <SPAN class="string token">"widgets"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
          <SPAN class="punctuation token">{</SPAN>
            <SPAN class="string token">"uri"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets/LayerList/Widget"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"version"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"2.5"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets_LayerList_Widget_18"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"LayerList"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"index"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"folded"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="punctuation token">{</SPAN>
            <SPAN class="string token">"uri"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets/Legend/Widget"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"version"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"2.5"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"widgets_Legend_Widget_17"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Legend"</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"index"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN>
            <SPAN class="string token">"folded"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
          <SPAN class="punctuation token">}</SPAN>
        <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>