topic Re: Open more than one widget at a time WAB 2.2 Foldable Theme Custom in Web AppBuilder Custom Widgets Questions

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

GilbertoMatos — Wed, 05 Apr 2017 19:24:33 GMT

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.

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

RobertScheitlin__GISP — Wed, 05 Apr 2017 19:35:16 GMT

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

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

GilbertoMatos — Wed, 05 Apr 2017 19:54:26 GMT

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.

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

RobertScheitlin__GISP — Wed, 05 Apr 2017 19:58:18 GMT

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?

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

GilbertoMatos — Wed, 05 Apr 2017 20:08:39 GMT

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.

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

GilbertoMatos — Thu, 06 Apr 2017 17:23:28 GMT

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.

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:12:41 GMT

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

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

GilbertoMatos — Thu, 06 Apr 2017 17:56:49 GMT

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

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

RobertScheitlin__GISP — Thu, 06 Apr 2017 18:20:46 GMT

Gilberto,

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

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

GilbertoMatos — Thu, 06 Apr 2017 18:26:53 GMT

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

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

RobertScheitlin__GISP — Thu, 06 Apr 2017 18:29:16 GMT

No problem

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

GilbertoMatos — Mon, 10 Apr 2017 18:15:14 GMT

Hello Robert, how are you?

I was able to implement the possibility of the user moving the widgets and organizing them as needed. I believe it's not the right way, because I need to make these changes for each widget in my application, but in parts I managed to solve it.

I just had two problems, which I'm trying to get around: one of them is that after my implementation, the widget's scalability functionality was lost and the second problem is that after the user clicks on the widget's minimize button, it does not minimize And stays in the same place. When you click the minimize, it moves to the top left of the screen. Anyway, below are my changes if anyone needs to.

1) In my file "application folder \ themes \ My Theme Name \ common.css", I included the class below with the name of each widget that I needed to allow the move:

#Widget_name_panel
{
      Right: auto!
      Max-height: 400px! Important;
}

2) After that, I had to open the widget.js file from my widget, and at the end of the startup () function, I added the following line:

Var dnd = new Moveable (dom.byId (this.id + "_panel"));

I also need to add the following references:

Define
(
      [
         ...
         'Dojo / dnd / moveable'
         'Dojo / sun',
         'Dojo / on'
     ],
     Function (..., Moveable, dom, on)

I hope this is useful for someone.

Thank you!

Gilberto.

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

GilbertoMatos — Mon, 10 Apr 2017 19:44:30 GMT

Hello!

Robert, I was able to make the widgets retain the position to which they were dragged, after the user clicked the minimize / maximize button.

In the file "application folder \ themes \ My Theme \ panels \ FoldablePanel \ panel.js", change the function that follows below:

resize: function()
{
this._switchMaxBtn();
this._switchParentNode();

         var pos = this.getPanelPosition();

         //Implementation to set the widget to the correct location after the widget is dragged
         //----------------------------------------------------------------------------------
         pos.height = '400';
         pos.left = "'" + dojo.position(this.domNode).x + "'";
         pos.top = "'" + dojo.position(this.domNode).y + "'";
         //----------------------------------------------------------------------------------

...
}

Thank You!

Gilberto