How to add a Simple Line Symbol Graphic to Search Widget?

[MartinOwens1]

I'm trying to add a simple line symbol graphic when the Search widget finds and zooms to a polygon. I understand if Pop Ups are enabled through the webmap a Cyan symbol is added, but I don't want the popup or that cyan color. If someone can point me in the right direction in the js code that would be great. 

[RobertScheitlin__GISP]

Martin,

  There are a few threads in this depending on what WAB version you are talking about:

WAB2.6 Search Widget JS Highlight Symbol: Changes from 2.5 

Older WABs

https://community.esri.com/thread/165739 

[MartinOwens1]

Thanks Robert I'm running the 2.5 version of WAB so it looks like I should be looking at the older version of the code. Do you have to have pupups enabled on that layer to see the change because I've added all of the lines and it doesn't appear to change anything.

[RobertScheitlin__GISP · Accepted solution]

Martin,

  Yes actually that code requires the popup to be enabled too. Here is a alternate solution for WAB 2.5 that does not require the popup.

Add these changes to the Search widget.js

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) {
...
      _onSelectResult: function(e) {
        var result = e.result;
        if (!(result && result.name)) {
          return;
        }
        var dataSourceIndex = e.sourceIndex;
        var sourceResults = this.searchResults[dataSourceIndex];
        var dataIndex = 0;
        var that = this;

        var getGraphics = function(layer, fid) {
          var graphics = layer.graphics;
          var gs = array.filter(graphics, function(g) {
            return g.attributes[layer.objectIdField] === fid;
          });
          return gs;
        };
        var showPopupByFeatures = function(features) {
          var location = null;
          that.map.infoWindow.setFeatures(features);
          if (features[0].geometry.type === "point") {
            location = features[0].geometry;
          } else {
            location = features[0].geometry.getExtent().getCenter();
          }
          that.map.infoWindow.show(location, {
            closetFirst: true
          });
        };

        for (var i = 0, len = sourceResults.length; i < len; i++) {
          if (jimuUtils.isEqual(sourceResults[i], result)) {
            dataIndex = i;
            break;
          }
        }
        query('li', this.searchResultsNode)
          .forEach(lang.hitch(this, function(li) {
            html.removeClass(li, 'result-item-selected');
            var title = html.getAttr(li, 'title');
            var dIdx = html.getAttr(li, 'data-index');
            var dsIndex = html.getAttr(li, 'data-source-index');

            if (title === result.name &&
              dIdx === dataIndex.toString() &&
              dsIndex === dataSourceIndex.toString()) {
              html.addClass(li, 'result-item-selected');
            }
          }));

        var layer = this.map.getLayer(e.source._featureLayerId);

        if (layer && this.config.showInfoWindowOnSelect) {
          var gs = getGraphics(layer, e.result.feature.__attributes[layer.objectIdField]);
          if (gs.length > 0) {
            showPopupByFeatures(gs);
          } else {
            var handle = on(layer, 'update-end', lang.hitch(this, function() {
              if (this.domNode) {
                var gs = getGraphics(layer, e.result.feature.__attributes[layer.objectIdField]);
                if (gs.length > 0) {
                  showPopupByFeatures(gs);
                }
              }

              if (handle && handle.remove) {
                handle.remove();
              }
            }));
            this.own(handle);
          }
        }
        if(e.result.feature){
          var gra = e.result.feature;
          var symbol = jsonUtils.fromJson({"color":[255,0,0,0],"outline":{"color":[255,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"})
          gra.setSymbol(symbol);
          this.map.graphics.add(gra);
        }
        // publish select result to other widgets
        this.publishData({
          'selectResult': e
        });
      },
...
      _onClearSearch: function() {
        html.setStyle(this.searchResultsNode, 'display', 'none');
        this.searchResultsNode.innerHTML = "";
        this.searchResults = null;
        this.map.graphics.clear();
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MartinOwens1]

Thanks Robert. That did it!