Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

[SivaramKrishnan2]

Hi

I'm trying to remove the label from Layer and Service in Legend widget using the following code snippet in WAB 2.6 application.

but when i do any changes in the layer like adding new layer, i'm getting the label visible.

anyone help me to resolve this issue.

Regards

Siva

[RobertScheitlin__GISP]

Siva,

  Add these mas css rules in the widgets style.css instead of in the widget.js code.

[SivaramKrishnan2]

Hi Robert 

You are correct, but if i give this rule in style.css, it will always hide the labels for all layers.

here i want to hide for all layers except for one particular layer.

[RobertScheitlin__GISP]

Siva,

  Is it always going to be the first item in the legend?

[SivaramKrishnan2]

Robert,

Yes, that will be the first item in the legend.

I'm adding the layers dynamically. So if that particular layer comes we should show the label and not needed for remaining layers.

Note: all the layer names are known.

Thanks & Regards

Siva

[RobertScheitlin__GISP]

Siva,

   This css rule can be added to the widgets css/style.css for your situation then:

.jimu-widget-legend .esriLegendService:first-of-type {
  display: none !important;
}‍‍‍

[SivaramKrishnan2]

Hi Robert

When i include this code in the css/style.css of the legend widget, nothing is visible on the Legend widget.

It is showing an empty Widget without any symbols and classifications.

Regards

Siva

[RobertScheitlin__GISP]

Siva,

  OK I tested that css rule for removing the first whole map service. It seems like you are wanting to remove the first layer of a map service. Here is some code for that (like you started with):

//Add to your define array
'dojo/query'
...
query
...
    _createLegendForOperationalLayers: function() {
      var legendParams = {
        arrangement: this.config.legend.arrangement,
        autoUpdate: this.config.legend.autoUpdate,
        respectCurrentMapScale: this.config.legend.respectCurrentMapScale,
        //respectVisibility: false,
        map: this.map,
        layerInfos: this._getLayerInfosParam()
      };
      this.legend = new Legend(legendParams, html.create("div", {}, this.operationalLayersPart));
      this.legend.startup();
      setTimeout(lang.hitch(this, function(){
        query('.esriLegendLayer')[0].style.display="none";
        query('.esriLegendLayerLabel')[0].style.display="none";
      }), 300);
    },
...
    refreshLegend: function() {
      if(this.legend) {
        var layerInfos = this._getLayerInfosParam();
        this.legend.refresh(layerInfos);
        setTimeout(lang.hitch(this, function(){
          query('.esriLegendLayer')[0].style.display="none";
          query('.esriLegendLayerLabel')[0].style.display="none";
        }), 300);
      }
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍