Custom infoTemplate conflicts with default editor widget infoTemplate

JayGregory · ‎04-26-2012

Can anyone get this code to work? I feel like it should be incredibly straightforward, but I can't seem to get an infoTemplate for feature layer play well with the default editor's infoTemplate on editable layers.
To reproduce:
Zoom out, and click on large green square icon, which should bring up an infoWindow for that USGS steam flow station. Now click on one of the dots, which should normally bring up an editor infoWindow, but instead brings up the content from the stream flow station.
If you refresh the page and click on an editable dot first, the infoWindow has the correct content, but as soon as you click on a stream flow station, the infoWindow for the editable feature layers will forever be overwritten with the steam flow station's infoWindow. I would love some help on this!
Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <title>Default Editor </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true
        };

    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        
        body
        {
            background-color: #fff;
            overflow: hidden;
            font-family: Helvetica;
        }
        
        #templatePickerPane
        {
            width: 225px;
            overflow: hidden;
        }
        
        #panelHeader
        {
            background-color: #92A661;
            border-bottom: solid 1px #92A860;
            color: #FFF;
            font-size: 18px;
            height: 24px;
            line-height: 22px;
            margin: 0;
            overflow: hidden;
            padding: 10px 10px 10px 10px;
        }
        #map
        {
            margin-right: 5px;
            padding: 0;
        }
        
        .esriEditor .templatePicker
        {
            padding-bottom: 5px;
            padding-top: 5px;
            height: 500px;
            border-radius: 0px 0px 4px 4px;
            border: solid 1px #92A661;
        }
        
        .dj_ie .infowindow .window .top .right .user .content, .dj_ie .simpleInfoWindow .content
        {
            position: relative;
        }
    </style>
    <script type="text/javascript">
        dojo.require("esri.dijit.editing.Editor-all");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("esri.SnappingManager");
  dojo.require("esri.layers.FeatureLayer");
  dojo.require("esri.dijit.Popup");


        var map, template, editorWidget;

        function init() {
   
            esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>CTRL</b> to enable snapping";
            esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint + "<br/>Press <b>CTRL</b> to enable snapping";
            esri.config.defaults.io.proxyUrl = "http://le/proxy/net/silverlight/proxy.ashx";
            esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            var extent = new esri.geometry.Extent({
                "xmin": -8576501,
                "ymin": 4705377,
                "xmax": -8574612,
                "ymax": 4706867,
                "spatialReference": {
                    "wkid": 102100
                }
            });


            map = new esri.Map("map", {
                extent: extent
            });
            
   //Try to create a new template to pass to a non-editable feature layer
   //template = new esri.dijit.Popup(null, dojo.create("div"));
   template = new esri.InfoTemplate();
   template.setTitle('<div>thang</div>');
   template.setContent('<div id="infoWindowContents"></div>');

            dojo.connect(map, "onLoad", function () {
                //resize the map when the browser resizes
                dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
            });
            dojo.connect(map, "onLayersAddResult", initEditing);
            var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
            map.addLayer(basemap);


            var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
            var operationsLineLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/1", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
            var operationsPolygonLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2", {
                mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
   
   var streamFlowURL = "http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_usdata/MapServer/0";
   var streamFlowLayer = new esri.layers.FeatureLayer(streamFlowURL,{
   mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
   outFields:["*"],
   infoTemplate: template
  });

            map.addLayers([operationsPointLayer, operationsPolygonLayer, operationsLineLayer]);
   map.addLayer(streamFlowLayer);
   var streamSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([0,255,0,1]));
      var streamRenderer = new esri.renderer.SimpleRenderer(streamSymbol);
      streamFlowLayer.renderer = streamRenderer;
   dojo.connect(streamFlowLayer, "onClick", streamPopup);


        }
function streamPopup(evt){
   
 //template.setContent('<div id="infoWindowContents"></div>');
 graphic = evt.graphic;
 attr = graphic.attributes;
 var content = "";
 content += '<b>UR</b>:' + attr.STANAME;
 //dojo.byId('infoWindowContents').innerHTML = content;
 //esri.show(dojo.byId("infoWindowContents"));
    var title = 'Stream Guage ' + attr.STAID;
    map.infoWindow.resize(300,200);
    template.setTitle(title);
    template.setContent(content);
 //dojo.byId('infoWindowContents').innerHTML = content;
 //esri.show(dojo.byId("infoWindowContents"));
 var screenPoint = evt.screenPoint;
    map.infoWindow.show(evt.graphic.geometry, map.getInfoWindowAnchor(screenPoint));
}

        function initEditing(results) {
            var featureLayerInfos = dojo.map(results, function (result) {
                return {
                    'featureLayer': result.layer
                };
            });

            var settings = {
                map: map,
                layerInfos: featureLayerInfos
            };

            var params = {
                settings: settings
            };

            var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');

            var options = { snapKey: dojo.keys.copyKey };
            map.enableSnapping(options);

            editorWidget.startup();

        }

        dojo.addOnLoad(init);

    </script>
</head>
<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
        style="width: 100%; height: 100%;">
        <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">
            <div id="panelHeader">
                Default Editor
            </div>
            <div style="padding: 10px;" id="editorDiv">
            </div>
        </div>
    </div>
</body>
</html>

SteveCole · ‎08-14-2015

Since I'm experiencing the same thing, I take it this issue from 2012 was never addressed? Sigh.

MarkBuie1 · ‎03-01-2018

Year 2018 checking in. I've run into the same issue, anybody have any luck?