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.

[MarkEastwood]

Dawit Kidane  Thanks for sharing this widget! I have been looking for something like this for a while. I have a couple questions for you.

1. Is it possible to set the order of the grouped layers? 
2. Layers get reordered when using the TOC widget. For my purposes it would be best if the web maps layer order was honored. Is this possible?

Thanks again, any help would be appreciated.

[MarkEastwood]

I was able to update the widgets code to set the order of the grouped layers and to stop the layers from getting reordered.

[YuandaZhu]

Do you mind to share your widget? Thanks.

[LucaLorenzini]

I M E, could you share your widget? Or could you give me same info about code changes I have do?

Thanks a lot

[MichałBrodowicz]

Mark, how did you do it? Please share some more information.

[YuandaZhu]

Hi Dawit,

Is your widget working with 2.12? I tried to load the widget but failed. Do you have any updates of your widget?

Thanks.

[DawitKidane1]

Hi Yuanda,

Yes it was built using V. 2.12 JS API

Thanks,

[Mina]

Hi Dawit-

For your TOC widget, is it possible to expand the layers to make the legend visible by default?  Thanks!

[Anonymous User]

Mina R‌ You can do this, yes.  This relates to https://community.esri.com/ideas/16701-keep-webmap-service-item-id-static#comment-78691 

I do this in my property app www.sagis.org/map

The way I did it..

1. right-click on a layer in the webmap and click Inspect in the browser of your choice (Chrome, etc). This will open up the web Developer Tools. Look at the layer's HTML DOM (document object model) node ID.  This will be the webmap ID plus the webmap's layer ID.

(Note that this changes randomly, each time you re-add the layer. (It can be changed back in AGOL Assistant but I do not know whether that would have any other implications, and so I just update it in my code if I need to re-add the layer, which I do because if you add layers to a service they don't always get picked up by the webmap because the web map specification does not presently stay in sync with services)

2. Create a click handler to click on the Expand node in your Web AppBuilder App's Layer List widget's layerlistview.js file.

Examples from my site are:

SAGISOrg_7276 is the root service, which I named "Map Layers".  The rest i.e.SAGISOrg_7276_130 etc are sublayers of this service.

postCreate: function() {
      this.refresh();
        this._initOperations();


        // kevin m override to click layers in layerlist....///
        setTimeout(function () {  // timeout needed i presume for dom to build

            //expand these layers explicity...

            //root service for sagis2018alllayers
            document.querySelector('[imageshowlegenddivid="SAGISOrg_7276"]').click();

            //loma sublayers
            document.querySelector('[imageshowlegenddivid="SAGISOrg_7276_130"]').click();
            document.querySelector('[imageshowlegenddivid="SAGISOrg_7276_131"]').click();

            //census sublayers
            document.querySelector('[imageshowlegenddivid="SAGISOrg_7276_101"]').click();
            document.querySelector('[imageshowlegenddivid="SAGISOrg_7276_102"]').click();
            document.querySelector('[imageshowlegenddivid="SAGISOrg_7276_103"]').click();

            //nwi wetlands sublayer  //not a sublayer anymore
           // document.querySelector('[imageshowlegenddivid="SAGISOrg_7276_98"]').click();

            //dfirm panels and cobra
            document.querySelector('[imageshowlegenddivid="SAGISOrg_7276_159"]').click();
            document.querySelector('[imageshowlegenddivid="SAGISOrg_7276_158"]').click();

            //esri traffic
            document.querySelector('[imageshowlegenddivid="Traffic_5483_0"]').click();
            document.querySelector('[imageshowlegenddivid="Traffic_5483_4"]').click();
            document.querySelector('[imageshowlegenddivid="Traffic_5483_5"]').click();
            document.querySelector('[imageshowlegenddivid="Traffic_5483_7"]').click();

[DawitKidane1]

It should be possible to expand the legend by default. It is a matter of setting the property of the table row.