WAB: How do I edit the group widget layout?

[FrancescoTonini2]

I am using WAB Dev Edition 2.5 and am interested in customizing the behavior of the layout for the group widget. As of right now, when grouped together, widgets of the same group are automatically arranged like this:

I would like to customize the layout and behavior of the group widget so that, for example, each sub-widget is collapsed automatically unless the user click on the + sign. Or I would like to have a browser similar to the GPServiceBrowser Dijit where the user clicks on each widgets and it shows the content.

Any suggestions on where I should look to use the WAB JS API and its Dijits to manipulate and customize the group widget behavior? I know the main JS API developer page, but I am not sure where to look for the group widget specifically and whether WAB jimu offers any of what I am looking for...

[RobertScheitlin__GISP]

I have not seen that before as I don't have a widget that is that long. You will have to use your developer tools to inspect elements and see that is going on there. It looks like the widget background is not tall enough.

[ScottMaginity1]

Hi Rob, would there be a way to disable minimizing the bottom widget on click? So that the user can't minimize the bottom widget that is open in the group without clicking on one of the pluses? I can hide them buttons with CSS but i was thinking it would be great to prevent that one from being clickable at all since even with the button gone they can still click on it to minimize with my solution.

[RobertScheitlin__GISP]

Scott,

  What WAB version are you using? In 2.9 it will no let all widgets be collapsed.

[ScottMaginity1]

I am actually using 2.9 haha - weird! I made the changes described in this thread and it is all working as described. I wonder if some of the code I introduced changed something? Thanks for getting back to me so quickly!  

[MapsGeek]

Hi robert, i have followed your instructions but it seems like something is wrong with the labels for the folded widgets that i can't figure out, when i resize the app to mobile view and get back to desktop it works fine as expected any help with this ? also how can i can that + sign button to the label click area ?

[RobertScheitlin__GISP]

Maps Geek,

  See this updated thread for newer versions of WAB:

https://community.esri.com/thread/237493-is-it-possible-to-collapse-multiple-layer-lists-by-default

[Anonymous User]

Hey Robert Scheitlin, GISP, I wanted to use the same thing for WAB 2.10 - Tab Theme. I can't seem to find where the equivalence of "FoldableDijit.js" in the directories as seen below. Am I missing something or looking at the wrong thing? Please advise. 

[RobertScheitlin__GISP]

Mohammed,

   The tab theme does not have an equivalent as there is no ability to collapse or expand a widget in a group.

[Anonymous User]

Thank you so much for the quick response Robert Scheitlin, GISP‌. SO the best option is to create it using the foldable. 

[RobertScheitlin__GISP]

 Or any of the other themes that uses the Header controller.