Change width of graphic returned from Search widget

[JakeSkinner]

Can anyone help me figure out how to change the width of the graphic returned from the Search widget in WAB (developer edition)?  Currently, working with line features.  Thanks!

[RobertScheitlin__GISP]

Jake,

width of the graphic

I am not sure I understand.

[JakeSkinner]

Thanks for the response, Robert. 

After searching for a line feature, the width of the selection is very thin:

You can see the cyan color is hard to distinguish.  Is it possible to make this graphic "thicker", and possibly change the color?

[RobertScheitlin__GISP · Accepted solution]

Jake,

OK, in the search Widget.js find the _convertConfig function and update it to (Lines 56 - 64 added):

_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') {
            def.resolve({
              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,
              localSearchOptions: {
                minScale: 300000,
                distance: 50000
              }
            });
          } else if (source && source.url && source.type === 'query') {
            var searchLayer = new FeatureLayer(source.url || null, {
              outFields: ["*"]
            });

            this.own(on(searchLayer, 'load', lang.hitch(this, function(result) {
              var flayer = result.layer;
              var template = this._getInfoTemplate(flayer, source, source.displayField);
              var fNames = null;
              if (source.searchFields && source.searchFields.length > 0) {
                fNames = source.searchFields;
              } else {
                fNames = [];
                array.forEach(flayer.fields, function(field) {
                  if (field.type !== "esriFieldTypeOID" && field.name !== flayer.objectIdField &&
                    field.type !== "esriFieldTypeGeometry") {
                    fNames.push(field.name);
                  }
                });
              }
              var convertedSource = {
                featureLayer: flayer,
                outFields: ["*"],
                searchFields: fNames,
                displayField: source.displayField || "",
                exactMatch: !!source.exactMatch,
                name: jimuUtils.stripHTML(source.name || ""),
                placeholder: jimuUtils.stripHTML(source.placeholder || ""),
                maxSuggestions: source.maxSuggestions || 6,
                maxResults: source.maxResults || 6,
                zoomScale: source.zoomScale || 50000,
                infoTemplate: template,
                useMapExtent: !!source.searchInCurrentMapExtent,
                _featureLayerId: source.layerId
              };
              if(flayer.geometryType === 'esriGeometryPolyline'){
                require(["esri/symbols/SimpleLineSymbol", "esri/Color"], function(SimpleLineSymbol, Color) {
                  convertedSource.highlightSymbol = new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([0,255,255]),
                    6
                  )
                });
              }
              if (!template) {
                delete convertedSource.infoTemplate;
              }
              if (convertedSource._featureLayerId) {
                var layerInfo = this.layerInfosObj
                  .getLayerInfoById(convertedSource._featureLayerId);
                flayer.setDefinitionExpression(layerInfo.getFilter());
              }
              def.resolve(convertedSource);
            })));

            this.own(on(searchLayer, 'error', function() {
              def.resolve(null);
            }));
          } else {
            def.resolve(null);
          }
          return def;
        }));

        return sourceDefs;
      },

[JakeSkinner]

Thanks, Robert (aka GeoNET Legend)!  This is great.  One thing I did notice is that the width is not honored if 'Show pop-up for the found feature or location' is unchecked within the Search widget.

I appreciate the help!

[GeorgePorto]

One question about this....I can get this code to work where I can have the selection color and line thickness that I want.  But is there a way to disable the pop up all together here so that when the you enter criteria into the search widget, the results are shown with the code above but no pop up at all is present?

[RobertScheitlin__GISP]

George,

  No currently the feature is only highlighted because the infoWindow does that.