Search Custom Widget
This widget is a customized version of Esri's out-of-the-box Search widget for ArcGIS Experience Builder. It was one of the first widgets I built, and for a long time I had five separate hardcoded copies of it, each one set up for a specific set of City of Grand Junction services and behaviors. That worked for us, but it was a lot to maintain and it was not something anyone else could really pick up and use.
I recently went back and cleaned it up. All five variants are now merged into one widget, and everything that used to be hardcoded in widget.tsx, especially the service URLs, has been moved into the settings panel. You point it at your own feature layers and geocoders in the settings instead of editing the code. I wanted to make sure it was friendly for the community to set up with their own services.
It still does everything the stock Search widget does, and adds multi-source search, a few different popup behaviors, full control over the map popup, and the ability to move a whole configuration between apps with XML export and import.
https://github.com/brianmcleer/search-custom-widget
Note: This is a modified version of Esri's OOTB Search widget, shared as a derivative work under the Apache License 2.0 with attribution to Esri. See the LICENSE and NOTICE files in the repo.
Note: Built and tested on Developer Edition 1.19 and 1.20 (React 19). EB 1.18 and earlier are not supported.
Note: No separate npm install needed. The widget only uses the ArcGIS Maps SDK and Experience Builder modules that EB already provides, so the standard client install covers it.
What Can This Widget Do?
Original capabilities (from the OOTB Search widget):
- Search box with suggestions, auto-select, and a configurable result count.
- Multiple search sources, with an optional "All" source to search them together.
- Search within the current map view, use-my-location, and the usual ArcGIS Search options.
- Zoom to a result and show its popup.
Enhanced capabilities in this version (what it adds beyond the stock Search widget):
Everything below is configured from the settings panel, no code changes needed.
- Settings-driven sources. Add feature layer sources, geocoder sources, and app data source sources right in the panel. The stock widget needs its sources wired in by an app author, but here you build them in settings, and you can reorder or remove them.
- URLs out of the code. Every service URL is entered in settings instead of being hardcoded in widget.tsx, so the widget works against any organization's services out of the box.
- Per-source control. For each source you can set the service URL or data source, the search fields, the display field, suggestions on or off, exact match, a filter (where clause), the result symbol and location type, the zoom scale, and even a per-source popup.
- Map and search behavior in settings. Choose the map widget, show an "All" option to search every source at once, set a default source, set minimum characters to suggest, max results and max suggestions, auto-select the first result, limit to the current map view, show "Use current location," and set a prefix, suffix, and placeholder text.
- Popup behaviors the stock widget does not offer. Pick per instance: None (zoom only), use the layer's own popup from the web map, a generated Arcade auto-field popup that lists every field for you, or a spatial lookup popup that intersects the result with context layers and builds custom HTML.
- Full map popup display control. Dock the popup and set its position, auto-dock on small screens, show the dock button, make it collapsible, highlight the selected feature, open automatically on select, set the number of inline actions, and choose which parts of the popup are visible (close button, collapse button, feature navigation, heading, action bar, and loading spinner).
- Layer popup builder (Arcade). Set the popup title template, then either auto-generate the Arcade expression from your settings, with an excluded-fields list and a read-only preview of what gets generated, or write your own custom Arcade expression.
- Spatial lookup rules. Add one or more rules that intersect the result with a context layer and output either an inside and outside message or a field list, with URL, date, and coded-value formatting, a section heading, and a no-result message.
- URL formatting rules. Field values that match a pattern become clickable links in the popup, with a match type, pattern, base URL, and link text. These feed both the Arcade popup and the spatial lookup field lists.
- Result navigation choice. Zoom to a set scale or fit to the result's extent, zoom to the result on select, and an optional zoom animation with a duration.
- Recent searches. The widget remembers recent search terms and shows them in a dropdown when you click into an empty search box, similar to how most search bars work. It is per widget, you can set how many entries to keep, and it can be turned off.
- Appearance and placement. Set the search bar style, size, and accent color, and choose where the search box appears and its position on the map.
- XML export and import. Move a whole configuration between apps, orgs, or environments without re-keying it.
- Accessibility updates across the settings and runtime.
Feedback
If you have any questions, ideas, or feedback, please feel free to reach out and I can work to make the widget more complete as needed. Thank you, and I hope it is useful for your own Experience Builder apps.
Changelog
06/12/2026:
- Posted to GitHub.
- Cleaned up the settings panel to be much more user friendly.
- Migrated the hardcoded service URLs out of widget.tsx so they can be entered in settings.
- Merged the five original hardcoded Search variants into one settings-driven widget with XML export and import.
