Layer Toggle Button Widget Version 2.14 - 01/13/2020

[#1]

This is just a simple widget to toggle a configured layer(s) on and off using a button. The layer(s) can be a whole map service layer or a specific sublayer(s) in a map service. This widget will sync with the LayerList widget. You can add multiple instances of this widget to onscreen place holders or in a widget controller like the Header controller in the Foldable theme.

Live Preview Site

List of the latest enhancements and changes:

1. Fixed issue with group layers in 2.12 WAB.

List of Previous changes:

1. Fixed issue with basemap being toggled when exclusive mode is used in 2.12 WAB.
2. Full support for using this widget in the Launchpad themes Anchorbar controller is now supported.
3. There is now an exclusive mode for the layer toggle. Meaning that all other layers will be toggled off if the layer is exclusive. Caution should be used when choosing this mode.
4. There is now a zoom to layers extent option for the layer(s) toggles.
5. There is now a event that can be listened for when a layer is toggled on. The event name is 'toggleChanged'.
6. Widget now indicates the toggle state of the layer using the background color of the button.
7. You can follow the directions in the downloads readMe.txt to set the initial state of the button to be toggled on.
8. Now the widget support toggling multiple layers.

[LiangJiang1]

Caleb, in your app, do three layer toggle buttons work independently or interactively to each other? I mean when you click the toggle button to turn on one group layer, for example water group, do the other two group layers, the electrical group layer and gas group layer, turn off automatically responsively if they are turned on before? 

[RobertScheitlin__GISP]

Liang,

  I have tried to develop for that scenario bu was never able to accomplish that with this widget, so no they do not interact with each other they are independent toggle buttons.

[LiangJiang1]

Robert, 

Thank you for the instant reply. Will that function be included in future version?  What is the road block in developing that capability, just curious? By the way, I am so grateful that you develop and share so many wonderful widgets. Our team uses your widgets a lot, eSearch, Popup, Layer Toggle Button, to name a few. 

[RobertScheitlin__GISP]

Liang,

   No it will not be in a future release unless I figure out how to do it some day in the future. The issue is that each Layer Toggle Button is a separate widget and would have to communicate to the one or more other toggle widgets to tell them to turn off and determine the visible state of the layer or layers that each controls and what it should be changing it to. It is actually a lot more complicated than it sounds.

[deleted-user-Sh7q9fbKLpEv]

Hi Robert Scheitlin, GISP‌,

I'm using multiple instances of this widget to toggle building floor layers on and off in a web app. I'm wondering how I would go about changing the toggle layer button color when the button has been clicked so that the user knows it's active. I've been trying to implement css state classes in both the widget's style.css and the jimu-theme.css but must be missing something as it's not changing the color when activated. Do you have any recommendations for how to go about this?

Thanks in advance for your reply.

Jacqueline

[RobertScheitlin__GISP]

Jacqueline,

   I have worked on and off on that for a while now and have figured out how to make it change BG color once clicked on but not how to know if the layer is visible from the widget startup in order to set the toggle BG color state at startup.

[deleted-user-Sh7q9fbKLpEv]

Hi Robert,

Thanks for your quick reply. Would you mind providing me the code you use to change the color onClick? This might be sufficient for my app's needs, as each instance of the widget toggles a unique subset of layers; all I really want the user to know is whether the button is enabled or not. Or are you saying that once it's been clicked, you're not able to change it back to the previous color because of not being able to set the BG color state at startup?

Thanks again,

Jacqueline

[RobertScheitlin__GISP]

Jacqueline,

Here is my latest that will set the button background to selected when the layer is toggled on:

///////////////////////////////////////////////////////////////////////////
// Copyright © 2017 Robert Scheitlin. All Rights Reserved.
///////////////////////////////////////////////////////////////////////////

define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/array',
  'jimu/BaseWidget',
  'jimu/LayerInfos/LayerInfos',
  'jimu/WidgetManager',
  'dojo/query',
  'dojo/dom-class',
  'dojo/dom'
],
function(
    declare,
    lang,
    array,
    BaseWidget,
    LayerInfos,
    WidgetManager,
    query,
    domClass,
    dom
  ) {
    var clazz = declare([BaseWidget], {
      name: 'LayerToggleButton',
      baseClass: 'widget-layertogglebutton',
      isToggling: false,
      operLayerInfos: null,
      toggleLayerIds: null,
      parentContainer: null,

      startup: function() {
        this.inherited(arguments);
        this.operLayerInfos = LayerInfos.getInstanceSync();
        this.setToggleLayer();
        var toggleBtnArr = query("div[data-widget-name='LayerToggleButton']");
        toggleBtnArr.forEach(lang.hitch(this, function(node){
          if(domClass.contains(node, "jimu-state-selected")){
            this.parentContainer = node;
          }
        }));
      },

      setToggleLayer: function() {
        this.toggleLayerIds = [];
        Object.getOwnPropertyNames(this.config.layerOptions).forEach(lang.hitch(this, function(val) {
          if(this.config.layerOptions[val].display){
            this.toggleLayerIds.push(val);
          }
        }));
      },

      onOpen: function() {
        this.setToggleLayer();
        var lObjs = [];
        array.map(this.toggleLayerIds, lang.hitch(this, function(id){
          lObjs.push(this.operLayerInfos.getLayerInfoById(id));
        }));
        if (!this.isToggling) {
          this.isToggling = true;
          array.map(lObjs, lang.hitch(this, function(lObj){
            this.toggleLayer(lObj);
          }));
          setTimeout(lang.hitch(this, function() {
            this.isToggling = false;
            WidgetManager.getInstance().closeWidget(this);
            if(lObjs[0]._visible){
              domClass.add(this.parentContainer, "jimu-state-selected");
            }else{
              domClass.remove(this.parentContainer, "jimu-state-selected");
            }
          }), 300);
        }
      },

      toggleLayer: function(lObj) {
        //settingid
        lObj.setTopLayerVisible(!lObj._visible);
      }
    });
return clazz;
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[deleted-user-Sh7q9fbKLpEv]

This was just what I was looking for - thank you so much!

[AldoMilan1]

Robert, 'perfect is the enemy of good'.

Another great piece of code. It works!

Thank you so much,

Best Aldo

[SamPociask]

Hi Robert,

What needs to be edited to allow this widget to function in a 3D web app? Where would the change to using this.sceneView be made?

Thank you

[RobertScheitlin__GISP]

Sam,

   Sorry I have never even considered 3D apps so I don't know the answer to that.

[James_001]

Hi Robert,

I hope you are fine! Thanks for the time on Dev Summit. Is it possible to add the one-way toggle only? I want to clear all my data on web map with a toggle button in Web AppBuilder Dev 2.7.

[RobertScheitlin__GISP]

Irfan,

   I will look at this for a possible enhancement in the next release.

[James_001]

Thank you, Robert! 

[Anonymous User]

Hey rscheitlin‌!

I notice that this widget calls to the dynamic Map Service -- does this widget support the rendering of cached tiles? We have a transparent label cache that users like to 'toggle on' when viewing imagery. 

Thanks for all you do!

[RobertScheitlin__GISP]

Andrew,

  As long as it is not the basemap then it does not matter what layer type it is in this widget.

[Anonymous User]

So the expected behavior is that when I put a cached MapService as the input into this widget that it will call the cache as opposed to the dynamic features?

[RobertScheitlin__GISP]

Andrew,

  Honestly this widget is super simple and just turn an existing layer on or off. It make no changes to the layer type or calls. So if you layer is cached when it is added to the map this widget does not care or attempt to alter that in any way.

[James_001]

Hi Robert,

I am trying to add Layer toggle widget in WAB DEV 2.7 in Jewelry box theme, it is working fine on screen widgets but as soon i put in Panel(Foldable)Widgets it don't work at all and through this error in chrome dev tool.I also tested with new apps with different theme it is not working in Panel Widgets at all. 

widget [widgets/LayerToggleButton/Widget] created.
WidgetManager.js?wab_dv=2.7:545 fail to open widget LayerToggleButton. TypeError: Cannot read property 'setAttribute' of null
    at Object.b.set [as setAttr] (https://jsdev.arcgis.com/3.23/init.js:161:49)
    at Object.toggleLayer (http://MyComputer:3344/webappbuilder/apps/24/widgets/LayerToggleButton/Widget.js?wab_dv=2.7:90:14)
    at Object.<anonymous> (http://MyComputer:3344/webappbuilder/apps/24/widgets/LayerToggleButton/Widget.js?wab_dv=2.7:74:18)
    at https://jsdev.arcgis.com/3.23/init.js:63:337
    at Object.map (https://jsdev.arcgis.com/3.23/init.js:71:238)
    at Object.onOpen (http://MyComputer:3344/webappbuilder/apps/24/widgets/LayerToggleButton/Widget.js?wab_dv=2.7:73:17)
    at Object.openWidget (http://MyComputer:3344/webappbuilder/apps/24/jimu.js/WidgetManager.js?wab_dv=2.7:543:18)
    at Object._postWidgetStartup (http://MyComputer:3344/webappbuilder/apps/24/jimu.js/WidgetManager.js?wab_dv=2.7:1104:12)
    at Object.<anonymous> (https://jsdev.arcgis.com/3.23/init.js:63:15)
    at Object.c [as startup] (https://jsdev.arcgis.com/3.23/init.js:119:235)‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks,

Irfan

[RobertScheitlin__GISP]

Irfan,

  the widget was developed to be used in any other position then an onscreen widget or part of a header controller.

[James_001]

Robert,

I am sorry i did not get it right. I am assuming it should work anywhere like onscreen place holders or in widget Header Controller in any theme. Do I need to replace OnScreenWidgetIcon.js and other files to make it work in jewelry box theme or I am missing something?

Thanks

[RobertScheitlin__GISP]

Correct it will work in any onscreen widget placeholder or in the header. No there is nothing you have to change in the code to make it work.

[James_001]

Sir I am really sorry, still not working in header of WAB 2.7 Dev Ed. I did try on other themes,new app, and replaced with new downloaded version. But somehow it is not working in header. Any suggestion or idea? I really appreciate your help!

Thanks 

[RobertScheitlin__GISP]

Irfan,

  You can see in the live preview site in this thread that I have it working in the header controller widget. What theme are you using?

[James_001]

Robert,

Yes I can see in live preview and it was working fine before. I am using Jewelry Box theme but I tested with other themes as well. Right now it is working fine by replacing the version to 2.6 of layer toggle widget. I don't know why. I tried with brand new 2.7 sdk by importing the  command line, this was the fail error

E:\WebAppBuilderForArcGIS\server>node_x64 upgrade G:\WebAppBuilderForArcGIS 24
[2018-04-26T10:37:50.040] [INFO] upgrade - Builder folder: G:\WebAppBuilderForArcGIS
[2018-04-26T10:37:50.044] [INFO] upgrade - App id: 24
[2018-04-26T10:37:50.090] [ERROR] app - { message: 'Fail to import. Some widgets used in the app are newer version. App name:[MyApp], widget: LayerToggleButton,2.6.0.1' }‍‍‍‍

By replacing the the layer toggle widget 2.6.0.1 in both stempapp and app itself and added the layer toggle widget 2.6. It start working fine in header.

Thanks,

Irfan

[RobertScheitlin__GISP]

Strange. Now that you have the app working you should try to replace the widget with the 2.6.0.1 version.

[AndyWells]

Richard,

This widget looks great. I am using WAB 2.8. Similar to another commenter above, I can get it to work perfectly in the widget placeholder (under the search bar), in the Foldable theme. But it will not work in the header controller. I can place the widget there, and configure which layers I want on/off, but clicking the widget icon in the header controller only shows it changing color to show that it is selected or deselected. None of the layers on the map turn on or off. Again, the widget placed in the placeholder works perfectly on the same map. Again, this is in the Foldable theme, on WAB 2.8. Any insight would be appreciated. I'm fairly new at working with custom widgets, but I've checked all the things I know of to check.

Thanks again for your good work,

Andy

[RobertScheitlin__GISP]

Andy,

   Strange I just tested on my end and I had no trouble adding a layer toggle in the header controller widget in the foldable theme in 2.8 and it work fine. Do you get any errors in your browsers web console?

[AndyWells]

I set up a simple map just for testing, that has had no other customizations: ArcGIS Web Application 

This is the error I get when I click on the layer toggle in the header controller. There is no error when I click on the layer toggle in the placeholder.

WidgetManager.js?wab_dv=2.8:536 fail to startup widget LayerToggleButton. TypeError: Cannot read property 'widget' of null
at Object.<anonymous> (http://wab-test-toggle-layer.s3-website-us-east-1.amazonaws.com/widgets/LayerToggleButton/Widget.js?...)
at https://js.arcgis.com/3.24/init.js:63:337
at forEach (https://js.arcgis.com/3.24/init.js:71:19)
at u.forEach (https://js.arcgis.com/3.24/init.js:222:365)
at Object.startup (http://wab-test-toggle-layer.s3-website-us-east-1.amazonaws.com/widgets/LayerToggleButton/Widget.js?...)
at Object.advice (https://js.arcgis.com/3.24/init.js:119:313)
at Object.c [as startup] (https://js.arcgis.com/3.24/init.js:119:103)
at Object.openWidget (http://wab-test-toggle-layer.s3-website-us-east-1.amazonaws.com/jimu.js/WidgetManager.js?wab_dv=2.8:...)
at Object.getWidgetMarginBox (http://wab-test-toggle-layer.s3-website-us-east-1.amazonaws.com/jimu.js/WidgetManager.js?wab_dv=2.8:...)
at Object.getOffPanelWidgetPosition (http://wab-test-toggle-layer.s3-website-us-east-1.amazonaws.com/jimu.js/OnScreenWidgetIcon.js?wab_dv...)

It's not a huge issue at the moment, but it would be nice to have the ability to use the widget in either place. Again, thanks for all you do.

[RobertScheitlin__GISP]

Andy,

  OK, I now see that I have made a code fix for this issue but I did not release it because I was trying to finish another feature before the release.

If you can replace the Widget.js startup function with this one. you should be good to go:

      startup: function() {
        this.inherited(arguments);
        this.layerStructure  = LayerStructure.getInstance();
        this.setToggleLayer();
        var toggleBtnArr = query("div[data-widget-name='LayerToggleButton']");
        toggleBtnArr.forEach(lang.hitch(this, function(node){
          var parentWid = html.getAttr(node, 'widgetId');
          var chkTitle;
          if(!parentWid){
            var parentSid = html.getAttr(node, 'settingId');
            if(parentSid === this.id){
              this.parentContainer = node;
              chkTitle = html.getAttr(node, 'title');
              this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,'');
            }
          }else{
            var widg = registry.byId(parentWid);
            if(widg && widg.widget && widg.widget.config === this.config){
              this.parentContainer = node;
              chkTitle = html.getAttr(node, 'title');
              this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,'');
            }
          }
        }));
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AndyWells]

While I appreciate the quick response, I'm sorry to say that now neither of the tools are working.

http://wab-test-toggle-layer.s3-website-us-east-1.amazonaws.com/

Here is my widget.js:

///////////////////////////////////////////////////////////////////////////
// Copyright © 2017 Robert Scheitlin. All Rights Reserved.
///////////////////////////////////////////////////////////////////////////

define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/array',
  'jimu/BaseWidget',
  'jimu/LayerInfos/LayerInfos',
  'jimu/WidgetManager',
  'dojo/query',
  'dojo/dom-class',
  'dojo/dom',
  'dijit/registry',
  'dojo/_base/html'
],
function(
    declare,
    lang,
    array,
    BaseWidget,
    LayerInfos,
    WidgetManager,
    query,
    domClass,
    dom,
    registry,
    html
  ) {
    var clazz = declare([BaseWidget], {
      name: 'LayerToggleButton',
      baseClass: 'widget-layertogglebutton',
      isToggling: false,
      operLayerInfos: null,
      toggleLayerIds: null,
      parentContainer: null,
      originalTitle: null,

      startup: function() {
        this.inherited(arguments);
        this.layerStructure  = LayerStructure.getInstance();
        this.setToggleLayer();
        var toggleBtnArr = query("div[data-widget-name='LayerToggleButton']");
        toggleBtnArr.forEach(lang.hitch(this, function(node){
          var parentWid = html.getAttr(node, 'widgetId');
          var chkTitle;
          if(!parentWid){
            var parentSid = html.getAttr(node, 'settingId');
            if(parentSid === this.id){
              this.parentContainer = node;
              chkTitle = html.getAttr(node, 'title');
              this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,'');
            }
          }else{
            var widg = registry.byId(parentWid);
            if(widg && widg.widget && widg.widget.config === this.config){
              this.parentContainer = node;
              chkTitle = html.getAttr(node, 'title');
              this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,'');
            }
          }
        }));
      },       
  
  
       /*
      startup: function() {
        this.inherited(arguments);
        this.operLayerInfos = LayerInfos.getInstanceSync();
        this.setToggleLayer();
        var toggleBtnArr = query("div[data-widget-name='LayerToggleButton']");
        toggleBtnArr.forEach(lang.hitch(this, function(node){
          var parentWid = html.getAttr(node, 'widgetId');
          var widg = registry.byId(parentWid);
          if(widg.widget && widg.widget.config === this.config){
            this.parentContainer = node;
            var chkTitle = html.getAttr(node, 'title');
            this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,'');
          }
        }));
      },
*/
      setToggleLayer: function() {
        this.toggleLayerIds = [];
        Object.getOwnPropertyNames(this.config.layerOptions).forEach(lang.hitch(this, function(val) {
          if(this.config.layerOptions[val].display){
            this.toggleLayerIds.push(val);
          }
        }));
      },

      onOpen: function() {
        this.setToggleLayer();
        var lObjs = [];
        array.map(this.toggleLayerIds, lang.hitch(this, function(id){
          lObjs.push(this.operLayerInfos.getLayerInfoById(id));
        }));
        if (!this.isToggling) {
          this.isToggling = true;
          array.map(lObjs, lang.hitch(this, function(lObj){
            this.toggleLayer(lObj);
          }));
          setTimeout(lang.hitch(this, function() {
            this.isToggling = false;
            WidgetManager.getInstance().closeWidget(this);
            if(lObjs[0]._visible){
              domClass.add(this.parentContainer, "jimu-state-selected");
            }else{
              domClass.remove(this.parentContainer, "jimu-state-selected");
            }
          }), 300);
        }
      },

      toggleLayer: function(lObj) {
        var onOff = (lObj._visible) ? 'On' : 'Off';
        html.setAttr(this.parentContainer, 'title', this.originalTitle + ': ' + onOff);
        lObj.setTopLayerVisible(!lObj._visible);
      }
    });
return clazz;
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Andy,

   OK. Well i forgot that I switched to a newer WAB class in that function so you also need to update more code. Actually here is the whole update:

///////////////////////////////////////////////////////////////////////////
// Copyright © 2018 Robert Scheitlin. All Rights Reserved.
///////////////////////////////////////////////////////////////////////////

define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/array',
  'jimu/BaseWidget',
  'jimu/LayerStructure',
  'jimu/WidgetManager',
  'dojo/query',
  'dojo/dom-class',
  'dojo/dom',
  'dijit/registry',
  'dojo/_base/html'
],
function(
    declare,
    lang,
    array,
    BaseWidget,
    LayerStructure,
    WidgetManager,
    query,
    domClass,
    dom,
    registry,
    html
  ) {
    var clazz = declare([BaseWidget], {
      name: 'LayerToggleButton',
      baseClass: 'widget-layertogglebutton',
      isToggling: false,
      layerStructure: null,
      toggleLayerIds: null,
      parentContainer: null,
      originalTitle: null,
      isExclusive: false,

      startup: function() {
        this.inherited(arguments);
        this.layerStructure  = LayerStructure.getInstance();
        this.setToggleLayer();
        var toggleBtnArr = query("div[data-widget-name='LayerToggleButton']");
        toggleBtnArr.forEach(lang.hitch(this, function(node){
          var parentWid = html.getAttr(node, 'widgetId');
          var chkTitle;
          if(!parentWid){
            var parentSid = html.getAttr(node, 'settingId');
            if(parentSid === this.id){
              this.parentContainer = node;
              chkTitle = html.getAttr(node, 'title');
              this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,'');
            }
          }else{
            var widg = registry.byId(parentWid);
            if(widg && widg.widget && widg.widget.config === this.config){
              this.parentContainer = node;
              chkTitle = html.getAttr(node, 'title');
              this.originalTitle = chkTitle.replace(/(\: Off)|(\: On)/,'');
            }
          }
        }));
      },

      setToggleLayer: function() {
        this.toggleLayerIds = [];
        Object.getOwnPropertyNames(this.config.layerOptions).forEach(lang.hitch(this, function(val) {
          if(!this.config.hasOwnProperty("isExclusive")){
            this.isExclusive = false;
          }else{
            if(this.config.isExclusive){
              this.isExclusive = true;
            }
          }
          if(this.config.layerOptions[val].display){
            this.toggleLayerIds.push(val);
          }
        }));
      },

      onOpen: function() {
        this.setToggleLayer();
        var lObjs = [];
        array.map(this.toggleLayerIds, lang.hitch(this, function(id){
          lObjs.push(this.layerStructure.getNodeById(id));
        }));
        if (!this.isToggling) {
          this.isToggling = true;
          this.toggleLayer(lObjs);
          setTimeout(lang.hitch(this, function() {
            this.isToggling = false;
            WidgetManager.getInstance().closeWidget(this);
            if(lObjs[0].isToggledOn()){
              domClass.add(this.parentContainer, "jimu-state-selected");
            }else{
              domClass.remove(this.parentContainer, "jimu-state-selected");
            }
          }), 300);
        }
      },

      toggleLayer: function(lObjs) {
        if(!lObjs[0].isToggledOn() && this.isExclusive){
          this.layerStructure.traversal(lang.hitch(this, function(layerNode) {
            layerNode.hide();
          }));
        }
        var onOff;
        array.map(lObjs, lang.hitch(this, function(lObj){
          onOff = (lObj.isToggledOn()) ? 'On' : 'Off';
          if(this.parentContainer && this.originalTitle){
            html.setAttr(this.parentContainer, 'title', this.originalTitle + ': ' + onOff);
          }
          lObj.toggle();
          if(!lObj.isVisible() && lObj.isToggledOn()){
            lObj.show();
          }
        }));
      }
    });
return clazz;
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AndyWells]

Robert,

Thank you. That last code revision worked perfectly.

[TimConfare]

Robert,

Love this widget.  I have it working perfectly on my 2.8 apps.  One question about a future enhancement.  When you toggle a layer it also turns the layer on or off in the Layer List widget, however if you turn it off or on in the Layer List widget it doesn't activate or deactivate the toggle button.  Are you planning on adding that enhancement in the future?

Thank you!

[RobertScheitlin__GISP]

Tim,

   This will probably not get added. The reason is the widget does not even run any code unless it is clicked once. So I can't listen for changes to layer visibility unless the user has initially toggled the layer once.

[GiacomoFavaron]

Robert, would it be possible to create a version of the toggle button that also pops up and shows the list of layers similarly to the layer list widget?

[RobertScheitlin__GISP]

I have no plans for that. This widget is suppose to be a simple toggle on/off button and nothing more.

[AndrewSchwartz]

Hi Robert,

This is a super handy widget! I'm using it for an infrastructure assets map to toggle groups of layers for Sanitary Sewer, Storm Sewer, and Traffic. Each group of layers has its own toggle. However. I'd also like to give users the option to turn individual layers on and off in the standard layer list widget.

Problem is - if a group of layers is toggled on, but then the user turns off one of the layers in that group - when they toggle the group off, that layer turns back on! I understand why this is happening, but I wonder if there is a way to modify the code so that if the toggle is in the off setting that it checks the layers to see if they are off or not before switching, and vice versa?

[RobertScheitlin__GISP]

Susan,

  Hmm.. Not sure about that. I will look at it.

[JoeyNeedham]

I know this thread is a bit old but I am new to arcGIS and all of this. Simply using the  free trial for right now to test it out for someone. I can't seem to figure out how to get this widget attached to my map. Could anyone here help me with that?

[RobertScheitlin__GISP]

Joey,

   You add this widget just like you do any other custom widget.

Custom widget and theme deployment—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Develo... 

[JoeyNeedham]

Hey again, 

      Wanna say great widget so far but I've hit a snag. On the left side of the screen where you can add layers into the toggle buttons my "Layer List" isn't there anymore. I can't seem figure out how to get it back so I can add more layers to toggle

[RobertScheitlin__GISP]

Joey,

   ??? I don't get what you are saying. Try adding a screenshot of what you are talking about.

[JoeyNeedham]

Sorry, previously the Layer List was on the left there so I could add layers to the toggle buttons. Now it's gone and I can't figure out how to add layers anymore

[RobertScheitlin__GISP]

Joey,

   You add or remove layer from the layer toggle widget by opening thew widgets setting dialog. Hover over the widgets icon (the bottom left images in your screenshot) and a pencil will appear, click on that pencil to open the widgets settings dialog.

[JasonDrost1]

The comments at the top of the page state the following:

1. You can follow the directions in the downloads readMe.txt to set the initial state of the button to be toggled on.

Unfortunately, I do not see any readMe.txt in the download and I would like to implement this functionality into my application.  Could someone place me in the right direction as to how I can set the initial state of the button to be toggled on?

Thanks,

Jason

[RobertScheitlin__GISP]

Jason,

   Sorry about the missing files. I have updated the download to include the missing files and instructions.

[JasonDrost1]

Robert,

That did the trick.  Appreciate your quick response and the effort you put into all your widgets.

Jason

[KatieYoder1]

Hi Robert, 

Love this widget, it is exactly what I was looking for!

I was wondering if anyone has had trouble using the toggle layer button widget with map services? When I add a Map Service to my web map, it is brought in as a nested  layer.

When configuring the Toggle widget in web app builder this is not an issue as I can select multiple layers to turn on.

However, I am noticing that in my application I have to click on the Toggle widget twice to get the layer to draw. The first time I click, nothing happens, the second time I click is when the layer draws. This behavior happens only the first time I try to toggle a layer on and off in an app session. After the initial double click, the layer toggles on and off just fine with a single click. This is not isolated to a particular theme, I've seen it with any theme I try.

Is this expected behavior?

Thank you so much!