Open more than one widget at a time WAB 2.2 Foldable Theme Custom

[GilbertoMatos]

Hello!

Is there any way, for version 2.2 of the web appbuilder, to keep more than one widget open at the same time? I need at least the layers widget and the caption widget to open at the same time. Being the layer in the left and the legend in the right.

I created a theme based on the foldable theme, and my application will not be used on mobile devices. This is even a requirement of the client, but I can not figure out where to change.

What I did was check the file "application folder \ themes \ MyCustomTheme \ widgets \ HeaderController \ widget.js", specifically the lines where there are commands like "closepanel", "closewidget", etc, but it still fails.

Thanks for any help.
Gilberto.

[RobertScheitlin__GISP]

Gilberto,

  See if these threads help:

How to open two widgets at the same time in Jewelry Box theme? 

https://community.esri.com/thread/190470-onscreen-widgets-keep-it-open 

[GilbertoMatos]

Robert

I made a debug in the application, through google chrome, and realized that this function only runs when the application opens, but if I open the layer widget, and then open the caption, the layer ends up being closed, and This function of the "OnScreenWidgeticon.js" file is not executed.

Thank you!
Gilberto.

[RobertScheitlin__GISP]

Gilberto,

   So you need to explain more then. Where are these widgets in your app are they on screen widgets or part of the Header controller or what. I am not familiar with a caption widget is that something custom?

[GilbertoMatos]

Right Robert

I have modified the header by replacing the icons of the widgets, by menus in texts. This custom theme was based on the foldable theme.

The links to the widgets are in the file "themes \ FepamTheme \ widgets \ HeaderController \ widget.html".

I'll attach the application and if you can visualize and suggest something to me, I'll be grateful.

The legend widget is what shows a summary of the colors and shapes that each layer inserts into the map. It is updated whenever a layer is added or removed on the map. This widget legend (or caption) is just an example.

Thank you!
Gilberto.

[GilbertoMatos]

Robert,

I looked in my config.json file, and my widgets (layers, measure, buffer, print, basemap and over) are inside the "widgetPool" session. I've added them statically, inside my headercontroller, which in turn is in the "widgetOnScreen" session.

What do you suggest I do? Customize a new theme with my features, but instead of being based on the foldable theme, do based on the dart theme that makes it possible to open several widgets?

Thank you!
Gilberto.

[RobertScheitlin__GISP · Accepted solution]

Gilberto,

   If you are using the foldable theme as your base then you need to modify the themes Header Widget.js _onIconClick function:

      _onIconClick: function(node) {
        if (!node.config.widgets || node.config.widgets.length === 1 ||
          node.config.openType === 'openAll') {
          //widget or group with 'openAll' open type
          if (this.openedId && this.openedId === node.config.id) {
            this._switchNodeToClose(this.openedId);
            return;
          } else {
            // if (this.openedId) {
            //   this._switchNodeToClose(this.openedId).then(lang.hitch(this, function() {
            //     this._closeDropMenu();
            //     this._switchNodeToOpen(node.config.id);
            //   }));
            // } else {
              this._switchNodeToOpen(node.config.id);
            //}
          }
        } else {
          if(this.dropMenuNode){
            this._closeDropMenu();
          }else{
            this._openDropMenu(node);
          }
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[GilbertoMatos]

Robert,

It worked! Actually the widgets are open one over the other, on the right side. Is there any way to make them cascade, or to position each one of them fixedly on the screen, so as not to be one on top of the other?

Thanks again.

Gilberto

[RobertScheitlin__GISP]

Gilberto,

   Sure there is but I can't do all the work for you

[GilbertoMatos]

Robert,

Excuse me if I abused your kindness.
I was able to solve, including the code below, inside the css of each widget, changing only the positions.

Once again, I'm sorry.

# Widgets_LayerList_Widget_40_panel (id widget)
{
    Right: 0px! Important;
    Left: 5px! Important;
}