Having an issue with javascript Search Widget

deleted-user-T42XKeMY9oXS · ‎07-29-2015

I am having an issue with the search widget. I have a web page that mixes the Editor widget and Search Widget. The symptom is that upon searching my feature layer, the map does zoom to the feature I was searching, but the infoWindow does not pop up upon clicking it. I can use the editor toolbar to add that (search result feature) to select it; but I want it to be preselected. I DO NOT WANT to use the search infowindow but the editor infowindow. I had thought this would be a very common requirement (so search a feature prior to editing it).

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Edit Irrigation Data</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css" />
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            overflow: hidden;
        }
        #map {
            padding: 0;
        }
        #header {
            font-size: 1.1em;
            font-family: sans-serif;
            padding-left: 1em;
            padding-top: 4px;
            color: #660000;
        }
        .templatePicker {
            border: none;
        }
        .dj_ie .infowindow .window .top .right .user .content {
            position: relative;
        }
        .dj_ie .simpleInfoWindow .content {
            position: relative;
        }
        /*
        .dijitButton .dijitButtonNode, #drawingWrapper, #printButton {
            width: 160px;
        }*/
        .esriPrint {
            padding: 0;
        }
        /*
        label {
            display: inline-block;
            padding: 5px 5px 0 5px;
            font-weight: 400;
            font-size: 12pt;
        }*/
    </style>
    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
        var map;
        var app = {};
        app.map = null; app.toolbar = null; app.tool = null; app.symbols = null; app.printer = null;
        require([
          "esri/map", "esri/toolbars/draw", "esri/dijit/Print",
          "esri/tasks/GeometryService",
          "esri/toolbars/edit",
          "esri/layers/ArcGISTiledMapServiceLayer",
          "esri/layers/FeatureLayer",
          "esri/layers/LayerDrawingOptions",
          "esri/Color",
          "esri/geometry/Extent",
          "esri/SpatialReference",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol", "esri/graphic",
          "esri/symbols/SimpleFillSymbol",
          "esri/dijit/editing/Editor",
          "esri/dijit/editing/TemplatePicker",
          "esri/dijit/LayerList",
          "esri/dijit/Search",
          "esri/tasks/query",
          "esri/InfoTemplate",
          "esri/config",
          "dojo/i18n!esri/nls/jsapi",
          "dojo/_base/array", "dojo/parser", "dojo/keys",
          "dojo/query", "dojo/dom", "dojo/dom-construct",
          "dijit/form/CheckBox", "dijit/form/Button",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
          "dojo/domReady!"
        ], function (
          Map, Draw, Print, GeometryService, Edit,
          ArcGISTiledMapServiceLayer, FeatureLayer,LayerDrawingOptions,
          Color, Extent, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, SimpleFillSymbol,
          Editor, TemplatePicker,LayerList, Search, Query, InfoTemplate,
          esriConfig, jsapiBundle,
          arrayUtils, parser, keys,
          query, dom, domConstruct,
          CheckBox, Button
        ) {
            parser.parse();
            // snapping is enabled for this sample - change the tooltip to reflect this
            jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
            // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
            //esriConfig.defaults.io.proxyUrl = "/proxy/";
            esriConfig.defaults.io.corsEnabledServers.push("static.arcgis.com");
            esriConfig.defaults.io.corsEnabledServers.push("services.arcgisonline.com");
            esriConfig.defaults.io.corsEnabledServers.push("gisweb");
            esriConfig.defaults.geometryService = new GeometryService("http://gisweb/arcgis/rest/services/Utilities/Geometry/GeometryServer");
            app.map = new Map("map", {
                basemap: "streets",
                center: [-120.84, 37.49],
                zoom: 14,
                slider: false
            });
            app.map.on("load", function () {
                app.toolbar = new Draw(app.map);
                app.toolbar.on("draw-end", addToMap);
            });
            app.printer = new Print({
                map: app.map,
                url: "http://gisweb/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
            }, dom.byId("printButton"));
            app.printer.startup();

            app.symbols = {};
            app.symbols.point = new SimpleMarkerSymbol("square", 10, new SimpleLineSymbol(), new Color([0, 255, 0, 0.75]));
            app.symbols.polyline = new SimpleLineSymbol("solid", new Color([255, 128, 0]), 2);
            app.symbols.polygon = new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.25]));
            app.symbols.circle = new SimpleFillSymbol().setColor(new Color([0, 0, 180, 0.25]));
            query(".drawing").forEach(function (btn) {
                var button = new Button({
                    label: btn.innerHTML,
                    onClick: function () {
                        activateTool(this.id);
                    }
                }, btn);
            });
            function activateTool(type) {
                app.tool = type.replace("freehand", "");
                app.toolbar.activate(type);
                app.map.hideZoomSlider();
            }
            function addToMap(evt) {
                app.toolbar.deactivate();
                app.map.showZoomSlider();
                var graphic = new Graphic(evt.geometry, app.symbols[app.tool]);
                app.map.graphics.add(graphic);
            }
            app.map.on("layers-add-result", initEditor);
            /*
            var irrFieldsMSL = new ArcGISDynamicMapServiceLayer("http://gisweb1/arcgis/rest/services/Water/Irrigation_Mobile_one/MapServer");
            irrFieldsMSL.setDisableClientCaching(true);
            app.map.addLayer(irrFieldsMSL);
            */
            var pumps = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/0", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });
            pumps.name = "Pumps";
            var sideGate = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/1", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });
            var irrData = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/2", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });
            var canals = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/5", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });
            var idPipeLine = new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/4", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ['*']
            });
            app.map.addLayers([pumps, sideGate, irrData,canals, idPipeLine]);
            var layerList = new LayerList({
                map: app.map,
                layers: [{ layer: pumps }, { layer: sideGate }, { layer: irrData }, { layer: canals }, { layer: idPipeLine }]
            },"layerList");
            layerList.startup();
            function initEditor(evt) {
                var templateLayers = arrayUtils.map(evt.layers, function (result) {
                    return result.layer;
                });
                var templatePicker = new TemplatePicker({
                    featureLayers: templateLayers,
                    grouping: true,
                    rows: "auto",
                    columns: 3
                }, "templateDiv");
                templatePicker.startup();
                var layers = arrayUtils.map(evt.layers, function (result) {
                    return { featureLayer: result.layer };
                });
                var settings = {
                    map: app.map,
                    templatePicker: templatePicker,
                    layerInfos: layers,
                    toolbarVisible: true,
                    createOptions: {
                        polylineDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYLINE],
                        polygonDrawTools: [Editor.CREATE_TOOL_FREEHAND_POLYGON,
                          Editor.CREATE_TOOL_CIRCLE,
                          Editor.CREATE_TOOL_TRIANGLE,
                          Editor.CREATE_TOOL_RECTANGLE
                        ]
                    },
                    toolbarOptions: {
                        reshapeVisible: true
                    }
                };
                var params = { settings: settings };
                var myEditor = new Editor(params, 'editorDiv');
                //define snapping options
                var symbol = new SimpleMarkerSymbol(
                  SimpleMarkerSymbol.STYLE_CROSS,
                  15,
                  new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([255, 0, 0, 0.5]),
                    5
                  ),
                  null
                );
                app.map.enableSnapping({
                    snapPointSymbol: symbol,
                    tolerance: 20,
                    snapKey: keys.ALT
                });
                myEditor.startup();
                var s = new Search({
                    enableButtonMode: false, //this enables the search widget to display as a single button
                    enableLabel: false,
                    enableInfoWindow: false,
                    showInfoWindowOnSelect: false,
                    map: app.map
                }, "search");
/*
                s.on("search-results", function (result) {
                    console.log(result);
                    console.log(result.results[1][1]);
                    s.select(result.results[1][1]);
                    
                    var selectQuery = new Query();
                    pumps.clearSelection();
                    var geom = result.results[1][1].feature.geometry;
                    console.log(geom);
                    var ex = new Extent(geom.x - 20, geom.y - 20, geom.x + 20, geom.y + 20, new SpatialReference(3857));
                    selectQuery.geometry = ex;
                    selectQuery.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
                    pumps.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) {
                        console.log(features);
                    });
                });
                s.on("select-result", function (result) {
                    console.log(result);
                });
                */
                var sources = s.get("sources");
                sources.push({
                    featureLayer: new FeatureLayer("http://gisweb/arcgis/rest/services/Water/Irrigation_Mobile_one/FeatureServer/0"),
                    searchFields: ["TIDNUMB"],
                    displayField: "CAT_2",
                    exactMatch: false,
                    outFields: ["CAT_2", "OBJECTID", "NUMB", "TYPE", "TIDNUMB", "Meter", "PUMP_NAME", "GPM", "EC", "Lateral"],
                    name: "Pumps",
                    placeholder: "3708",
                    maxResults: 6,
                    maxSuggestions: 6,
                    enableSuggestions: true,
                    minCharacters: 0
                });
                s.set("sources", sources);
                s.startup();
            }
        });
    </script>
</head>
<body class="claro">
    <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;">
        <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
            Edit Irrigation Features
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 350px;overflow:hidden;">
            <div id="search"></div>
            <hr />
            <div style="height:300px; overflow-y:scroll">
                <div id="templateDiv"></div>
            </div>
            <div id="editorDiv"></div>
            <hr/>
            <div id="printButton"></div>
            <hr />
            <div id="drawingWrapper">
                Add some graphics:
                <div id="point" class="drawing">Point</div>
                <div id="freehandpolyline" class="drawing">Freehand Polyline</div>
                <div id="freehandpolygon" class="drawing">Freehand Polygon</div>
                <div id="circle" class="drawing">Circle</div>
            </div>
            <hr />
            <div id="layerToggle">
                Toggle Layers: <br />
                <div id="layerList"></div>
            </div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>
</body>
</html>

deleted-user-T42XKeMY9oXS · ‎08-06-2015

/*

s.on("search-results", function (result) {
console.log(result);
console.log(result.results[1][1]);
s.select(result.results[1][1]);
var selectQuery = new Query();
pumps.clearSelection();
var geom = result.results[1][1].feature.geometry;
console.log(geom);
var ex = new Extent(geom.x - 20, geom.y - 20, geom.x + 20, geom.y + 20, new SpatialReference(3857));
selectQuery.geometry = ex;
selectQuery.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
pumps.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) {
console.log(features);
});
});
s.on("select-result", function (result) {
console.log(result);
});
*/

I had the right idea with this code. I needed to just clear results of the search widgets and then do a selectFeatures call on the feature layer. It is working now.

View solution in original post

deleted-user-T42XKeMY9oXS · ‎07-29-2015

In fact, I need to hook up the search widget result to Editor Selections so that the editor attribute inspector may access it.

deleted-user-T42XKeMY9oXS · ‎08-06-2015

/*

s.on("search-results", function (result) {
console.log(result);
console.log(result.results[1][1]);
s.select(result.results[1][1]);
var selectQuery = new Query();
pumps.clearSelection();
var geom = result.results[1][1].feature.geometry;
console.log(geom);
var ex = new Extent(geom.x - 20, geom.y - 20, geom.x + 20, geom.y + 20, new SpatialReference(3857));
selectQuery.geometry = ex;
selectQuery.spatialRelationship = Query.SPATIAL_REL_CONTAINS;
pumps.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function (features) {
console.log(features);
});
});
s.on("select-result", function (result) {
console.log(result);
});
*/

I had the right idea with this code. I needed to just clear results of the search widgets and then do a selectFeatures call on the feature layer. It is working now.

RickeyFight · ‎12-04-2015

Ashish,

Can you post the code that you got to work?

AdamCommeford · ‎01-16-2017

Any examples of how you got this to work?

Would like to use this solution, thanks