topic Re: Change width of graphic returned from Search widget in ArcGIS Web AppBuilder Questions

Change width of graphic returned from Search widget

JakeSkinner — Fri, 05 Aug 2016 13:20:07 GMT

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!

Re: Change width of graphic returned from Search widget

RobertScheitlin__GISP — Fri, 05 Aug 2016 13:30:23 GMT

Jake,

width of the graphic

I am not sure I understand.

Re: Change width of graphic returned from Search widget

JakeSkinner — Fri, 05 Aug 2016 13:39:07 GMT

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?

Re: Change width of graphic returned from Search widget

RobertScheitlin__GISP — Sat, 11 Dec 2021 13:03:46 GMT

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;
      },

Re: Change width of graphic returned from Search widget

JakeSkinner — Fri, 05 Aug 2016 16:06:41 GMT

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!

Re: Change width of graphic returned from Search widget

GeorgePorto — Thu, 11 Aug 2016 19:34:45 GMT

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?

Re: Change width of graphic returned from Search widget

RobertScheitlin__GISP — Thu, 11 Aug 2016 20:00:43 GMT

George,

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