QuerySimple & HelperSimple: High-Performance Search and Spatial Query for ExB

1179
16
03-19-2026 10:15 AM
adamsimple
Regular Contributor

My team is in the middle of transitioning King County's main public-facing GIS application, iMap, to ArcGIS Experience Builder. After exploring everything Esri offered out of the box, we quickly realized it would not deliver the same user experience as Robert Scheitlin's (@RobertScheitlin__GISP) Enhanced Search widget in Web AppBuilder. With our tech lead out for three weeks, I had a window. I decided to use it.

I started with Esri's Query widget as a base, took design cues from Robert's Enhanced Search, and used Vector Coding to go from concept to what you see here. My team has tested these widgets extensively, with a handful of enhancement requests in the backlog.

QuerySimple is designed to explain itself so users can work confidently without reading documentation. Every mode, every control, and every state has a plain-language description of what it does and why something may not be available. For those familiar with the old Web AppBuilder, the advanced query and draw functions lived separately. I brought them together under one roof in the Spatial tab. While I am biased, I think the result is fairly intuitive.

I have been building this for what feels like an eternity. There are a lot of little things baked in that you will discover as you use it. Every time I said "I'd prefer this to be done this way," I made it a configurable item, because not everyone likes it my way. The features listed here are the highlights, but the details are in the demo.

Screenshot-2026-03-19-100014

Try It Live

https://exb-sample.mapsimple.org
https://exb-sample.mapsimple.org/#pin=2223059013
https://exb-sample.mapsimple.org/#major=222305

When you open the demo, look at the layer list. The magnifying glass icon is a persistent result layer controlled by the layer list, like any other operational layer. The funnel icon is a widget-managed graphics layer that appears and disappears based on the widget's state. Both are live in the demo, so you can see the difference in action.

Screenshot 2026-03-19 100323.png


HelperSimple

ExB widgets only exist in the DOM when they are open. A collapsed widget is not listening. HelperSimple solves this by running independently of widget state, continuously monitoring the URL, and opening QuerySimple and firing the appropriate query when a matching parameter is detected.

  • Always mounted and always listening
  • Maps ShortIds (e.g., pin) to technical field names (e.g., PROP_KEY_NUM)
  • Hash fragment (#) support for page-reload-free navigation
  • Auto-generated info button per layer: when a ShortId is configured, a help icon automatically appears next to the layer title, showing users the exact URL format for both hash and query string deep links

Screenshot 2026-03-19 093420.png


QuerySimple

  • Hierarchical two-dropdown UI: group 30+ queries without list fatigue
  • Typeahead and suggest: configurable per query
  • Results mode control with contextual helper text: each mode (New, Add, Remove) displays a plain-language description of its behavior so users understand the outcome before executing
  • Execute on Enter with input-driven validation
  • Dynamic zoom control with user override at runtime
  • High-volume result loading: full result set at once, no lazy-loading
  • Label point centering for irregular polygons
  • Duplicate button: clone queries with all settings preserved
  • Mobile per-breakpoint configuration overrides
  • Result layer modes: widget-managed graphics layer or persistent layer list layer
  • Selection styling: color, opacity, outline, marker style per query
  • Multi-source results support: parcels, address points, wetlands, school districts, and more can all coexist in a single result set. Open Table opens all source tables independently. Export zips each data source separately, preserving the original schema per layer.

Screenshot 2026-03-19 093631.png


Spatial Query Tab

  • Two modes with plain-language descriptions: Operations and Draw each display a description of their purpose when selected
  • Smart tab default: if no results are loaded when the Spatial tab is opened, the widget automatically defaults to Draw mode
  • Contextual disabled state messaging: when Operations mode cannot execute, a plain-language callout explains why and directs the user to the correct action
  • Operations mode: use results as source with real-time geodesic buffer preview on the map as distance changes
  • Draw mode: 7 tools, including freehand line and polygon, geometries accumulate
  • Multi-target layer selection: run a single spatial operation against multiple target layers simultaneously, and the results from all layers come back together in a single execution
  • 7 spatial relationships with context-aware warnings: when a selected relationship combined with the current geometry or buffer is likely to return zero results, an amber warning explains why before execution
  • Spatial relationship help: most relationships include a built-in visual diagram showing geometry type compatibility, plus a plain-language description
  • Spatial-only query layers: configure layers for spatial operations without exposing them in the attribute search dropdown
  • Results mode control (New/Add/Remove) available on the Spatial tab
  • Configurable draw symbol color and buffer preview color

Screenshot 2026-03-19 094233.png

Screenshot 2026-03-19 094032.png

Screenshot 2026-03-19 094331.png

Screenshot 2026-03-19 093827.png


Performance

  • 93.4% query latency reduction via Universal SQL Optimizer (21.1s to 1.4s on 2M+ record layer)
  • 93% memory reduction per query

Developer

  • Glass Box debug logging via URL: ?debug=all or specific flags
  • Independent versioning and config migration

GitHub: https://github.com/MapSimple-Org/ExB-Simple-Public
Docs: https://mapsimple.org/samples/querysimple-helpersimple-widgets/

ExB Developer Edition 1.19.0+. Open source, free to use.

16 Replies
adamsimple
Regular Contributor

Got it. I will work on that and let you take a look when I have a draft ready. With the most recent changes I made, this change should be fairly easy to implement. 

adamsimple
Regular Contributor

Update: QuerySimple & HelperSimple now run on Experience Builder 1.20 (r028.127)

@James_Kellough , this release is for you. The major update is that the results panel now has a hover highlight feature. This is configurable, meaning that you can turn this on/off, you can turn the hover pin on/off and you can change the highlight color. For now, it defaults to on and matches the hover pin color. 

A couple of additional updates:

  • Search alias for grouped queries is now renamed to Search by
  • A bug was introduced in 1.20 that allowed someone to remove the results layer from the layerlist; this has been fixed in this release

You can test this and the other new 1.20 features here:
https://exb-sample.mapsimple.org/

If you use the first QS widget, you will see the hover pin and the hover feature selection

adamsimple_0-1780630011448.png

If you use the other QS widget, the hover pin has been toggled off and you will only see the hover feature selection. 

adamsimple_1-1780630092901.png

I added a new search in both widgets, streams. White river will get you multiple features returned so you can see how the highlight feature works a little better. I didn't have any public transit lines to add to the demo.

 

Latest release and per-widget downloads: https://github.com/MapSimple-Org/ExB-Simple-Public/releases/tag/QS-r028.127-FS-r005.020

Copy query-simple, helper-simple, and shared-code into your-extensions/widgets, then rebuild.

Tested on: Experience Builder 1.20.0, ArcGIS Maps SDK for JavaScript 5.0.4, Calcite 5.0.2, React 19, Node.js 24.16.0.

James_Kellough
Occasional Contributor

@adamsimple this is fantastic! Thank you so much for the insanely fast turnaround. It exactly replicates the old ArcIMS query tool that my users are used to and wanted to see. I greatly appreciate all your work for the community. Cheers.

James_Kellough_0-1780666036872.png

 

adamsimple
Regular Contributor

Happy to help! It's great to see features being used. 😊

0 Kudos
KARIMLABIDI
Frequent Contributor

Hello @adamsimple , I'm trying to use your widget but nothing happens when I put the widget on the map but I have these messages on the console.

KARIMLABIDI_0-1780663118721.png

No errors are present when I start the both servers.Do you know what can I do ? 

Thank you

 

0 Kudos
adamsimple
Regular Contributor

Hi Karim, thanks for trying it out, and for the console output, which helps narrow it down.

Those errors are coming from Experience Builder's own layout-builder as it adds the widget, not from the widget's runtime code, which usually points to a version or install mismatch. A few things to check:

1. Experience Builder version. QuerySimple is built for ExB Developer Edition 1.20 (ArcGIS Maps SDK for JavaScript 5.0.4, React 19), and its manifest sets exbVersion to 1.20.0. On an older version (1.19 or earlier) the builder throws exactly these "_widgetLabel" / "setting" errors when you drop the widget. What ExB Developer Edition version are you running?

2. The shared-code folder. QuerySimple needs the shared-code/ folder copied into your-extensions/widgets alongside query-simple/ (and helper-simple/). If only query-simple/ was copied, it won't load. Can you confirm all three folders are present?

3. Rebuild and restart. After copying the folders, run npm run build from the client directory and restart the ExB server.

If your ExB is older than 1.20, that's almost certainly it, the current release is 1.20-only. There are older 1.19 releases on the Releases page if you need to match an earlier version.

Below if my client terminal output. Yours should look similar. I crossed out items that are specific to other widgets that you won't have. 

adamsimple_0-1780664079759.png

0 Kudos
KARIMLABIDI
Frequent Contributor

Thank you for your answer @adamsimple .I just want to try QuerySimple. 

I 'm using 1.20 EXB DE.


So, this is my folders: 

KARIMLABIDI_0-1780665676829.png

Here is the terminal output. Everything looks like ok but nothing still happens in the application and I still have the both messages I showed above.

KARIMLABIDI_1-1780665872782.png

 

0 Kudos