topic Re: Widgets in sub-menu operations in header controller in Web AppBuilder Custom Widgets Questions

Widgets in sub-menu operations in header controller

GilbertoMatos — Mon, 26 Dec 2016 18:32:37 GMT

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.

Re: Widgets in sub-menu operations in header controller

RobertScheitlin__GISP — Tue, 27 Dec 2016 13:48:45 GMT

Gilberto,

What is wrong with making a widget group then?

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

Re: Widgets in sub-menu operations in header controller

GilbertoMatos — Tue, 27 Dec 2016 17:18:57 GMT

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

Re: Widgets in sub-menu operations in header controller

RobertScheitlin__GISP — Tue, 27 Dec 2016 17:33:16 GMT

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.

Re: Widgets in sub-menu operations in header controller

GilbertoMatos — Tue, 27 Dec 2016 17:36:37 GMT

No problem Robert!

Thanks for the help anyway.

Thank you!
Gilberto.

Re: Widgets in sub-menu operations in header controller

GilbertoMatos — Thu, 29 Dec 2016 12:09:00 GMT

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.

Re: Widgets in sub-menu operations in header controller

RobertScheitlin__GISP — Thu, 29 Dec 2016 13:48:19 GMT

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.

Re: Widgets in sub-menu operations in header controller

GilbertoMatos — Thu, 29 Dec 2016 13:58:21 GMT

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.

Re: Widgets in sub-menu operations in header controller

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:10:02 GMT

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

Re: Widgets in sub-menu operations in header controller

RobertScheitlin__GISP — Thu, 29 Dec 2016 15:15:53 GMT

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.

Re: Widgets in sub-menu operations in header controller

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:10:04 GMT

Gilberto,

This seems to work:

_resize: function()
{
    var box = html.getContentBox(this.domNode);

    //by default, we show all elements
    this._showSwitchableElements(['title', 'links', 'subtitle']);

    // this.timeoutHandle = setTimeout(lang.hitch(this, function(){
    //   this._createIconNodes(box);
    // }), 50);

    if(!this.IconNodeCreated){
        this._createIconNodes(box);
        this.IconNodeCreated = true
    }
.....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Widgets in sub-menu operations in header controller

GilbertoMatos — Thu, 29 Dec 2016 16:19:23 GMT

Robert,

Thank you very much. It really was a simple mistake, as you mentioned. I'm marking the correct answer.

Thank you!
Happy New Year!

Gilberto.