Hide checkbox for group layer in layer list widget

[MarkCooper5]

Hi

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

[RobertScheitlin__GISP]

Mark,

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

[MarkCooper5]

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

[RobertScheitlin__GISP · Accepted solution]

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

[MarkCooper5]

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

[RobertScheitlin__GISP]

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.

[MarkCooper5]

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!!

[RobertScheitlin__GISP]

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