Select to view content in your preferred language

Web AppBuilder 1.2 Search/Geocoder widget color/style question

7779
29
Jump to solution
09-21-2015 02:24 PM
AdamGebhart
Occasional Contributor III

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:

Search_fill2.png

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?

Tags (2)
0 Kudos
29 Replies
RobertScheitlin__GISP
MVP Emeritus

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.

AdamGebhart
Occasional Contributor III

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"}

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

CraigPrisland2
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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"}
    },
CraigPrisland2
New Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

CraigPrisland2
New Contributor III

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,

0 Kudos
CraigPrisland2
New Contributor III

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

0 Kudos
BenjaminHarloe
New Contributor II

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. 

0 Kudos