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 only tested with two widgets. You may have to do more coding for three widgets

[FrancescoTonini2]

Would I have to put my hands on the same file Panel.js to accomplish that with 2+ widgets?

[RobertScheitlin__GISP]

That is where I would start

[FrancescoTonini2]

I also tested this with two widgets only, like you said but I get a similar behavior:

1- bottom one is opened by default

2- click on the first one and the bottom one is still not collapsed

[RobertScheitlin__GISP]

That's not what I got during testing

[RobertScheitlin__GISP]

Francesco,

   OK now I see that I had all the panel set to folded and that why my testing was working. If you want one opened by default and to have to code only allow one to be opened at a time you need these changes:

          aspect.after(frame, 'onFoldStateChanged', lang.hitch(this, function() {
            var openedPaneCount = 0;
            var _frame = frame;
            this._setFrameSize();
            array.forEach(this.getChildren(), function(frame) {
              if (!frame.folded) {
                openedPaneCount++;
              }
              if(frame !== _frame){
                frame.folded = true;
                html.addClass(frame.foldableNode, 'folded');
                openedPaneCount = 1;
              }
            }, this);
            this._setFrameSize();‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[FrancescoTonini2]

Thanks Rob! This is really helpful!

[FrancescoTonini2]

Rob,

What file should I look at to customize and edit the style (e.g. font, background color, etc) of the subwidget tabs inside the group widget? Would it be inside themes/FoldableTheme/panels/FoldablePanel/style.css? 

[RobertScheitlin__GISP]

yes

[FrancescoTonini2]

Great, I am able to control colors for labels, icons, etc. in that .../style.css file. There seems to be nothing to control the default switch of colors between white and light gray as you scroll down the widgets (see below)....do you by any chance know what element that would be called?