topic Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question in ArcGIS Web AppBuilder Questions

Web AppBuilder 1.2 Search/Geocoder widget color/style question

AdamGebhart — Mon, 21 Sep 2015 21:24:06 GMT

Can anybody tell me how to either a) change the color of; or b) change the opacity of the highlight/fill color for the selected result in the Search/Geocoder widget? I don't mean how the results appear in the Search widget results list, rather how the feature appears in the map when I select it from the results list and the map zooms to the feature. In case it matters my searches are all for polygons.

I can open the Inspector Window in Firefox and see:

But I don't see where I can change these settings. Are they inherited from the ArcGIS API for Javascript? If so, can I override the color or opacity?

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:49:29 GMT

Adam,

As there is no configuration option for this you will have to add this in code.

Here are the steps:

1. Open [install dir]\server\apps\[app#]\widgets\Search\widget.js

2. Change the requires to look like this (important lines are 16 and 24):

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/when',
    'dojo/on',
    'dojo/query',
    'dojo/keys',
    'jimu/BaseWidget',
    'jimu/LayerInfos/LayerInfos',
    'jimu/utils',
    'esri/dijit/Search',
    'esri/tasks/locator',
    'esri/layers/FeatureLayer',
    'esri/symbols/jsonUtils',
    'esri/InfoTemplate',
    'esri/lang',
    './utils',
    'dojo/i18n!esri/nls/jsapi',
    'dojo/NodeList-dom'
  ],
  function(declare, lang, array, html, when, on, query, keys,
    BaseWidget, LayerInfos, jimuUtils, Search, Locator,
    FeatureLayer, jsonUtils, InfoTemplate, esriLang, utils, esriBundle) {

3. Find the _convertConfig function and add line 28 (don't forget to add the comma to line 27):

_convertConfig: function(config) {
        var searchSouces = array.map(config.sources, lang.hitch(this, function(source) {
          if (source && source.url && source.type === 'locator') {
            return {
              locator: new Locator(source.url || ""),
              outFields: ["*"],
              singleLineFieldName: source.singleLineFieldName || "",
              name: source.name || "",
              placeholder: source.placeholder || "",
              countryCode: source.countryCode || "",
              maxResults: source.maxResults || 6
            };
          } else if (source && source.url && source.type === 'query') {
            var flayer = new FeatureLayer(source.url || null, {
              outFields: ["*"]
            });
            var template = this._getInfoTemplate(flayer, source, source.displayField);
            return {
              featureLayer: flayer,
              outFields: ["*"],
              searchFields: source.searchFields.length > 0 ? source.searchFields : ["*"],
              displayField: source.displayField || "",
              exactMatch: !!source.exactMatch,
              name: source.name || "",
              placeholder: source.placeholder || "",
              maxResults: source.maxResults || 6,
              infoTemplate: template,
              highlightSymbol: jsonUtils.fromJson(source.highlightSymbol)
            };
          } else {
            return {};
          }
        }));

        return searchSouces;
      },

4. Open the config_Search.json file for your app [install dir]\server\apps\[app#]\configs\Search\config_Search.json and find your layer that you want to change the symbol for.

5. Add the highlightSymbol property and the symbol json string. Example: (line 13 thru 15) again don't forget the comma on line 12.

{
      "layerId": null,
      "url": "your layer url",
      "name": "Owner Parcels",
      "placeholder": "Calhoun Parcels",
      "searchFields": [
        "PPIN"
      ],
      "displayField": "NAME",
      "exactMatch": false,
      "maxResults": 6,
      "type": "query",
      "highlightSymbol":{"color":[0,166,81,128],"outline":{"color":[0,166,81,255],
        "width":1,"type":"esriSLS","style":"esriSLSSolid"},
        "type":"esriSFS","style":"esriSFSSolid"}
    }

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

AdamGebhart — Tue, 22 Sep 2015 15:16:24 GMT

Thanks, Robert. This gets me what I need. I definitely appreciate the help as I would not have been able to figure that out on my own.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

DanNorman — Tue, 19 Apr 2016 22:34:06 GMT

Hi Robert, I receive an error in my console when setting this up:

TypeError: a is undefined

Off the top of your head do you have any thoughts as to why this would happen? I am using WABDE 1.2 and have made no coding customization to the search widget other than this.

The stack trace points to the lines (at least for my numbering):

68: when(utils.getConfigInfo(this.config)).then(lang.hitch(this, function(config) {

73: var searchSouces = this._convertConfig(config);

191: var searchSouces = array.map(config.sources, lang.hitch(this, function(source) {

217: highlightSymbol: jsonUtils.fromJson(source.highlightSymbol)

Thanks

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

RobertScheitlin__GISP — Tue, 19 Apr 2016 22:43:31 GMT

Dan,

It sounds like you have made a mistake (syntax error) in your config_Search.json

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

DanNorman — Tue, 19 Apr 2016 23:00:20 GMT

Hi Robert, I was spending all my time in the widget.js file but you are right the problem was in the config_Search.json file. I wondered if i needed to have the highlight symbol parameter in each layer source so i temporarily removed all other layer sources except for the one I modified and now it works. I will add the parameter to the others now as well.

Thanks for pointing me to the right place!

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

AdamGebhart — Fri, 22 Apr 2016 16:06:35 GMT

Robert,

I'm updating to WAB 2.0 right now and it looks like Search\widget.js was modified. Referring to step 3 in your directions, would that new piece of code (highlightSymbol: jsonUtils.fromJson(source.highlightSymbol)) go after infoTemplate: template, which is on Line 288? My question assumes steps 1 and 2 are the same. Thanks.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

RobertScheitlin__GISP — Fri, 22 Apr 2016 16:20:20 GMT

Adam,

Actually it does not matter where in the convertedSource object you put the parameter as long as you use proper syntax and have a comma behind every parameter except for the last parameter in the object.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

AdamGebhart — Fri, 22 Apr 2016 16:36:52 GMT

Thank you.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

AdamGebhart — Fri, 01 Jul 2016 16:46:03 GMT

Robert Scheitlin, GISP

Another question for you on this matter. I want to change the symbology of the outline to be red and solid border instead of the default blue/turquoise highlight. Referring to the code you helped me implement, is that possible? I've tried different combos of RGB and CMYK (not sure if those are CMYK but just guessing based on four numbers - or is that rgb with the fourth position for transparency?) but can't change the outline color. I can get the fill to be no fill like I want but just can't seem to modify the outline color.

Can I simply modify these numbers to get the desired result? Or do I have to go through some or all of the changes you provided in the "Change the highlight symbol for a selection" thread?

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

RobertScheitlin__GISP — Tue, 05 Jul 2016 13:42:51 GMT

Adam,

The color constructor has this definition:

R,G,B,A. The "A" value represents transparency where 0.0 is fully transparent and 1.0 has no transparency:new Color([255,0,0,0.25])

You should be able to modify the symbol json and it work just fine.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

AdamGebhart — Thu, 07 Jul 2016 12:46:12 GMT

Robert,

Thanks for the clarification. I have modified the RGBA to be that below, but I'm still getting the hollow/transparent fill (good) and a solid, turquoise border (not what I want). Do I need to flip around some values?

"highlightSymbol":{"color":[0,0,0,0],"outline":{"color":[255,0,0,0.25],

"width":1,"type":"esriSLS","style":"esriSLSSolid"},

"type":"esriSFS","style":"esriSFSSolid"}

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:49:32 GMT

Adam,

Here is the json I used to achieve what you are wanting:

"highlightSymbol":{"color":[0,166,81,128],"outline":{"color":[255,0,0,255],

"width":2,"type":"esriSLS","style":"esriSLSSolid"},

"type":"esriSFS","style":"esriSFSNull"}

And here is the 2.0.1 version of the code (add requires important lines 19 and 27):

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/when',
    'dojo/on',
    'dojo/aspect',
    'dojo/query',
    'dojo/keys',
    'dojo/Deferred',
    'dojo/promise/all',
    'jimu/BaseWidget',
    'jimu/LayerInfos/LayerInfos',
    'jimu/utils',
    'esri/dijit/Search',
    'esri/tasks/locator',
    'esri/layers/FeatureLayer',
    'esri/symbols/jsonUtils',
    'esri/InfoTemplate',
    'esri/lang',
    './utils',
    'dojo/NodeList-dom'
  ],
  function(declare, lang, array, html, when, on, aspect, query, keys, Deferred, all,
    BaseWidget, LayerInfos, jimuUtils, Search, Locator,
    FeatureLayer, jsonUtils, InfoTemplate, esriLang, utils) {

Updated _convertConfig function (line 55 and don't forget the comma on 54):

      _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,
                highlightSymbol: jsonUtils.fromJson(source.highlightSymbol)
              };
              if (!template) {
                delete convertedSource.infoTemplate;
              }
              def.resolve(convertedSource);
            })));

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

        return sourceDefs;
      },

FYI all this code is for FeatureLayers that have been added to the search widget.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

CraigPrisland2 — Fri, 03 Feb 2017 20:52:56 GMT

Hi Robert,

Would you happen to have the 2.1 version of this code? I tried using the 2.0.1 version of the code that you provided above but it does not appear to work. My project opens but the search functionality is not available.

Thanks in advance,

Craig

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

RobertScheitlin__GISP — Sun, 12 Dec 2021 06:49:35 GMT

Craig,

Here is the 2.3 version of the code:

1. Open [install dir]\server\apps\[app#]\widgets\Search\widget.js

2. Change the requires to look like this (important lines are 22 and 27):

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/when',
    'dojo/on',
    'dojo/aspect',
    'dojo/query',
    'dojo/keys',
    'dojo/Deferred',
    'dojo/promise/all',
    'jimu/BaseWidget',
    'jimu/LayerInfos/LayerInfos',
    'jimu/utils',
    'esri/dijit/Search',
    'esri/tasks/locator',
    'esri/layers/FeatureLayer',
    'esri/InfoTemplate',
    'esri/lang',
    './utils',
    'esri/symbols/jsonUtils',
    'dojo/NodeList-dom'
  ],
  function(declare, lang, array, html, when, on, aspect, query, keys, Deferred, all,
    BaseWidget, LayerInfos, jimuUtils, Search, Locator,
    FeatureLayer, InfoTemplate, esriLang, utils, jsonUtils) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

3. Find the _convertConfig function and add line 60 (don't forget to add the comma to line 59):

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

            if (source.enableLocalSearch) {
              _source.localSearchOptions = {
                minScale: source.localSearchMinScale,
                distance: source.localSearchDistance
              };
            }

            def.resolve(_source);
          } 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,
                highlightSymbol: jsonUtils.fromJson(source.highlightSymbol)
              };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

4. Open the config_Search.json file for your app [install dir]\server\apps\[app#]\configs\Search\config_Search.json and find your layer that you want to change the symbol for.

5. Add the highlightSymbol property and the symbol json string. Example: (line 16 thru 18) again don't forget the comma on line 15.

    {
      "layerId": "f060a57639324461a263846c284a6e61_5306_0",
      "url": "http://utility.arcgis.com/usrsvcs/rest/services/f060a57639324461a263846c284a6e61/MapServer/0",
      "name": "Geologic Unit",
      "placeholder": "Geologic Unit",
      "searchFields": [
        "lithology"
      ],
      "displayField": "unit_abbrev",
      "exactMatch": false,
      "searchInCurrentMapExtent": false,
      "zoomScale": 50000,
      "maxSuggestions": 6,
      "maxResults": 6,
      "type": "query",
      "highlightSymbol":{"color":[255,0,0,128],"outline":{"color":[0,166,81,255],  
        "width":1,"type":"esriSLS","style":"esriSLSSolid"},
        "type":"esriSFS","style":"esriSFSSolid"}
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

CraigPrisland2 — Fri, 03 Feb 2017 22:01:18 GMT

Robert,

Thanks for the code. It is greatly appreciated. However, would you know off hand why the Search widget looks like it is now hidden in my app and how I get this resolved?

Thanks again for all you do.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

RobertScheitlin__GISP — Fri, 03 Feb 2017 22:04:48 GMT

Craig,

I would check your browsers web console as it looks to me like you made a mistake pasting the code the widget is failing to load.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

CraigPrisland2 — Fri, 03 Feb 2017 22:12:23 GMT

Thanks Robert. I will take a look at that. Just to confirm, this code for version 2.3 is the same as 2.1? I am currently on version 2.1.

Thanks,

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

CraigPrisland2 — Mon, 06 Feb 2017 14:41:43 GMT

Thanks again Robert. It appeared to be a syntax error on my side. I have it now working correctly.

Re: Web AppBuilder 1.2 Search/Geocoder widget color/style question

BenjaminHarloe — Tue, 29 Aug 2017 23:40:05 GMT

Hi Robert,

I have added in this code but the search highlight is not changing at all. Do you know if there are any changes I need to make to this code for it to work in 2.4? I really just need to turn off the highlighting effect altogether.