topic Re: Hide LegendLayerLabel and LegendServiceLabel in Legend Widget in Web AppBuilder Custom Widgets Questions

Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

SivaramKrishnan2 — Tue, 23 Oct 2018 15:04:58 GMT

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

Re: Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

RobertScheitlin__GISP — Tue, 23 Oct 2018 15:12:22 GMT

Siva,

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

Re: Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

SivaramKrishnan2 — Wed, 24 Oct 2018 06:55:51 GMT

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.

Re: Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

RobertScheitlin__GISP — Wed, 24 Oct 2018 12:45:57 GMT

Siva,

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

Re: Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

SivaramKrishnan2 — Thu, 25 Oct 2018 05:52:41 GMT

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

Re: Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:49:56 GMT

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

Re: Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

SivaramKrishnan2 — Fri, 26 Oct 2018 05:48:56 GMT

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

Re: Hide LegendLayerLabel and LegendServiceLabel in Legend Widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:49:59 GMT

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