Group layers in the layerlist widget

[GilbertoMatos]

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.

[RobertScheitlin__GISP]

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 

[GilbertoMatos]

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!

[GilbertoMatos]

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.

[PatrickThorsell]

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

[Anonymous User]

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? 

[GilbertoMatos]

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.

[MarkCooper5]

Hi

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

[Rohit_Venkat_GandhiMendadhala3]

Hi Gilberto,

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

[JohnMcEwen__GISP]

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