topic Re: Remove invisible sublayers in layerlist widget in Web AppBuilder Custom Widgets Questions

Remove invisible sublayers in layerlist widget

HelenZhou — Thu, 21 Jun 2018 15:49:50 GMT

I have a map service which is configured to have some layers visible at certain scale. The layerlist widget in the Web Appbuilder show all the sublayers with invisible layers greyed out. How do I configure/customize the layerlist widget so that invisible sublayers are not listed (scale dependent). Thanks

Re: Remove invisible sublayers in layerlist widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:43:31 GMT

Helen,

That would involve changing a couple of files in the widget folder.

1. Widget.js:

      _onZoomEnd: function() {
        var layerInfoArray = [];
        this.operLayerInfos.traversal(lang.hitch(this, function(layerInfo) {
          layerInfoArray.push(layerInfo);
        }));

        var that = this;
        setTimeout(function() {
          var layerInfo = layerInfoArray.shift();
          query("[class~='layer-title-div-" + layerInfo.id + "']", this.domNode)
          .forEach(function(layerTitleDivIdDomNode) {
            try {
              if (layerInfo.isInScale()) {
                html.removeClass(layerTitleDivIdDomNode, 'grayed-title');
              } else {
                html.addClass(layerTitleDivIdDomNode, 'grayed-title');
              }
            } catch (err) {
              console.warn(err.message);
            }
          }, that);
//RJS Add
          query("[class~='layer-tr-node-" + layerInfo.id + "']", this.domNode).forEach(function(layerTitleDivIdDomNode) {
            try {
              if (layerInfo.isInScale()) {
                html.removeClass(layerTitleDivIdDomNode, 'not-in-scale');
              } else {
                html.addClass(layerTitleDivIdDomNode, 'not-in-scale');
              }
            } catch (err) {
              console.warn(err.message);
            }
          }, that);
//RJS END ADD
          if(layerInfoArray.length > 0) {
            setTimeout(arguments.callee, 30); // jshint ignore:line
          }
        }, 30);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LayerListView.js:

    addLayerNode: function(layerInfo, level, toTableNode, position) {

      var layerTrNode, layerTdNode, ckSelectDiv, ckSelect, imageNoLegendDiv, handle,
        imageNoLegendNode, popupMenuNode, i, imageShowLegendDiv, divLabel;

      var rootLayerInfo = layerInfo.getRootLayerInfo();
      // if(!this._layerNodeHandles[rootLayerInfo.id]) {
      //   this._layerNodeHandles[rootLayerInfo.id] = [];
      // }

      // init _layerDomNodeStorage for rootLayerInfo.
      if(layerInfo.isRootLayer() || layerInfo.isTable) {
        this._layerDomNodeStorage[layerInfo.getObjectId()] = {
          layerTrNode: null,
          layerContentTrNode: null,
          layerNodeEventHandles: [],
          layerNodeReferredDijits: []
        };
      }
//RJS ADD/change
      var sdClass = '';
      try {
        if (!layerInfo.isInScale()) {
          sdClass = 'not-in-scale';
        }
      } catch (err) {
        console.warn(err.message);
      }

      var layerTrNodeClass = "layer-tr-node-" + layerInfo.id;
      layerTrNode = domConstruct.create('tr', {
        'class': 'jimu-widget-row layer-row ' + sdClass +
          ( /*visible*/ false ? 'jimu-widget-row-selected ' : ' ') + layerTrNodeClass ,
        'layerTrNodeId': layerInfo.id
      });
      domConstruct.place(layerTrNode, toTableNode, position);
//RJS END
....
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

style.css add this rule to the end of the file:

.jimu-widget-layerList .not-in-scale {
  display: none;
}‍‍‍

Re: Remove invisible sublayers in layerlist widget

HelenZhou — Fri, 22 Jun 2018 19:46:19 GMT

Robert,

It works. Thanks so much.

Helen

Re: Remove invisible sublayers in layerlist widget

Anonymous User — Sun, 04 Jul 2021 17:48:43 GMT

Hi Robert:

This code is great and it did work although did not work whenever I expanded a layer to see the icon symbology and left it expanded prior to zooming in or zooming out. Can this be easily rectified? See photos below. One photo shows the icon symbology of an expanded layer that is no longer visible in the map. The other photo shows no icon symbology and no layer name for the same layer that is no longer visible in the map if the icon symbology was not expanded prior to zooming in or zooming out.

Re: Remove invisible sublayers in layerlist widget

Anonymous User — Sun, 04 Jul 2021 23:56:07 GMT

I tried adding the text "html.addClass(contentDomNode, 'not-in-scale'); " and "html.removeClass(contentDomNode, 'not-in-scale'); " to the widget.js as seen below although it did not work.

{ html.addClass(layerTitleDivIdDomNode, 'not-in-scale'); html.addClass(contentDomNode, 'not-in-scale');

I also tried adding .jimu-widget-layerList .not-in-scale .esriLegendLayer {display: none;} to the css and that also did not work. I was not sure how to change the LayerListView.js or if it was needed at all.

Re: Remove invisible sublayers in layerlist widget

Anonymous User — Tue, 06 Jul 2021 18:38:50 GMT

It looks like this same type of logic needs to be applied to the layercontentnodeid