Display Radio Buttons at Mosaic Dataset Level in LayerList Widget?

Gianna_BBSRC

Hello, 

I'd like some checkboxes to act as radio buttons (ie with mutually exclusive viewing functionality) in the LayerList Widget at the mosaic dataset level and nowhere else.

I've managed to hide the checkboxes for group layers and make children sublayers mutually exclusive (where I've also posted this question).

The problem I'm facing is that I'm dealing with mosaic raster time-series data displayed different scenarios which are mutually exclusive (ie I don't want them displayed at the same time on top of each other). Additionally, within each mosaic dataset are three folders (boundary, footprint and image) which I'd like to hid from the end user. So I've managed to achieve this in WAB developer (with checkboxes shown acting as radio buttons):

But the only checkboxes I'd like to display should be at the mosaic dataset level (layer 2 and 3 in example) with boundary, footprint and image layers all ON but hidden AND I'd like those checkboxes to act like radio buttons with mutually exclusive viewing functionality, as below.

Any advice on how to achieve this will be much appreciated.

Many thanks,

Gianna

Gianna_BBSRC

So I've solved my own problems thanks to past posts by Robert Scheitlin, GISP and Mehretab T.Sium.

Here's the solution to the mutual exclusivity problem (input in the LayerListView.js at _onCkSelectNodeClick):

_onCkSelectNodeClick<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">,</SPAN> ckSelect<SPAN class="punctuation token">,</SPAN> evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>ckSelect<SPAN class="punctuation token">.</SPAN>checked<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">'LayerID1'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerListWidget<SPAN class="punctuation token">.</SPAN>operLayerInfos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayerInfoById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'LayerID2'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerListWidget<SPAN class="punctuation token">.</SPAN>operLayerInfos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayerInfoById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'LayerID3'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">'LayerID2'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerListWidget<SPAN class="punctuation token">.</SPAN>operLayerInfos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayerInfoById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'LayerID1'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerListWidget<SPAN class="punctuation token">.</SPAN>operLayerInfos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayerInfoById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'LayerID3'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN>id <SPAN class="operator token">===</SPAN> <SPAN class="string token">'LayerID3'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerListWidget<SPAN class="punctuation token">.</SPAN>operLayerInfos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayerInfoById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'LayerID1'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>layerListWidget<SPAN class="punctuation token">.</SPAN>operLayerInfos<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayerInfoById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'LayerID2'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
    layerInfo<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTopLayerVisible</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN>
  evt<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I repeated this code with a total 24 layers, creating a loong clunky string of combinations but it does what I want it to do, particularly between groups, so Thank You Mehretab from this post.

To remove certain checkboxes, I found the checkbox ID using Inspect Element in Chrome and inserted a bit of CSS into the style.css code. For example:

<SPAN class="selector token">#jimu_dijit_CheckBox_1</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>