topic Re: Hide checkbox for group layer in layer list widget in ArcGIS Web AppBuilder Questions

Hide checkbox for group layer in layer list widget

MarkCooper5 — Fri, 05 Oct 2018 09:28:58 GMT

To ensure that users don't forget to turn group layers on as well as the sublayers we would like to hide the checkbox for group layers in the layerlist widget in WebAppBuilder. We already have the code to change the font of the group layer titles and thought we may be able to adapt this to hide the check box but, unfortunately, our coding skills don't stretch to that!

Does anyone know if it is possible to do this and, if so, how?

Many thanks in advance

Mark

Re: Hide checkbox for group layer in layer list widget

RobertScheitlin__GISP — Fri, 05 Oct 2018 13:00:43 GMT

Mark,

Share your code for changing the font for those grouped layers so I can see if I can build off that.

Re: Hide checkbox for group layer in layer list widget

MarkCooper5 — Sat, 11 Dec 2021 13:14:06 GMT

Hi Robert - It was actually you who kindly provided me with the solution - here is what you said...

Mark,

Here is what you will need to change.

1. In the LayerList widgets style.css. Add this new css rule.

.jimu-widget-layerList .div-content.layer-is-group{
  font-size: 12px;
  font-weight:bolder;
}

2. In the LayerListView.js: lines 95 - 98 are additions and line 101 is a change.

 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: []
        };
      }

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

      layerTdNode = domConstruct.create('td', {
        'class': 'col col1'
      }, layerTrNode);

      for (i = 0; i < level; i++) {
        domConstruct.create('div', {
          'class': 'begin-blank-div jimu-float-leading',
          'innerHTML': ''
        }, layerTdNode);
      }

      imageShowLegendDiv = domConstruct.create('div', {
        'class': 'showLegend-div jimu-float-leading',
        'imageShowLegendDivId': layerInfo.id
      }, layerTdNode);

      ckSelectDiv = domConstruct.create('div', {
        'class': 'div-select jimu-float-leading'
      }, layerTdNode);

      ckSelect = new CheckBox({
        checked: layerInfo.isVisible(), //layerInfo.visible
        'class': "visible-checkbox-" + layerInfo.id
      });

      domConstruct.place(ckSelect.domNode, ckSelectDiv);

      imageNoLegendDiv = domConstruct.create('div', {
        'class': 'noLegend-div jimu-float-leading'
      }, layerTdNode);

      var imageName;
      if (layerInfo.isTable) {
        imageName = 'images/table.png';
      } else {
        imageName = 'images/noLegend.png';
      }

      imageNoLegendNode = domConstruct.create('img', {
        'class': 'noLegend-image',
        'src': this.layerListWidget.folderUrl + imageName,
        'alt': 'l'
      }, imageNoLegendDiv);

      if (layerInfo.isTiled || layerInfo.isTable) {
        domStyle.set(imageShowLegendDiv, 'display', 'none');
        domStyle.set(ckSelectDiv, 'display', 'none');
        domStyle.set(imageNoLegendDiv, 'display', 'block');
      }

      // set tdNode width
      domStyle.set(layerTdNode, 'width', level * 12 + 40 + 'px');

      var layerTitleTdNode = domConstruct.create('td', {
        'class': 'col col2'
      }, layerTrNode);

      var grayedTitleClass = '';
      try {
        if (!layerInfo.isInScale()) {
          grayedTitleClass = 'grayed-title';
        }
      } catch (err) {
        console.warn(err.message);
      }
      var layerTitleDivIdClass = 'layer-title-div-' + layerInfo.id;
      var layerGroupClass = '';
      if(layerInfo.getSubLayers().length > 0){
        layerGroupClass = 'layer-is-group ';
      }
      divLabel = domConstruct.create('div', {
        'innerHTML': layerInfo.title,
        'class': layerGroupClass + layerTitleDivIdClass + ' div-content jimu-float-leading ' + grayedTitleClass
      }, layerTitleTdNode);
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks

Re: Hide checkbox for group layer in layer list widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:14:09 GMT

Mark,

Not sure if this is what you are after but...

.jimu-widget-layerList .div-select.hidden{
  display: none;
}‍‍‍

      var layerGroupClass = '';
      if(layerInfo.getSubLayers().length > 0){
        domClass.add(ckSelectDiv, 'hidden');
        layerGroupClass = 'layer-is-group ';
      }‍‍‍‍‍

Re: Hide checkbox for group layer in layer list widget

MarkCooper5 — Mon, 08 Oct 2018 12:52:18 GMT

Thanks Robert - you are a legend - that is exactly what I wanted to do. This will make things so much easier for citizens as they don't need to switch group layers as well as sublayers on.

The only thing I really need to do now is change the background colour of the group rows to make them stand out - I think its to do with the .jimu-widget-layerList .layer-row element in the css and I assume I can do something with layer-is-group, just not quite sure what! Don't suppose you know off hand what to do?

Thanks again for your continued support

Re: Hide checkbox for group layer in layer list widget

RobertScheitlin__GISP — Mon, 08 Oct 2018 12:59:42 GMT

Mark,

You are applying the layer-is-group class to the label element. You have to move up the parent element chain a few levels to get the tr (table row) to apply a new class to that and change the background-color. Don’t have any specifics as I am not in front of a computer right now. Don’t forget to mark your original question as answered.

Re: Hide checkbox for group layer in layer list widget

MarkCooper5 — Mon, 08 Oct 2018 14:31:30 GMT

Ok, thanks Robert - I have had a look and found the following

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

I think I may need to put the count of sublayers code around here, but just dont have the skills to know where!!

Re: Hide checkbox for group layer in layer list widget

RobertScheitlin__GISP — Mon, 08 Oct 2018 14:58:06 GMT

Mark,

It would be the same as your code you have for the is-group-layer and if true then you just add a class to the domConstruct.create