Unable to Disable InfoTemplate When Editing

JakeSkinner · ‎06-13-2013

I have an application where I would like to be able to set an infoTemplate for a feature service, and be able to edit the same feature service. I created two buttons, 'Start Editing' and 'Stop Editing'. When the application loads, editing is initialized but I have the editor template hidden. The infoTemplate is also set. The 'Start Editing' button sets the infoTemplate to NULL and shows the editor template. The 'Stop Editing' button hides the editor template, and sets the infoTemplate for the feature service.

Once the application loads, I can click 'Start Editing' and begin adding/updating/deleting features. Once I click 'Stop Editing', the infoTemplate shows when clicking a feature. However, if I click 'Start Editing' again, I can no longer update or delete a feature. The infoTemplate displays rather than the AttributeInspector. The same occurs when trying to add a new feature.

Is it possible to use an infoTemplate and edit a feature service? Below is the code I am using with the Javascript API 3.4:

var editorWidget;  function startEditing(){     map.infoWindow.hide();     disableFeatureLayerPopups();         dijit.byId("editorDiv").domNode.style.display = 'block'; }  function stopEditing(){         dijit.byId("editorDiv").domNode.style.display = 'none';     enableFeatureLayerPopups(); }  function disableFeatureLayerPopups() {     map.infoWindow.hide();     if (map.getLayer("pointData")) {         map.getLayer("pointData").setInfoTemplate(null);     } }  function enableFeatureLayerPopups() {     map.infoWindow.resize(200,125);     if (map.getLayer("pointData")) {         map.getLayer("pointData").setInfoTemplate(infoTemplate1);     }   }      function initEditing(results) {         var featureLayerInfos = dojo.map(results, function(result) {           return {             "featureLayer": result.layer           };         });          var settings = {           map: map,           layerInfos: featureLayerInfos         };         var params = {           settings: settings         };                  editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');                  var options = {snapKey:dojo.keys.copyKey};         map.enableSnapping(options);                  editorWidget.startup(); }

KellyHutchins · ‎06-17-2013

Jake

Here's an example that shows one approach. Note that we are creating/destroying the editor instead of hiding it:

 <!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--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 rivers and waterbodies</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />     <style>       html,body{height:100%;width:100%;margin:0;overflow:hidden;}       #map{         padding:0;       }       #header{         font-size:14pt;         padding-left:20px;         padding-top:4px;         color:#660000;       }        .dj_ie .infowindow .window .top .right .user .content { position: relative; }       .dj_ie .simpleInfoWindow .content {position: relative;}     </style>          <script>var dojoConfig = { parseOnLoad:true };</script>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>     <script>       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.dijit.editing.Editor-all");         var map, waterbodies, infoTemplate, editorWidget;               function init() {                 //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to           //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic          //for details on setting up a proxy page.         esri.config.defaults.io.proxyUrl = "../proxy/proxy.php";              //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.          esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");                  map = new esri.Map("map", {            basemap: "satellite",           center: [-96.541, 38.351],           zoom: 14,           slider: false          });          infoTemplate = new esri.InfoTemplate("Water Features", "${fcode}")          waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,            infoTemplate: infoTemplate,           outFields: ['*']         });          map.addLayers([waterbodies]);       }        function initEditor() {         if(editorWidget){           return;         }         var layers = [{featureLayer: waterbodies}]         var settings = {           map: map,           layerInfos:layers         };          var params = {settings: settings};             editorWidget = new esri.dijit.editing.Editor(params,'editorDiv');             editorWidget.startup();         //disable popups          waterbodies.setInfoTemplate(null);       }       function startEditing(){         initEditor();       }       function stopEditing(){         if(editorWidget){           editorWidget.destroy();           editorWidget = null;           //enable the popups            waterbodies.setInfoTemplate(infoTemplate);         }       }         dojo.ready(init);     </script>   </head>   <body class="claro">     <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">         <input type="button" id="startEd" value= "start" onclick="startEditing();"/>         <input type="button" id="stopEd" value="stop" onclick = "stopEditing();" />                       <div id="editorDiv"></div>       </div>       <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"></div>     </div>   </body> </html>

View solution in original post

KellyHutchins · ‎06-17-2013

Jake

Here's an example that shows one approach. Note that we are creating/destroying the editor instead of hiding it:

 <!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--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 rivers and waterbodies</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" />     <style>       html,body{height:100%;width:100%;margin:0;overflow:hidden;}       #map{         padding:0;       }       #header{         font-size:14pt;         padding-left:20px;         padding-top:4px;         color:#660000;       }        .dj_ie .infowindow .window .top .right .user .content { position: relative; }       .dj_ie .simpleInfoWindow .content {position: relative;}     </style>          <script>var dojoConfig = { parseOnLoad:true };</script>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>     <script>       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.dijit.editing.Editor-all");         var map, waterbodies, infoTemplate, editorWidget;               function init() {                 //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to           //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic          //for details on setting up a proxy page.         esri.config.defaults.io.proxyUrl = "../proxy/proxy.php";              //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.          esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");                  map = new esri.Map("map", {            basemap: "satellite",           center: [-96.541, 38.351],           zoom: 14,           slider: false          });          infoTemplate = new esri.InfoTemplate("Water Features", "${fcode}")          waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{           mode: esri.layers.FeatureLayer.MODE_ONDEMAND,            infoTemplate: infoTemplate,           outFields: ['*']         });          map.addLayers([waterbodies]);       }        function initEditor() {         if(editorWidget){           return;         }         var layers = [{featureLayer: waterbodies}]         var settings = {           map: map,           layerInfos:layers         };          var params = {settings: settings};             editorWidget = new esri.dijit.editing.Editor(params,'editorDiv');             editorWidget.startup();         //disable popups          waterbodies.setInfoTemplate(null);       }       function startEditing(){         initEditor();       }       function stopEditing(){         if(editorWidget){           editorWidget.destroy();           editorWidget = null;           //enable the popups            waterbodies.setInfoTemplate(infoTemplate);         }       }         dojo.ready(init);     </script>   </head>   <body class="claro">     <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">       <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">         <input type="button" id="startEd" value= "start" onclick="startEditing();"/>         <input type="button" id="stopEd" value="stop" onclick = "stopEditing();" />                       <div id="editorDiv"></div>       </div>       <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"></div>     </div>   </body> </html>

JakeSkinner · ‎06-18-2013

Thanks, Kelly! I previously tried creating/destroying the editor:

function startEditing(){
    disableFeatureLayerPopups();
    dojo.connect(map, "onLayersAddResult", initEditing);
    map.addLayers([featureLayer]);
}

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

        var settings = {map: map, layerInfos: layers};
        var params = {settings: settings};
        
        editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');
        
        editorWidget.startup();
}

This worked with the 3.3 API, but not with 3.4/3.5. I also ran into issues with the infoTemplate. Your example did the trick though. One thing to note is I found out from another thread that the container div the editorWidget resides in is deleted after the widget is destroyed. After stopping an edit session, I was unable to start another. Adding the following line to the stopEditing function resolved this:

dojo.create("div", {id: "editorDiv"}, "leftPane");

Thanks for the help!