Web AppBuilder Layer List Widget Improvements

224
2
05-11-2021 08:42 AM
Status: Open
Labels (2)
ZorbaConlen1
Occasional Contributor III

The layer list widget in WAB is problematic. End users often struggle to figure out how to use it. My organization has a public facing map viewer with numerous layers grouped into several themes and we configure the layer list to be collapsed by default. The most common problem is that end users dont understand that they can expand the top level group and see the sub-layers to turn on. A secondary probelm is that they turn on a sub-layer while leavng the parent layer un-checked and conclude that the app is not working correctly. 

Proposed fixes:

  • Make layer list more intuitive by improving the styling. For instance, the arrow that expands the group should be much larger. Also, groups should be styled differently from layers, perhaps with a folder icon. Also, its confusing that the arrow expands groups but also displays symbology for layers. 
  • More configuration options. As it stands, one can either expand all or collapse all. It would be helpful if one could have more fine grained control over this. For instance, if the layer list widget opened with most groups collapsed, but one expanded, this would help users understand how to use the widget. 
  • Context sensitive help. There should be an option for admins to input description of how to use the widget. This could be a text (html) area toward the top, or perhaps an 'info' icon that displays the content when the user hovers or clicks (note that this would be a useful enhancement to all widgets accross the board).
  • One click to show layers. If a user toggles a sub-layer visible, all parent layers should automatically be checked visible.
  • Help users understand scale dependant visibility. The grey text is ok, but not enough. Again, there should be a hover or an icon to get more info, in this case a message explaining that the layer is not visible at the current scale. Context menu should have option 'zoom to visisble scale' for scale dependant layers.
  • Show layer description on hover (or click on info icon), rather than making users take the effort to use the context menu and open a new tab, which is not a great user experience. Also, this feature does not work if the service directory has been disabled. 
Tags (3)
2 Comments
BernieConnors1

These are all great suggestions for improving the Layers widget.

KevinMacLeodCAI

I agree with all of these. In addition, partial state checkboxes to indicate that only some items in a Group are on should be added. (with a dot instead of a checkmark, inside the checkbox).

 

The way I make it 'single click' is I turn sublayers on, and then leave the Group off. 

I also re-engineered the Layer List to add Info Boxes as you mention. You can see this on www.sagis.org/map https://github.com/kevinsagis/EnhancedLayerList Using Dojo to create little moveable info boxes. 

I advocate for API 4x to use checkboxes and not the Eye. And add badges next time layers if Filter is on, as well as something more obvious to indicate whether layers are not visible because of scale dependency. (perhaps On Hover a tooltip saying 'to view this layer, zoom in to the map')  On this last note, I have added an HTML Title tag for a tooltip to say this. But would be nice to build into the API or WAB.

All in all, I think Web App Builder is the pinnacle of GIS and probably the most front-facing popular single app by Esri, and by far the main app used by large enterprise customers. Its design is brilliant, its UI overall is quite intuitive. The layer list is one of the key things on the platform that can have further UI design, and the concepts in this thread could apply across the platform. Interestingly, ArcEarth is the one app with partial checkboxes. Ability to group map image layers, communicate scale and filter dependency to users, and turn on/off, etc, would be beneficial across all apps in the platform.