Widgets in sub-menu operations in header controller

[GilbertoMatos]

Hello!

I have the following widgets in the header controller, exactly in this order: layers, buffer, print, measure, legend, base maps and about.

I need to modify the header controller widget so that the Buffer, Print and Measure widgets are in a sub-menu called Operations.

How should I proceed? I tried several ways, even put a div with the fixed menu, but there was no way, because I can not open the widgets if it does this way.

Thanks for any help.

Gilberto.

[RobertScheitlin__GISP]

Gilberto,

   What is wrong with making a widget group then?

Widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers | Group Widgets 

[GilbertoMatos]

Hello Robert!

The widget group does not work because the user wants to open 3 submenus (Buffer, Measure and Print), and when clicking on any of them, just open the chosen widget.

Group widgets create a single menu, and it opens all three widgets in one go.

Thank you!
Gilberto

[RobertScheitlin__GISP]

Gilberto,

  In that case you are looking at custom development then. I have never had a need for that type of functionality so I can not guide you there.

[GilbertoMatos]

No problem Robert!

Thanks for the help anyway.

Thank you!
Gilberto.

[GilbertoMatos]

Hello!

Robert, I'm customizing the header controller widget to mount the menu and submenus as needed. I have already been able to assemble the structure correctly with all the items. The problem I'm facing, is that after opening one of the widgets, I get the following error (in this case the layers widget):

Error: Tried to register widget with id == widgets_LayerList_Widget_40_panel but that id is still registered

From this, even if I click on any of the other widgets, nothing else happens.

Thanks for any help.

Gilberto.

[RobertScheitlin__GISP]

Gilberto,

  Sounds like you are trying to re-create a widget that has already been created, instead of just opening it. Hard to give advice without seeing what your menu Item code is executing.

[GilbertoMatos]

Robert, attached follows my custom header controller widget. I replaced the icons, by texts. I put it in a new div menu items.

If you can check and give me some help, thank you.

Hug,
Gilberto.

[RobertScheitlin__GISP]

Gilberto,

   Your mistake is simple you are creating your icons/menus inside a loop for your logos and thus adding the on click event three times to the icons/menus:

Line 47 is a for loop and 62 is inside that loop so it gets called 3 times instead of once.

                    _createIconNodes: function(box)
                    {
                         query('.icon-node', this.containerNode).remove();
                         this._closeDropMenu();

                         var i, iconConfig, allIconConfigs = this.getAllConfigs();
                         //by default, the icon is square
                         this.iconWidth = box.h;

                         var ret = this._calcContainerAndEmptyWidth(box);

                         var marginProperty = window.isRTL ? 'marginRight' : 'marginLeft';

                         var containerStyle = {
                              width: ret.containerWidth + 'px'
                         };

                         //add some margein to avoid mess layout
                         containerStyle[marginProperty] = (ret.emptyWidth - 5) + 'px';
                         html.setStyle(this.containerNode, containerStyle);

                         this.maxIconCount = Math.floor(ret.containerWidth / this.iconWidth);

                         if (this.maxIconCount >= allIconConfigs.length)
                         {
                              this.headerIconCount = allIconConfigs.length;
                              this.createMoreIcon = false;
                         }
                         else
                         {
                              this.headerIconCount = this.maxIconCount - 1;
                              this.createMoreIcon = true;
                         }

                         if (this.createMoreIcon)
                         {
                              this._createIconNode
                              (
                                   {
                                        label: this.nls.more,
                                        name: '__more'
                                   }
                              );
                         }

                         var openAtStartNode;
                         for (i = this.headerIconCount - 1; i >= 0; i--)
                         {
                              iconConfig = allIconConfigs[i];
                              var node;

                              //###############
                              //INICIO GILBERTO
                              //###############

                              //if (iconConfig.label == "Medir" || iconConfig.label == "Imprimir" || iconConfig.label == "Buffer")
                              //{
                                   //node = this._createIconNodeSubMenus(iconConfig);
                              //}
                              //else
                              //{
                                   node = this._createIconNode(iconConfig);
                              //}

                              //############
                              //FIM GILBERTO
                              //############

                              if (iconConfig.openAtStart)
                              {

                                   openAtStartNode = node;
                              }
                         }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Gilberto,

   I take that back it is more complicated then that. The issue is that the _resize function calls 

this._createIconNodes(box); each time the header is resized and the ORIGINAL method removed all the widget icons using:

query('.icon-node', this.containerNode).remove();

but because your code is dynamically creating the menu items you are not doing this and the on click event handler is getting added to the same menu node 3 times.