Use editor widget, but have default attribute inspector in div rather than infowindow

JohnGillham · ‎08-22-2012

Is there any way to use the editor widget (as in this sample), but have it's default attribute inspector placed into a side panel div rather than the infowindow? I need to have a sliding panel that the user will pick a symbol from the templatepicker, the panel slides closed, the user then digitizes the new feature and upon completion the panel opens back up with an attribute inspector to fill in fields and save. I realize this is not how ESRI wants you to do it, but this is what my client is requesting/insisting on. Certainly there has to be a way to override the default attributeInspector for the editor widget? The editor widget does have an attributeInspector property, but how can I change that on the fly (or on init)? Any help would be great....thanks!

KeithGerhartz1 · ‎10-02-2013

Have same need. Did you ever resolve this?

KellyHutchins · ‎10-02-2013

You can create an attribute widget, specify its location and provide that info to the Editor widget. Here's an example that displays attribute content in a div with an id of attributeDiv.

 var attributeInspector = new AttributeInspector({layerInfos: layers}, "attributeDiv");

          var settings = {
            attributeInspector: attributeInspector,
            map: map,
            layerInfos: layers,
            toolbarVisible: false
          };

And here's a working version showing the attribute inspector in a side panel.


<!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://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/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;
      }
    </style>
    
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      var map;
      
      require([
        "esri/map", 
        "esri/toolbars/edit",

        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor",
        "esri/dijit/AttributeInspector",
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
        "dojo/domReady!"
      ], function(
        Map, Edit, 
        ArcGISTiledMapServiceLayer, FeatureLayer,
        SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor,AttributeInspector, TemplatePicker,
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys
      ) {
        parser.parse();       

        
        map = new Map("map", { 
          basemap: "satellite",
          center: [-96.541, 38.351],
          zoom: 14,
          slider: false 
        });

        map.on("layers-add-result", initEditor);
       
        //add boundaries and place names 
        var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
        map.addLayer(labels);

        var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['*']
        });

        var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['*']
        });

        map.addLayers([waterbodies,rivers]);

        function initEditor(evt) {


          var layers = arrayUtils.map(evt.layers, function(result) {
            return { featureLayer: result.layer };
          });
          var attributeInspector = new AttributeInspector({layerInfos: layers}, "attributeDiv");

          var settings = {
            attributeInspector: attributeInspector,
            map: map,
            layerInfos: layers,
            toolbarVisible: false
          };

          var params = {settings: settings};    
          var myEditor = new Editor(params,'editorDiv');


    
          myEditor.startup();
        }
      });
    </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" id="header" data-dojo-props="region:'top'">
        Edit Hydrography
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 350px;overflow:hidden;">
        <div id="editorDiv"></div>
        <div id="attributeDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
    </div>
  </body>
</html>

KeithGerhartz1 · ‎12-31-2015

Hi Kelly. I know this is old but had reason to revisit this for another project I am working on. I would like to suggest that this be updated and shared as a sample on the Javascript API samples web page as it is very valuable in my opinion. I am certain others would feel the same way. Would also love to see a version that uses Dojo Bootstrap to display attribute data (without using jQuery). Belated thanks.