Web AppBuilder 1.2 Search/Geocoder widget color/style question

AdamGebhart

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?

RobertScheitlin__GISP

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