customize Search widget result symbol

863
3
Jump to solution
05-13-2019 12:55 PM
by Anonymous User
Not applicable

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>

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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]))
            };
...
by Anonymous User
Not applicable

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

0 Kudos
AfafAbbas1
New Contributor

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?  

0 Kudos