Change selection color in Search Widget in Web AppBuilder

04-11-2018 05:05 PM
Status: Open
New Contributor III

Please allow us to change the selection/highlight symbology for the Search Widget in Web AppBuilder. Currently when the widget is configured to "Show pop-up for the found feature or location," the resultant color is an opaque orangey-brown, and we are unable to see underneath this color at the underlying layers. It would be groovy if you would allow us to configure the widget to either (1) change the fill transparency and color, and/or (2) remove the fill and just have the standard default cyan outline. Users are generally unaware they can clear the selection to remove the color, but when they do, they lose the selection color altogether. Having some sort of selection color when using the widget really helps users keep track of their found item when panning and zooming around.

Thank you.


I agree. It seems like an obvious setting to include in the GUI or at the very least have in the code. Its absurd that every version of WAB we have to find a new way to hack the color change into the widget.


Using light cyan as the default selection color for all the widgets is a limiting factor. At the very least there should be documentation for how to change it in WAB for Developers until they implement a fix for WAB.


I'm voting this up because yes it would be nice to be able to config the search return's selection graphic AND have the option to persist the graphic on-screen until the search result is removed from the search widget.




Agreed. The highlighted point color needs to be editable. Can you see the dot? Even circled it's hard to distinguish. 



Solution using javascript...

To modify the selection default color in a Web appbuilder application, add the style by modifying the index.html (application root)

Stroke Color : Red
Stroke Width : 7

Here is my URL exemple :,ZONE,H117

file : Index.html

<!-- This is section you can modify to customize the loading page -->
<div id="app-loading"></div>
<div id="loading-gif"></div>
<style>g#map_graphics_layer path { stroke: rgba(255, 0, 0, 0.8); stroke-width: 7; }</style>
<!-- ////////////////// END ////////////////////////////// -->