topic Re: customize Search widget result symbol in ArcGIS Web AppBuilder Questions

customize Search widget result symbol

Anonymous User — Mon, 13 May 2019 19:55:54 GMT

The Search widget creates a little grey circle marker when you click a result in the results list. It's a little grey dot so it's very hard to see. I'd like to make it a larger red dot symbol. I looked and couldn't see where it was being created in the widget.js - anyone else know or have customized this? I even searched the entire App by search in files for (77,77,77) after inspecting the DOM node for the circle symbol and couldn't see where this was coming from. I could probably override with CSS but that would be messy and I always try to do that as a last resort to avoid ramifications for other unintended elements.

Re: customize Search widget result symbol

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:11:11 GMT

In the widget.js find the _convertConfig function and make this change (lines 22 - 27):

_convertConfig: function(config) {
        var sourceDefs = array.map(config.sources, lang.hitch(this, function(source) {
          var def = new Deferred();
          if (source && source.url && source.type === 'locator') {
            var _source = {
              locator: new Locator(source.url || ""),
              outFields: ["*"],
              singleLineFieldName: source.singleLineFieldName || "",
              name: jimuUtils.stripHTML(source.name || ""),
              placeholder: jimuUtils.stripHTML(source.placeholder || ""),
              countryCode: source.countryCode || "",
              maxSuggestions: source.maxSuggestions,
              maxResults: source.maxResults || 6,
              zoomScale: source.zoomScale || 50000,
              useMapExtent: !!source.searchInCurrentMapExtent,
              enableInfoWindow: esriLang.isDefined(this.config.showInfoWindowOnSelect) ?
                !!this.config.showInfoWindowOnSelect : true,
              showInfoWindowOnSelect: esriLang.isDefined(this.config.showInfoWindowOnSelect) ?
                !!this.config.showInfoWindowOnSelect : true,
              _zoomScaleOfConfigSource: source.zoomScale,
              _panToScale: source.panToScale,
              highlightSymbol: new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
                20,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                     new Color([0, 255, 255, 0.0]),
                                     2),
                new Color([0, 0, 0, 1]))
            };
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: customize Search widget result symbol

Anonymous User — Tue, 14 May 2019 17:58:05 GMT

Robert Scheitlin, GISP that works perfectly. example app You sir are a scholar and a gentleman.

Re: customize Search widget result symbol

AfafAbbas1 — Thu, 28 Jan 2021 09:11:07 GMT

Hi Kevin, I'm having the same issue. I made a copy of the search widget in the WebApp Builder dev edition v2.18, applied the changes suggested by Robert Scheitlin, GISP but it didn't work for me. the modified/custom widget didn't appear within the widgets list in WAB edit page. My experience in JS is new and very limited. Do I need to do changes somewhere else in the widget to be able see it in the widgets list?

Re: customize Search widget result symbol

scorrymaps — Wed, 02 Aug 2023 16:35:04 GMT

Like @AfafAbbas1 I am having issues with the latest version of WebApp Builder to make changes to the symbol that is produced from the search widget. I don't have Dev edition, but am trying to make the edits in ArcGIS Assistant Beta (20211101.2). There is no "_convertConfig" only a "config" and I am unable to modify the symbol. Does anybody know if this is possible to do in ArcGIS Assistant? I am also new to JS and have limited experience making simple edits to web apps through ArcGIS Assistant.