Select to view content in your preferred language

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

2253
12
Jump to solution
04-05-2017 12:24 PM
Labels (1)
GilbertoMatos
Occasional Contributor II

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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);
          }
        }
      },

View solution in original post

12 Replies
GilbertoMatos
Occasional Contributor II

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?

0 Kudos
GilbertoMatos
Occasional Contributor II

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.

0 Kudos
GilbertoMatos
Occasional Contributor II

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Gilberto,

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

GilbertoMatos
Occasional Contributor II

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;
}

0 Kudos