Customizing LayerList Widget Colors

[ChristinaChelf1]

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

[RobertScheitlin__GISP · Accepted solution]

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

[KenBuja]

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

[RobertScheitlin__GISP]

Ken,

  It should work for nested groups too.

[ChristinaChelf1]

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:

[SadeghSadeghi-Tabas]

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,

[ChristinaChelf1]

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

[RobertScheitlin__GISP]

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...

[GeorgeKatsambas]

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

[RobertScheitlin__GISP]

See reply here:

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