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

JohnGillham — Thu, 23 Aug 2012 01:36:18 GMT

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!

Re: Use editor widget, but have default attribute inspector in div rather than infowi

KeithGerhartz1 — Wed, 02 Oct 2013 14:25:26 GMT

Have same need. Did you ever resolve this?

Re: Use editor widget, but have default attribute inspector in div rather than infowi

KellyHutchins — Sat, 11 Dec 2021 15:35:58 GMT

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>

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

KeithGerhartz1 — Thu, 31 Dec 2015 14:40:29 GMT

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.

topic Use editor widget, but have default attribute inspector in div rather than infowindow in ArcGIS JavaScript Maps SDK Questions

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

Re: Use editor widget, but have default attribute inspector in div rather than infowi

Re: Use editor widget, but have default attribute inspector in div rather than infowi

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