topic Re: Customizing LayerList Widget Colors in Web AppBuilder Custom Widgets Questions

Customizing LayerList Widget Colors

ChristinaChelf1 — Tue, 23 Apr 2019 15:58:56 GMT

Hi all,

My team has been asked about distinguishing "layer groups" (map services) with a different color in the LayerList Widget. I found where in the CSS you can set the color of the LayerList layers but not how to distinguish the sub layers of the map service. I am aiming for something like the screenshot below (obviously not that obnoxious green color). Has anyone done this before or have an idea on how to accomplish this? I am working in Web App Builder 2.11 developer addition.

Thanks!

Christina

wab for dev webappbuilder2.11 layerlistwidget‌ layer item css

Re: Customizing LayerList Widget Colors

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:55:15 GMT

Christina,

In the LayerList widget.js find this function and make this change:

      showLayers: function() {
        // summary:
        //    create a LayerListView module used to draw layers list in browser.
        this.layerListView = new LayerListView({
          operLayerInfos: this.operLayerInfos,
          layerListWidget: this,
          layerFilter: this.layerFilter,
          config: this.config
        }).placeAt(this.layerListBody);

//RJS code changes begin
        setTimeout(lang.hitch(this, function(){
          var nodes = query('.layer-sub-node>.jimu-widget-row.layer-row');
          console.info(nodes);
          nodes.map(function(node){
            html.addClass(node, 'sub-layer');
          });
        }), 1000);
//RJS code changes end
        if(this.config.expandAllLayersByDefault) {
          this.layerListView.foldOrUnfoldAllLayers(false);
        }
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then in the LayerList/css/style.css Add this rule:

.jimu-widget-layerList .sub-layer{
  background-color: green;
}‍‍‍

Re: Customizing LayerList Widget Colors

KenBuja — Tue, 23 Apr 2019 17:36:12 GMT

Would this work when there are group layers nested within group layers or is it changing the colors all sublayers?

Re: Customizing LayerList Widget Colors

RobertScheitlin__GISP — Tue, 23 Apr 2019 18:05:20 GMT

Ken,

It should work for nested groups too.

Re: Customizing LayerList Widget Colors

ChristinaChelf1 — Tue, 23 Apr 2019 18:19:10 GMT

This worked perfectly Robert, Thank you very much!

I didnt want the nested group layers to show differently (so as it is now is my desired outcome), but Roberts code currently it doesn't change the nested group layers just the top level groups. So this is what i see:

Re: Customizing LayerList Widget Colors

ChristinaChelf1 — Tue, 23 Apr 2019 21:01:49 GMT

Just so it is documented in case we do want the nested subgroups identified with another color how would I do that?

Re: Customizing LayerList Widget Colors

RobertScheitlin__GISP — Wed, 24 Apr 2019 13:33:13 GMT

Christina,

Here is an image that shows how it is working on my end. As you see All sub layers are in green even nested...

Re: Customizing LayerList Widget Colors

SadeghSadeghi-Tabas — Fri, 26 Jul 2019 15:50:55 GMT

Hi,

I was wondering how can I add layers with "parent" => "parent" => "child" pattern in the layerlist widget, actually, I don't know how can I define the group layers. I know how we can group layers with "parent" => "child" pattern but I don't have any idea to define a group layers with "parent" => "parent" => "child" pattern. I'd appreciate it if you could help me since it seems you have nested subgroups inside subgroups.

Thanks in advance,

Re: Customizing LayerList Widget Colors

GeorgeKatsambas — Fri, 31 Jan 2020 14:48:27 GMT

Instead of a background can something like this be done? Different colors of layers?

Re: Customizing LayerList Widget Colors

RobertScheitlin__GISP — Fri, 31 Jan 2020 15:44:09 GMT

See reply here:

https://community.esri.com/thread/247419-layer-list-window-change-colors-of-individual-services-listed