customize Search widget result symbol

[Anonymous User]

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.

<circle fill="rgb(77, 77, 77)" fill-opacity="1" stroke="rgb(255, 255, 255)" stroke-opacity="0.25" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" cx="960" cy="485" r="4" transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)" fill-rule="evenodd" stroke-dasharray="none" dojoGfxStrokeStyle="solid"></circle>

[RobertScheitlin__GISP · Accepted solution]

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]))
            };
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Anonymous User]

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

[AfafAbbas1]

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?  

[scorrymaps]

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.