Customizing LayerList Widget Colors

1171
9
Jump to solution
04-23-2019 08:58 AM
ChristinaChelf1
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
MVP Honored Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ken,

  It should work for nested groups too.

0 Kudos
ChristinaChelf1
New Contributor II

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:

0 Kudos
SadeghSadeghi-Tabas
New Contributor II

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,

0 Kudos
ChristinaChelf1
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor III

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

0 Kudos