topic Re: Group layers in the layerlist widget in Web AppBuilder Custom Widgets Questions

Group layers in the layerlist widget

GilbertoMatos — Tue, 14 Feb 2017 17:18:57 GMT

Hello!

I need to create layer grouping within the layerlist widget. I am using version 2.2 of the web appbuilder.

When we created the layers on the server as mapserver, the created groups were respected by the layerlist widget, however, because we needed specific resources, we had to switch to featurelayer and put them as dynamic layers, and with that, the layerlist widget no longer mattered the groups.

Is there any way to do this even manually?

Note: I thought of something like this. Return the layers exactly in the order in which I need to group, and within the assembly loop of the treeview, create a parent node and go adding the layers as children, until the last one or be necessary to create another parent node in the treeview. Can I do this? I just do not know how to proceed, what points to change, etc.

Thank you!
Gilberto.

Re: Group layers in the layerlist widget

RobertScheitlin__GISP — Tue, 14 Feb 2017 18:28:36 GMT

Gilberto,

This has been asked and requested many times but as of yet I have not seen an answer to this.

This is the closest thing:

https://community.esri.com/thread/162409

Re: Group layers in the layerlist widget

GilbertoMatos — Tue, 14 Feb 2017 18:35:22 GMT

Robert, I actually did a survey on the geonet, and among the results, I did not find anything really effective. This suggestion I had not found. I'll check it out and see if you can help me.

Thank you!

Re: Group layers in the layerlist widget

GilbertoMatos — Thu, 16 Feb 2017 18:40:22 GMT

Hello!

Robert, I was able to create the groups with the layers that I need, through the post that you gave me in your last answer. Attached, I'm adding my layerlist widget.

I came up with another question, and a new feature that I can not figure out where I should change.

The question is, should I really comment on line 273 of the widget.js file, which corresponds to "this.bindEvents ();" In the example, this line is commented on, but I can not quite understand what it does, and I must comment on it.

I created a map without layers in the portal, and then added the layers in my application, manually according to code.

The new functionality I need is that by clicking on the group checkbox, all the child layers in this group are checked, and if you uncheck the group checkbox, all daughters are marked. Also, I need to click and mark the checkbox on a child layer, the group checkbox is checked, and so on. This is a simple functionality to be done with pure javascript, I've done it in other applications, but I can not figure out how to do it in that application.

Thanks again.
Gilberto.

Re: Group layers in the layerlist widget

PatrickThorsell — Wed, 09 Aug 2017 21:33:53 GMT

Hi Gilberto,

Did you ever figure this out? So if you click a child checkbox on, the parent checkbox would automatically get checked as well? Thanks

Re: Group layers in the layerlist widget

JohnMcEwen__GISP — Sun, 27 Aug 2017 23:55:06 GMT

Hi Gilberto,

We use both the AGO builder and WAB for Dev., but what we started doing was just adding additional "instances" of the layer list widget with each instance containing a list of layers grouped by themes, like natural hazards, community facilities layers, local authorities layers, etc.

Just a work around obviously, but Esri still needs to add this capability, because non-GIS users get really frustrated at us hackers and developers when they can't turn groups of layers on an off at once.

- John

Re: Group layers in the layerlist widget

CAMBIOSPUOS — Thu, 29 Mar 2018 21:03:39 GMT

Hi! you have to group and create a cascade of layers in desktop, after that you can publish your layers as a service, finally you upload your service in your app.

Re: Group layers in the layerlist widget

Anonymous User — Mon, 04 Jun 2018 12:59:40 GMT

Indeed Patrick you understand. This is huge. Almost every new lay user asks this. I can't underscore enough how important this is. Even if we can do it in WAB DE it is still important for AGOL. Bueller? Bueller? Anyone?

Re: Group layers in the layerlist widget

GilbertoMatos — Mon, 04 Jun 2018 14:20:06 GMT

Hello Friend!

Yes, I did. Below I include the function code that you need to change within the file "application folder \ widgets \ LayerList \ LayerListView.js". The comments are in Brazilian Portuguese. I added other features in this function, such as display of minimal scale message. If you need any help, just write.

_onCkSelectNodeClick: function(layerInfo, ckSelect, evt)
{
   if (layerInfo.isRootLayer())
   {
       //SE FOR UM NÓ PAI (GURPO)
       if (ckSelect.checked)
       {
           //Marcou o checkbox
           layerInfo.setTopLayerVisible(true);
       }
       else
       {
           //Desmarcou o checkbox
           layerInfo.setTopLayerVisible(false);
       }
   }
   else
   {
       //SE FOR UM NÓ FILHO (CAMADA)
       if (ckSelect.checked)
       {
           //Marcou o nó filho
           if (layerInfo.layerObject)
           {
               if (layerInfo.layerObject.minScale || layerInfo.layerObject.maxScale)
               {
                   if (layerInfo.layerObject.minScale > 0 || layerInfo.layerObject.maxScale > 0)
                   {
                       Number.prototype.format = function(d_len, d_pt, t_pt)
                       {
                           var d_len = d_len || 0;
                           var d_pt = d_pt || ".";
                           var t_pt = t_pt || ",";

                           if ((typeof d_len != "number") || (typeof d_pt != "string") || (typeof t_pt != "string"))
                           {
                               throw new Error("wrong parameters for method 'String.pad()'.");
                           }

                           var integer = "", decimal = "";
                           var n = new String(this).split(/\./), i_len = n[0].length, i = 0;

                           if (d_len > 0)
                           {
                               n[1] = (typeof n[1] != "undefined") ? n[1].substr(0, d_len) : "";
                               decimal = d_pt.concat(n[1].pad(d_len, "0", String.PAD_RIGHT));
                           }

                           while (i_len > 0)
                           {
                               if ((++i % 3 == 1) && (i_len != n[0].length))
                               {
                                   integer = t_pt.concat(integer);
                               }
                               integer = n[0].substr(--i_len, 1).concat(integer);
                           }
                           return (integer + decimal);
                       }

                       var nEscalaMinima = layerInfo.layerObject.minScale;
                       var nEscalaMaxima = layerInfo.layerObject.maxScale;
                       var sMensagem = "A camada " + layerInfo.title + " está visível apenas entre as escalas ";

                       if (layerInfo.layerObject.minScale > 0)
                       {
                           sMensagem += "1/" + nEscalaMinima.format(0, ",", ".");
                       }

                       if (layerInfo.layerObject.minScale > 0 && layerInfo.layerObject.maxScale > 0)
                       {
                           sMensagem += " e "
                       }

                       if (layerInfo.layerObject.maxScale > 0)
                       {
                           sMensagem += "1/" + nEscalaMaxima.format(0, ",", ".");
                       }

                       //Exibe mensagem informando a escala mínima e máxima para visualização da camada, apenas se o
                       //mapa não estiver na escala de zoom correta
                       if (!layerInfo.isCurrentScaleInTheScaleRange())
                       {
                           new Message
                           (
                               {
                                   titleLabel:"Escala de Visibilidade da Camada",
                                   message: sMensagem,
                                   width: 500
                               }
                           );

                           //Se o mapa não estiver na escala necessária, e o clique do usuário, tenha sido em uma camada de um nó filho, após
                           //exibir a mensagem para o usuário, desmarca o checkbox que gerou o evento de clique.
                           //if (!layerInfo.isRootLayer())
                           //{
                           query("[class~='visible-checkbox-" + layerInfo.id + "']", this.domNode).forEach
                           (
                               function(visibleCheckBoxDomNode)
                               {
                                   var visibleCheckBox = registry.byNode(visibleCheckBoxDomNode);

                                   //if (layerInfo.isVisible())
                                   //{
                                       //layerInfo.parentLayerInfo.push({"visibility":"true"});
                                       //console.log(layerInfo.parentLayerInfo);

                                       //var cc = layerInfo._oldIsShowInMap;

                                       //console.log(cc);
                                       //visibleCheckBox.check();
                                   //}
                                   //else
                                   //{
                                       visibleCheckBox.uncheck();
                                       layerInfo.setTopLayerVisible(false);
                                   //}
                               },

                               this
                           );
                           //}
                       }
                       else
                       {
                           //Nó filho que possui escala e está dentro desta escala.
                           //Ao clicar em um nó filho, marca o nó pai
                           //if (!layerInfo.isRootLayer())
                           //{
                           query("[class~='visible-checkbox-" + layerInfo.parentLayerInfo.id + "']", this.domNode).forEach
                           (
                               function(visibleCheckBoxDomNode)
                               {
                                   var visibleCheckBox = registry.byNode(visibleCheckBoxDomNode);

                                   //if (!layerInfo.parentLayerInfo.isVisible())
                                   //{
                                       visibleCheckBox.check();
                                       layerInfo.parentLayerInfo.setTopLayerVisible(true);
                                       layerInfo.setTopLayerVisible(true);
                                   //}
                               },

                               this
                           );
                           //}
                       }
                   }
                   else
                   {
                       //Nó filho, que a escala é zero ou menor que zero
                       //if (!layerInfo.isRootLayer())
                       //{
                           query("[class~='visible-checkbox-" + layerInfo.parentLayerInfo.id + "']", this.domNode).forEach
                           (
                               function(visibleCheckBoxDomNode)
                               {
                                   var visibleCheckBox = registry.byNode(visibleCheckBoxDomNode);

                                   //if (!layerInfo.parentLayerInfo.isVisible())
                                   //{
                                       visibleCheckBox.check();
                                       layerInfo.parentLayerInfo.setTopLayerVisible(true);
                                       layerInfo.setTopLayerVisible(true);
                                   //}
                               },
                               this
                           );
                       //}
                   }
               }
               else
               {
                   //Nó filho, que não possui escala definida.
                   //if (!layerInfo.isRootLayer())
                   //{
                   query("[class~='visible-checkbox-" + layerInfo.parentLayerInfo.id + "']", this.domNode).forEach
                   (
                       function(visibleCheckBoxDomNode)
                       {
                           var visibleCheckBox = registry.byNode(visibleCheckBoxDomNode);

                           //if (!layerInfo.parentLayerInfo.isVisible())
                           //{
                               visibleCheckBox.check();
                               layerInfo.parentLayerInfo.setTopLayerVisible(true);
                               layerInfo.setTopLayerVisible(true);
                           //}
                       },

                       this
                   );
                   //}
               }
           }
       }
       else
       {
           //Desmarcou o nó filho
           layerInfo.setTopLayerVisible(false);
       }
   }

    //if (ckSelect.checked)
   //{
        //layerInfo.setTopLayerVisible(true);
   //}
   //else
   //{
       //layerInfo.setTopLayerVisible(false);
   //}
   evt.stopPropagation();
}

Hug,
Gilberto.

Re: Group layers in the layerlist widget

AndyWells — Mon, 30 Jul 2018 19:12:03 GMT

I want this to work, but it never does. In ArcMap (or even in ArcGIS Pro) I have a group layer, with my two layers in that group. I upload the service, and in ArcGIS Online Content, it shows up as one service. But when you add that service to a map, it loads the individual layers separately, and not in a group. How were you able to get it to work?

Re: Group layers in the layerlist widget

Anonymous User — Fri, 10 Aug 2018 21:40:35 GMT

Andy, it sounds like you are adding them at the sublayer level perhaps? If you add yourserver/Parcels/MapServer/0 if you have let's say a dozen layers in a Parcel service... and 0 is the first layer, the Parcels, then it adds as a featureLayer. If you add yourserver/Parcels/Mapserver it will add the group, as a dynamic layer. Are you following? You want to stop the link at /Mapserver so copy up to that point, and leave out the number at the end.

I think it would be useful to allow adding sublayers as a dynamic layer (now called map image layer) to AGOL. This is perhaps coming when they allow for grouping layers in webmaps and moving them. That would allow us to recombine several differeny sublayers from multiple map services in to a new 'group' for example.

Re: Group layers in the layerlist widget

MarkCooper5 — Fri, 21 Sep 2018 14:12:09 GMT

Is it easy to separate the bit of code that switches the parent layer on when the child is seleccted from the bit to do with the scales? Im nott conffident enough in coding to guess which bit I need! Also, where in thee file does this need to go?

Thanks

Re: Group layers in the layerlist widget

Rohit_Venkat_GandhiMendadhala3 — Fri, 08 Mar 2019 01:10:12 GMT

Hi Gilberto,

Is there a way to organize and group layers with the layerlist widget.

Re: Group layers in the layerlist widget

DavidForbuss1 — Thu, 13 Jun 2019 23:03:02 GMT

I'm getting this a request constantly from my end users. They need to be able to turn multiple layers on/off at once, and they'd like the layers organized into groups because just having one big list of them is too cluttered.

Re: Group layers in the layerlist widget

DougBrowning — Thu, 25 Jul 2019 15:54:22 GMT

John McEwen, GISP this is awesome! It is working great for us. Except we would really like to collapse all but one of them on load.

So it does this for our 4 layer widgets (and always all the same equal size)

But we want this (with the bottom 3 collapsed)

Do you know a way to do this?

Thanks

Re: Group layers in the layerlist widget

Anonymous User — Fri, 26 Jul 2019 14:22:02 GMT

Hi Doug Browning, one thing you could do is just use a click(); function to click on the collapse element, on the widgetOpen event. I use that to auto-expand some of the layers in my layer list, such as the wetlands. Take a look - www.sagis.org/map notice how the wetlands are expanded automatically, as is the main map layers service. That is a simple way sometimes to achieve this, if you can't find the method to trigger an event in WebApp Builder.

Re: Group layers in the layerlist widget

RobertScheitlin__GISP — Fri, 26 Jul 2019 14:28:15 GMT

Doug,

You can look at this thread for how to make code changes so you can configure which lists are open by default and collapsed by default.

https://community.esri.com/thread/237493-is-it-possible-to-collapse-multiple-layer-lists-by-default

Re: Group layers in the layerlist widget

Anonymous User — Fri, 26 Jul 2019 15:03:59 GMT

Ah indeed a more proper way to do it, with native methods. Thank you for your insight Robert as always.

Re: Group layers in the layerlist widget

DougBrowning — Fri, 26 Jul 2019 15:20:32 GMT

Yep that is my coworker. We are not using the full WAB just the web one and it seems like it will not work. Getting the full one is not easy around here.

Is there any other way? Seems weird there is no checkbox in config for this.

Re: Group layers in the layerlist widget

RobertScheitlin__GISP — Fri, 26 Jul 2019 16:57:37 GMT

Nope no other way.